joepie91

ES Modules are terrible, actually

This post was adapted from an earlier Twitter thread.

It's incredible how many collective developer hours have been wasted on pushing through the turd that is ES Modules (often mistakenly called "ES6 Modules"). Causing a big ecosystem divide and massive tooling support issues, for... well, no reason, really. There are no actual advantages to it. At all.

It looks shiny and new and some libraries use it in their documentation without any explanation, so people assume that it's the new thing that must be used. And then I end up having to explain to them why, unlike CommonJS, it doesn't actually work everywhere yet, and may never do so. For example, you can't import ESM modules from a CommonJS file! (Update: I've released a module that works around this issue.)

And then there's Rollup, which apparently requires ESM to be u

typebrook

gist - Manage your gist like a pro

All your notes, scripts, config files and snippets deserve version control and tagging!
gist is a simple bash script for gist management. It is lightweight(~700LOC) and dependency-free! Helps you to boost coding workflow.

• Getting Started
• Dependencies
• Basic Commands
• Update and clone gists from Github

XSystem252

How To Set Up a Raspberry Pi 4 with Archlinux 64-bit (AArch64) and Full Disk Encryption (+SSH unlock), USB Boot (No SD-Card) and btrfs

Written by: XSystem
First published on: 20 Dec 2020
Last updated on: 20 Dec 2020

[0] Introduction

Overview

ebidel

<script src="https://unpkg.com/@webcomponents/custom-elements"></script>

<style>
  body {
    margin: 0;
  }
  /* Style the element from the outside */
  /*
  fancy-tabs {
    margin-bottom: 32px;

cletusw

{
  // http://eslint.org/docs/rules/

  "ecmaFeatures": {
    "binaryLiterals": false,                    // enable binary literals
    "blockBindings": false,                     // enable let and const (aka block bindings)
    "defaultParams": false,                     // enable default function parameters
    "forOf": false,                             // enable for-of loops
    "generators": false,                        // enable generators
    "objectLiteralComputedProperties": false,   // enable computed object literal property names

paullewis

/*!
 * Copyright 2015 Google Inc. All rights reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software

padolsey

Number.prototype.to = function*(n) {
  let finish = n.valueOf();
  let start = this.valueOf();
  let finishLessThan = start >= finish;
  for (
    let i = start;
    finishLessThan ? i >= finish: i <= finish;
    i += finishLessThan ? -1 : +1
  ) yield i;
};

marvinhagemeister

/* eslint-disable no-unused-vars */
/* eslint-disable no-else-return */

// JSX constructor, similar to createElement()
export const h = (type, props, ...children) => {
	return {
		type,
		// Props will be an object for components and DOM nodes, but a string for
		// text nodes
		props,

shirakaba

Creating an Expo app in 2023

12th July, 2023. I'm going to try creating an iOS app called Paranovel, using Expo. My environment for mobile app dev (Xcode, Ruby, etc.) should be in reasonably good shape already as I frequently develop with React Native and NativeScript.

Creating the app

Go to https://docs.expo.dev, and see the Quick Start: npx create-expo-app paranovel

This runs with no problem, then I get this macOS system popup:

guilhermesimoes

As soon as I saw the new YouTube Player and its new morphing play/pause button, I wanted to understand how it was made and replicate it myself.

From my analysis it looks like YouTube is using [SMIL animations][1]. I could not get those animations to work on browsers other than Chrome and it appears [that they are deprecated and will be removed][2]. I settled for the following technique:

1. Define the icon path elements inside a defs element so that they are not drawn.

2. Draw one icon by defining a use element whose xlink:href attribute points to one of the paths defined in the previous step. Simply [changing this attribute to point to the other icon is enough to swap them out][3], but this switch is not animated. To do that,

3. Replace the use with the actual path when the page is loaded.