AJAX-crawling pages, HTML5 accessibility, SVG filters, Grid layout, GraphQL guide,  CSS variables, deeplearn.js, mdbootstrap, Angular 5.1, Reshader library, and more. The most up-to-date information for front-end developers in one digest!

Web Development

• Rendering AJAX-crawling pages
• A recap of front-end development in 2017
• Making your web app work offline: Part 1: The Setup, Part 2: The Implementation
• A Comprehensive Guide To Web Design
• The Frontend job interview preparation guide
• Learn more about vulnerability alerts
• Fronteers Conference 2017

• Performance:
  • Evolution of : Gif without the GIF
  • Average Page Load Times for 2018 – How does yours compare? 
  • Performance is a virtue

• Tools:
  • Introducing Turbo: 5x faster than Yarn & NPM, and runs natively in-browser
  • Bankai, the friendly web compiler
  • wordpressify – A build system designed to automate your WordPress development workflow.
  • parceljs – Blazing fast, zero configuration web application bundler.
  • Webpack: A Gentle Introduction to the Module Bundler
  • Setting up webpack for Any Project
  • Inspect designs inside Visual Studio Code

• Accessibility:
  • HTML5 Accessibility. Get the current accessibility support status of HTML5 features across major browsers. Editor’s draft, December 2017.
  • Accessible Links Re:visited
  • 5 Common Misconceptions About Web Accessibility
  • Providing Alternate Content for Screen Reader Users
  • A Developer’s Guide to Better Accessibility
  • Web Content Accessibility Guidelines—for People Who Haven’t Read Them
  • Automating Your Accessibility Tests
  • Building an Inclusive Web: Why Accessibility Matters

• Animations:
  • Creative SVG Strokes Animation – a bike illustration powered by SVG and GSAP.
  • Mountains Adventure – SVG filters, clip-path & morphing, a pen that blends a text animation into a scenic photo on @Codepen 
  • Pixel wave animation for seamless page transitions

CSS

• iota – A responsive micro-framework for the grid spec powered by CSS custom properties.
• What to use Grid Layout for? Some ideas.
• Animating Border
• How to make your HTML responsive by adding a single line of CSS
• Why CSS Grid is better than Bootstrap for creating layouts
• Understanding CSS Variables
• Calendar with CSS Grid
• Vertical typesetting with writing-mode revisited
• Styling Components – Typed CSS With Stylable
• Debugging CSS Grid Layouts With Firefox Grid Inspector
• dudeonthehorse/normalize.email.css – CSS resets for HTML emails.

JavaScript

• Here’s what people in tech had to say about Javascript when it debuted in 1995
• How To Write Secure JavaScript Applications
• So, you learned JavaScript – what now?
• Neural Networks in JavaScript with deeplearn.js
• The Future of JavaScript Will Be Less JavaScript
• How I Created a HeatMap of my Location History with JavaScript & Google Maps

• ES2015+:
  • await vs return vs return await
  • How to Cancel Your Promise

• Theory & Guides:
  • A different way of understanding this in JavaScript
  • Getting To Know The JavaScript Internationalization API
  • Answering Tricky JS Interview Questions
  • A Front End Developer’s Guide to GraphQL
  • Finding Non-Unique Elements in Javascript

• React:
  • Quick introduction to React for Angular 2/4+ developers
  • Two new (free) React courses. 2.5 hours. 1 – The Beginner’s Guide to ReactJS, 2 – Advanced React Component Patterns
  • Demystifying React Styling Approaches
  • How to Build a Simple Blog Using React and GraphQL
  • React Performance Fixes on Airbnb Listing Pages
  • Advanced React Component Patterns
  • mdbootstrap – React Bootstrap with Material 
  • jQuery Is Better Than React

• VueJS:
  • Jargon-Free Webpack Intro For VueJS Users
  • What’s The Deal With Vue’s Virtual DOM?
  • Animating VueJS

• Angular:
  • 11 Angular Component Libraries You Should Know In 2018
  • Angular 5.1 & More Now Available ()
  • Why we chose Angular 2 over React for our enterprise software development work

• Libs & Plugins:
  • npmgraph — A tool for exploring NPM modules and dependencies.
  • Dynamic Waveform Visualizations with wavesurfer.js
  • Animate Plus — avaScript animation library focusing on performance and authoring flexibility.
  • Muuri — Responsive, sortable, filterable and draggable grid layouts.
  • Reshader — a micro, highly-customisable JavaScript library to get the shades of colors.
  • country-iso — country-iso — get the ISO 3166-1 alpha-3 country code from geographic coordinates.