Five Frontend Things Friday #20

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

  1. Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input - Ann Tudor, over on the CSS-Tricks blog gives a nice example of using conic-gradient.
  2. front-end-interview-handbook - Yangshun Tay, working at Facebook, has put a nice repo on github together going over answers to the ‘front-end-interview-handbook’. Must read.
  3. headless-devtools - Johnny over on his github says,”Lets you perform Chrome DevTools actions from code by leveraging Headless Chrome+Puppeteer”. This looks really useful to run some automated info about your webapp.
  4. Stimulus 1.0: A modest JavaScript framework for the HTML you already have - From DDH, over on the Signal v. Noise blog, announces the 1.0 release of a JS Framework that they use on Basecamp. Interesting read to hear his thoughts on approach for the framework, even if you don’t decide not to use it.
  5. Love by Ronik - Love by Ronik, is a cool project put together for Valentine’s Day. Worth a look to see the source on github and see how they use WebGL + React.

Keep Rising,

Kevin B. Ridgway


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

Five Frontend Things Friday #19

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

  1. CSS Grid — Learn all about CSS Grid with Wes Bos in this free video series! - Wes says on his blog, “The course is 25 videos, about 4 hours long and 100% free.” Um yes.
  2. New flexbox guides on MDN – Mozilla Hacks – the Web developer blog - The awesome Rachel Andrew has added eight new guides on MDN for your reading pleasure.
  3. How I design with CSS grid - From Chen Hui Jing’s site, “After a couple of rounds of introducing CSS grid to people who haven’t tried it before, I found it wasn’t the implementation of grid that people asked questions about, rather, it was the bit before that. The actual planning of how a layout would be set up.”
  4. Modern CSS Explained For Dinosaurs – Actualize – Medium - From Actualize Coding Bootcamp Medium blog, Peter Jang starts out with, “CSS is strangely considered both one of the easiest and one of the hardest languages to learn as a web developer.” Yes. Dropping truth.
  5. 3 key insights that make D3.js easy to learn - A geek with a hat - From Swizec Teller’s blog, a great succinct summary of D3.js, and it’s key concepts.

Keep Rising,

Kevin B. Ridgway


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

Five Frontend Things Friday #18

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

  1. HTML5 Accessibility - Just as the site says, “Get the current accessibility support status of HTML5 features across major browsers. Editor’s draft, December 2017”.
  2. I just asked 23,000 developers what they think of JavaScript. Here’s what I learned. - I hope you participated in Sacha Greif’s Annual JavaScript Survey, here are the results!
  3. From Bootstrap to CSS Grid - From Natalya, a FE Dev at The NY Times’ Open blog on Medium, she outlines how the NYTimes started using CSS Grid.
  4. THE ULTIMATE FLEXBOX CHEAT SHEET - From Sean Fioritto author of “Sketching with CSS”, he gives a nice cheatsheet on Flexbox.
  5. WebToolsWeekly Newsletter - From Louis Lazaris, a weekly curated newsletter about, you guessed it, web tools!

Keep Rising,

Kevin B. Ridgway


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

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!