JavaScript News

Considerations for Creating a Card Component

March 2nd, 2020

Here’s a Card component in React: const Card = props => { return( <div className=”card”> <h2>{props.title}</h2> <p>{props.content}</p> </div> ) } It might be pretty useful! If you end up using this thing hundreds of times, now you have the ability to refactor a little bit of HTML across your app very easily. You already have…

React v16.13.0

February 25th, 2020

Today we are releasing React 16.13.0. It contains bugfixes and new deprecation warnings to help prepare for a future major release. New Warnings Warnings for some updates during render A React component should not cause side effects in other components during rendering. It is supported to call setState during render, but only for the same…

Pages for Likes

February 24th, 2020

I posted about parsing an RSS feed in JavaScript the other day. I also posted about my RSS setup talking about how Feedbin is at the heart of it. Dave discovered that Feedbin can also produce an RSS feed for all your likes. Like is a feature of Feedbin, and fortunately also NetNewsWire, which syncs…

Moving from Vanilla JavaScript to a Reusable Vue Component

February 17th, 2020

I recently wrote an article explaining how you can create a countdown timer using HTML, CSS and JavaScript. Now, let’s look at how we can make that a reusable component by porting it into Vue using basic features that the framework provides. Why do this at all? Well there are few reasons, but two stand out in particular: Keeping UI in sync with the timer state: If you look…

Listen to your web pages

February 16th, 2020

A clever idea from Tom Hicks combining MutationObserver (which can “observe” changes to elements like when their attributes, text, or children change) and the Web Audio API for creating sounds. Plop this code into the console on a page where you’d like to listen to essentially any DOM change to hear it doing stuff. I…

The Hooks of React Router

February 11th, 2020

React Router 5 embraces the power of hooks and has introduced four different hooks to help with routing. You will find this article useful if you are looking for a quick primer on the new patterns of React Router. But before we look at hooks, we will start off with a new route rendering pattern….

Version 9 of Angular Now Available— Project Ivy has arrived!

February 6th, 2020

Version 9 of Angular Now Available — Project Ivy has arrived! The 9.0.0 release of Angular is here! This is a major release that spans the entire platform, including the framework, Angular Material, and the CLI. This release switches applications to the Ivy compiler and runtime by default and introduces improved ways of testing components. This is one…

The Three Types of Code

February 3rd, 2020

Every time I start a new project, I organize the code I’m looking at into three types, or categories if you like. And I think these types can be applied to any codebase, any language, any technology or open-source project. Whether I’m writing HTML or CSS or building a React component, thinking about these different…

Full Stack Panic

February 1st, 2020

A new podcast from Sean Fioritto inspired by Joel Califa’s term “Full Stack Anxiety”. … the little voice in your head says … “I should know all of this. Do I even know what I’m doing?” Why do web developers the world over feel like this? There is an episode with Joel talking about it…

Sticky Table of Contents with Scrolling Active States

January 30th, 2020

Say you have a two-column layout: a main column with content. Say it has a lot of content, with sections that requires scrolling. And let’s toss in a sidebar column that is largely empty, such that you can safely put a position: sticky; table of contents over there for all that content in the main…