Five Frontend Things Friday #14

Here are five things in the Frontend Engineering world, that I found interesting…

  1. Ten Things A Serious JavaScript Developer Should Learn - From Ben McCormick’s blog. He tackles this question posted originally on a Reddit thread. These all are great suggestions. I especially like #10. ;)

  2. 10 guidelines to improve your web accessibility - The folks at Aerolab on their development blog talk about 10 guidelines to make sure your site is accessible. I think that more developers should take a look at accessibility and ensure they’re taking it seriously. What are our websites if not everyone can read/interact with them correctly?

  3. Understanding Service Workers - From Adnan Chowdhury’s blog, a good intro to Service Workers, and how you can implement them in your Ember.js app.

  4. D3 in Depth - From Peter Cook’s site, “D3 in Depth aims to bridge the gap between introductory tutorials/books and the official documentation. It focuses on version 4 of D3.” A good overview of some of the concepts in D3.

  5. The Road to Modern JavaScript - From Rui Figueiredo’s blog, “In this blog post I tried to describe how I perceived JavaScript to evolve into what it is today.” Nice overview of how we got to ES6 Modules today.

Keep Rising,

Kevin B. Ridgway


Like this list? Want to get it in your inbox? Sign up for newsletter!

Five Frontend Things Friday #13

Here are five things in the Frontend Engineering world, that I found interesting…

  1. Build a Rotten Tomatoes Clone with GraphQL and Auth0 - Prosper Otemuyiwa, over on the Auth0 blog talks about…GraphQL! My favorite subject later. This goes into setting up a sample project and using Graph.cool, which is an easy-to-use hosted GraphQL backend service.

  2. Hoisting in JavaScript - Yash Agrawal over on the codeburst.io Medium blog describes “Hoisting” in JavaScript. This is a great explanation, and I’d argue a correct one, when mentioning the two pass interpretation of JavaScript. ;) Hoisting is not magic, there is a reason this happens.

  3. StackBlitz — Online VS Code IDE for Angular & React - Over on their Medium blog, Eric Simmons talks about StackBlitz, which is essentially Visual Studio Code in your browser for Angular and React. Very powerful features here.

  4. Everything is a plugin! Mastering webpack from the inside out - Sean Larkin - From Sean Larkin, at ng-conf, he talks about Webpack Plugins, and answers questions, and shows you how to debug Webpack. Love his style.

  5. TheLarkInn/artsy-webpack-tour - Annotations on webpack source code in a pseudo-guided fashion. - Also from Sean, which is mentioned in his talk, these annotated images of Webpack’s code are a neat way to dig into how Webpack works. A great idea on learning a code base - try to explain it with annotations.

Keep Rising,

Kevin B. Ridgway


Like this list? Want to get it in your inbox? Sign up for newsletter!

Five Frontend Things Friday #12

Here are five things in the Frontend Engineering world, that I found interesting…

  1. Improving Web Performance to Mirror Engine Speed - From Jonas Badalic over on the Algolia blog he talks about how they improved the performance of their website, using Chrome Dev Tools.

  2. Animation in Design Systems - From Sarah Drasner, over on the wonderful 24ways site. She speaks to working in Animation into your Design System, and why it’s important. Working on doing this myself.

  3. NPM SCRIPTS AS YOUR BUILD TOOL - From Elijah Manor, over on his personal site, these are the slides to his talk about Npm Scripts. Oh. My. You need to go through these slides, I don’t think you know how powerful Npm Scripts can be for your Frontend project. Doooooo it.

  4. Shoelace - “A back to the basics CSS starter kit. For when you don’t need the whole boot.” Oooo this looks nice.

  5. How do I get started with V8 development? - From Franziska Hinkelmann, Compiler Engineer at Google. Great short article for when you want to poke at what REALLY runs your JavaScript code. ;) I’m tempted to do this. #nerd #youloveit

Keep Rising,

Kevin B. Ridgway


Like this list? Want to get it in your inbox? Sign up for newsletter!

Five Frontend Things Friday #11

Here are five things in the Frontend Engineering world, that I found interesting…

  1. Intro to debugging ReactJS applications - Good rundown from Bartosz Szczeciński over on his Medium blog.

  2. Reactiflux - A Discord community chat server, that “We’re a chat community of 20,000+ React JS, React Native, Redux, Jest, Relay, and GraphQL developers. We hold Q&A’s with Facebook Engineers Facebook Logo and other developers Developers Logo in the community Community Logo. Come chat about tech related to React & JavaScript or ask for help!” It’s very good. Helpful people, if you’re working on any of these technologies.

  3. browserlist - Over on github, “Share browsers list between different front-end tools, like Autoprefixer, Stylelint and babel-env-preset. http://browserl.ist/“. If you haven’t looked into Babel, and especially babel-preset-env, you should. It’s incredible work, and it helps knowing exactly what browsers your JS app supports easy.

  4. mjml - “The only framework that makes responsive email easy.” MJML engine is written in NodeJS, leveraging ReactJS. An awesome use of JSX/React that allows you to write emails in its tags. Man I wish this existed years ago when I was doing tons of emails by hand he says in a crusty old man voice.

  5. React FAQ - Tim Arney’s site is awesome, if you’re just getting in React. “This guide aims to pull together quality content about React core concepts into a central location for quick reference.”

