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!

Five Frontend Things Friday #4

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

  1. The Mindfulness of a Manual Performance Audit - Chip Cullen over on the always wonderful alistapart.com site says, “As product owners or developers, we probably have a good handle on which core assets we need to make a website work. But rarely is that the whole picture. How well do we know every last thing that loads on our sites?” A good read on frontend performance.

  2. Announcing Storybook 3.0 - Storybook is a really cool UI playground that you can install via NPM, it’s great to test out React components outside of your codebase. They’ve gone 3.0 and that comes with Webpack 2 support among other features.

  3. The Modern JavaScript Tutorial - Ilya Kantor created this cool site that says, “How it’s done now. From the basics to advanced topics with simple, but detailed explanations.” There are some good beginner resources out there for folks, this is a nice intro to advanced tutorial on JavaScript.

  4. CSS in JavaScript: The future of component-based styling - Jonathan Z. White, a JavaScript Engineer at Airbnb writes on his Medium blog, “By adopting inline styles, we can get all of the programmatic affordances of JavaScript.” A good tutorial on the barebones way to do this in React, why it’s a good idea, and he sprinkles in some design tips which I don’t always see in JavaScript articles - I like that he did here.

  5. Redux Logic Flow — Crazy Simple Summary - Trey Huffine on Medium writes, “It seems like every blog post about Redux is thousands of words when all that’s needed is a dead simple example of the logic process to refer to. Thus, I created this crazy simple summary.”

Keep Rising,

Kevin B. Ridgway


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

S01E02 - Progressive Web Apps

Progressive Web Apps

Progressive Web apps, how we got here, and how to get started.

Going to talk a little about the history of JavaScript applications, and how we got here, and what tools you can use today to start developing Progressive Web Apps.

These applications are accessed via a web browser like other websites, but offer more dynamic interactions resembling native mobile and desktop apps.

  • Speed, time to interaction on the page. Twitter Lite, for example, is interactive in under 5 seconds over 3G on most devices. Most of the world is using 2G or 3G networks; a fast initial experience is essential.
  • Supports notifications
  • Desktop or native mobile app like experience in the browser
  • Responsive web design so appears like an app for any screens size

From a technical standpoint that means:

  • renders in the browser, and responds like more native apps
  • Served from a CDN (content delivery network), static content, and the shell of the application is cached
  • You can have your site work offline, and have background sync, and push notifications
  • The IndexDB API
  • Service worker is a programmable network proxy, allowing you to control how network requests from your page are handled.
  • with web notification API, can notify users like native apps
  • usually client-side routing, so there isn’t entire page reloads
  • obviously async JavaScript requests (AJAX) for loading data without reloading a page

The immediacy of a desktop application and the portability and accessibility of a website.

Fear, Uncertainty, and Doubt

