Web in April - The Newsletter by Agney
April might just be known as the month that Basecamp went rogue. After a successful stint of taking the fight to the big boys, the well known founders are falling from grace from Tech Twitter.
Joel from Egghead gave us a list of his favourite resources for learning JavaScript. Listing them here:
Learning Roadmap | Learn Vanilla JS
Not sure where to start? Here’s a structured roadmap for learning vanilla JS. After you’ve mastered a skill or completed a project, check if off and the site will save your learning progress for you.
Learn JavaScript
Learn JavaScript is the easiest, most interactive way to learn & practice modern JavaScript online. Read short lessons, solve challenges & answer flashcards.
Learn JavaScript for Free - Learn.co
Learn JavaScript for free - featuring 50+ hours of interactive lessons and tutorials in a real development environment.
Practical JavaScript | Watch and Code
The Modern JavaScript Tutorial
Releases
- Cloudflare Pages - Cloudflare can now host JAMStack websites, combined with Workers, this is definitely a powerful solution. Along with the usual stack of live previews, CDN solutions, cloudflare also optimises your images - depending on whether you are visiting from a mobile or desktop device.
- Github Sponsors Community - Github now has a listing page for all the open source repositories that you depend on so you can choose to sponsor them easily. I found out that my repos depend on 3k open source repositories 🤯.
- Safari 14.1 - Safari 14.1 ships with lots of stuff (as usual) but now we have
flex-gapeverywhere (that matters). You can now space flex items without the weird margins between flex children. - NextJS 10.2 - NextJS 10.2 comes with automatic webfont optimisation and accessibility improvements. Also Tobias Koppers, the author of webpack has joined the Vercel team.
- Tailwind 2.1 - JIT has now been added to the core. Adds support for blending modes. Tailwind UI supports React and Vue as well.
Tutorials
- Gitlet.js - Gitlet is a heavily commented and explained deep dive into Git written with JavaScript. Fascinating read.
- React Labs by Facebook - Facebook Open Source team has launched a video series for technical deep dives into React internals. The launch is now accompanied by a developer Q&A with React team and developers focused on the new Server Components API. If you like frontend architecture design, go for it, but do remember that the API is not yet final so you don’t need to.
- Breaking GitHub Private Pages for $35k - Breaking into Github private pages with some CRLF injection and cache poisoning on a CTF.
- Writing Resilient Components - Who better than Dan Abramov for React tips. This time around it’s not a huge essay, it’s some specific issues with solutions that Dan has gifted.
- Is WebAssembly magic performance pixie dust? - Shouldn’t we all be just writing Web Assembly instead of JavaScript if it’s faster? Surma writes the same cases on JavaScript and AssemblyScript to compares their performance.
In the Spotlight 🔦
Checkout Hakkim El Hattab’s lab projects 🔥
made an infinite scrolling thing 🎨
https://lab.hakim.se/trassel/
https://twitter.com/addyosmani/status/1388031656355794945/photo/1
Product Discoveries of the Month
- FEToolkit - Toolkit of recurring frontend tasks.
- Frontend Practice - Take your frontend skills to the next level by recreating real websites.
- Webkit’s new Grid Inspector - Developer tools for Grid has been improving all year 🎉
Web Vitals
Google could start including the new web vitals measurements into the page ranking algorithm starting as soon as May or June. If you haven’t looked into web vitals yet, now might be a good time to start.
Web Vitals is a collection of three (currently) measurements from a webpage. These are:
- Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
- First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of 100 milliseconds or less.
- Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of 0.1. or less.
Google provides a library named web-vitals on NPM that can be used to measure all three parameters. If you have created a project with create-react-app recently, you would have run across a web-vitals file along side the regular ones. It measures the metrics that Google suggested with the library.
You can measure web vitals on popular tools like Pagespeed Insights, Chrome UX Report, Search Console and Web Vitals extension. Lighthouse currently reports two of the vitals - LCP and CLS.
Find out more:
- Web Vitals - Web.dev
- Measure Web Vitals - Web.dev
- Bringing Vitals to Google Search
- Optimising Images on Core Vitals
In Other News
- Starting with an idea and building a community - Evan You - The founder of Vue talks about building a community and making open source work for you on the new Github blog series.
- How Anjali Sud reinvented Vimeo - Vimeo was always known as a small Youtube competitor. Recently they have taken a large pivot under their new CEO Anjali Sud to video creation tools. She talks about the success of Tik Tok and how much of it is actually attributed to video creation tool rather than watching short videos. This is a must read/listen for anyone interested in startups.
- Welcome to YOLO economy - There were repeated predictions based on historical pandemics of a renaissance. When everything cools down, people doing what they wanted to instead of what they were forced to. NYTimes reports suggests that it’s already here, the YOLO economy.
Looking Forward
- Ioniconf - June 23 - CFPs are now open.