Web in January - Newsletter by Agney

Python 2.7 was removed from macOS in this update. Developers should use Python 3 or an alternative language instead.

                            January 31, 2022

                Web in January - Newsletter by Agney

                        That’s the first month of 2022 and most places are drowning in Omicron cases. The virus must be the only being who went through the whole year with reinvention. I hope all of you are safe and doing well.
This Newsletter is turning 2 with this issue 🎉 January of 2020 was my first issue and it’s been a spectacular journey. It’s something I started during a new year to force myself to read more and to know it has helped a few more people is very pleasing. Thank you for all the feedback, let’s have a wonderful year ahead. 

Open Source community had a new shocker this week with popular projects - faker and colors being intentionally sabotaged to output “LIBERTY LIBERTY LIBERTY” by the founder developer. Also, a reference to Aaron Swartz. This broke several other packages that were depending on these projects. NPM saw these actions as malicious and proceeded to revert the package while it’s parent company decided to block the developer’s access altogether. Here’s worthy links to find out more:

Original Commit - colors.js
What really happened to Faker.js?
Open source developers, who work for free, are discovering they have power - TechCrunch

Releases

Firefox Android - comes with Total Cookie Protection build in.
Parcel CSS - Parcel Bundler now has a CSS parser, transformer and minifier completely written in Rust.
Class Sorting Tailwind Classes with Prettier - After many extensions and plugins, tailwind now has official class sorting with Prettier and it sorts to a default no config recommended order. 
MacOS 12.3 - This release is important because Python 2.7 was removed from macOS in this update. Developers should use Python 3 or an alternative language instead.
Topics API from Google - Because everyone is isolating third party cookies, advertisers need a different API to communicate with users. Google is the company to lead the pack coming up with FloC API which we had discussed on a previous newsletter. Now it is being replaced by the new Topics API - the gist being that every browser saves a list of topics relevant to the user which is then shared with the advertisers. 
Private Network Access - Introducing Preflights - Chrome is deprecating direct access to private network endpoints from public websites as part of the Private Network Access (PNA) specification. Preflight request will carry a new header, Access-Control-Request-Private-Network: true, and the response to it must carry a corresponding header, Access-Control-Allow-Private-Network: true

Tutorials

Could Rust be the Future of JavaScript Infrastructure? - Lee Robinson lists down tools that have been taken over by Rust and discusses future implications. 
A New Container Query Polyfill That Just Works - The pollyfill is great, so are the use cases listed for container queries in this blog.
Safari & IndexedDB Leaks - Safari had a bug with indexed DB details being leaked to other sites. Because this bug was in WebKit, every browser on iOS had this issue and could only be fixed by updating the OS itself. Weird things a trillion dollar company has to do.
Rising JavaScript Stars - 2021 - Survey results are out and some are bound to surprise you. The most popular project is zx by Google (who would have figured that out) and most popular CSS-in-JS tool turns out to be Vanilla Extract (something I wanted to try for a long time, may be now)
Exploring @property and its Animating Powers
 - The new @property feature in CSS allows you to specify what to animate and how. 

everything inside a DNS packet https://t.co/nBntko9E2G pic.twitter.com/MGzkNrlMcx
— 🔎Julia Evans🔍 (@b0rk) January 27, 2022

🔖 For the bookmarks: Optimum  order for performance:

<br />
preconnect<br />
<script async></script><br />
CSS with <a href="https://twitter.com/Imports?ref_src=twsrc%5Etfw&utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney">@imports</a><br />
sync JS<br />
sync CSS<br />
preload<br />
<script defer></script><br />
prefetch / prerender<br />
everything else (SEO, icons, open graph)<br />
<br />
via <a href="https://twitter.com/csswizardry?ref_src=twsrc%5Etfw&utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney">@csswizardry</a> <a href="https://twitter.com/hashtag/webexpo?src=hash&ref_src=twsrc%5Etfw&utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney">#webexpo</a><br />
<a href="https://twitter.com/hashtag/webperf?src=hash&ref_src=twsrc%5Etfw&utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney">#webperf</a> <a href="https://t.co/Xar1kAjCY5?utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney">pic.twitter.com/Xar1kAjCY5</a></p>— Smashing Magazine (@smashingmag) <a href="https://twitter.com/smashingmag/status/1440697011985018881?ref_src=twsrc%5Etfw&utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney">September 22, 2021</a></blockquote>
<script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
</div></body></html><h2>In the Spotlight 🔦</h2>
<p>It was a month Wordle to take off. If you aren’t privy to the game that has taken over Internet, here’s my hot picks.</p>
<ul>
<li><a href="https://www.powerlanguage.co.uk/wordle/?utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney" target="_blank">Wordle</a> - The game itself</li>
<li><a href="https://www.cnet.com/how-to/wordle-explained-everything-to-know-about-the-viral-word-game/?utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney" target="_blank">Wordle Explained</a></li>
<li><a href="https://www.nytimes.com/2022/01/03/technology/wordle-word-game-creator.html?utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney" target="_blank">Wordle is a Love Story - NYT</a></li>
</ul>
<p>Anyway, Internet’s best creators got over to building Wordle overnight and here’s my picks.</p>
<ul>
<li><a href="https://stackblitz.com/edit/vitejs-vite-jjggsx?utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney" target="_blank">Wordle in Vue by creator Evan You</a></li>
<li><a href="https://www.youtube.com/watch?v=Qxn4-bTOx0g&utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney" target="_blank">Wordle Clone by Dan Abramov</a></li>
</ul>
<p>But more than any of these, Wordle is proof of how a simple JavaScript app with a single developer can take over the World. If that doesn’t simple you to create, I don’t know what will. </p>
<h2>In Other News</h2>
<ul>
<li><a href="https://www.theverge.com/22872486/hp-president-alex-cho-hp-business-consumer-laptops?utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney" target="_blank">Pandemic & laptop categories</a> - More people staying at home also meant that people are diversifying what they can do online. This means each laptop has to support a wide range of features and they are starting to do so. Better Conferencing surely being one of them, remember Apple’s webcams?</li>
<li><a href="https://www.axios.com/theranos-elizabeth-holmes-verdict-df20ad3f-95bd-400c-bf42-a379ade65c2c.html?utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney" target="_blank">Theranos founder Elizabeth Holmes found guilty
</a> - Theranos is the biggest scam of recent times from Silicon Valley, <em>The Inventor: Out for Blood in Silicon Valley</em> is worth the watch if you aren’t aware of how this played out. </li>
<li><a href="https://www.theverge.com/22870203/ces-2022-best-of-gadgets-concepts-tech?utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney" target="_blank">Best Gadgets of CES 2022</a> - CES concluded this month and while the new take up of COVID cases did dull procedures, there were bright spots. Samsung’s Odyssey Arc looks amazing to say the least.</li>
<li><a href="https://www.smashingmagazine.com/2021/09/reducing-carbon-emissions-on-web/?utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney" target="_blank">Reducing Carbon Emissions On The Web</a> - Did you know the Internet can have the same effect on the world as fossil fuels? How do we counter this?</li>
</ul>
<h2>Looking Forward</h2>
<ul>
<li><a href="https://blog.vuejs.org/posts/vue-3-as-the-new-default.html?utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney" target="_blank">Vue 3</a> - Vue 3 will become the new default version on Monday, February 7, 2022!</li>
<li><a href="https://nodecongress.com/?utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney" target="_blank">Node Congress</a> - February 17-18</li>
<li><a href="https://www.mwcbarcelona.com/?utm_source=agney&utm_medium=email&utm_campaign=web-in-january-newsletter-by-agney" target="_blank">MWC Barcelona</a> - Feb 28</li>
</ul>

            </div>

                <div class="epilogue">
                    <div class="epilogue-header">

                            Don't miss what's next. Subscribe to JEM Newsletter - JavaScript Every Month:

                    </div>