Before 2015:

  • Analytics libraries like Google Analytics required entire page loads to work properly.
    • Between 2009 to 2015, Google Webmaster Central proposed and then recommended an “AJAX crawling scheme” using an initial exclamation mark in fragment identifiers for stateful AJAX pages (#!).

Post 2015:

  • In 2 015, Google deprecated their hash-bang AJAX crawling proposal.
  • don’t believe the hype which I will link to in the show notes
  • That method is officially deprecated. See link in the show notes.

As of 2015 hash-bang urls as they were called, or fragment urls, are out, you don’t need to do this, or use phantomjs to render the site for you at all. You can even use Google Search Console (Used to be called google webmaster tools) to preview how Google would see your site whether it’s a Single Page App or not.

SPAs in 2017

  • It’s really a new term that is coming to the forefront, and more web technologies being considered part of this new term. Mostly being pushed by Google.
  • Let’s talk about the initial checklist
    • same thing, rebranded by Google: https://developers.google.com/web/progressive-web-apps/checklist
      • Site is served over HTTPS
      • Pages are responsive
      • The start URL (at least) loads while offline (using service worker)
      • Metadata provided for ‘Add to home screen’
      • First load fast even on 3G
        • https://developers.google.com/web/fundamentals/performance/prpl-pattern/
        • PRPL is a pattern for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch. Addy Osmani from Google is spear-heading this pattern, and is looking for feedback.
          • It stands for:
            • Push critical resources for the initial URL route.
            • Render initial route.
            • Pre-cache remaining routes.
            • Lazy-load and create remaining routes on demand.
      • Site works cross browser
      • Page transition don’t feel like they block on network
      • Each page has an URL
    • Exemplary Progressive Web App Checklist
      • Site’s content is index by Google
      • Schema.org metadata is provided when appropriate
      • canonical urls are provided when necessary
      • Pages use the History API; don’t use page fragments (#! hash bangs anymore)
    • User experience: content doesn’t jump when page loads for example
    • Performance: loads very fast on 3G
    • Caching: site uses cache-first networking
    • Push notifications: not being aggressive
    • Additional features: credential management API, Payment Request API

How do I dive in, and get started with PWAs? Start with https://github.com/developit/preact-cli

  • 100/100 Lighthouse score, right out of the box (proof)
  • Fully automatic code splitting for routes
  • Transparently code-split any component with an async! prefix
  • Auto-generated Service Workers for offline caching powered by sw-precache
  • PRPL pattern support for efficient loading
  • Zero-configuration pre-rendering / server-side rendering hydration
  • Support for CSS Modules, LESS & autoprefixer
  • Monitor your bundle/chunk sizes with built-in tracking
  • Automatic app mounting, debug helpers & Hot Module Replacement
  • In just 4.5kb you get a productive environment: preact, preact-router
  • 1.5kb of conditionally-loaded polyfills for fetch & Promise

Go try this out, it’s an npm install away. Then 4 commands to start playing with a Progressive Web App.

Keep Rising, Keep getting better at your craft. See you next time.

Resources


You should follow @theriseoffee on Twitter.
Download MP3 (15.9MB)

Five Frontend Things Friday #3

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

  1. Jumping in: Front-end development from the middle of the project - A must read. Drew Bell, an engineer from Postlight talks about what Front-end development really is, and why it’s nuanced from other engineering disciplines. Couldn’t agree more.

  2. What is the Future of Front End Web Development? - Chris Coyier on his CSS-Tricks takes a stab at what the future holds for us. I’d like to see more pieces like this from folks. Talking about the larger picture, thinking more deeply - and less about the new hotness.

  3. Progressive Web Apps The Right Way - Cody Arsenault from the KeyCDN blog writes, “Since progressive web apps were introduced by Google back in 2015, they have been setting new standards for user experiences. While we are awaiting broader browser support, all developers should start learning how to take advantage of this exciting new way of building apps.” Good intro to progressive web apps, and how to build them.

  4. Anecdotes about frontend and backend engineering - Malte Ubl, Tech Lead of the Google AMP project, describes a situation I’d found between the roles of ‘frontend’, ‘backend’, and ‘fullstack’ engineer. Starting up a new team, I remember how people get very attached to their titles, and technologies. In the end, we should all find places to be experts, to be kind, and communicate well.

  5. UI Component Playbook A 5-step guide to designing and engineering frontends with components - Dominic Nguyen, Product design at Chroma talks about how our frontends are getting more complicated. What should we do? Break the larger UI problems into smaller ones (components), and build them up (into a library) that’s reusable. Starting to see this as a trend towards standard practice.

Keep Rising,

Kevin B. Ridgway


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

Five Frontend Things Friday #2

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

  1. JSConf EU 2017 Videos - JSConf is always a high-quality conference with great speakers. Check out their youtube playlist (more videos added daily) of the recently completed EU 2017 conference.

  2. Rearchitecting Airbnb’s Frontend - spoiler alert migrating a large codebase from Rails to SPA (single-page-app) based on React. Great talk of product side decisions, and performance for a SPA.

  3. How we built Twitter Lite - more big players jumping into PWA (Progressive Web Apps) scene. Worth a read to see what they chose to use, and why.

  4. Writing Tidy Code - from Harry Roberts (CSS Wizardry). Been following Harry for a long time, and he always has excellent advice. Love getting into the weeds like this one, in one’s craft. Some would argue that this is silly minutia, I would disagree. If you think of your job as your craft, these things matter.

  5. What the heck is the event loop anyway? - speaking of your craft. Do you know how the JavaScript Event Loop works? If you’re one to think in terms of first principles, this is an excellent talk to watch. Philip Roberts talks about his journey in understanding this core part of JavaScript.

Keep Rising,

Kevin B. Ridgway


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