Tags: dom

135

sparkline

Friday, July 14th, 2017

(Now More Than Ever) You Might Not Need jQuery | CSS-Tricks

Thanks to jQuery, you probably don’t need jQuery. Just look at all these methods that started life in jQuery, that are now part of the standardised DOM API:

  • remove()
  • prepend()
  • before()
  • replaceWith()
  • closest()

Focusing on What Matters at Fluent, 2017 - YouTube

A great short talk by Tim. It’s about performance, but so much more too.

Tuesday, July 11th, 2017

The story of stolen Slovak national Top Level Domain .SK

I’ve heard of people having their domain names hijacked before, but this is the first time I’ve heard of an entire top level domain being nicked.

Wednesday, July 5th, 2017

prettydiff/wisdom: Building better developers by specifying criteria of success

I frequently see web developers struggling to become better, but without a path or any indication of clear direction. This repository is an attempt to sharing my experiences, and any contributions, that can help provide such a direction.

It’s broken down into four parts:

I don’t necessarily agree with everything here (and I really don’t like the “rockstar” labelling), but that’s okay:

Anything written here is open to debate and challenges are encouraged.

Sunday, April 16th, 2017

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?

Thursday, February 16th, 2017

Teaching in Porto, day three

Day two ended with a bit of a cliffhanger as I had the students mark up a document, but not yet style it. In the morning of day three, the styling began.

Rather than just treat “styling” as one big monolithic task, I broke it down into typography, colour, negative space, and so on. We time-boxed each one of those parts of the visual design. So everyone got, say, fifteen minutes to write styles relating to font families and sizes, then another fifteen minutes to write styles for colours and background colours. Bit by bit, the styles were layered on.

When it came to layout, we closed the laptops and returned to paper. Everyone did a quick round of 6-up sketching so that there was plenty of fast iteration on layout ideas. That was followed by some critique and dot-voting of the sketches.

Rather than diving into the CSS for layout—which can get quite complex—I instead walked through the approach for layout; namely putting all your layout styles inside media queries. To explain media queries, I first explained media types and then introduced the query part.

I felt pretty confident that I could skip over the nitty-gritty of media queries and cross-device layout because the next masterclass that will be taught at the New Digital School will be a week of responsive design, taught by Vitaly. I just gave them a taster—Vitaly can dive deeper.

By lunch time, I felt that we had covered CSS pretty well. After lunch it was time for the really challenging part: JavaScript.

The reason why I think JavaScript is challenging is that it’s inherently more complex than HTML or CSS. Those are declarative languages with fairly basic concepts at heart (elements, attributes, selectors, etc.), whereas an imperative language like JavaScript means entering the territory of logic, loops, variables, arrays, objects, and so on. I really didn’t want to get stuck in the weeds with that stuff.

I focused on the combination of JavaScript and the Document Object Model as a way of manipulating the HTML and CSS that’s already inside a browser. A lot of that boils down to this pattern:

When (some event happens), then (take this action).

We brainstormed some examples of this e.g. “When the user submits a form, then show a modal dialogue with an acknowledgement.” I then encouraged them to write a script …but I don’t mean a script in the JavaScript sense; I mean a script in the screenwriting or theatre sense. Line by line, write out each step that you want to accomplish. Once you’ve done that, translate each line of your English (or Portuguese) script into JavaScript.

I did quick demo as a proof of concept (which, much to my surprise, actually worked first time), but I was at pains to point out that they didn’t need to remember the syntax or vocabulary of the script; it was much more important to have a clear understanding of the thinking behind it.

With the remaining time left in the day, we ran through the many browser APIs available to JavaScript, from the relatively simple—like querySelector and Ajax—right up to the latest device APIs. I think I got the message across that, using JavaScript, there’s practically no limit to what you can do on the web these days …but the trick is to use that power responsibly.

At this point, we’ve had three days and we’ve covered three layers of web technologies: HTML, CSS, and JavaScript. Tomorrow we’ll take a step back from the nitty-gritty of the code. It’s going to be all about how to plan and think about building for the web before a single line of code gets written.

Thursday, January 19th, 2017

Understanding the Critical Rendering Path

A nice and clear description of how browsers parse and render web pages.

Friday, November 25th, 2016

Hey designers, if you only know one thing about JavaScript, this is what I would recommend | CSS-Tricks

This is a really great short explanation by Chris. I think it shows that the really power of JavaScript in the browser isn’t so much the language itself, but the DOM—the glue that ties the JavaScript to the HTML.

It reminds me of the old jQuery philosophy: find something and do stuff to it.

Tuesday, November 1st, 2016

Mutating the active element - ally.js

