Automatically update your GitHub readme through GitHub Actions

Pawel Grzybek has set up a workflow that uses GitHub Actions’ Scheduled Events to automatically update his profile README.md. It runs every 6 hours and pulls in his RSS feed to populate the README.md

import fs from "fs";
import fetch from "node-fetch";
import parser from "xml2json";

const FEED_URL = "https://pawelgrzybek.com/feed.xml";
const TAG_OPEN = `<!-- FEED-START -->`;
const TAG_CLOSE = `<!-- FEED-END -->`;

const fetchArticles = async () => {
  const articles = await fetch(FEED_URL);
  const articlesText = await articles.text();
  const articlesJSON = parser.toJson(articlesText);
  const newC = JSON.parse(articlesJSON).rss.channel.item.slice(0, 5);

  return newC.map(({ title, link }) => `- [${title}](${link})`).join("\n");
};

async function main() {
  const readme = fs.readFileSync("./README.md", "utf8");
  const indexBefore = readme.indexOf(TAG_OPEN) + TAG_OPEN.length;
  const indexAfter = readme.indexOf(TAG_CLOSE);
  const readmeContentChunkBreakBefore = readme.substring(0, indexBefore);
  const readmeContentChunkBreakAfter = readme.substring(indexAfter);

  const posts = await fetchArticles();

  const readmeNew = `
${readmeContentChunkBreakBefore}
${posts}
${readmeContentChunkBreakAfter}
`;

  fs.writeFileSync("./README.md", readmeNew.trim());
}

try {
  main();
} catch (error) {
  console.error(error);
}

Fetch most recent posts to your GitHub profile page using GitHub workflow and Node.js →

💡 People have been doing lots of nice stuff with their README’s. There’s a curated list to be found at matiassingers/awesome-readme (and plenty of others if you search for them)

The Just in Case Mindset in CSS

Some nice examples of defensive programming in CSS by Ahmad Shadeed.

The just in case mindset aims to educate designers and developers to think ahead of time of some possible failure scenarios for a component. I called it just in case because that’s literally what it means. Just in case the title got longer, do this. Just in case this element has a sibling next to it, do that. It’s all about accounting for some edge cases.

It’s this “cover all the scenarios” that I find very interesting and fun to tackle when working on a project 🙂

The Just in Case Mindset in CSS →

React v17.0: A “Stepping Stone” Release

No new features, but a lot of changes, paving the way for future releases.

The React 17 release is unusual because it doesn’t add any new developer-facing features. Instead, this release is primarily focused on making it easier to upgrade React itself.

We’re actively working on the new React features, but they’re not a part of this release. The React 17 release is a key part of our strategy to roll them out without leaving anyone behind.

In particular, React 17 is a “stepping stone” release that makes it safer to embed a tree managed by one version of React inside a tree managed by a different version of React.

Here are the major changes:

  1. Changes to Event Delegation
  2. No Event Pooling
  3. Effect Cleanup Timing Change
  4. Consistent Errors for Returning undefined
  5. Methods of removing private exports

React v17.0 Release Candidate: No New Features →

Using JavaScript’s closest() Method to Capture a “Click outside” an Element

In Practical Use Cases for JavaScript’s closest() Method, Andreas Remdt talks about some nice use cases that use Element.closest().

I especially like this example with a menu. Click on one of the links and it will show the menu which has the class menu-dropdown. Clicking outside said menu will close it. It’s that latter one that leverages Element.closest().

var menu = document.querySelector(".menu-dropdown");

function handleClick(evt) {
  // Only if a click on a dropdown trigger happens, either close or open it.
  …
  
  // If a click happens somewhere outside .menu-dropdown, close it.
  if (!evt.target.closest(".menu-dropdown")) {
    menu.classList.add("is-hidden");
  }
}

window.addEventListener("click", handleClick);

Here’s a pen with the result:

