<p>A friend of mine recently pointed me out to the <a href="https://www.sketchin.com/">Sketchin website</a> for its smooth animations in the home page and the menu:
<video controls src="https://www.datocms-assets.com/11897/1617442516-ui-lab-1-sketchin-appletv.mp4"/></p>

<p>I really like it, so I wanted to recreate most of it on my own using React and <a href="https://greensock.com/">Gsap</a>.</p>

<p>Here the final result:
<video controls src="https://www.datocms-assets.com/11897/1617463781-ui-lab-one-appletv.mp4"/></p>

<p>You can find the end result at this url: <a href="https://ui-lab-one.vercel.app/">UI Lab One</a> and the source code on <a href="https://github.com/aozora/ui-lab">GitHub</a>.</p>

<blockquote>
<p>Note: for the sake of the exercise, the code target only tablet or desktop devices</p>
</blockquote>

<h2>Into the code</h2>

<p>The small application I created for this lab, scaffolded with <a href="https://create-react-app.dev/">Create React App</a>, has a very simple structure:</p>

<pre><code>function App() {
  return (
    &lt;AppProvider&gt;
      &lt;div className=&quot;App&quot;&gt;
        &lt;Sidebar /&gt;
        &lt;MenuPanel /&gt;

        &lt;Hero /&gt;
        &lt;Services /&gt;
        &lt;Media /&gt;

      &lt;/div&gt;
    &lt;/AppProvider&gt;
  );
}
</code></pre>

<h3>AppProvider component</h3>

<p>Just before working on this lab, I read the very insightful article <a href="https://kentcdodds.com/blog/how-to-use-react-context-effectively">How to use React Context effectively</a> by Kent C. Dodds, so I wanted to use the Context API to avoid props-drilling; the implementation of the AppProvider component comes from that article.</p>

<h3>Sidebar component</h3>

<p>The sidebar component contains only the toggle burger button and the bare minimum logic to handle the toggle:</p>

