Tagged “javascript”

Good pitch

Cool idea! Adds a keyboard shortcut to set document.designMode = 'on' to allow inline visual editing.

Also his inline code demo plugin looks great

very solid collection of works

sidenote why does medium use so much damn cpu

bad enough that CloudFlare is automatically updating

Yesterday I was messing around on Replit - created an express app and had it doing routing and serving static files.
This was going pretty well, but the main downside was deploy times taking too long compared to static sites (which are basically instant).
Also being tied to their editor (resource-intensive on old laptop) rather than just editing local files.

First step, let’s try just moving the whole monolith to different hosting.
Log in to google cloud console, be confused that I keep landing on the Compute Engine API page instead of Compute Engine. I just want to start a VM, Larry!
Have a VM starting up, and learned that I tragically wasted my $300 6 years ago.
Now how are we going to put things on here. FTP or SCP or something? Ok there is gcloud.
I have an old version of the client on laptop, it wants python2.7.
Try updating the util, it was installed with AUR, and needs other AUR packages updated too.
Screw this try again later.

Back to replit!

So, the problem to fix is deploy times for static changes being too slow.
Alternative solution, separate apps!
This also gives an easy migration path to a separate domain!
Nice that writing this down has helped figure out the problem.

So, new Replit project, this time static site with auto refresh.
Copy over static files from original project and we will deploy to new subdomain

Side mission: need to add another A and TXT record to cloudflare.

Back to static site.
Need to move a bunch of code to the frontend for handling auth.
The callback URL to store tokens needs to do it for the new domain.
Then switch back to backend app, add or update the POST endpoints to get tokens without cookies.
Or maybe setup CORS but cbf right now.

Check for token in request body, otherwise fall back to cookie.
Add new auth callback URL to Spotify app.
Working!
Now both domains are working!

Now paths on the old domain to redirect to the new one, then can cut out a bunch of code from backend related to that. Now we are migrated!

Can now deploy static site changes FAST.

oh no

good feature checklist when starting #projects for phones

awesome idea. Keep original links, redirect to archive if not found

Audacity for browser

how to run JS snippets when you’re on your phone

Snippet to auto-scroll a page but 1 line every 3s. Used for reading on Project Gutenberg.

javascript:(function() {

var scrollEvery = 3 // seconds
var scrollByPx = 16 // 16px one row or so

var a;
function autoscroll() {
  a = window.setTimeout(scrollOneRow, scrollEvery * 1000);
}

function scrollOneRow() {
  window.scrollBy(0, scrollByPx);
  autoscroll();
}

function stopAutoscroll() {
  clearTimeout(a);
}

autoscroll()

})();

A good response to falling out of love with coding. There are times it feels like passion, times it feels like drudgery and work.
There’s a balance somewhere there.

I had initially hoped this elimated choices by being a single set of things for local-first dev.

Upsides are you are tweaking an existing app, improving a familiar experience. And same-origin requests vs having to mess with public APIs.

With a bookmarklet!

a “streaming replication tool” for SQLite databases. Copies the log file continuously

Loading article…

Incredible project

Performance baseline has shifted quite far up (especially network) but targeted features are still quite far behind current

Have seen this a bit lately in logs. A lot of 3 or 4 year-old versions of Chrome out there

Hand tracking in the browser!

suggestions for config of different types of PWA

Sort of like a switch statement with type annotations

I wish people would only use this for good. A stupid arms race that just makes it harder to automatically download utility bills.

not p2p for files under 5gb, but they are deleted after a day.

This looks awesome

Good article, and some other good recs in the comments

Gross and too real.

I don’t know if I am as blown away as Alex but this is very cool. Like machine pair programming with text.

Short story, inspired by a GitHub thread about semicolons.

Excellent writeup. The CORS example dot points are a great example of good clear security explanations.

Reading this made me feel a little more justified in my general distrust of browser extensions. They have so much potential power!

Some of these are getting quite outrageous. But I do love the level of depth and detail of this.

From hackernews.

GitLab security scanning has a similar issue of false positives (many Node security vulns in frontend-only code). But at least they can be marked as resolved!

Awesome concept. And a nice disclaimer on context menu:

Great summary of the deluge of tools being made (from 2015!). But with a positive take at the end:

Instead of telling people to stop creating new js frameworks. Instead of discouraging people from adding to the vast amount of available tools, I’m going to encourage people to build even more tools. Pick a problem and try to solve it better than anyone else has before. Having better tools will help us push the web forward. And it’s okay if 90% of them are bad. The 10% will be worth it.