Mmmm, 4/5 are React links. Can you tell what I’ve been doing lately? :)

Keep Rising,

Kevin B. Ridgway


Like this list? Want to get it in your inbox? Sign up for newsletter!

Five Frontend Things Friday #10

Here are five things in the Frontend Engineering world, that I found interesting…

  1. How To GraphQL - The Fullstack Tutorial for GraphQL - From the cool folks over at GRAPHCOOL, “The free and open-source tutorial to learn all around GraphQL to go from zero to production.” Go forth and GraphQL. It is awesome.]
  2. 10 Things I Wish Someone Had Told Me When I Decided to Become Front-End Developer - From Vladyslav Burdeniuk on the codeburst.io Medium blog, a great list of advice for Front-End Developers. I especially like the first and last tips, #1 Be curious, and #2 Don’t be Ashamed of Not Knowing Something. The former being how to avoid fatigue in this fast paced world of Frontend, and the latter to avoid Imposter’s Syndrome, something that is talked about a lot in our industry. Great list.
  3. How to Learn React - From John Hannah over on the Lullabot blog, “What follows is a five-step plan for learning React. All of the steps point you to free resources whenever possible.” Very nice links for how to Learn React, good approach.
  4. Debugging JavaScript - console.loggerheads? - Christian Heilmann on his personal blog surveys developers on Twitter and asks how the debug JavaScript. Give it a read, if you’re a console.log()-er. :)
  5. Lessons from my first year of live coding on Twitch - Suz Hinton, talking about her experience using Twitch.tv, to broadcast her live-coding open source work. OMG, I freaking love this idea. I wish more people would do it.

Keep Rising,

Kevin B. Ridgway


Like this list? Want to get it in your inbox? Sign up for newsletter!

Five Frontend Things Friday #9

Here are five things in the Frontend Engineering world, that I found interesting…

  1. Spellbook of Modern Web Dev - A gargantuan list of resources for a Frontend Engineer. Don’t get overwhelmed, just pick a few to read up on every few days. :)
  2. Building better developers by specifying criteria of success - Austin Cheney, on his github account, states in the readme, The goal of this repository is to provide some structure and educational direction for web developers so that they can earn that rockstar status at their own pace. I like the tone of this repo.
  3. Introducing kyt — Our Web App Configuration Toolkit - From the NY Times Open blog, “There is a need for a tool that exists in between large boilerplates and their customizable toolsets. That’s why we built kyt (pronounced “kit”). kyt is designed to abstract away complicated configurations and allow developers to focus on writing their source code, while still having the power to make important choices about their app. It provides a solid base for building web apps in Node, while being flexible enough to be useful for a variety of projects.” Seems like a sensible approach to kickstarting a web project.
  4. Techniques for decomposing React components - From David Tang, an Architect at Atlassian on the DailyJS Medium blog, he reveals a few pro tips for intermediate to advanced React users. Good post on some things that I do know in React, only after being in the weeds for awhile.
  5. Introduction to Sets in JavaScript - From the Alligator website, an intro to ES6 sets object type in JavaScript. Cool intro to this new object type that you can use if you’re on the ES6 train.

Keep Rising,

Kevin B. Ridgway


Like this list? Want to get it in your inbox? Sign up for newsletter!

Five Frontend Things Friday #8

Here are five things in the Frontend Engineering world, that I found interesting…

  1. Explore GraphQL - Guides and Best Practices - GraphQL which originates from Facebook, has picked up some steam, and the folks who created Apollo Client for GraphQL, put together this nice set of guides for GraphQL. If you’re a Frontend Engineer, you might have started playing with GraphQL which can bring many APIs under one endpoint (among other things), so this is another nice resource for your learning journey in GraphQL.

  2. TC39 Proposals - From Nicolás Bevacqua of Ponyfoo.com fame, check out this great looking list of the TC39 Proposals and what stage they are in. If you’re unsure of what this is, take a look at his article describing it: TC39, ECMAScript, and the Future of JavaScript. (Yeah I snuck more than one link in here, tee hee.)

  3. Under-the-hood-ReactJS - Using visual block schemes, Bogdan-Lyashenko explains the ReactJS codebase. Mmmm, going to dig into this one. Get a vat of coffee, and cozy up with this technical read.

  4. Speed Up Scroll Events with Passive Event Listeners - Joshua Bemenderfer explains passive event listeners. I read about these originally in the Chrome Dev docs, and like that this was added, and can give some speed up to event listeners for scrolling.

  5. Grab’s Study guide and introduction to the modern front end stack. - Grab, what looks to be the “Uber of Southeast Asia”, has a solid study guide for the modern front end stack on Github.

