Hacker News. A while ago I wrote an article with some CSS tips, now it’s time to give some polish to our HTML! In this article I’ll share some tips and advice about HTML code. Some of this guidance will be best suited for beginners – how to properly build paragraphs, use headings, or improve forms, but we will also discuss SVG sprites for icons, a somewhat more advanced topic.
Text Paragraphs Most of our writing is structured in paragraphs, and there is an HTML element for that: <p>. Avoid: Cupcake ipsum dolor sit. Recommended: <p>Cupcake ipsum dolor sit. A legit use for line breaks would be, for instance, to break verses of a poem or song: <p>So close, no matter how far<br> Couldn’t be much more from the hearth<br> Forever trusting who we are<br> And nothing else matters</p> Headings Headings tags, from <h1>to <h6>, have an implicit rank assigned to them, from 1 (most important) to 6 (less important). <article><h1>Monkey Island</h1><h4>Look behind you! <article><h1>Monkey Island</h1><h2>Look behind you! Writing Less Damn Code | HeydonWorks. I’m not the most talented coder in the world. No, it’s true. So I try to write as little code as possible. The less I write, the less there is to break, justify, or maintain.
I’m also lazy, so it’s all gravy. (ed: maybe run with a food analogy?) But it turns out the only surefire way to make performant Web Stuff is also to just write less. Minify? And that’s not all. My favorite thing about aiming to have less stuff is this: you finish up with only the stuff you really need — only the stuff your user actually wants. It’s not just about what you pull in to destroy your UX or not, though. First off, WAI-ARIA ! LOL, no: <div role="heading" aria-level="2">Subheading</div> Yes: <h2>Subheading</h2> The benefit of using native elements is that you often don’t have to script your own behaviors either. <div role="checkbox" aria-checked="false" tabindex="0" id="checkbox1" aria-labelledby="label-for-checkbox1"></div><div class="label" id="label-for-checkbox1">My checkbox label</div> Styling?
Grids Margins. AngularJS Project Structure. I’ve been programming professionally for about 6-7 years now and I’ve used my fair share of languages/frameworks/stacks. My most recent job (as well as some of my current freelance work) has led me down the AngularJS/NodeJS path. Do not get me wrong - I love using both of these in my web development work. NodeJS with Express is quite nice for writing basic APIs and AngularJS for the front end allows someone who sucks at front end work to be able to produce some pretty useful interfaces.
Now, obviously there a million-and-one things that developers debate about. Tabs vs. spaces Vim vs. This list goes on and on. I try not to get sucked into these sorts of discussions, as I believe many seasoned developers in general are pretty stubborn… although I’ll admit that I have been engaged in pointless debates on more than one occasion. One thing that I hardly ever hear about, though, is directory structure and file naming conventions for projects. Hold up just a second. I have no idea. -Dave. Drewww/socket.io-benchmarking @ GitHub. I've had lots of fun making prototypes in nodejs with socket.io. But I've felt lost in thinking about the performance of the server if I ever needed to scale something up. What operations, exactly, are costly? What is the bottleneck in performance? A few potential limiting factors came to mind: holding lots of connections open simultaneously receiving lots of messages sending lots of messages There's been some nice work at figuring out how many connections a server might be able to support, but that only knocks out one of our potential bottlenecks.
How do we figure out whether holding simultaneous connections open is the most intensive part of scaling up a socket.io server? In my work, I'm interested in building real-time applications for synchronous interaction, so this analysis is going to focus primarily on the cost to sending messages from the server to the client, not the cost of receiving messages from clients.
This is not a comparative analysis of different technologies. Results. Accelerated Mobile Pages – A new approach to web performance. This is a really hard problem to solve, so we decided to reduce scope. The web today is many things: an application platform, an e-commerce platform, a content platform, a gaming platform, and so much more. We decided to focus entirely on static content as it lends itself to more radical optimization approaches that are easier to apply across the board. We began to experiment with an idea: could we develop a restricted subset of the things we’d use from HTML, that's both fast and expressive, so that documents would always load and render with reliable performance? That experiment has culminated in a promising proof of concept we call Accelerated Mobile Pages (AMP). The page you are currently reading is an AMP HTML document. We think AMP HTML is promising, but we know it's not complete.
One thing we realized early on is that many performance issues are caused by the integration of multiple JavaScript libraries, tools, embeds, etc. into a page. AMP HTML loves CSS! AMP HTML is pretty fast. Bubbling and capturing. Let’s start with an example. This handler is assigned to <div>, but also runs if you click any nested tag like <em> or <code>: <div onclick="alert('The handler! ')"><em>If you click on <code>EM</code>, the handler on <code>DIV</code> runs. </em></div> Isn’t it a bit strange?
Why the handler on <div> runs if the actual click was on <em>? Bubbling The bubbling principle is simple. When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors. Let’s say, we have 3 nested elements FORM > DIV > P with a handler on each of them: A click on the inner <p> first runs onclick: On that <p>.Then on the outer <div>.Then on the outer <form>.And so on upwards till the document object. So if we click on <p>, then we’ll see 3 alerts: p → div → form.
The process is called “bubbling”, because events “bubble” from the inner element up through parents like a bubble in the water. Almost all events bubble. The key word in this phrase is “almost”. Result <! Accessing an iframe's JavaScript function via GWT - Thoughts and Dreams. Browser Zoom - Why Does It Break Your Page And How To Avoid It. 4 creative ways to clone objects | Hey, Javascript!