はてなブックマーク

Update: As this is blowing up on Hackernews I added information to each of the tips in which environment they are supported in parenthesis after each heading. When I state “Chromium browsers”, this refers to all browsers that use the Chromium core and also feature all the Developer Tools. This is Chrome, Microsoft Edge, Brave and many more. As a reminder: Microsoft Edge is the browser that comes w

Sharing data between CSS and JavaScript using custom properties One of the big battles we see in the web development world is still CSS vs. JavaScript. Both have their merits, their own syntax and ideas and it can be tough to get your head around them. This is why I love that we have ways to make the two communicate and use each for what it is best at. For one thing, I always found it annoying to

This is part of the web truths series of posts. Every few months there is an article claiming that CSS is not real programming. That CSS is too hard and broken. The language used in these can get creative: People have some ... um ... intense feelings about CSS. pic.twitter.com/dDspAM8i2F — Dave Rupert (@davatron5000) September 18, 2017 There is truth to the fact that working with CSS is not tradit

In addition to this explanation, I also recorded a quick screencast. Feel free to check that one first. When it comes to newer elements to play with there are a few that are slightly odd. Canvas is one of them, as it doesn’t do anything without scripting. It is a placeholder for a canvas painting or animation and can contain fallback content when it is not supported. This ailed purists of semantic

Current advancements in ECMAScript are a great opportunity, but also a challenge for the web. Whilst adding new, important features we’re also running the danger of breaking backwards compatibility. These are my notes for a talk I gave at the MunichJS meetup last week. You can see the slides on Slideshare and watch a screencast on YouTube. There will also be a recording of the talk available once

According to the luminaries of the web design world, the “mobile web” doesn’t exist. Stephen Hay said it, Smashing Magazine said so and Jeremy Keith amongst many others. Except, it does. Not as a technical reality, but as a dream of marketing and overly excited managers who believe in magical powers of their engineers. And it is nothing new. We’ve been there before, and we probably will get there

One of the things I like where I live in London is my doctor. He is this crazy German who lived for 30 years in Australia before coming to England. During my checkup he speaks a mixture of German, Yiddish, Latin and English and has a dark sense of humour. He also does one thing that I have massive respect for: he never treats my symptoms and gives me quick acting remedies. Instead he digs and anal

I’ve always been a fan of Google IO. It is a huge event, full of great announcements. Google goes all in organising a great show and it is tricky to get tickets. You always walked home with the newest gadgets and were the first to learn about new products coming out. The first years I got invites as an expert. This year I got a VIP ticket which meant I paid for it but didn’t have to wait or be par

Earlier today my colleague Anton Kovalyov who works on the Firefox JavaScript Profiler ran across an interesting problem: if you have a table in the page and you want to colour every odd row differently to make it easier to read (christened as “Zebra Tables” by David F. Miller on Alistapart in 2004) the great thing is that we have support for :nth-child in browsers these days. Without having to re

During the last few weeks we were busy helping developers to convert their HTML5 apps from platforms like WebOS and ChromeOS to FirefoxOS and the target hardware this operation system is right now aiming for. As these are slow mobiles, we found that quite some tweaking had to be done. The reason was in most cases libraries using outdated ways to animate and position things on the screen. These old

When I wrote my JavaScript book in 2005 one of the things my editor called out was that using the term “modern browsers” needs definition. I think it is time to go further and call it a myth. An article of mine coming out soon just came back from the editor. One thing I mention in the article is that a very simple JavaScript test around your code can make sure that you don’t give any of your JavaS

Detecting and displaying the information of a logged-in twitter user Wouldn’t it be cool (and somehow creepy) to greet your visitors by their twitter name, and maybe ask them to tweet a post? It can be really easily done. Check it out yourself: Hello Twitter Demo Update: this is not working any longer. Twitter have discontinued this functionality because of the phishing opportunities it posed. Thi

Simply add the script to the end of the body and it’ll convert all tables with a class called “tochart”. You can define the size (widthxheight) and the colour as a hexadecimal triplet as shown in this example. If you leave size and colour out, the script will use presets you can alter as variables in the script itself. What about data tables from charts? As Victor of the Yahoo! Accessibility group

This was part of my presentation at the Open Hack Day in India and I just got the time to write it up. Here you’ll learn how to get Flickr photos into your JavaScript solutions without having to resort to using the full API. As this is a hack you will only get the latest 20 photos, if you need more detailed data like restricted to sets or more at once you’ll need to resort to the flickr API. I men

Return of the HTTP overhead delay – this time without a server side component Following my post yesterday about delaying the loading of avatar images to cut down on HTTP requests I was wondering if there is a way to do this without having to resort to a server side solution. In short, there is. Check out the demo page to see the script in action, and download delayHTTPoverhead.js to use in your ow

Thinking lowsrc – how to make sites appear to be available a lot faster *ZOMG Update!*: We put our heads together and came up with a client side solution without a PHP component that does the same as this one explained in detail here. Those of you who’ve been around some years may remember an otherwise forgotten non-standardized HTML attribute called lowsrc. It was supported by Netscape browsers

Notice: The following is a “best practice document”. You can follow its advice and live happily ever after, but there might be situations where you cannot apply the ideas mentioned within. This is especially the case when you have to maintain an old product or complex web application. You cannot replace everything in those in one go – as you are very lucky indeed if you get the time and budget – b