Tags: code

205

sparkline

Server Side React

Remy wants to be able to apply progressive enhancement to React: server-side and client-side rendering, sharing the same codebase. He succeeded, but…

In my opinion, an individual or a team starting out, or without the will, aren’t going to use progressive enhancement in their approach to applying server side rendering to a React app. I don’t believe this is by choice, I think it’s simply because React lends itself so strongly to client-side, that I can see how it’s easy to oversee how you could start on the server and progressive enhance upwards to a rich client side experience.

I’m hopeful that future iterations of React will make this a smoother option.

You Are Not Paid to Write Code – Brave New Geek

Gall’s Fundamental Theorem of Systems is that new systems mean new problems. I think the same can safely be said of code—more code, more problems. Do it without a new system if you can

A cautionary tale of the risks involved with embracing new frameworks.

But when you introduce a new system, you introduce new variables, new failure points, and new problems.

almost anything is easier to get into than out of.

Create a MarkDown tag - JSFiddle

This is nice example of a web component that degrades gracefully—if custom elements aren’t supported, you still get the markdown content, just not converted to HTML.

<ah-markdown>
## Render some markdown!
</ah-markdown>

Is DNA the Future of Data Storage? - WSJ

It’s still many years away from being a viable storage option, but here’s the latest on using DNA to back up our collective data.

Magnetic tape may survive a few decades, and DVDs even longer, but they are by no means immortal. Data stored in DNA, provided it’s kept cold and dry, could last for thousands of years.

ZEIT – Next.js

I haven’t made a website with React, but if and when I do, this Node.js framework looks like it aligns nicely with my priorities. It’s all about the universal JavaScript (the artist formerly known as isomorphic JavaScript).

kdeldycke/awesome-falsehood: Curated list of falsehoods programmers believe in.

A collection of assumptions programmers often make.

“Dates and Times” is tied with “Human Identity” for the most links.

The Service Worker Lifecycle  |  Web  |  Google Developers

Jake goes into the details of what exactly is happening when a service worker is installed or replaced.

This is easily the most complex part of working with service workers, and I think I’m beginning to wrap my head around it, but the good news is that, for the most part, you don’t really need to know the ins and outs of this to get started (and dev tools are now making it easier to nuke from orbit if this begins to bite).

Thimble by Mozilla - An online code editor for learners & educators.

This is a really, really nice tool for creating HTML, CSS, and JavaScript without needing a separate text editor. And then you can publish the results to a URL.

It’s a bit like CodePen but it shows the whole HTML document, which makes it particularly useful for teaching front-end development to beginners (ideal for Codebar!).

CodePen for snippets; Thimble for pages.

Dan McKinley :: Choose Boring Technology

A somewhat contentious title but there’s some really smart thinking here about choosing and evaluating technology.

The slidedeck version is even clearer.

You Can’t Get Comfortable Anymore in Web Development | Rey Bango

We should be asking why we need a framework or a tool before just dropping it in. It’s not to say that you shouldn’t learn new things. YOU ABSOLUTELY SHOULD BE CONTINUOUSLY LEARNING! But you should ensure that you have a solid base to work from.

First impressions of React

I’m following Remy’s experiments with great interest—his approach sounds like the holy grail:

I’m trying to build a web app that uses progressive enhancement as a design principle with state as a core value to the coding approach.

Cross-origin Service Workers: Experimenting with Foreign Fetch | Web Updates - Google Developers

This one is definitely for service worker nerds only. I’ve been trying to get my head around this idea of “foreign fetch” which allows third parties to install service workers—could be handy for sites with APIs like Huffduffer and The Session. This article does a good job of explaining the somewhat tangled process.

lyzadanger/pragmatist-service-worker: Pragmatist’s Guide to Service Worker

Lyza put together some example code for her Smashing Conference talk on service workers. If you haven’t written a service worker before, these are really nice examples of how to grok it bit by bit.

MarkApp: Building apps with HTML

Here’s an interesting collection from Lea: small JavaScript libraries that do their configuration declaratively via HTML, rather than in JavaScript.

What is React?

I’m in a similar position to Remy:

I don’t use React. I don’t really gravitate towards larger frameworks, only because my daily work doesn’t require it, and I’m personally more interested in the lower level techniques and parts of the web and JavaScript.

But, like Remy, I’m interested in knowing what are the ideas and techniques embedded within large frameworks that will end up making their way into the web stack:

What I want to know is: what should I be taking away from React into my own continued evolution as a web developer?

There are some good responses in the comments.

cursory hack

Sorcery!

(well technically, JavaScript + canvas, but y’know, to-may-to, to-mah-to)

Refactoring CSS Without Losing Your Mind // Speaker Deck

A talk from Harry on the whys and hows of refactoring CSS. He mentions the all: initial declaration, which I don’t think I’ve come across before.

Can’t code, won’t code - cracking the secret of gender imbalance in STEM

Adult training represents a way into coding for millions of women who never learnt when they were younger. Meetups such as those run by organisations such as Women Who Code and Codebar can introduce women to the collaborative, problem-solving world of programming.

Stuff I wish I’d known sooner about service workers

Some helpful “gotchas” that could save you some frustration if you’re starting out with service workers.

sw-toolbox

If you’re going to dip your toes into the world of service workers, this handy library from the Chrome team is a good place to start.