🔥 If you haven’t checked out Hakim El Hattab’s dynamically drawn hit areas for menus, as talked about in Building Better Interfaces, be sure to do so, as they’re amazing:

The Opinionated Guide to React

Sara Vieira (@NikkitaFTW) published her book “The Opinionated Guide to React”. It’s 190 pages of React Recipes and Code Examples.

This book is my personal map of the tips, power-ups and not-so-obvious solutions to common questions and problems that I’ve come across during 4 years of React development. I have been finding some of the cheat codes and share them with you.

Even though I’m a seasoned React Developer, I’ve bought the book as:

  1. It’s quite a steal at $30
  2. It’s how you can support other devs

It was a pleasure to see many of the approaches I take – and teach about in my workshop React from Scratch – get confirmed in the book.

The Opinionated Guide to React →

httpstat – curl statistics made simple

httpstat visualizes curl(1) statistics in a way of beauty and clarity.

It is a single file🌟 Python script that has no dependency👏 and is compatible with Python 3🍻.

Installation through PiP or HomeBrew:

pip install httpstat
brew install httpstat

Once installed through one of those, you can directly call httpstat:

httpstat https://www.bram.us/

httpstat – curl statistics made simple →

Enhancing User Experience With CSS Animations

Great talk by Stéphanie Walter (starting at 39:00):

With practical examples, I show why certain animations work better than others and how to find the best timing and duration to build UI animations that “feel right”. I explain how our brain works, why and how animations contribute to improving user experience. And what you need to be careful about to build inclusive and accessible motion and avoid making some people sick.

Be sure to check the post on her website too, as it contains a full writeup, videos, examples, slides, links to extra resources, etc.

Enhancing User Experience With CSS Animations →

Use your Smartphone to move a pointer on a remote page with JavaScript

Sanjeet Chatterjee built this nice demo where your smartphone can act as a virtual pointer for a webpage.

With a fundamental shift to the web, we are able to do really cool things right from our browser. In this tutorial, we will be utilising the Generic Sensor API to turn your smartphone into a pointer with real-time tracking.

Just like you use a Wiimote (Wii Controller), you can tilt/move your phone to move the dot on the page:

The “quaternions” provided by the AbsoluteOrientationSensor API are converted to yaw and roll, which are then transferred to the canvas-page using websockets.

Unfortunately the demo doesn’t work on iOS (MobileSafari) or Firefox, as those browsers do not support AbsoluteOrientationSensor:

Data on support for the mdn-api__AbsoluteOrientationSensor feature across the major browsers

💡 Shown above is an interactive CanIUse.com embed, showing an always up-to-date support table. By the time you are reading this browser support might have become better.

For those browsers, a fallback using the deviceorientation event could be implemented.

Track Your Smartphone in 2D With JavaScript (Article) →
PhoneTrackingDemo Canvas Page →
PhoneTrackingDemo Controller →
PhoneTrackingDemo Source (repl.it) →

💵 This linked article is stuck behind Medium's metered paywall, which may prevent you from reading it. Open the link in an incognito window to bypass Medium's ridiculous reading limit.

☝️ If you lack an Android Smartphone with a modern Chrome on it, you can test it all out using Chrome on Desktop: Open the controller page in Chrome and use the DevTools’ Sensors panel to emulate/override the position of the device.

Blind Spot

While working with CCTV cameras in a project, I was reminded of this short film from 2007:

redaxios – The Axios API, as an 800 byte Fetch wrapper.

Axios has a great API that developers love. Redaxios provides that API in 800 bytes, using native fetch().

For those searching for ways to shave a few kilobytes off of their bundles, that’s less than 1/5th of the size. This is made possible by using the browser’s native Fetch API, which is supported in all modern browsers and polyfilled by most tools including Next.js, Create React App and Preact CLI.

To swith from axios to redaxios, you only need to adjust your import statement

import axios from 'redaxios';
// That's it! Use as you would normally

redaxios