<div id="subscribe-form">
    <div class="widget subscription-form-fallback">
        <form
            method="post"
            action="/api/emails/embed-subscribe/agney"
        >
            <input
                id="email"
                required=""
                type="email"
                placeholder="Your email (you@example.com)"
                autocomplete="email"
            />
            <button id="submit" type="submit">Subscribe</button>
        </form>
    </div>
</div>

<script id="subscriber_email" type="application/json">
    null
</script>

<script id="referring_subscriber_id" type="application/json">
    null
</script>

<script id="referer" type="application/json">""</script>

<script>
    var NEWSLETTER = JSON.parse(document.getElementById('newsletter').textContent);
    var SUBSCRIBER = null;
    var SUBSCRIBER_EMAIL = JSON.parse(document.getElementById('subscriber_email').textContent);
    var REFERRING_SUBSCRIBER_ID = JSON.parse(document.getElementById('referring_subscriber_id').textContent);

    var TINT_COLOR = NEWSLETTER.tint_color || '#0069FF';
    document.documentElement.style.setProperty("--tint-color", TINT_COLOR);
    var referer = JSON.parse(document.getElementById('referer').textContent);
    var account = null;

        var VARIANT = "archive_page";

</script>
<script src="https://sniperl.ink/v1/sniper-link.js" defer></script>
<link  rel="stylesheet" href="/static/subscribe_form-AnVA1OYW.css" />
<script type="module" crossorigin="" src="/static/subscribe_form-DNEYAAzP.js"></script>
<link href="/static/modulepreload-polyfill-Ou6BN_Xl.js" type="text/javascript" crossorigin="anonymous" rel="modulepreload" as="script" />
<link href="/static/_plugin-vue_export-helper-Cnlj6nXJ.js" type="text/javascript" crossorigin="anonymous" rel="modulepreload" as="script" />

                </div>

        </article>

    </div>

    <script type="application/javascript">
        // The function
        function createDialogs(selector) {
            if (!selector) {
                return console.error('Missing selector argument');
            }

            const buttonTemplate = document.createElement('button');
            buttonTemplate.classList.add('lightbox-button');
            buttonTemplate.setAttribute('aria-haspopup', 'dialog');

            const dialogTemplate = document.createElement('dialog');
            dialogTemplate.classList.add('lightbox');
            dialogTemplate.innerHTML = `
      <form method="dialog">
        <button type="submit">
        <span aria-hidden>×</span>
        <span class="sr-only">Close dialog</span>
        </button>
        <span aria-hidden></span>
      </form>
    `;

            function createDialog(img) {
                const button = buttonTemplate.cloneNode();
                const dialog = dialogTemplate.cloneNode(true);
                const form = dialog.querySelector('form');
                const span = dialog.querySelector('form > span');

                span.before(img.cloneNode());
                span.textContent = img.getAttribute('alt');
                img.before(button);
                button.append(img);
                button.after(dialog);

                button.addEventListener('click', () => {
                    dialog.showModal();
                });

                dialog.addEventListener('click', (event) => event.target === dialog && dialog.close());
            }

            [...document.querySelectorAll(selector)].forEach(createDialog);
        }
        createDialogs(".email-body-content img:not(.link-image):not(.bandcamp__thumbnail)")
    </script>

                <div class="social-networks-container">
                    <div class="social-networks">

    <a href="https://github.com/agneym">
        <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <title>GitHub