サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
TGS2024
ryanseddon.com
So how does the browser actually render a website September 2015 I had the privelage of giving a talk at JSConfEU 2015 in Berlin. My topic was about what the browser actually does to construct your website and show it on the screen. This is a topic I’ve been digging into for a few years now and it was really fun trying to distill it into a ~25 minute talk. Video Slides Resources Here’s a list of r
UITableView in JavaScript, list view with re-usable cells using flexbox If you’re familiar with iOS development you will know that a UITableView is very efficient when displaying a list of data. A simplification of what it does is display enough cells to fill the viewport plus a few more either side. As you scroll it re-uses cells that are now out of the viewport so a list with thousands of items
A follow up to obtaining 60fps scrolling performance 60fps scrolling article got quite a few people excited but also a few smart people to point out some flaws in the approach. I was planning to just update the original article but I’ve compiled so much info about this topic that I thought it would be better to do a follow up article and dive into the detail of the techniques that I tried and some
60fps scrolling using pointer-events: none Paul Lewis did an interesting article a while back about avoiding unnecessary paints through disabling hover effects as the user scrolls, which is a great approach. The down side being managing all your hover states through a parent class. UPDATE: I’ve done a follow up article which demonstrates a more robust technique. That approach doesn’t scale well an
addEventListener, handleEvent and passing objects Here’s a super awesome trick I had no idea about until someone pointed out you could do this. addEventListener can take an object as a second argument that will look for a method called handleEvent and call it! No need for binding “this” so it will pass around the context correctly, the context is the object you’ve just set as the event listener ca
<div class="modal hide fade"> <div class="modal-header"> <label role="button" class="close" for="closemodal">×</label> <h3>Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <label role="button" class="close" for="closemodal">Close</label> <a href="#" class="btn btn-primary">Save changes</a> </div> </div> Live demo Toggle a modal via :checked
+ :checked = Awesome What can checkboxes/radios do? <h1>CSS3 Checkbox Styles</h1> <!-- Slide ONE --> <div class="slideOne"> <input type="checkbox" value="None" id="slideOne" name="check" /> <label for="slideOne"></label> </div> <!-- Slide TWO --> <div class="slideTwo"> <input type="checkbox" value="None" id="slideTwo" name="check" /> <label for="slideTwo"></label> </div> <!-- Slide THREE --> <div
Curtain reveal effect using CSS I recently redesigned my site and wanted to add a little fun effect at the bottom of the page (go on scroll down I’ll wait) that looked liked the whole website was sliding up and revealing a secret section under the footer and I wanted to do it without JavaScript. CSS Reveal effect demo Download the source files Pseudo elements and fixed positioning The effect is ac
Bunyip: client-side unit testing made easy Let’s face it doing thorough client-side unit testing fills me with rage, throw mobile browsers into the mix and I want to start flipping tables. There are tools out there to somewhat tackle this issue but they either require painful setups or want you to rewrite your unit tests using their framework. What if I told you there’s a tool that is easy to get
Playing with the clipboard in iOS safari So the other day it hit me that since iOS safari supports contenteditbale it should surely have support the clipboard events and other handy bits and pieces. Like any good hacker I created a testcase to find out basic support of events and getting selection range values, and as expected the support is pretty good. Let’s dive deeper. Clipboard events The tes
The run down A bit of history Mobile debugging Remote debugging Who Am I? Senior Developer @ Seek Developer on Modernizr Stalk Me: Twitter: @ryanseddon Blog: thecssninja.com Github: github.com/ryanseddon
Fullscreen HTML5 video In preparation for a talk I’m doing at Web Directions South I needed to be able to put video into fullscreen mode from within my HTML based slides. In order to do this I imagined I would of needed to use flash but thankfully Webkit nightly, Chrome dev and Firefox nightly have added the ability to put HTML5 videos, and other elements, into fullscreen mode using javascript. Th
Remote debugging with jsconsole, a different take Ever wanted to remotely access the DOM of a mobile device so you could make changes, test ideas and generally just have a bit of fun. I know I have and I’ve been hacking to create a proof of concept piggy backed on the development of two great projects. The first is Remy Sharps awesome little jsconsole web app that lets you do a bunch of cool stuff
Drag out files like Gmail Google in their quest to keep me busy in trying to figure out how they do their innovative features in Gmail are at it again. First it was drag and drop uploading which used a clever trick to make it work in Chrome which currently doesn’t support the FileReader in their stable release. Now they’ve added the ability to drag out attachments to your file system, allowing you
Pure CSS collapsible tree menu The classic tree view, we all know it, it’s used everywhere and it definitely can be useful in the right context. I’ve seen various examples about doing it with CSS and they’ve all required JavaScript. Not content with any of those solutions I investigated doing it with pure CSS, I got a good head start from my Custom Radio and Checkbox inputs article. From there I’v
I’ve been very interested in the potential of view transitions since they were called navigation transitions. Recently, they’ve landed in Chrome stable v126 with a more stable API. Initially it was a SPA-only API but has now been opened up to MPA, first with an experimental meta tag and now via a CSS at-rule. Continue reading. A few weeks ago Charlie Holtz (@charliebholtz) showed a pretty cool dem
Futurebox, lightbox without the javascript and target pseudo-class So I recently released a revised version of Futurebox which added a lot of functionality. But one thing was nagging me, the fact that it utilised the target pseudo-class to hijack in page anchors which has a few side effects that can create some major drawbacks to the technique. One being that if you click multiple futurebox links
Even better image preloading with CSS2 Recently I read an article on better image preloading using CSS3 which presented a clever idea using CSS3 multiple background images to preload images on one element as opposed to another method of having containers for each image. As of writing the support for multiple backgrounds is fairly sparse with webkit having the best support (Safari 3+ & Chrome 1+),
VomZom 15kb Quickly test those new fonts Drag and drop your truetype (ttf), opentype (otf), scalable vector graphics (svg) or Web Open Font Format (WOFF) fonts in the left hand side module and it will be added to the list. The last font dropped will change the font-family of this text and the above title. At the moment this functionality of dragging and dropping files from the desktop to the brows
Drag and drop file uploading using JavaScript With the recent announcement of the File API draft specification being published I’m sure a lot of people were confused as to what it could really do and why it is truly a powerful API. Firefox’s latest alpha release of their 3.6 browser, aka Namoroka, is the first to implement this new draft specification. One of those powerful things we can do with i
How to create offline webapps on the iPhone Recently Google launched their latest mobile version of Gmail optimised for iPhone and Android based browsers. One of the features that stood out was the offline access thanks to the browsers support of html5 application cache. Documentation on the application cache feature supported in safari iPhone 2.1+ is scarce and of that documentation it doesn’t go
Futurebox, lightbox without the JavaScript I was playing around the other day and had a bright spark. Is it possible to do the “lightbox” effect without JavaScript? The answer is yes! Thanks to the :target pseudo class. Without further ado I introduce Futurebox. Futurebox? I’ve aptly called it Futurebox because this is only a proof of concept, it only works in the better browsers but never the les
このページを最初にブックマークしてみませんか?
『The CSS Ninja - All things CSS, Javascript & xhtml』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く