Simon Willison's Weblog: frontend

No build frontend is so much more fun

2025-05-31T14:23:35+00:00

If you've found web development frustrating over the past 5-10 years, here's something that has worked worked great for me: give yourself permission to avoid any form of frontend build system (so no npm / React / TypeScript / JSX / Babel / Vite / Tailwind etc) and code in HTML and JavaScript like it's 2009.

The joy came flooding back to me! It turns out browser APIs are really good now.

You don't even need jQuery to paper over the gaps any more - use document.querySelectorAll() and fetch() directly and see how much value you can build with a few dozen lines of code.

Tags: css, html, javascript, web-development, frontend

Quoting Marco Rogers

2024-07-05T18:19:26+00:00

Product teams that are smart are getting off the treadmill. Whatever framework you currently have, start investing in getting to know it deeply. Learn the tools until they are not an impediment to your progress. That’s the only option. Replacing it with a shiny new tool is a trap. [...]

Companies that want to reduce the cost of their frontend tech becoming obsoleted so often should be looking to get back to fundamentals. Your teams should be working closer to the web platform with a lot less complex abstractions. We need to relearn what the web is capable of and go back to that.

— Marco Rogers

Tags: javascript, frontend

Skew protection in Vercel

2024-03-20T14:06:38+00:00

Skew protection in Vercel

Version skew is a name for the bug that occurs when your user loads a web application and then unintentionally keeps that browser tab open across a deployment of a new version of the app. If you’re unlucky this can lead to broken behaviour, where a client makes a call to a backend endpoint that has changed in an incompatible way.

Vercel have an ingenious solution to this problem. Their platform already makes it easy to deploy many different instances of an application. You can now turn on “skew protection” for a number of hours which will keep older versions of your backend deployed.

The application itself can then include its desired deployment ID in a x-deployment-id header, a __vdpl cookie or a ?dpl= query string parameter.

Via Vercel changes

Tags: frontend, zero-downtime, vercel

Defensive CSS

2022-07-06T17:16:30+00:00

Defensive CSS

Fantastic new site by Ahmad Shadeed describing in detail CSS patterns which can help build layouts that adapt well to unexpected content—things like overly long titles or strange aspect ratio images, common when you are designing against UGC.

Via Hacker News

Tags: css, frontend, ahmad-shadeed

The balance has shifted away from SPAs

2022-05-22T02:47:46+00:00

The balance has shifted away from SPAs

“There’s a feeling in the air. A zeitgeist. SPAs are no longer the cool kids they once were 10 years ago.” Nolan Lawson offers some opinions on why the pendulum seems to be swinging back in favour of server-side rendering over rendering every page entirely on the client. He argues that paint holding, back-forward caching and service workers have made the benefits of SPAs over MPAs much less apparent. I’m inclined to agree.

Via Hacker News

Tags: javascript, frontend, nolan-lawson

Frontend in 2017: The important parts

2017-12-29T08:30:53+00:00

Frontend in 2017: The important parts

Keeping track of developments in the frontend and JavaScript community is pretty much a full time job here days, so I found this summary of trends and developments over 2017 very useful for trying to catch up.

Tags: css, javascript, frontend

What are some ways that brought your proficiency of CSS to another level?

2013-11-17T11:37:00+00:00

My answer to What are some ways that brought your proficiency of CSS to another level? on Quora

An exercise I found useful when I first learned CSS was to implement CSS versions of the designs of popular sites. This was back when most sites still used tables for layout.

If you do this, it's not necessarily a good idea to publish your work (though it may be tempting). It's a great learning exercise though.

Tags: css, web-development, quora, frontend

Should I ever use GIF image format for non animated elements?

2013-10-30T16:46:00+00:00

My answer to Should I ever use GIF image format for non animated elements? on Quora

These days probably not - anything non-animated that you would use a GIF for is generally better as a PNG.

Tags: gif, quora, frontend

What design techniques does Apple use in the introduction page of iPad Air?

2013-10-29T13:13:00+00:00

My answer to What design techniques does Apple use in the introduction page of iPad Air? on Quora

Apple used the same technique on their Apple - Mac Pro page. I first saw this trick used on the BeerCamp at SXSW 2011 page.

It's not that hard to achieve - the basic principle is to attach a JavaScript event handler to the onscroll event.

There are even a bunch of open source libraries to help you achieve this kind of effect, such as scrollorama and skrollr.

Tags: apple, design, html5, ipad, web-development, quora, frontend

Is there any alternative to devbootcamp.com or hackreactor.com in Europe?

2013-08-08T14:51:00+00:00

My answer to Is there any alternative to devbootcamp.com or hackreactor.com in Europe? on Quora

http://www.makersacademy.com/ are running a similar program in the Old Street area of London.

Tags: javascript, programming, quora, frontend

Is there an alternative to media queries for responsive design?

2013-07-20T14:09:00+00:00

My answer to Is there an alternative to media queries for responsive design? on Quora

Yes: use percentage measurements for your layout components. That way you can build a website that works on a much larger range of screen sizes. You can combine this approach with media queries - for example, you could specify that your site has a 25% wide navigation menu and a 75% wide content area on devices that are wider than 400px, but any smaller than that and it collapses to a single column layout with the menu hidden and accessible only through a menu bar icon.

Tags: css, web-development, quora, frontend, web-developers, responsivedesign

