Five Frontend Things Friday 24

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

  1. Here are examples of everything new in ECMAScript 2016, 2017, and 2018 - Rajaraodv, over on freecodecamp’s Medium blog goes through the new hotness in JS.
  2. All about JavaScript functions in 1 article - Rajesh Pillai over on the Codeburst talks about how JavaScript functions work. Good rundown
  3. Front-End Developer Handbook 2018 - I would be absolutely crazy not to include this link. This is written by Cody Lindley author of many great JS books including one of my favorites “Dom Enlightenment” (http://www.domenlightenment.com/).
  4. How I stopped using Bootstrap’s layout thanks to CSS Grid - Cédric Kui over on Theodo’s company tech blog talks about ditching Bootstrap for 89% browser compatible CSS Grid.
  5. How CSS works: Parsing & painting CSS in the critical rendering path - On LogRocket’s Medium blog, Benjamin Johnson explains how CSS works in the browser in some detail. If you don’t know what the CSS Object Model is, time to read up.

Keep Rising,

Kevin B. Ridgway


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

Five Frontend Things Friday 23

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

  1. 30 Seconds of CSS - From the site, “A curated collection of useful CSS snippets you can understand in 30 seconds or less.” I like the idea of short snippets presented well for easy reading.
  2. Compilers are the New Frameworks - From Tom Dale’s blog, he provides some thought-provoking sentences about where our web apps may be heading.
  3. React’s New Context API Explained - From Wes Bos, on his personal site, he gives an example on github on how you might use this new React API.
  4. The Downward Spiral of Slow Code Reviews and How to Fix It - From Panaseer’s Medium blog, Anton von Borries talks about how they decided to do code reviews. I believe in code reviews, so should you. ;)
  5. Autoplay Policy Changes - From François Beaufort who works on the Chromium team, some important updates that every Frontend Engineer needs to know about autoplay if their site has video that does this. TLDR: Times are a changin’.

Keep Rising,

Kevin B. Ridgway


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

Five Frontend Things Friday #22

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

  1. The Ultimate Guide to JavaScript Frameworks - From the site, “That’s where this guide comes in. It’s a living document that is a reference for all known front end JavaScript frameworks (archived or deprecated projects are not included). In this case, the term “frameworks” is being used in a broad sense. It includes user interface (UI) libraries like React, as well as full frameworks like Angular.”
  2. Using Prettier to format your JavaScript code - From Saransh Kataria on his blog Wisdom Geek, “Wasting time formatting your code is a monotonous task and Prettier has been designed to solve this problem of wasting time on it. So it helps you overcome formatting fatigue with a very easy setup.”. I personally love Prettier. I don’t care how my code looks, I care how it works. Prettier just formats your code for you with integration with your favorite IDE on save. So good.
  3. Frontend Case Studies - On Andrew Romanov’s GitHub, he puts together a great collection of Frontend Case Studies in the real world. Must read.
  4. Hierarchy of documentation dysfunction - While not Frontend specific, Chris Allen on his publication Lore, he goes into the reason you should document your code, at many levels. I for one, believe we should all take a moment and read this. Too often is the case when I look at new projects, there is absolutely no documentation - unacceptable.
  5. How to Write CSS That Works in Every Browser, Even the Old Ones - Jen Simmons, again on the Mozilla Hacks blog dropping knowledge about CSS. Love it.

Keep Rising,

Kevin B. Ridgway

Five Frontend Things Friday #21

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

  1. Serverless Stack - From the site, “Serverless Stack is an open source guide for building and deploying full-stack apps using Serverless and React on AWS. Create a note-taking app from scratch using the Serverless Framework and Create React App.” Nice thorough free resource.
  2. Hyperapp + Parcel = 😎 - Adam Boro writes on the Medium blog of Daftcode, about using Hyperapp, a React-like JS framework, and Parcel, a no-config bundler together to quickly build a lightweight webapp.
  3. Eloquent JavaScript, 3rd Edition - Marijn Haverbeke has written one of my favorite JavaScript books, “Eloquent JavaScript”. He’s updating the third edition right now, and you should give it a read (and provide feedback to him), as the previous editions were excellent.
  4. How Big Is That Box? Understanding Sizing In CSS Layout - From Smashing Magazine, Rachel Andrew writes, “In this article, I’m going to share with you some interesting things about sizing boxes in CSS. I’ve picked out a few things from the specifications that I believe are vital in terms of understanding exactly how big that box is. Take some time to read through, and I think you’ll find sizing in Grid a lot less mysterious!”
  5. Some Thoughts on Choosing the Best JavaScript Framework for Your Project - I like this piece from John Hannah, that talks about how we consider trade-offs in choosing JavaScript frameworks for our projects.

Keep Rising,

Kevin B. Ridgway


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

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!