Tags: code



Offline POSTs with Progressive Web Apps – Web Dev @ Microsoft – Medium

This is a smart way to queue up POST submissions for later if the user is offline. It’s not as powerful as background sync (because it requires the user to revisit your site) but it’s a good fallback for browsers that support service workers but don’t yet support background sync

SVG can do THAT?! by sdrasner

119 slides from Sarah on a wide range of SVG magic (with code).

Progressive Progressive Web Apps - Tales of a Developer Advocate by Paul Kinlan

Paul goes into detail describing how he built a progressive web app that’s actually progressive (in the sense of “enhancement”). Most of the stuff about sharing code between server and client goes over my head, but I understood enough to get these points:

  • the “app shell” model is not the only—or even the best—way of building a progressive web app, and
  • always, always, always render from the server first.

Attachment #317095 for bug #175115

I’ve never been so excited by a single diff in a JSON file.

Service workers are coming to Safari.

Presenting the new d3.loom chart form plugin - Visual Cinnamon

Nadieh has packaged up the code for her lovely loom diagrams as a plug-in for d3.


Following on from that intro-level book on JavaScript, here’s a handy list of resources for learning more advanced JavaScript.

bpesquet/thejsway: The JavaScript Way book

This looks like a good introductory book to JavaScript, DOM scripting, and Ajax.

You can read it for free here or buy a DRM-free ebook.

Hello codebar Sydney! | Charlotte Jackson, Front-end developer

People of Sydney, you’re in luck. Charlotte is starting up a Sydney chapter of Codebar. If you know someone there who is under-represented in the tech industry, and they’re looking to learn how to code, please tell them about this.

Some want to become full-time developers, whereas others want to learn the basics of coding to enhance their current jobs. Some want to learn programming as a hobby. Whatever the reason, we’d love to see you there!

Also, if you’re a developer in Sydney, please consider becoming a tutor at Codebar.

I promise that tutoring is not scary! We ask that you let us know which areas you feel comfortable tutoring when you sign up, so you choose what you teach. It’s absolutely okay to not know answers during sessions, but knowing how to look for them is helpful.

Oh, and if you’ve got a space in Sydney that can accommodate a class, please, please consider become a Codebar sponsor.

codebar.io Donations

Donate money to support Codebar:

By donating to codebar you are helping to promote diversity in the tech industry so that more women, LGBTQA and other underrepresented folks will be able to get started with programming and raise their skills to the next level.

ARP Observatory (@ArpObservatory) | Twitter

In July we started receiving audio signals from outside the solar system, and we’ve been studying them since.

Tweets contain sound samples on Soundcloud, data visualisations, and notes about life at the observatory …all generated by code.

ARP is a fictional radio telescope observatory, it’s a Twitter & SoundCloud bot which procedurally generates audio, data-visualisations, and the tweets (and occasionally long-exposure photography) of an astronomer/research scientist who works at ARP, who is obsessive over the audio messages, and who runs the observatory’s Twitter account.

It’s Time to Make Code More Tinker-Friendly | WIRED

We don’t want the field to de-­democratize and become the province solely of those who can slog through a computer science degree.

So we need new tools that let everyone see, understand, and remix today’s web. We need, in other words, to reboot the culture of View Source.

1 month in to my first developer role – Zara – Medium

I love seeing people go from Codebar to full-time dev work. It’s no surprise in Zara’s case—she’s an excellent front-end developer.

whiteink — Tech lead: an introduction

A series of posts on the decisions and trade-offs involved in being a tech lead:

I think good tech leads spend a lot of their time somewhere in between the two extremes, adjusting the balance as circumstances demand.

Sticky headers

A three-part series by Remy looking at one interface pattern (a sticky header) and how his code evolved and changed:

  1. Sticky headers
  2. Smooth scroll & sticky navigation
  3. CSS sticky nav & smooth scroll

Starting a React-Powered Comment Form | CSS-Tricks

This is a really great screencast on getting started with React. I think it works well for a few reasons:

  • Sarah and Chris aren’t necessarily experts yet in React—that’s good; it means they know from experience what “gotchas” people will encounter.
  • They use a practical use-case (a comment form) that’s suited to the technology.
  • By doing it all in CodePen, they avoid the disheartening slog of installation and build tools—compare it to this introduction to React.
  • They make mistakes. There’s so much to be learned from people sharing “Oh, I thought it would work like that, but it actually works like this.”

There’s a little bit of “here’s one I prepared earlier” but, on the whole, it’s a great step-by-step approach, and one I’ll be returning to if and when I dip my toes into React.

Service Worker gotchas

A great collection of learned lessons from implementing service workers.

I really, really like it when people share their own personal experiences and “gotchas!” like this.

Pure CSS crossword - CSS Grid

Form validation taken to the extreme. If you want to know more about how it was done, there’s an article explaining the markup and CSS.

Oh No! Our Stylesheet Only Grows and Grows and Grows! (The Append-Only Stylesheet Problem) | CSS-Tricks

I think Chris is on to something here when he identifies one of the biggest issues with CSS growing out of control:

The developers are afraid of the CSS.

Code clarity - Anthony Ricaud

Breaking down programming tasks into smaller chunks …and naming things.

I’ll take a piece of paper and write the function names I’m going to implement. Or I’ll do it directly in my code editor, with real functions or comments.

It allows you to focus on one problem at a time. When you’re writing those function names, you are thinking about what the code should be doing. When you’re implementing the functions, you are thinking about how the code should do it.

JavaScript Event KeyCodes

A simple little tool for figuring out which keys map to JavaScript keycodes. This’ll save me some googling.