Five Frontend Things Friday 17

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

  1. Must-Watch CSS - From Matt Smith’s github, last week was the Must-Watch JavaScript, this week I’m featuring the CSS repo! Some great content here.

  2. Faux Grid Tracks - From Eric Meyers, on the Alistapart blog, about the approach for styling CSS grids. Good rundown from a long time CSS and web standards adovacate, and author of seven CSS books. ;)

  3. The most essential list of resources for Front-End beginners - On David Dias’s github, a really good list for beginners.

  4. Javascript and Functional Programming: An Introduction - Omer Goldberg, on the great Hackernoon blog, talking about JavaScript and functional programming, a good intro.

  5. 11 React Component Libraries You Should Know In 2018 - Some good UI libs to checkout for React from Jonathan Saring, on the Bit blog.

Keep Rising,

Kevin B. Ridgway


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

Five Frontend Things Friday #16

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

  1. Modern Front-End Frameworks should be less of a “frame” and more of a “work” - Avichay Eyal, on his Medium blog, “By sticking to “use the platform” approach and use native APIs, it will do good for us all in the long run.” A good read of the current state of the Web Platform and JavaScript in browsers, how we got here, and what we should do about it.

  2. The Cost Of JavaScript - Addy Osmani, Eng. Manager at Google working with Chrome & DevRel, on the Chrome Dev Channel Medium blog, “As we build sites more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. In this post, I’ll cover why a little discipline can help if you’d like your site to load & be interactive quickly on mobile devices.”

  3. Using CSS Grid: Supporting Browsers Without Grid - Rachel Andrew on the Smashing Magazine website, “When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.”

  4. Advocating for Accessible UI Design - Lara Schenck on the CSS Tricks blog, “Accessibility is a hot topic these days, and the older we web-makers get, the hotter it’s going to become! That might be a snarky outlook, but what I’m trying to say is that it’s about time we start designing the web for everyone because the web was meant to be for everyone, and less and less are we able to predict where, when, and how our work will be consumed.”

  5. Must Watch JavaScript - A useful list of must-watch talks about JavaScript

Keep Rising,

Kevin B. Ridgway


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

Five Frontend Things Friday #15

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

  1. CSS Specificity Calculator - From Keegan Street, a nifty CSS specificity calculator. Even has an npm module you could use on your own.

  2. Search Libs - A nice online tool that allows you to search for JavaScript libraries by Kamil Tomšík. I like the fact that you can search by number of dependencies.

  3. How JavaScript works: an overview of the engine, the runtime, and the call stack - On Sessionstack’s Medium blog, CEO and co-founder Alexander Zlatkov writes, “This post is meant to be the first in a series aimed at digging deeper into JavaScript and how it actually works: we thought that by knowing the building blocks of JavaScript and how they come to play together you’ll be able to write better code and apps.”

  4. Flexbox and Grids, your layout’s best friends - From the Aerolab development blog, Eva Ferreira, UI Developer, writes “We decided to debunk the myths around Flexbox & Grids in order to show you the power of these two technologies working together.” This is a thorough look at how the two CSS layouts can work together.

  5. The 14 JavaScript debugging tips you probably didn’t know - Raygun’s blog has a lot of great tips on how to debug JavaScript in the browser.

Keep Rising,

Kevin B. Ridgway


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

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!