What are the strategies for a front end developer to keep up to date with the emerging technologies?

2013-01-03T14:23:00+00:00

My answer to What are the strategies for a front end developer to keep up to date with the emerging technologies? on Quora

Step one: find developers who you respect and subscribe to their blogs, follow them on Twitter/Google+/etc and try to understand what they are talking about and what they think is exciting.

Step two: find some good dedicated online communities relating to those topics - mailing lists, forums, sub-reddits, Quora topics and so on. Get involved there.

Step three: figure out the most vibrant conferences around that topic and go to one of them. For JavaScript Full Frontal in the UK or any of the JSconf series are worth a look. If you don't want to splash out for a conference, seek out local meetups and user groups and go to some free evening networking events.

Tags: javascript, web-development, yui, quora, frontend

How does a front end developer avoid getting blamed?

2012-10-20T17:14:00+00:00

My answer to How does a front end developer avoid getting blamed? on Quora

It is your fault. Part of being a good front-end engineer is knowing the ways in which a page might break and working with your team to mitigate them.

This involves a LOT of work: plenty of browser testing, asynchronous loading techniques so external script errors won't kill your site, load testing, monitoring, carefully balancing the trade-offs of things like CDNs or external font services...

Stuff will still break, and that's your fault for not thinking of everything - but you accept responsibility and take steps to prevent that particular problem from happening again. There should be no shame in making mistakes and learning from them - but seeking excuses rather than taking steps to prevent the problem from reoccurring is bad engineering.

Tags: quora, frontend, web-developers

Can you mark items on a website as 'unread' without cookies?

2012-10-20T13:44:00+00:00

My answer to Can you mark items on a website as 'unread' without cookies? on Quora

It's not very exciting, but CSS will let you set different styles for visited vs unvisited links and the technique has worked reliably since the mid 1990s.

Tags: cookies, html5, javafx, javascript, web-development, quora, frontend

Why weren't the features of Sass originally built into CSS?

2012-08-13T15:53:00+00:00

My answer to Why weren't the features of Sass originally built into CSS? on Quora

This is not a straight-forward issue: CSS has a very long, complicated history. A good starting point for understanding the reluctance of the CSS working group to add variables/constants etc to CSS is this essay by Bert Bos of the W3C (entitled Why “variables” in CSS are harmful) http://www.w3.org/People/Bos/CSS...

Tags: css, css3, web-development, quora, frontend, sass

Why do tech companies provide MacBooks for software development?

2012-08-07T10:10:00+00:00

My answer to Why do tech companies provide MacBooks for software development? on Quora

Smart tech companies give their engineers the laptops that they ask for. Engineers are EXPENSIVE, and anything you can do to increase their productivity is worth the money. If they prefer to work on a Mac, buy them a Mac.

Tags: software-engineering, web-development, quora, frontend

How do you know the real size of a web page?

2012-06-23T17:56:00+00:00

My answer to How do you know the real size of a web page? on Quora

The Google Chrome developer tools can do this, on the Network tab. Take a look at the bottom blue bar (which says "5 requests | 29.49KB transferred")

Tags: css, web-development, quora, frontend

Why are front end developers so high in demand at startups if front end development is relatively easier than other fields of engineering?

2012-02-13T16:32:00+00:00

My answer to Why are front end developers so high in demand at startups if front end development is relatively easier than other fields of engineering? on Quora

You're starting with an invalid assumption. Front end development is absolutely not "easier" than other forms of engineering.

When you're writing server-side code, you're writing for one language on one operating system with (usually) one database implementation. Write the code, test that it works, go home.

Front end developers have to write code that works in dozens of different environments. It's not just different browsers (IE/Firefox/Safari/Chrome/Opera) - it's also the different versions of those browsers. IE 6, 7, 8, 9 and 10 all have their own bugs and limitations. Mobile is even worse - hundreds of different browser/OS/device variations, and even Android has bugs and even feature regressions on different browser versions.

To make things worse, they have to do most of their work in HTML and CSS, which provide extremely limited tools for working around bugs (hence the past decade's obsession with CSS hacks). JavaScript helps a lot here because at least you can use feature detection (though that in itself is controversial due to the performance overhead) - but now you're handling even more code branches and potential areas for bugs to creep in.

Not to mention that a good frontend engineer will need an understanding of web performance - which incorporates everything from DNS lookup times to HTTP caching behaviour to minification build scripts to CSS layout engine implementation details.

Oh, and they're on the frontline of web application security, so they need to understand CSRF, XSS, Click Jacking, DNS pinning (that was a fun one), UTF-7 character encoding attacks...

And these days there's responsive design, media queries, HTML5 AppCache, WebGL, CSS transforms, SVG, Canvas, localStorage, WebSockets and so on to worry about as well - each one introducing exciting new capabilities, and each one introducing brand new browser support challenges to figure out.

Seriously. Server-side developers have it easy.

Tags: programming, recruiting, web-development, quora, frontend

What specific skills are most important in a front-end web developer and in a back-end web developer?

2011-12-08T12:47:00+00:00

My answer to What specific skills are most important in a front-end web developer and in a back-end web developer? on Quora

Understanding of web app security. If they don't know what XSS, CSRF and clickjacking are I'd be worried.

Tags: recruiting, webapps, web-development, quora, frontend