Tags: code



Painting with Code : Airbnb Design

Very clever stuff here from Jon in the tradition of Bret Victor—alter Sketch files by directly manipulating code (React, in this case).

I’m not sure the particular use-case outlined here is going to apply much outside of AirBnB (just because the direction of code-to-Sketch feels inverted from most processes) but the underlying idea of treating visual design assets and code as two manifestations of the same process …that’s very powerful.

There are maps for these territories | Clearleft

A great piece from Danielle on the different mental models needed for different languages. When someone describes a language—like CSS—as “broken”, it may well be that there’s a mismatch in mental models.

CSS isn’t a programming language. It’s a stylesheet language. We shouldn’t expect it to behave like a programming language. It has its own unique landscape and structures, ones that people with programming language mental maps might not expect.

I believe that this mismatch of expectation is what has led to the current explosion of CSS-in-JS solutions. Confronted with a language that seems arbitrary and illogical, and having spent little or no time exposed to the landscape, developers dismiss CSS as ‘broken’ and use systems that either sweep it under the rug, or attempt to force it into alignment with the landscape of a programming language — often sacrificing some of the most powerful features of CSS.

Phishing with Unicode Domains - Xudong Zheng

Domains registered with punycode names (and then given TLS certificates) are worryingly indistinguishable from their ASCII counterparts.

Can you spot the difference between the URLs https://adactio.com and https://аdаctіо.com?

CodePen - CSS Grid Template Builder

Here’s a handy interface if you want to get your head around named areas in CSS Grid, also known as doing layout with ASCII art.

Career-change coder: how Siri got into programming - with the help of codebar - The Unit

Before leaving Brighton to head back to Sweden, Siri describes how Codebar helped her get started with front-end development:

I went along every week to work on my site, and was overwhelmed by the support and dedication of the mentors. Seeing the talented and diverse programmers in action made me re-think my preconceptions, and I soon realised that anyone can learn to code, from a 68-year-old retired teacher, to a twenty-seven-year-old female career-changer like me.

Modern JavaScript for Ancient Web Developers

Speaking as an ancient web developer myself, this account by Gina of her journey into Node.js is really insightful. But I can’t help but get exhausted just contemplating the yak-shaving involved in the tooling set-up:

The sheer number of tools and plugins and packages and dependencies and editor setup and build configurations required to do it “the right way” is enough to stall you before you even get started.

CodePen Projects Is Here! - CodePen Blog

Incredibly impressive work from the CodePen team—you can now edit entire projects in your web browser …and then deploy them to a live site!

Frameworks without the framework: why didn’t we think of this sooner? • Svelte

Interesting ideas around front-end frameworks:

The common view is that frameworks make it easier to manage the complexity of your code: the framework abstracts away all the fussy implementation details with techniques like virtual DOM diffing. But that’s not really true. At best, frameworks move the complexity around, away from code that you had to write and into code you didn’t.

Instead, the reason that ideas like React are so wildly and deservedly successful is that they make it easier to manage the complexity of your concepts. Frameworks are primarily a tool for structuring your thoughts, not your code.

The proposed alternative here is to transpile from the idiom of the framework into vanilla JavaScript as part of the build process, which should result in better performance and interoperability.

kamranahmedse/design-patterns-for-humans: Design Patterns for Humans™ - An ultra-simplified explanation

I’m crap at object-oriented programming (probably because I don’t get get enough practice), but I’ve had a quick read through this and it looks like a nice clear primer. I shall return and peruse in more depth next time I’m trying to remember how to do all this class-based stuff.

CSS Beating Heart Tutorial. – Cassie Codes

A sweet CSS tutorial that Cassie put together for the Valentine’s Day Codebar.

Polyfills and the evolution of the web - TAG finding

Really good advice for anyone thinking of releasing a polyfill into the world.

Less Bro-gramming: Net Natives host and sponsor Codebar | Net Natives

An excellent potted history from Cassie on women in computing.

NASA’s “Keypunch girls” would work in cramped rows translating programming instructions onto paper pads, whilst the machine operators would sit in comfort, feeding the code decks through card readers and enjoying the esteem of the end result (I imagine it a bit like Mad Men, but with more sexism and astronauts).

The Invention of Wireless Cryptography—The Appendix

A marvellous story of early twentieth century espionage over the airwaves.

In one proposal, hidden instructions were interspersed within regular, ordinary-looking messages by slightly lengthening the spaces between dots and dashes.

Callback Hell

At first when I was reading this JavaScript coding guide, I thought “Isn’t this exactly what promises address?” but that is then addressed further down:

Before looking at more advanced solutions, remember that callbacks are a fundamental part of JavaScript (since they are just functions) and you should learn how to read and write them before moving on to more advanced language features, since they all depend on an understanding of callbacks.

Fair enough. In any case, what you’ll find here is mainly good advice for writing modular code.

Life plus Linux: Look before you paste from a website to terminal

The (literally) hidden dangers of copying code snippets from the web and pasting them into the command line.

This cautionary tale backs up a small tip I heard for getting to understand how found code works: deliberately type it out instead of copying and pasting.

DirtyMarkup · Tidy up your HTML, CSS, and JavaScript code

A handy prettifier for front-end code. Useful if you’re trying to find something inside code markup, CSS, or JavaScript that’s been minified.

The Promise of a Burger Party - Mariko Kosaka

Mariko has a real knack for explaining technical concepts in a very accessible way. This time it’s JavaScript promises.

bastianallgeier/letter: Letter is a simple, highly customizable tool to create letters in your browser.

A nice little use of print (and screen) styles from Bastian—compose letters in a web browser.

Instead of messing around in Word, Pages or even Indesign, you can write your letters in the browser, export them as HTML or PDF (via Apple Preview).

ryanmcdermott/clean-code-javascript: Clean Code concepts adapted for JavaScript

This looks a sensible approach to writing clean JavaScript.

Typography Wars: Has the Internet Killed Curly Quotes? - The Atlantic

Glenn Fleishman on the war of attrition between primes and quotation marks on the web.