Keep Rising,

Kevin B. Ridgway


Like this list? Want to get it in your inbox? Sign up for newsletter!

Five Frontend Things Friday #7

Here are five things in the Frontend Engineering world, that I found interesting…

  1. Jank Free - Let’s Make the Web Silky Smooth! - From the site, which looks to be put together by a couple of folks from the Chromium team, “Jank is any stuttering, juddering or just plain halting that users see when a site or app isn’t keeping up with the refresh rate. Jank is the result of frames taking too long for a browser to make, and it negatively impacts your users and how they experience your site or app.” Really good collection of resources for keeping your sites jank free.

  2. Front End Happy Hour Podcast - Started by Ryan Burgess, a UI Engineering Manager at Netflix. “A podcast featuring a panel of Software Engineers from Netflix, Evernote, Atlassian & LinkedIn talking over drinks about all things Front End development.” Very good discussions about a lot of diverse topics, both technical and soft skills around Frontend Engineering. One of my top five podcasts I listen to for Frontend Engineering.

  3. JavaScript’s new #private class fields - From James Kyle, a core team member on TC39, Yarn, Flow, Babel, and others. James talks about a new feature in JavaScript in Stage 2 of the standards process. An interesting read and I did not know about this particular feature being kicked around on the TC39 committee.

  4. Babel Handbook - Also from Mr. Kyle, is this great repo on GitHub that is for both plugin authors, and users of Babel. Great, clear information on Babel, and how to set it up.

  5. DOM Enlightenment Book - A fantastic book, that should probably be your 2nd or 3rd book you read if you’re just starting out with JavaScript. Cody Lindley is the author, and he does a fantastic job with this. This is required reading if you are doing Frontend Engineering. Period. Topics like these are evergreen and go back to the fundamentals of getting good at your craft. I have I sold it enough? Jeez, go read it.

Keep Rising,

Kevin B. Ridgway


Like this list? Want to get it in your inbox? Sign up for newsletter!

Five Frontend Things Friday #6

Here are five things in the Frontend Engineering world, that I found interesting…

  1. Hypernova - From Airbnb, “A service for server-side rendering your JavaScript views.” Seems pretty complete the a server, a browser component, and the client (Node.js or Ruby).

  2. RxJS - From the documentation site for RxJS, “RxJS is a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array#extras (map, filter, reduce, every, etc) to allow handling asynchronous events as collections.” Might be worth investigating if you have a lot of async events happening in your app if Promises isn’t cutting it for you.

  3. High Performance Animations - From the great Paul Lewis and Paul Irish, on HTML5Rocks site, “We’re going to cut straight to the chase. Modern browsers can animate four things really cheaply: position, scale, rotation and opacity. If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps.” Worth a read if you’re animating things on your webpage and things are getting janky on you.

  4. Loupe - From the site, “Loupe is a little visualisation to help you understand how JavaScript’s call stack/event loop/callback queue interact with each other.” Built by Philip Roberts who wanted to help others understand how JavaScript works. His presentation “What the heck is the event loop anyway” must be watched.

  5. What is the Accessibility Tree? - The web should be a place anyone can browse. With that in mind, it’s important that as Frontend Engineers we take the time and ensure that our sites are accessible. This is one video in Marcy Sutton’s “Start Building Accessible Web Applications Today” course you should check out to dip your toe in the waters of accessibility if you haven’t already.

Keep Rising,

Kevin B. Ridgway


Like this list? Want to get it in your inbox? Sign up for newsletter!

Five Frontend Things Friday #5

Here are five things in the Frontend Engineering world, that I found interesting…

  1. ZEIT TV - The Zeit folks (headed up by Guillermo Rauch), have put on a nice one day conference, and posted the videos online. Some interesting topics, take a look.

  2. Monitoring Jank: How we found the slowest parts of our UI - Over on the Lever Engineering blog on Medium, a nice rundown on how they measure and monitor Jank (when the UI stutters) in their web app.

  3. Highlights of Safari 11.0 - In the slew of Apple announcements at WWDC, a new Safari, with things we care about! Namely, support for the Media Capture API, support for real-time communication using WebRTC, WebAssembly support, and resource timing API!

  4. JSC 💕 ES6 - Awesome article from the Webkit team on all ES6 landing in Webkit. (Not Safari, yet, sadpanda.)

  5. The performance benefits of rel=noopener - From Jake Archibald, a developer advocate at Google on the Google Chrome team, he writes about an interesting performance tip, I had no idea about.

Keep Rising,

Kevin B. Ridgway


Like this list? Want to get it in your inbox? Sign up for newsletter!