<p>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.</p>

<h2>Browser news</h2>

<p>Mozilla released Firefox 84, which contains 2 new features:
<img src="https://www.datocms-assets.com/11897/1609535506-ff-taborder.png" alt=""></p>

<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/84">Tab order inspection</a></li>
<li><a href="https://hacks.mozilla.org/2020/12/and-now-for-firefox-84/">Localhost improvements</a></li>
</ul>

<h2>Resources</h2>

<h3>Web Almanac 2020</h3>

<p><img src="https://www.datocms-assets.com/11897/1609535758-web-almanac.jpg" alt=""></p>

<p>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.</p>

<p>Reference:
<a href="https://almanac.httparchive.org/en/2020/">https://almanac.httparchive.org/en/2020/</a></p>

<h3>State of CSS 2020</h3>

<p><img src="https://www.datocms-assets.com/11897/1609535879-stateofcss.png" alt=""></p>

<p>The results of the survey &quot;State of CSS 2020&quot; has been published: 11,492 people in 102 countries answered last year.</p>

<p><a href="https://2020.stateofcss.com/">Browse the results</a></p>

<p><a href="https://www.youtube.com/watch?v=iRg4H-6TtPc">Video overview of the results</a></p>

<h3>MDN Web Developer Needs Assessment 2020</h3>

<p>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. 
6,645 clean respondents</p>

<p>References:
<a href="https://insights.developer.mozilla.org/reports/mdn-web-developer-needs-assessment-2020.html">https://insights.developer.mozilla.org/reports/mdn-web-developer-needs-assessment-2020.html</a></p>

<h3>Samantha Ming</h3>

<p><img src="https://www.datocms-assets.com/11897/1609595476-samanthaming.jpg" alt=""></p>

<p>The website of Samantha Ming is a wonderful source of jems!</p>

<p>Reference: 
<a href="https://www.samanthaming.com/">https://www.samanthaming.com/</a></p>

<h3>It’s Time to Say Goodbye to Google Fonts</h3>

<p>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).</p>

<blockquote>
<p>&quot;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&quot;</p>
</blockquote>

<p>Reference: <a href="https://wicki.io/posts/2020-11-goodbye-google-fonts/">https://wicki.io/posts/2020-11-goodbye-google-fonts/</a></p>

<h3>Handling Short And Long Content In CSS</h3>

<p><img src="https://www.datocms-assets.com/11897/1609595806-css-long-text.png" alt=""></p>

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

<p>Reference:
<a href="https://ishadeed.com/article/css-short-long-content/">https://ishadeed.com/article/css-short-long-content/</a></p>

<h3>The Rules of Margin Collapse</h3>

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

<p>Reference:
<a href="https://www.joshwcomeau.com/css/rules-of-margin-collapse/">https://www.joshwcomeau.com/css/rules-of-margin-collapse/</a></p>

<h3>Modern DevTools</h3>

<p>A video based course to develop, debug &amp; performance audit your websites. </p>

<p>3 lessons are free:
* A YouTube performance issue
* A modern authoring workflow
* local overrides on Soylent.com</p>