Cool write up, some interesting points:

• operational transforms are complicated (mainly used for text collab)
• last value written to server wins
• ignore incoming changes from server while writing, to avoid flicker
• fractional indexing for reordering
• for undo, if things were changed (by someone else), that history is updated to prevent conflicts with redo

I really like the original one, and this is a solid reply

I recently went on a short anti-reduce rant at work. Was in defence of forEach and local mutations, but I came to the conclusion that it’s mostly just because I don’t like reduce. Mostly when combined with fat arrow functions (which I also don’t particularly like).

Writing reduce() makes you look smart. Reading reduce makes you feel stupid.

The recent HTTP 203: Is reduce() bad? covers many of my issues, the tldr:

• the method signature is unpleasant
• most of the time you could use filter + map
• use reduce if you want a single value (e.g. sum)

reduce has some use-cases, but they are rarer than its usage suggests. Most of the time I favor filter or forEach.

Last month I went to AMP Roadshow in Melbourne. Was a day of presentations and a bit of playing around with AMP stuff. AMP appears to be quite a different project to what it was three years ago.

AMP is no longer an ancronym for Accelerated Mobile Pages - now it’s the project name. This AMP is meant as more of a lightweight [citation needed] framework for making webapps, rather than just a way to get better Google rank and a ⚡ next to your page title.

Accelerated Mobile Pages faced some deserved backlash at first. Fixed top bars, hard-to-share links, and double loading to get to actual content were all big negatives. The limited interactive elements meant you got a very stripped down version of the page, and clicking on anything meant you usually loaded the full, now-even-more-bloated-because-we-assumed-AMP-would-take-care-of-it page.

The ‘keeping people on Google rather than their own servers’ aspect is an ongoing downside. But as a simple app framework it shows promise. Like what I had wanted from Polymer Elements but with a friendlier API. The better solution is obviously “just make faster pages”. But the industry has had a demonstrably hard time doing that and page bloat continues to grow out of control.

The AMP library contains a lot of components now and seems like a decent way to make a PWA (further research on this pending). It is probably too late to rename, but for many the name still carries a lot of baggage from the bad early days. Will be curious to see if it overcomes the rep, or that is just gradually forgotten.

Or if this is all just a ruse and it’s still a Google marketing play. Time will tell.

This week’s thing: open an instance of Chrome that gives mock data for particular URLs.

Useful to mock backend responses when you don’t want to have to donate RAM to minikube when developing locally

This snippet signs into local GitLab instance, and gives a fake response to the additional_endpoints.json URL

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch({ headless: false });
    const [page] = await browser.pages();

    await page.setRequestInterception(true);
    page.on('request', (interceptedRequest) => {
      if (interceptedRequest.url().includes('additional_metrics.json') {
        interceptedRequest.respond({
          metrics: {},
        });
      } else {
        interceptedRequest.continue();
      }
    });

    await page.goto('http://localhost:3001/users/sign_in');
    await page.type('input[name="user[login]"]', 'root');
    await page.type('input[name="user[password]"]', '5iveL!fe');
    await page.click('.qa-sign-in-button');

    await page.waitForSelector('.header-user-dropdown-toggle');

    // await browser.close();
  } catch (err) {
    console.error(err);
  })
});

The Magical Disappearing UI Framework - a JS framework with no runtime. You can write code in familiar looking components/templates, which gets compiled to vanilla JS to serve to the browser. Created by Rich Harris, of rollup fame. He seems to solo a crazy number of projects, usually small and fast.

• Docs have straightforward first example, then covers API docs. Missing some middle ground for setup, but very easy to follow
• Includes a CLI, for easy setup
• Main thing missing is hot/live reloading. For this can start by adding browser plugin or a build script to do this

Started with some sanity checks. bind:checked works! Seems like an overly simple thing to test for, but checkboxes are important to me.

Component structure and props looks pretty familiar. Looks quite similar to Vue, with some minor syntax differences. e.g. template interpolation uses single {} instead of double. Some parts look more like Handlebars, such as #each instead of v-for. But this makes the code vs template parts pretty clear and easy to see, which is good. Has getters and setters for mutating state, and event emitters.

Currently no SSR, but first render is pretty snappy. Generated code is so much nicer to debug that React/Vue.

TLDR: Looks good! Let’s make something with it.