Rodney has done some great research into how different browsers respond to a focusable element becoming inactive (by being made disabled, hidden, or removed).

Monday, October 3rd, 2016

Magic randomisation with nth-child and Cicada Principle | Charlotte Jackson, Front-end developer

Here’s the really clever technique that Charlotte used on the speakers page for this year’s UX London site.

I remember that Jon was really impressed that she managed to implement his crazy design.

Wednesday, August 24th, 2016

Shadow DOM v1: self-contained web components | Web Fundamentals - Google Developers

An in-depth look at the current Shadow DOM spec. It’s well-written but I don’t think this will really click with me until I start playing around with it for myself.

It’s good to see that the examples have some thought given to fallback content.

There’s also a corresponding tutorial on custom elements

Friday, July 15th, 2016

The History of the URL: Domain, Protocol, and Port - Eager Blog

From the ARPANET to the internet, this is a great history of the Domain Name System:

Root DNS servers operate in safes, inside locked cages. A clock sits on the safe to ensure the camera feed hasn’t been looped. Particularly given how slow DNSSEC implementation has been, an attack on one of those servers could allow an attacker to redirect all of the Internet traffic for a portion of Internet users. This, of course, makes for the most fantastic heist movie to have never been made.

Wednesday, July 6th, 2016

Persistent Domains by Tim Berners-Lee

This sixteen year old cool URI has not changed. I think this idea of domains entering an archive state is worth pursuing.

Also, I love the science fictional footnote “Note for readers after 2100”.

Wednesday, June 22nd, 2016

Democratize the Internet Now! | New Republic

It is a sad and beautiful world wide web:

The technology that let people make web sites never went away. You can still set up a site as if it were 1995. But culture changes, as do expectations. It takes a certain set of skills to create your own web site, populate it with cool stuff, set up a web server, and publish your own cool-stuff web pages. I would argue that those skills should be a basic part of living in a transparent and open culture where individuals are able to communicate on an equal field of play. Some fellow nerds would argue the same. But most everyone else, statistically, just uses Facebook and plays along.

Paul Ford shines a light on the solution:

Standing against this tide of centralization is the indie web movement. Perhaps “movement” is too strong—it’s more an aesthetic of independence and decentralization. The IndieWebCamp web page states: “When you post something on the web, it should belong to you, not a corporation.” You should own your information and profit from it. You should have your own servers. Your destiny, which you signed over to Facebook in order to avoid learning a few lines of code, would once again be your own.

Beautiful, beautiful writing:

We could still live in that decentralized world, if we wanted to. Despite the rise of the all-seeing database, the core of the internet remains profoundly open. I can host it from my apartment, on a machine that costs $35. You can link to me from your site. Just the two of us. This is an age of great enterprise, no time to think small. Yet whatever enormous explosion tears through our digital world next will come from exactly that: an individual recognizing the potential of the small, where others see only scale.

Thursday, April 7th, 2016

The Useless Web

The best of the web is just one click away.

Monday, March 7th, 2016

A Year Without jQuery

In many ways, moving to vanilla JavaScript highlights the ugliness of working with the DOM directly, and the shortcomings of native Element object — shortcomings which Resig solved so incredibly eloquently with the jQuery API.

Having said that, the lessons I’ve learned over the last year have made me a better developer, and the tools built in the process have opened my eyes and given me enough confidence and understanding of vanilla JavaScript that the only scenario where I would personally consider using jQuery again would be a project needing IE8 support.

Monday, February 1st, 2016

A simple HTML5 Progress bar | Charlotte Jackson, Front-end developer

I love this little markup pattern: simple, accessible and elegant …with some quirky CSS gotchas around styling non-standard prefixed pseudo-elements. They came from the Shadow DOM …dun dun DUN!

Monday, July 27th, 2015

Fan Is A Tool-Using Animal—dConstruct Conference Talk

Maciej has published the transcript of his magnificent (and hilarious) talk from dConstruct 2013.

Sunday, July 5th, 2015

The Internet That Was (and Still Could Be) - The Atlantic

A fantastic piece by David Weinberger on the changing uses of the internet—apparently in contradiction of the internet’s original architecture.

Some folks invented the Internet for some set of purposes. They gave it a name, pointed to some prototypical examples—sharing scientific papers and engaging in email about them—shaping the way the early adopters domesticated it.

But over time, the Internet escaped from its creators’ intentions. It became a way to communicate person-to-person via email and many-to-many via Usenet. The web came along and the prototypical example became home pages. Social networking came along and the prototype became Facebook.

Domain Stories | Citizen Ex

The fascinating tales behind Top Level Domains as part of James and Nat’s Citizen Ex project. So far there’s .scot, .cymru, and .ly, with more to come.