<p>Reference:
[<a href="https://moderndevtools.com/(https://moderndevtools.com/)">https://moderndevtools.com/(https://moderndevtools.com/)</a></p>

<h2>Tools</h2>

<h3>Revamped Storybook Addon ecosystem</h3>

<p><img src="https://www.datocms-assets.com/11897/1609596361-addons-catalog-beta.gif" alt=""></p>

<p>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.</p>

<p>Reference:
<a href="https://storybook.js.org/addons">https://storybook.js.org/addons</a>
<a href="https://storybook.js.org/blog/revamping-storybooks-addon-ecosystem/">https://storybook.js.org/blog/revamping-storybooks-addon-ecosystem/</a></p>

<h3>Storybook Mobile</h3>

<p><img src="https://www.datocms-assets.com/11897/1609596879-storybook-mobile-addon.gif" alt=""></p>

<p>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.</p>

<p>Reference:
<a href="https://medium.com/storybookjs/storybook-mobile-6c654d44fc64">https://medium.com/storybookjs/storybook-mobile-6c654d44fc64</a>
<a href="https://github.com/aholachek/storybook-mobile">https://github.com/aholachek/storybook-mobile</a></p>

<h3>Pseudo-localization</h3>

<p><img src="https://www.datocms-assets.com/11897/1609596944-netlifx-pseudolocalization-00.png" alt=""></p>

<p>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</p>

<p>Reference:
<a href="https://github.com/tryggvigy/pseudo-localization">https://github.com/tryggvigy/pseudo-localization</a>
<a href="https://medium.com/netflix-techblog/pseudo-localization-netflix-12fff76fbcbe">https://medium.com/netflix-techblog/pseudo-localization-netflix-12fff76fbcbe</a>
<a href="https://reviewboard.mozilla.org/r/248606/diff/2#index_header">https://reviewboard.mozilla.org/r/248606/diff/2#index_header</a></p>

<h2>JavaScript News</h2>

<h3>10 React security best practices</h3>

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

<p>References:
<a href="https://snyk.io/blog/10-react-security-best-practices/">https://snyk.io/blog/10-react-security-best-practices/</a></p>

<h3>Modern libraries for data fetching in React</h3>

<h4>SWR</h4>

<p>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.</p>

<p>Reference: <a href="https://swr.vercel.app/">https://swr.vercel.app/</a></p>

<h4>React Query</h4>

<p>Performant and powerful data synchronization for React; fetch, cache and update data in your React and React Native applications all without touching any &quot;global state&quot;.</p>

<p>Reference: <a href="https://react-query.tanstack.com/">https://react-query.tanstack.com/</a></p>

<h3>Next.js</h3>

<p><img src="https://www.datocms-assets.com/11897/1609597109-next-black.svg" alt=""></p>

<p>“The React Framework for Production”
Next.js gives you the best developer experience with all the features you need for production: hybrid static &amp; server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.</p>

<p>References: <a href="https://nextjs.org/">https://nextjs.org/</a></p>

<h3>Route-level code splitting in Angular</h3>

<p>Improve the performance of your app by using route-level code splitting</p>

<p>References:
<a href="https://web.dev/route-level-code-splitting-in-angular/">https://web.dev/route-level-code-splitting-in-angular/</a></p>

<h3>5 Tips to Improve Ionic Angular App Performance</h3>

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

<p>Reference:
<a href="https://ionicframework.com/blog/5-tips-to-improve-ionic-angular-app-performance/">https://ionicframework.com/blog/5-tips-to-improve-ionic-angular-app-performance/</a></p>

<h3>Angular Router</h3>

<p>Revealing some interesting facts and features, exploring some handy features provided by Angular Router.</p>

<p>Reference:
<a href="https://indepth.dev/posts/1379/angular-router-revealing-some-interesting-facts-and-features">https://indepth.dev/posts/1379/angular-router-revealing-some-interesting-facts-and-features</a></p>

<p>That&#39;s all for this collection.</p>


Front-end Collection #1

<p>The title of this post came to my mind after reading Twitter post on Feb 9th by Andy Bell:</p>

<blockquote>
<p>What’s your favourite programming language? Mine’s HTML.
It’s powerful, efficient, declarative, backwards AND forwards compatible and most importantly, user-friendly.
If there’s errors, it just carries on, prioritising getting the content to the user.
What a smashing language.</p>

<p><a href="https://twitter.com/hankchizljaw/status/1226453352114008064?s=11">Source: Twitter</a></p>
</blockquote>

<p>That&#39;s so true, and reminded me the famous quip by Brendan Eich&#39;s &quot;Always bet on JavaScript&quot;.
It&#39;s astonishing to think that HTML is almost 30 years old, first version was released in 1992, and it&#39;s still evolving in order to keep the pace with current needs of web developers.</p>

<p><img src="https://www.datocms-assets.com/11897/1581260214-html-timeline.png" alt="Timeline of HTML releases; source https://www.w3.org/"></p>

<p>Andy post remarks the first and fundamental goal of HTML: representing the content; content that can be served without CSS and JavaScript by several channels, think about RSS readers, screen readers, and other assistive techs, wearables, etc. </p>

<p>This is often forgotten, especially by web developers who depend too much on web frameworks: these piece of software helps by hiding complexity, but they have a very bad side effect since they create a technical debt that in the long term is difficult to reduce.
Learning and knowing the basics is important in all things, and web development makes no exception.</p>


html code from my personal website

Always bet on HTML

<p>My personal goals for this year was to rennovate my personal website and to start writing.</p>

<p>I decided to welcome what Sara Soueidan wrote in her post <a href="https://www.sarasoueidan.com/desk/just-write/">&quot;Just write&quot;</a>, as well Duncan Stephen in a post with the same title <a href="https://duncanstephen.net/just-write/">Just write</a>.
So, after more or less 20 years, I&#39;ll just write, I&#39;ll do it for myself to let down my feelings and my emotions along the road, I&#39;ll write about stuff I learn and what I believe it&#39;s important to share with everyone.</p>

<p>I&#39;ll, just, write!</p>


Ancient writing on papyrus scroll

Just write

This is the web presence of Marcello Palmitessa, a passionate front-end developer from Italy

Writings