Frontend News Digest 14 - 20.03

Guide to calc() in CSS, why snackbars are bad and what should you use, build a NodeJS tool for Google Lighthouse reports and more 
20 March 2020   242

Greetings! I hope your week went great! Here's new frontend technologies news digest.

Learn about the fake CSS :nth-of-class selector, how to Animate CSS and SVG's with AnimeJS, how to set up OAuth in NextJS with Passport and Github and other interesting stuff.

Guides

  • A Complete Guide to calc() in CSS

This tutorial covers everything you need to know about the calc() function in CSS

  • CSS :nth-of-class selector

This isn’t a real selector, but author looks at some possible shortcomings with nth-child, leading to the conclusion that maybe we do need something like :nth-of-class

  • The problem with snackbars and what to use instead

Learn why author beleives snackbars are bad what to use instead.

  • How to Animate CSS and SVG's with AnimeJS

Learn how to use AnimeJS - a JS animation library with various features like SVG morphing animations and CSS animations

  • Build a Node.js Tool to Record and Compare Google Lighthouse Reports

A step-by-step guide that will show you how to create a Node.js tool for recoding and comparing Google Lighthouse reports

  • NextJS OAuth with Passport and Github

A detail tutorial on how to set OAuth in NextJS using Passport and Github 

Articles

  • ‘CSS X’

The big research on CSS versions numbering

  • npm is joining GitHub

Npm is now a part of Microsoft-owned GitHub, but the source code will remain opened for open source developers

  • Next Phase Montage

Some thoughts, related to the latest news around NPM - the acquisition by the GitHub

Podcast

  • The CSS Podcast

In the first episode of a new podcast from the Chrome Developers team all about CSS Una Kravets and Adam Argyle (Developer Advocates from Google and hosts) discuss the CSS box model.

Frontend News Digest 21 - 27.03

Embrace modern image formats, how to indicate scroll postion on page with CSS, integrate TypeScript with GraphQL and more
27 March 2020   452

Greetings! I hope your week went great! Here's new frontend technologies news digest.

Learn how to use the currentColor value in CSS, how to debug a child process in Node and Gatsby.js with Chrome, how to Debug a Node.js Application: Tips, Tricks and Tools and other cool, useful and demanded things, related to all parts of frontend development.

Guides

  • Embracing modern image formats

Learn how modern images formats and <picture> element can reduce image sizes

  • How to use the currentColor value in CSS

A tutorial on a basic CSS feature, great for newbies

  • Indicating Scroll Position on a Page With CSS

This guide will teach you how to indicate scroll position, using only CSS

  • How to debug a child process in Node and Gatsby.js with Chrome

Learn how to patch `jest-worker`package used by Gatsby.js and by patching enable child process debugging using Chrome Dev Tools in this tutorial

  • Integrating TypeScript with GraphQL

Learn how to integrade TypeScript with GraphQL

  • How to Debug a Node.js Application: Tips, Tricks and Tools

Massive tutorial on Node app debugging, with some tips, that can be useful even for skilled developers

Articles

  • Full Third-Party Cookie Blocking and More (in Safari)

Safari’s Intelligent Tracking, has been in beta for some time, introduces significant privacy changes, including cross-site cookies now being blocked by default

Video

  • The Complete AEA DC 2019 Now Online

Giant number of different interesting speeches from An Event Apart session, that was realeased special in a pack for you to stay home

Updates

  • uppload

JS image uploader with 30+ plugins 

  • Node-SQLite

SQLite client library for Node.js applications 

  • Backstage

Open platform for building developer portals