<pre><code>const Sidebar = () =&gt; {
  const { menuIsOpen } = useAppState();
  const dispatch = useAppDispatch();

  return (
    &lt;div className={`${styles.Sidebar} ${menuIsOpen ? styles.SidebarIsOpen : &#39;&#39;}`}&gt;
      &lt;button type=&quot;button&quot; className={styles.SidebarBurger} onClick={() =&gt; dispatch({ type: &#39;toggleMenu&#39; })}&gt;
        &lt;span /&gt;
        &lt;span /&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  );
};
</code></pre>

<p>The button animation is handled in pure css using transform transitions (see <a href="https://github.com/aozora/ui-lab/blob/main/src/components/Sidebar.module.scss">Sidebar.module.scss</a>.
Clicking the button will dispatch the toggleMenu action that via context will be passed to the MenuPanel component.</p>

<h3>MenuPanel component</h3>

<p>This component is the full screen menu toggled by the sidebar button:</p>

<pre><code>const MenuPanel = () =&gt; {
  const { menuIsOpen } = useAppState();
  const menuPanelRef = useRef();
  const menuToRevealAndStagger = useRef();
  const content1ToReveal = useRef();

  const timeline = useMemo(() =&gt; {
    return gsap.timeline({ paused: true });
  }, []);

  useEffect(() =&gt; {
    // animate menu panel
    timeline.fromTo(
      menuPanelRef.current,
      {
        x: &#39;-100%&#39;,
        zIndex: -1
      },
      {
        x: 0,
        zIndex: 10,
        duration: 1.2,
        ease: &#39;expo.inOut&#39;
      }
    );

    // animate menu links
    const elements = menuToRevealAndStagger.current.querySelectorAll(&#39;li&#39;);
    timeline.fromTo(
      elements,
      {
        autoAlpha: 0,
        x: &#39;-50px&#39;,
        y: &#39;0%&#39;
      },
      {
        autoAlpha: 1,
        x: &#39;0%&#39;,
        y: &#39;0%&#39;,
        duration: 0.7,
        stagger: 0.05,
        onComplete() {
          clearOpacity(elements);
        }
      }
    );

    // animate content 1
    const contents = content1ToReveal.current.querySelectorAll(&#39;*&#39;);
    timeline.fromTo(
      contents,
      {
        x: &#39;-100%&#39;
      },
      {
        x: 0,
        duration: 0.5
      },
      &#39;&lt;&#39;
    );
  }, [timeline]);

  useEffect(() =&gt; {
    if (menuPanelRef.current) {
      if (menuIsOpen) {
        timeline.play();
      } else {
        timeline.reverse();
      }
    }
  }, [menuPanelRef, menuIsOpen, timeline]);

  return (
    &lt;section ref={menuPanelRef} className={`${styles.MenuPanel} ${menuIsOpen ? styles.MenuPanelIsOpen : &#39;&#39;}`}&gt;
      &lt;header&gt;
        &lt;nav&gt;
          &lt;ul ref={menuToRevealAndStagger}&gt;
            &lt;li&gt;
              &lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href=&quot;#&quot;&gt;Services&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href=&quot;#&quot;&gt;Projects&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;aside ref={content1ToReveal}&gt;
          &lt;h6&gt;Lorem ipsum sin ut dolorem&lt;/h6&gt;
          &lt;p&gt;Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&lt;/p&gt;
        &lt;/aside&gt;
      &lt;/header&gt;
    &lt;/section&gt;
  );
};
</code></pre>

<p>The code is simple: </p>

<ul>
<li>first it receive the menuIsOpen from the context hook (useAppState), </li>
<li>then we have 3 refs used to reference the 3 container elements to be animated when the menuIsOpen change value.</li>
<li>create a paused GSAP Timeline, and memoize it with useMemo.</li>
<li>the first useEffect just add to the timeline all the animations to the 3 refs</li>
<li>the last useEffect is the core, meaning that runs when menuIsOpen change value, so it just play the animation timeline forward (when opening the menu) or in reverse (to close the menu)</li>
<li>the <code>&lt;ul&gt;</code> and <code>&lt;aside&gt;</code> elements, have the CSS property <code>overflow: hidden;</code>, this is necessary to apply the reveal effect, so their children will be animated giving the idea they are in a sort of window.</li>
</ul>

<h3>Services component and the dark/light switch</h3>

<p>Content in home page is sectioned in <code>&lt;article&gt;</code> elements all with the default height of 100% of the viewport height; in this way when scrolling the home content to the 2 articles, thanks to the GSAP ScrollTrigger plugin, is easy to change the background color to dark (and the foreground to white) with a smooth transition to easy the effect to the eyes.</p>

<pre><code>const Services = () =&gt; {
  const servicesRef = useRef();
  const p1Ref = useRef();
  const p2Ref = useRef();
  const p3Ref = useRef();

  useEffect(() =&gt; {
    if (servicesRef.current) {
      gsap.fromTo(
        [p1Ref.current, p2Ref.current, p3Ref.current],
        {
          autoAlpha: 0,
          y: &#39;150%&#39;
        },
        {
          duration: 1,
          autoAlpha: 1,
          y: 0,
          stagger: 0.5,
          ease: &#39;circ.out&#39;,
          scrollTrigger: {
            trigger: servicesRef.current,
            start: &#39;top center&#39;, // when the top of the trigger hits the bottom of the viewport
            end: &#39;bottom center&#39;, // end when the bottom of the trigger hits the top of the viewport
            toggleClass: { targets: &#39;body&#39;, className: &#39;theme-dark&#39; } // when triggers, change the class on the body
          }
        }
      );
    }
  }, []);

  return (
    &lt;article ref={servicesRef} className={styles.Services}&gt;
      &lt;div&gt;
        &lt;h1&gt;Lorem Ipsum sin ut dolorem&lt;/h1&gt;
        &lt;footer&gt;
          &lt;p ref={p1Ref}&gt;Vero omnis sed recusandae voluptas repellat in omnis. Et maiores cumque incidunt voluptatum est.&lt;/p&gt;
          &lt;p ref={p2Ref}&gt;Vero omnis sed recusandae voluptas repellat in omnis. Et maiores cumque incidunt voluptatum est.&lt;/p&gt;
          &lt;p ref={p3Ref}&gt;Vero omnis sed recusandae voluptas repellat in omnis. Et maiores cumque incidunt voluptatum est.&lt;/p&gt;
        &lt;/footer&gt;
      &lt;/div&gt;
    &lt;/article&gt;
  );
};
</code></pre>

<p>An additional effect is set to the paragraphs, that on scroll will fade-in and move from the bottom.</p>

<p>That&#39;s all for this lab!</p>


UI Lab #1

<p>This post feature the latest news and resources from last January 2021 from the Front-end Development community that, in my personal opinion, are remarkable to be saved and shared.</p>

<h2>Performance</h2>

<h3>Front-End Performance Checklist 2021</h3>

<p>An annual front-end performance checklist (available as PDF, Apple Pages, MS Word), with everything you need to know to create fast experiences on the web today, from metrics to tooling and front-end techniques. Updated since 2016.</p>

<ul>
<li>Metrics, targets</li>
<li>Bundling</li>
<li>Delivery</li>
<li>Single-Page Apps</li>
<li>HTTP/2, HTTP/3</li>
<li>3rd-party, JS bundles</li>
<li>Tooling</li>
<li>TL;DR Checklist</li>
</ul>

<p><img src="https://www.datocms-assets.com/11897/1615021632-sm-perf-3.webp" alt=""></p>

<p>Reference:
<a href="https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/">https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/</a></p>

<h3>How We Improved Smashing Magazine Performance</h3>

<p>a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. 
With some of the mistakes we’ve made, and some of the unexpected changes that helped boost all the metrics across the board.</p>

<p>Reference:
<a href="https://www.smashingmagazine.com/2021/01/smashingmag-performance-case-study/">https://www.smashingmagazine.com/2021/01/smashingmag-performance-case-study/</a></p>

<h2>Resources</h2>

<h3>How To Optimize Progressive Web Apps: Going Beyond The Basics</h3>

<p>Progressive web applications are proven to raise user engagement and keep the costs down effectively. Building a modern PWA requires more than just the core setup to keep up with the user’s expectations. 
Let’s take a first-hand look at adding contemporary characteristics to PWAs, from functioning offline to user-friendly permission requests.</p>

<p>Reference:
<a href="https://www.smashingmagazine.com/2020/12/progressive-web-apps/">https://www.smashingmagazine.com/2020/12/progressive-web-apps/</a></p>

<h3>Maximally optimizing image loading for the web in 2021</h3>

<p>Outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.</p>

<p>Reference:
<a href="https://www.industrialempathy.com/posts/image-optimizations/">https://www.industrialempathy.com/posts/image-optimizations/</a></p>

<h3>CORS Visualized</h3>

<p>A visual guide on:
* Same-Origin Policy
* Client-side CORS
* Server-side CORS
* Preflight Requests
* Credentials</p>

<p>Reference:
<a href="https://dev.to/lydiahallie/cs-visualized-cors-5b8h">https://dev.to/lydiahallie/cs-visualized-cors-5b8h</a></p>

<h3>Building a sidenav component</h3>

<p>A prototyped Sidenav component for the web that is responsive, stateful, supports keyboard navigation, works with and without Javascript, and works across browsers. </p>

<p>Reference: 
<a href="https://web.dev/building-a-sidenav-component/">https://web.dev/building-a-sidenav-component/</a></p>

<h3>Orbit</h3>

<p>“Open source design system for your next travel project”
Orbit, an open source design system for travel-related projects with responsive components in Figma, React, Swift, Kotlin and corresponding docs</p>

<p><video src="https://www.datocms-assets.com/11897/1616340395-orbit.mp4" controls/></p>

<p>Reference: 
<a href="https://orbit.kiwi/">https://orbit.kiwi/</a></p>

<h3>State of JS 2020 Results</h3>

<ul>
<li>Demographics</li>
<li>Features</li>
<li>Technologies</li>
<li>Other Tools</li>
<li>Resources</li>
<li>Opinions</li>
<li>Awards</li>
<li>Conclusion</li>
</ul>

<p>Reference:
<a href="https://2020.stateofjs.com/en-US/">https://2020.stateofjs.com/en-US/</a></p>

<h2>Did you Know ?</h2>

<h3>CSS has…variables !!!</h3>

<p>Also known as CSS Custom Properties, they are supported in all modern browsers, have a huge potential to change how we write and structure CSS and to a lesser extent, how we use JavaScript to interact with UI components.</p>

<p>References:</p>

<ul>
<li><a href="https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/">https://www.smashingmagazine.com/2017/04/start-using-css-custom-properties/</a></li>
<li><a href="https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/">https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/</a></li>
<li><a href="https://caniuse.com/css-variables">https://caniuse.com/css-variables</a></li>
</ul>

<h3>INPUTMODE</h3>

<p>The <code>inputmode</code> attribute is great to give hints to the browser what virtual keyboard to show on mobile: </p>

<p><img src="https://www.datocms-assets.com/11897/1615022248-input-mode.png" alt=""></p>

<p>Reference:</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode</a></p>

<h2>JavaScript News</h2>

<h3>React Server Components</h3>

<p>(still in research and development!)</p>

<ul>
<li>Improve the trade-off between performance, maintainability, effort</li>
<li>-29% Bundle size!</li>
<li>Opt-In: client-side React is still there</li>
</ul>

<p>References:</p>

<ul>
<li><p><a href="https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html">https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html</a></p></li>
<li><p><a href="https://vercel.com/blog/everything-about-react-server-components%5D(https://vercel.com/blog/everything-about-react-server-components)">https://vercel.com/blog/everything-about-react-server-components](https://vercel.com/blog/everything-about-react-server-components)</a></p></li>
<li><p><a href="https://www.youtube.com/watch?v=TQQPAU21ZUw&feature=emb_logo">https://www.youtube.com/watch?v=TQQPAU21ZUw&amp;feature=emb_logo</a></p></li>
</ul>

<h3>React Suspense in Practice</h3>

<p>How Suspense works, what it does, and seeing how it can integrate into a real web app. We’ll look at how to integrate routing and data loading with Suspense in React.</p>

<p>Reference:
<a href="https://css-tricks.com/react-suspense-in-practice/">https://css-tricks.com/react-suspense-in-practice/</a></p>

<h3>Taiga UI, a new Angular UI Kit</h3>

<p>Modular UI components with several layers of abstractions as separate packages.</p>

<p>References:</p>

<ul>
<li><a href="https://taiga-ui.dev/">https://taiga-ui.dev/</a></li>
<li><a href="https://github.com/TinkoffCreditSystems/taiga-ui">https://github.com/TinkoffCreditSystems/taiga-ui</a></li>
<li><a href="https://medium.com/its-tinkoff/taiga-ui-6e7b8afa19a9">https://medium.com/its-tinkoff/taiga-ui-6e7b8afa19a9</a></li>
</ul>

<h3>Responsible JavaScript</h3>

<p>It’s a series of 3 articles that perform a deep analysis on the issues that JavaScript may cause to a website, from fall of performance, bad practices, and bundling improvements.</p>

<p>References:
* Part 1: <a href="https://alistapart.com/article/responsible-javascript-part-1/">https://alistapart.com/article/responsible-javascript-part-1/</a> 
* Part 2: <a href="https://alistapart.com/article/responsible-javascript-part-2/">https://alistapart.com/article/responsible-javascript-part-2/</a>
* Part 3: <a href="https://alistapart.com/article/responsible-javascript-part-3/">https://alistapart.com/article/responsible-javascript-part-3/</a></p>

<h3>Refactoring optional chaining into a large codebase: lessons learned</h3>

<p>Reference:
<a href="https://css-tricks.com/react-suspense-in-practice/">https://css-tricks.com/react-suspense-in-practice/</a></p>

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


 Sakura at Daigo-ji Temple, Kyoto, Japan. Photo by Xiaojun Deng (https://flic.kr/p/mZDiVC)

Front-end Collection #2

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


Timeline of HTML releases; source https://www.w3.org/

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