Links

A useful web page to show visually what the mobile assistive keyboard looks like given different input types.

Specifically, and TIL - the inputmode can be different, i.e. using a type="text" field but inputmode="url" to help with partials like ".com" (if the input field didn't need URL validation for instance).

/via Bruce's reading list 300

Arduboy walkthrough with larger screen and great looking shell.

I'm not even that old and I've been hit with this stupid UX from iOS (thankfully it was a one off for me as I'm primarily an Android user)

2nd most active maintainer of Emotion writes on why they're leaving CSS-in-JS.

Mostly this is written documentation and proof of what I've been seeing and feeling every time I have to use a CSS-in-JS library.

Via Bruce Lawson https://twitter.com/brucel/status/1582787411469533184

A simple mono font, but also comes with it's own easy to use visual editor where you can work on an multi-layered 5x11 grid to customise the font to your liking - and download it as an .OTF file.

I think this might be one of the first balanced or non-invested reads of what "Web3" means and Sloan's opening notes really resonate:

It’s for kids. I mean that in a good way! I think Web3 has resonated powerfully with young people because it feels like something genuinely new, and it feels like it can be theirs. Who could argue with those feelings? Not me.

The notes go on and I come away with the same general sense that I've had so far of the crowd cheering on for Web3: it's about making money. Which is fine, the world runs on capitalism for the most part, it's just not entirely for me.

And I think that's the rub, the stories I know of the creation and the spread of the web (and indeed the internet) came from those wanting to share and do good. The stories I've read were never about making money but instead creating a place for others.

I will concede that I don't tend to read the "got rich by selling X web start up" - but it's that start in the web that's what drives me, and what I love about the web. It's what I love about the Open Web.

Web Zero if you will. It was about sharing, community, learning and finding a place in the world.

I hadn't realised that Medium had made JavaScript a requirement to be able to read any Medium post - I'd had JS disabled for ages on Medium just because of all the extra cruft they added.

But now, without JS, you only get the first few lines of content, and the rest is loaded entirely with JS - which… is stupid.

Scribe fixes all that and focuses entirely on the author's content.

I also used the FAQ to auto redirect and now I can read the full content without being distracted by Medium's horrid cruft.

Great example of taking back the web.

The Egghead screencasts themselves are excellent, but this is a treasure trove of tips for better screencasts.

Better screencasts often (to me) means simpler for your audience or student to follow along - which is only positive.

I've been struggling to get my head around voltage and amps - specifically after I bought a device that wanted 5V and 2A supply, but I was only giving it 1.6A I found the machine would fail (and reboot). The lack of amperage meant it wasn't able to supply the entire board.

Just the image from this post was enough to make it click in my head 👍

• VOLTAGE is like the pressure that pushes water through the hose. It is measured in volts (V).

• CURRENT is like the diameter of the hose. The wider it is, the more water will flow through. It is measured in amps (I or A).

• RESISTANCE is like sand in the hose that slows down the water flow. It is measured in ohms (R or Ω).

Free, Open Source and based solely on Open Data - simple API to boot.

Extremely useful for quick hacks, potentially useful for smaller projects (though limited to UK).

A great collection of tools similar to my own "CLI improved" post a few years back and includes some tools I use daily already (including jq, bat, fd and fzf).

There's some nice additions but the trick is to use them for local tooling and not for shared tools or workflows as it's less likely someone else will have a tool like sd installed.

The dog and xh look particularly interesting to me.

A combination of workers, websockets and "durable objects" (which I've not heard of before).

A detailed walk through of the tech is on CloudFlare - and I do hope the domain remains active for years to come, I'm certainly challenging the 90s teenager in me when I hear those sound effects.

Death match anyone!?

Effectively drop in an image, tweak some settings, get a TTF pixel font back out.

There's also a useful YouTube video on how to plan pixel font design called Make a Pixel Art Font

Super tiny font ideal for pixel based games.

This is an interesting and compelling post about using ENV values for secrets - something I do almost exclusively.

The only (big) problem I run into is that the solution offered is to use "docker secrets" which, for the vast majority of my own work isn't something that's available (I don't use docker for my development or deployments).

It makes me wonder, is there a simple alternative for those non-docker devs 🤔

My short interpretation of Alex Russell's post (or certainly in my mind):

• Apple have a monopoly

• Safari, for over a decade now, been way way behind

• Safari is not a modern browser - this is literally what devs and designers complained about IE6 for years.

Still, read Alex's post - it's packed full of data (as usual) and draws a clear conclusion that Apple, again, are delaying progress for the world wide web.

xip.io is a magic domain name that provides wildcard DNS for any IP address. Say the local IP is 10.0.0.1 - this works:

  foo.bar.10.0.0.1.xip.io   resolves to   10.0.0.1

I've been using Simplify (v1) for so long now that when I do come across the original Gmail design I find it visually jarring and overwhelming.

This is such a good product and I'm glad that it's moving into a paid for business model because I can give them my cash in the safe knowledge that the extension will continue to be supported even as Gmail changes under it.

Free is great, but longevity is better and always worth paying for.

I've been meaning to read this and work along side it for months - I've had the tab open on my phone for nearly 3 months!

There's a lot of my side project work that requires an AST to make better tools for developers, but I tend to err on the side of "hack a parser and protect with tests".

However, a full parser that generates a full Abstract Syntax Tree gives me a lot more options.

This post looks like a nice gentle introduction to how to start that.

Sara Soueidan's post on what keeps her focused is a great read (even if I did miss it being posted over a month ago).

Generally I have a similar process to my day to day work, but two things that specifically stood out for me. She writes

I’ve found that I like to create standing, and consume sitting.

I've realised I have exactly the same approach I just hadn't articulated it. Now that I've got words to go with this process, I'm intentionally switching from standing to sitting depending on the type of work I'm doing.

I've got an IKEA Bekant desk with a custom hack "Megadesk" - so switching to the predefined sit/stand positions is simple for me.

The other item that jumped in Sara's post was the note on music. I love music. Since as far back as I can remember, I've intentionally listened to music more often than not listening to music (i.e. it's always there) - but a funky track can sometimes be distracting and I've used Noisli (similar to Noizio that Sara mentions) for relaxation sounds, but it's not quite "in the zone music".

Sara recommends Brain.fm which thus far is actually very nice. (Here's Sara's referral code link if you're thinking of signing up).

Good stuff. Worth the read 👍

A massive list of single line commands (sometimes a bit convoluted, but still) with a simple explanation of what it does.

I wouldn't use this as a lookup to "do a thing" but it's extremely useful to browse and see what's possible and how you can go about it.

The list is based on linux so for Mac users (like me) won't be able to run every command, but they're still super useful for learning.

There's so many code examples that hint at running your code on the terminal prompt, and that hint is a $ character at the start.

I've written about how I run my blog in a way that this character isn't actually part of the content (it's an non-selectable CSS pseudo element), but this doesn't help when taking code from other sites.

Mikkel's tiny, tiny script is so elegant I pinched it right away. The script, called $ consists entirely of:

#!/bin/zsh
$@

Now whenever I paste a line starting with $ ... the command runs as I would intend. Perfect!

An excellent dissection of The Social Dilemma, a programme on Netflix that I've not been particularly interested in watching, partly because I'm fairly aware of how badly we've messed up our privacy, but also correct, it would seem, I avoided because of the self rewarding Silicon Valley boys claiming "I meant well" whilst carrying on similarly badly thought out paths.

One of the fascinating things about The Social Dilemma is that in one scene a person will proudly note that they are responsible for creating a certain thing, and then in the next scene they will say that nobody is really to blame for that thing. Certainly not them, they thought they were making something great! The insiders simultaneously want to enjoy the cultural clout and authority that comes from being the one who created the like button, while also wanting to escape any accountability for being the person who created the like button. They are willing to be critical of Silicon Valley, they are willing to be critical of the tools they created, but when it comes to their own culpability they are desperate to hide behind a shield of “I meant well.” The insiders do a good job of saying remorseful words, and the camera catches them looking appropriately pensive, but it’s no surprise that these “critics” should feel optimistic, they’ve made fortunes utterly screwing up society, and they’ve done such a great job of getting away with it that now they’re getting to elevate themselves once again by rebranding themselves as “critics.”

Lots of quotable material, and I'll definitely be forwarding this on to my family and friends in the hope they find time to read the full article.

/via Alice Bartlett

There's been many (many!) visualised sorting algos before, but this is particularly enjoyable - and beautiful a number of different algorithms are used to sort colour (a problem that's hard by itself).

Really interesting stuff, but also reminds me that picking an algorithms that suits the dataset is an important consideration.

Practice typing by retyping ENTIRE classic novels.

A much better technique than the random letter generator since you're building entire words.

Really nice music editor web app.

A useful focused post on React's memo function. Since moving away from classes (and forcing?) to use pure components with hooks, methods like shouldComponentUpdate can be a bit of a black box.

This post reminds me that all components are re-rendered (in memory at least) unless memo is used, and some of the pros and cons and use cases (and when you don't want to use it).

Frankly, doing "modern web dev" is a bit of minefield of these things...

Title is a bit misleading, but this tool gives a complete diff of the changes between versions.

This is especially useful when you want to vet a potential upgrade to a core package in a project, to understand what and why.

Or equally to look at a vulnerability fix to learn from the changes.

I really like this idea and more power to those of us who have full control of our online identities.

...an idea struck me: what if I could see all the outbound links on my blog?

I'm using markdown-it (where as Jim Nielsen is using marked) so I can definitely hook into the parser to generate all my outbound links.

I'll be adding this to my blog shortly - very clever.

This is a short list of some of the easiest things to fix for us developers and designers and is, what I'd call, bread and butter of our work.

This is the kind of article that needs to be shared amongst our colleagues so that they see the impact of sloppy/quick coding that results in a poor user experience. And again: this list of 5 items are incredibly simple to do right.

Let's build a web for everyone.

Excellent introduction to 2D game design methods and different techniques for collision detection (against platforms or baddies) as well as momentum considerations.

Usborne were the book publishers that as a kid, were strangely distributed via school parents' front lounge.

I remember rarely being able to afford these books though they were, and are, rife with great educational material.

I've since bought a few of these for my own kids, the modern books that is, but this page also includes a full gamut of the computing books of the 80s - in particular BASIC and how to write a wide range of adventure games - for free, via PDF.

Really great stuff even to learn some fundamentals of how computers and software works.

This one line of CSS solves the problem of a focus ring appearing when the mouse interacts (visually annoying) whilst importantly keeping it for keyboard navigation:

:focus:not(:focus-visible) { outline: none; }

Nice and simple, and bookmarking because I've been using it in more and more projects.

Really interesting assembly simulator, both from the simplicity of the UX (I believe it's based on the 6502) but also the source code is fairly easy to reason with.

I also like the visualisation of registers and memory during each step - very useful to learn from.

What a wonderfully cute font. Definitely going to be using this for some personal projects. Clean with a good dollop of retro.

APL font based on Adrian Smith's APL385 font with a fun, whimsical look, inspired by Comic Sans Serif.

I'm not a TypeScript user (I've tried and run in to my own issues), yet I do see the value in Types in code.

Certainly during development with introspect into the method I want to call which helps me make sure I'm using the arguments correctly.

JSDoc, in VSCode, lets me benefit from these type feature without actually jumping all the way into TypeScript and it lets me keep my code as JavaScript and it's just better documentation.

This post is a good primer on how to use JSDoc and how you can use it in a structured way around your code.

JSDoc provides type information as comments in JavaScript, so in that sense it is more similar to Flow than TypeScript. The difference is that JSDoc comments are standard JavaScript comments. So, no need for a build step to transpile to JavaScript or a plugin to strip the comments out like Flow.

When VSCode picks up on the type definitions in my code, it definitely makes coding just that little bit easier.

Excellent walk through of best practices for sign in forms - something we have to do each time.

Particular highlights for me are: the show password functionality (which also includes CSS and JS to show how it can be done), aria support and reports backing recommendations (particularly for mobile UI).

Amazing visual walkthrough a crypt reminding me that there were people many hundreds of years ago meticulously carving and scratching messages and stories into stone - for us, with computers so easily and freely. Wow.

Large collection of 126 fonts in both ttf format but also Spectrum raw 768-byte binary for use inside of ZX Spectrum games.

Though this is primary about an electron app, there's some very useful insights in this article on performance and changes that have direct impact on browser based load times - a useful read even if you're dipping in and out.

How to make a React app load ~30% faster – by tuning some configs and delaying some scripts

Single biggest win: if you're not code splitting, you're hurting your customers, which in turn, hurts your own business.

A massive collection of recipes, with actual code 😱 written (or collected) by Addy Osmani.

Having automated front end performance tracing is an exceptionally powerful tool, particularly to track regression.

I'm in no doubt that there's a handful of quick grab recipes on this page that I can deploy into my client's work today.

I love making tools (that keep out of your way). Nodemon turns 10 years old this year and this thread on reddit was sent my way.

It's been a long running question (and joke) as to how nodemon is actually pronounced:

node mon, no demon or nodémon (like pokemon)

I'm rather enjoying the replies :)

As BASIC returns to my radar, this was a bit of lovely timing on Twitter lately:

The first computer program in BASIC ran OTD in 1964. The language was designed by John Kemeny, Thomas Kurtz and Sister Mary Kenneth Keller. She, the next year, was the first US woman to earn a PhD in computer science.

The program:

10 PRINT 2+2
20 END

I love learning about these pockets of history.

This is Owen's great walkthrough of Microsoft's new laptop offering, and if I hadn't just upgraded my MacBook Pro (after 6 years of use), this would definitely be at the top of my list.

If you're looking for your next laptop, the Surface Book 3 is a capable, powerful replacement for the MacBook Pro, and it's only going to get better with time. I can't recommend it more than enough. Microsoft has positioned itself as the company building the best tools for developers, while Apple has stagnated with macOS, and there's never been a better time to jump over to Windows.

The review also has a few great links to other web dev friendly workflow, including Microsoft's own Terminal app and

With the release of Deno 1.0 it's time to take a look at this familiar language but new runtime for JavaScript on the server.

What I was particularly interested in is that style guide in the manual that puts forth some really nice and straight forward ideas for good, stable code, and it almost points out the weak points of Node.js with statements such as:

Do not depend on external code.

https://deno.land/std/ is intended to be baseline functionality...

Nice interactive ebook for writing 6502 assembly that lets you write ASM and inspect the state of the machine.

I think this a particularly useful primer to ASM development as the number of op codes are low on the 6502.

Good lord I've needed this. I've never gotten around to learning BEM and more and more of my clients use it, and I tend to just jump in and try to follow the patterns.

A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.

9elements have got a nice big cheatsheet with full HTML samples and common patterns to make my life a lot easier!.

A wonderful remix of the visual6502.org project giving you a zoomed in look at the 6502 chip and how it behaves with your program.

It also has an assembler that makes it easy to let you check what's going on.

Rarely do I bookmark, intentionally, a tweet, but this one is gold.

In slack, to fast edit the last message, you can use a regexp using /s/find/replace - what gold!

The web has become a massive, MASSIVE place in the last decade (and change), and I'm failing at bookmarks, so this site is perfect for narrowing down mini tools:

A collection of free single-purpose online tools for web developers...

Does exactly what it says on the tin.

Multi language AST explorer, debugging and visualisation tool with live rendering.

Extremely useful when writing babel plugins or needing to navigate an AST without knowing the full API of the parser.

Jeremy Keith raises a point that I've been ponding on for a long time. The web has always been backward compatible, but using https is not (specifically through versions of TLS).

He had direct feedback from one of his community members who couldn't access the site. Apple is the problem again.

On desktop, that is. If you’re using an older iPhone or iPad and you can’t upgrade to a recent version of iOS, you’re screwed.

I've seen this when I've tested some sites with IE6 on older Windows machines - sure just a test, but real people will encounter this brick wall too.

Do we make our sites secure and lock individuals out, or do we run with insecure (non-encrypted http requests), but support everyone?

I think the answer is simple, but as always, context is what will drive the decision.

It's amazing to think of the monumentous impact twitter has had on the personal lives of individuals and that the site is responsible for a massive amount of intentional misinformation to further the grip of bad actors in our world.

Draft of Brown study says findings suggest ‘substantial impact of mechanized bots in amplifying denialist messages’

An interesting and appealing approach to making the web more sanely digestible by slowing down the page loads (yes, it sounds backward but it does make a lot of sense!).

Reddit with 150ms latency feels like cocaine: Reddit with 8000ms latency feels like coffee.

At first this looks like it's just selectors in on the command line to scrape HTML (though itself is useful), but where it gets interesting is the display options allowing me to display as text, select attributes or even spit out as JSON.

A nice compliment to a tool like jq

Great lower priced alternative to a tool like browserstack. I've paid for this service for a few years and it does exactly what I need: provides a lot of older OS and browsers, spins them up quickly and provides a screenshot service.

Word of warning: it looks like it's not been updated in a few years. But it's definitely working.

This article has some great skimmable content for how to throw errors in graphql, but most importantly it also includes how to handle re-auth, a topic that I find is so often lacking in articles around authentication - and from the example, it doesn't look too complicated.

If you are using JSON Web Tokens to authenticate the origin of a request, you will need some way to refresh the token when it expires, all without impacting the user experience

Spectacular version of tetris, in four dimensions!

/via adactio.com

Good lord I've wanted this for so long. I'm so fed up with needy software constantly bugging me for my attention.

TL;DR:

sudo softwareupdate --ignore "macOS Catalina"

Still useful to review in case you want to un-ignore.

A useful webapp for creating masked launch icons (certainly android, unsure about ios).

Some additional background reading

https://maskable.app

A super fun post (via Brad Frost) setting 2020 against various timelines. US specific, but still fun!

weirdest thing about kids today: most of them will live to see the 2100s

A massive list of every emulator you didn't know that someone went to pains to write in JavaScript…because we need everything eventually ported to JavaScript!!!

Ranging from gameboy to spectrum to 6502 to Babbage's Difference Engine!

Makes me feel so, so small!

Most of my projects these days use the "system fonts" for the font stack, and I typically forget what they are. So when I found this single serving website I was very pleased :)

Excellent reminder of why we need to progressively enhance and not have our site's core functionality relying on JavaScript:

1. The browser doesn’t recognise your JavaScript code
2. Browser extensions can break JavaScript
3. Some browsers turn off JavaScript on slow connections
4. JavaScript might fail to download
5. Corporate firewalls and mobile operators block JavaScript
6. Some browsers don’t run JavaScript

Adam's post goes into detail on each point and includes "what to do about it"

List of (currently) 91 programming fonts with editable preview for each.

Pretty nice for quickly cycling through for a new font (I'm a fan of Ubuntu Mono myself), but also for code-y like designs.

Via Marc Thiele's feed

An interactive visual heat map representing screen sizes. Although probably not that useful in actual work, what is interesting is the "high" popularity views which might help inform mock designs.

Amazingly thorough collection of resources on AR/VR/XR and lots around web based XR.

A fascinating and beautiful look at code in history that changed the landscape and became, in some cases, common place today.

Although there's so many amazing blocks to choose from, being a fan of simplicity and ingenuity, I think the "The One-Line Virus" is my favourite:

: ( ) { : | : & } ; :

A bash based fork bomb!

Superb overview and round up of the Internet Health Report by the Mozilla Foundation. Highly recommend you read though this post at least.

Nice tool for colour palette generation

Seamless color palette generation

Amazing tutorials and content with live rendered previews of where you're up to in the tutorial, adding the code as the tutorials build up. Really really great method for learning code and generative art.

Made by Ruth John and Tim Holman 👍

A detailed and excellent walk through how to profile a React app. Kent also catches the classic chicken/egg issue of profiling in dev mode and how to fix up production code so you can properly profile.

nanoSQL looks very interesting. I've had a few requirements for more complex data structures in the browser and key/val systems don't work.

NanoSQL gives me a sort of query language for local storage (can be indexeddb, can be websql, the adapter can decide).

Claims:

Universal database layer for the client, server & mobile devices. It's like Lego for databases.

Not so sure about "Lego for dbs", but certainly going to give it a try.

Brilliantly in depth walk through of how to set up a web dev/JS development environment on Windows. Particularly useful to someone like me who's considering putting the Macbook Pro out to pasture and jump ship to Windows.

A full online book, along with audio (and a spanish translation) to help think about startups. What I have in mind, whilst not wanting to go into full startup territory, is where there's any processes that I could take away for my own projects.

It's not a straightforward process (from my own experience) so I'm hoping this post can shed some light on it.

Nice teaching utility in VS Code to highlight your working lines. Definitely going to use this in workshops, twitch sessions and screencasts.

To the point post - and this is a subject that burns people over and over.

Rule #1 - store datetimes in utc in your database, and back end code. Rule #2 - convert datetimes to the user's local timezone using frontend code. Rule #3 - use datetime libraries.

A large collection of gif based tutorials showing how to animate pixel art in different scenarios.

A pretty decent collection of React based frameworks that accessibility baked into their core.

I'm a regular user of curl on the command line, so this cookbook is a great skimming guide. The author also has some useful cookbooks on perl, sed and awk

Some great and simple advice on how to deal with tooltips and additional information. What I particularly like is that there are clear visual examples of the problem.

A collection of inspiring lists, manuals, cheatsheets, blogs, hacks, one-liners, cli/web tools and more.

An absolute goldmine of links on pretty much every topic you'd want to know about running a machine.

According to the court, website owners "must provide, at the time of their collection, certain information to those visitors such as, for example, its identity and the purposes of the [data] processing". By extension, the ECJ's decision also applies to services like Twitter and LinkedIn.

Indeed the "by extension" bit is also important. It was why I removed Twitter's "follow" embed from my own blog and replaced it with my own custom code: so that they couldn't collect data on my users.

A treasure trove of useful advice on form design. Not visual design, but user experience design.

Some of it "it's just more work" but I think it's more of a case of making these your default way of working and it'll begin to come naturally.

On the money when it comes to opinions about the ridiculous situation around .eu domain registration. I've had my own experience with this, and thankful it was for a internal project domain that I switched from .eu to .app

Pretty epic list of tools for testing newsletters. If you're like me and send a newsletter just to keep in regular touch with your readers, you might want to cherry pick from this list.

For me the spammyness checks are worthwhile and there's some interesting services - but try not to get overwhelmed!

I've had this link open in my browser nearly a month after seeing Jeremy posting it. This list makes up the core ethics for working on the web. It's something I feel is worthy of re-reading every week to strengthen the message in my head.

• There is one web
• The web should not cause harm to society
• The web must support healthy community and debate
• The web is for all people
• Security and privacy are essential
• The web must enable freedom of expression
• The web must make it possible for people to verify the information they see
• The web must enhance individuals' control and power
• The web must be an environmentally sustainable platform
• The web is transparent
• The web is multi-browser, multi-OS and multi-device
• People should be able to render web content as they want

Apply these ethics and you'll build a solid and strong web, for everyone.

Really nice effect replicating the look of a typewriter. What I particularly like is that it uses monospace as the font and it's a progressive enhancement with JavaScript.

Bruce outlines (bad-dum-tish) a short and sweet note on how to select a few of the "biggie" HTML elements, specifically: section and hgroup (the short version is: don't use them).

The source code for Google's robots.txt parser has been released to encourage developers to standardise. Apparently the Robots Exclusion Protocol (REP) has never been standardised and we developers are proving our inability to spell properly!

For example, it includes code to accept five different misspellings of the "disallow" directive in robots.txt.

From the amazing web.dev resource, everything you'll ever need to know about "dark mode".

Overhyped or necessity?

I can't decide!

I'm always on the lookout for services that offer free tiers for some experimentation - particularly around databases, "DaaS".

Developers and Open Source authors now have a massive amount of services offering free tiers, but it can be hard to find them all in order to make informed decisions. This is a list of software (SaaS, PaaS, IaaS, etc.) and other offerings that have free tiers for developers.

Interesting list of items to think about when starting a new product or business (with prompts and links to further discussion on each item).

I find these kinds of lists useful for when I'm working on side projects that I might hope to monetise (somehow!).

Superb dive into detail on how to analyse a font's contributing to bandwidth and performance, how to pick apart the font(s) to understand what's actually included, then how to split the font up for staged loading for the best rendering performance.

Useful tools and practical (copy & paste) examples in the post too.

Clever use of Slack and automation to keep the constant stream of content filtered into respective groups.

Owen also includes a nice list of apps being used which I find is also a useful insight into other productivity apps.

Two proposals coming in JavaScript. Includes example usage and their es5 companion.

Title aside, this post gives a pretty decent overview as to what's in the RFC for VueJS 3.

Being mostly in React Land myself (with about a leg in Vue) - and with React hooks in mind, this post makes a lot of sense and helps me digest the change coming.

Accessibility isn’t a technological problem to be solved. It’s an essential part of the human condition: we all have different needs and abilities.

So true. I've found myself using accessibility features in technology more and more because its suits my own behaviours.

I printed this out for my boy for one of his school projects to help him better understand both the web and why it exists.

Imagine a world where we could see through the media's attempt at showing us what it thinks we should look like - and instead we could see the real image.

I want to see this technology baked into a thin sheet of see through plastic that could be put in front of anything!

How Mark Everitt is using Github Actions to schedule a git process that moves scheduled posts into publish posts. Cool to see how Github Actions are, in a way, like mini executions of functions that could do anything with.

Seriously impressive hack that has games like pong, donkey kong and more, running across multiple browser title bars 😱

An interesting insight into software costs for a growing website.

Boils down to the following which is superbly simple and elegant to view:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

This post has the rare quality of actually being backed up with real technical reasons why a thing is an anti-pattern rather than hand-wavy & "it bad".

Lets you enter hex codes and get the asm instruction sets back out.

Tools for Web Developers via Google Developers

Color Palettes Generator and Color Gradient Tool

Creative commons audio samples - great for web toys

Great resource for (paid) sounds - useful for mini web toys

Run arbitrary commands when files change. To install on the mac: brew install entr

Want to learn #reactjs, but not sure where to start? Now you start in your browser - no NPM, no Webpack, just React!

Text elements must have sufficient color contrast against the background, this page includes a tool to check color values against backgrounds.

Capture what's going on in your terminal, useful for debugging, sharing and teaching.

Exactly what it says on the tin. Oh yes, this may make me feel old, but it's the further web tech has to go when it comes to retro 😎

Powerful tools in FF for CSS grid debugging, but also to debug and test the box model which can be equally hard to understand or get right first time.

Latency checking from across the globe to a single URL.

Few useful suggestions on JavaScript libraries for charting and animation.

Excellent resource on how to create a wave sine directly from createBufferSource.

Superb walkthrough of how generative/ambiant music can be created using web audio

Cool demo of converting audio bits to data (via Commodore algo).

Tool to generate the code for connecting to mongodb based on text schemas. Better than relying on magic like mongoose-graffiti (IMHO).

Nice short and sweet, code first, walk through of GraphQL and how the schemas, resolvers and other bits link together.

Another GraphQL article, but also includes how to write mutations connected to the database.

Another good resource for GraphQL, simplfies backend a bit, but good for curl examples.

Excellent detailed walkthrough on how to manually setup a local GraphQL server (in front of a mongo database).

Great source for copy and paste!

Also has a JSON API and can download PDF.

Good filters

Collection of single page landing templates.

Useful Sketch tips

Recently, ppk claimed the web is going too fast in the wrong direction, and asked for a year's moratorium on web features. I was so angry I ran straight to a dictionary to find out what "moratorium" meant. Turns out it means "suspension".

I got a bit snarky about it on Twitter, which isn't really fair, so here's a more considered response.

Buy SSL certs from the command line

@rem I like this online app: very simple.

For a standalone app, may be a good option

Addy explains memory profiling. Need to read, and looks like a non-hello-world memory article - so: yay!

Good collection of images that explain basic Arduino connections

Good article on how to get audio working WELL inside of PhoneGap - i.e. concurrent audio

Everything will be served out of the recorded cache, even if your servers have exploded, a bug has been deployed, or the conference wifi has dropped out.

Really good post on how to use the ATtiny85, beyond just wiring it, but also including the LED feedback.

exec'ing git commands from php over web requests is a hassle. This post cracked it for me. It's mostly a permissions dance, but now doing automated git commands over the web.

How to take a photo of the moon and adjust the image so that the colour spectrum comes out.

Simple walk through for fixing differences in colour profiles and browsers - superb

Good collection of presentations on performance tuning and profiling techniques.

So much easier than doing this in my head!

Build features fast. Ship them. That's what we try to do at GitHub. Our process is the anti-process: what's the minimum overhead we can put up with to keep our code quality high, all while building features as quickly as possible? It's not just features, either: faster development means happier developers.

Detailed article on moving from one framework to another.

Google have open sourced their slide deck code. Looks very cool, and presenter mode is pretty much what you'd want

Walk through of how a multiplayer game could be created using HTML5, Node and Socket.IO

Lea's CSS shadows ala Gmail, etc. Useful for long lists to indicate that there's more above or below.

Firefox 11 (currently in the beta channel), there is a hidden preference (nglayout.debug.paint_flashing) to enable what we call “paint flashing”

Excellent article and detailed information on DevTools.

"I use the WebKit developer tools extensively in both Chrome and Safari, but it occurred to me the other day that I was probably only using a fraction of their capabilities."

WebRT is a runtime for web applications that gives them a native-like look and feel along with platform integration APIs on Android, Windows, Mac, and other platforms.

An excellent resource and very comprehensive list of smart phones and their web support.

Quick and simple how to git stash and pop

Mini app written in a few minutes that allows you to drop files in to the browser to get the dataurl for that file type

Nice simple examples of git tagging

Karl writes up his experience of integrating web video, specifically testing and issues and tricks - like disable accelerate 3D in Fusion for testing.

Detailed walk-through of how Cut the Rope (iOS game) was written to work in the browser. Full of tips and ideas about JavaScript performance (Microsoft focus though)

PxLoader is a Javascript library that helps you download images, sound files or anything else you need before you take a specific action on your site (like showing a user interface or starting a game). You can use it to create a preloader for HTML5 games and websites.

Ever want to change the look of your Google Chrome Web Inspector?

Cats to music - hours of time lost! AWESOME!!!!

LinkedIn tells you how we make this mobile server fast. Here are our top 10 performance takeaways for working with Node.js

When you're just getting started, something as straightforward as a merge can be terrifying. It can take a long time to really become comfortable using some of Git's more advanced features. (It took me a year or two.)

I do not enlighten those who are not eager to learn, nor arouse those who are not anxious to give an explanation themselves. If I have presented one corner of the square and they cannot come back to me with the other three, I should not go over the points again.

Visual tool included in the examples for working out CSS 3D matrixes - which perform better than the shortcuts (rotate, scale, etc)

CodeKit automatically compiles Less, Sass, Stylus & CoffeeScript files. It combines, minifies and error-checks Javascript. It optimizes images, auto-reloads your browser and lets you use the same files across many projects.

Preview tool for bezier curves that offers CSS curve.

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.

It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

Testing mobile perf #3: MobilePerf bookmarklet & Jdrop - easy to setup, insight into key data, can be noisy:

No access fees, no rate limits, no ugly XML - just free, hourly updated exchange rates in JSON format

How to create the new OS X Lion colored, gel-like buttons using CSS and glyphish's icons

SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It's an attempt to document a consistent approach to site development when using CSS - by @snookca

• Walks through the network -> parsing -> rendering flow and the unique differences in mobile.

Recommendations:

• Use an Application Cache
• Defer parsing of JavaScript
• Make landing page redirects cacheable
• Prefer touch events
• Enable Keep-Alive

One option is to use services like Urban Airship, but you can also build the proxy by yourself.

Working with JavaScript’s typeof operator is a bit like operating a clapped-out old car (or an early model Dell Inspiron). It gets the job done (mostly) and you learn to work around the quirks – but you probably aspire to something better.

This post aims to show a super–quick example of how to do simulated 'tap' events on dynamically created content using JavaScript event delegation.

ECMAScript 5 compatibility table

So, in order to demonstrate this is a real world problem and how easily the heap profiler can diagnose it, I set out to find a memory leak in the wild.

Superb, visual primer to Git

About the fundamental concept of CSS 3 Flexible Box Models from WebOS

Good article on how I'm probably doing git wrong!

Heads up, a wee reflective piece aft @highlandwebconf 4 @nsdesign blog: (including few links & pics). #flingconf #webdev

Great article by Steve Souders on CSS selector optimization. #css #webdev #webdesign