Front-end Collection #1

Posted

in collection

on January 2nd 2021

This post feature the latest news and resources from last December 2020 from the Front-end Development community that, in my personal opinion, are remarkable to be saved and shared.

Browser news

Mozilla released Firefox 84, which contains 2 new features:

References:

Resources

Web Almanac 2020

HTTP Archive released the 2nd edition of the Web Almanac, where they combine the raw stats and trends they collect with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. It is comprised of 22 chapters spanning aspects of page content, user experience, publishing, and distribution.

Reference:

https://almanac.httparchive.org/en/2020/

State of CSS 2020

The results of the survey "State of CSS 2020" has been published: 11,492 people in 102 countries answered last year.

Browse the results

Video overview of the results

MDN Web Developer Needs Assessment 2020

A global, annual study of developer needs on the web. MDN Web DNA aspires to be the voice of developers and designers working on the web.

This report provides critical insight into how browser vendors can improve the platform for authors with 6,645 clean respondents.

References:

https://insights.developer.mozilla.org/reports/mdn-web-developer-needs-assessment-2020.html

Samantha Ming

The website of Samantha Ming is a wonderful source of jems!

Reference:

https://www.samanthaming.com/

It’s Time to Say Goodbye to Google Fonts

Since Chrome v86, released October 2020, cross-site resources like fonts can’t be shared on the same CDN anymore.

This is due to the partitioned browser cache (Safari has had this for years already).

"Google Fonts resources will be redownloaded for every website, regardless it being cached on the CDN. Self-host your fonts for better performance. The old performance argument is not valid anymore"

Reference:

https://wicki.io/posts/2020-11-goodbye-google-fonts/

Handling Short And Long Content In CSS

Modern browsers have are able now to handle short and long content; the article explore several issues and solutions in pure CSS.

Reference:

https://ishadeed.com/article/css-short-long-content/

The Rules of Margin Collapse

In CSS, adjacent margins can sometimes overlap. This is known as “margin collapse”, and it has a reputation for being quite dastardly.

Reference:

https://www.joshwcomeau.com/css/rules-of-margin-collapse/

Modern DevTools

A video based course to develop, debug & performance audit your websites.

3 lessons are free:

A YouTube performance issue
A modern authoring workflow
local overrides on Soylent.com

Reference:

https://moderndevtools.com/

Tools

Revamped Storybook Addon ecosystem

Storybook has over 200 addons that enable new features and integrations. Addons are a convenient way to customize Storybook to fit your UI development workflow.

Reference:

Storybook Mobile

An addon that provides hints and suggestions in context, depending on the content of each individual component as it has been rendered into the page.

Reference:

Pseudo-localization

Pseudolocalization (or pseudo-localization) is a software testing method used for testing internationalization aspects of software.

Instead of translating the text of the software into a foreign language, as in the process of localization, the textual elements of an application are replaced with an altered version of the original language.

the pseudolocalization technique has been used at Microsoft since the late 90s

Reference:

JavaScript News

10 React security best practices

Checklist of React security best practices to help you and your team find and fix security issues in your React applications.

References:

https://snyk.io/blog/10-react-security-best-practices/

Modern libraries for data fetching in React

SWR

React Hooks library for data fetching. SWR means stale-while-revalidate, a HTTP cache invalidation strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.

Reference: https://swr.vercel.app/

React Query

Performant and powerful data synchronization for React; fetch, cache and update data in your React and React Native applications all without touching any "global state".

Reference: https://react-query.tanstack.com/

Next.js

“The React Framework for Production”

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

References: https://nextjs.org/

Route-level code splitting in Angular

Improve the performance of your app by using route-level code splitting

References:

https://web.dev/route-level-code-splitting-in-angular/

5 Tips to Improve Ionic Angular App Performance

Reduce app bundle size with source-map-explorer
Configure size budgets
Split your app into modules for native Angular lazy loading
Keep Angular up-to-date regularly with “ng update”
Reduce app build times by adding a Browserslist file

Reference:

https://ionicframework.com/blog/5-tips-to-improve-ionic-angular-app-performance/

Angular Router

Revealing some interesting facts and features, exploring some handy features provided by Angular Router.

Reference:

https://indepth.dev/posts/1379/angular-router-revealing-some-interesting-facts-and-features

That's all for this collection.