Paul Irish

本頁 20 篇

• Video Stabilization with `ffmpeg` and `VidStab`

  Way back in Dec 2015, @maxogden wrote a nice guide on stabilizing your own video with ffmpeg. I return to it on occasion and have updated my gist comment to offer some updated commands. Since enough has changed regarding installation and use, I figure a new, spiffy, and working guide deserves a non-gist home. Presenting the 2021-era guide to pretty easy DIY video stabilization! On Mac OS, install ffmpeg and vidstab from homebrew: 1 2 brew install ffmpeg brew install libvidstab On linux, you can

  發文日期不明Paul Irishhttps://paulirish.com/2021/video-stabilization-with-ffmpeg-and-vidstab/

• rAF Internals & Node Debugging Guide

  I’ve published a few articles on Medium that may interest the reader here: requestAnimationFrame Scheduling For Nerds Understand how rAF callbacks are scheduled and why its very reasonable to have multiple callbacks execute within the same frame. Debugging Node.js with Chrome DevTools The canonical guide to using the Chrome DevTools UI for debugging Node.js. It definitely beats console.log. ;) Aside from that, I’ve been busy working on Lighthouse, performance metrics, tooling, and DevTools.

  發文日期不明Paul Irishhttps://paulirish.com/2018/raf-internals-and-node-debugging-guide/

• Advanced Performance Audits with DevTools

  Recently, I’ve spent some time recently profiling real-world mobile websites. Using the 1000/100/6 performance model1, and spelunking deep into each app, the findings have been fascinating. I’ve written up case study documents for each, incorporating all the findings: Illustrated diagnoses for the poor performance What actions the developer should take How Chrome’s tooling should improve Questions and insights for the rendering engine (Blink) ➜ Perf Audits: CNet, Time, Google Play In this doc, w

  發文日期不明Paul Irishhttps://paulirish.com/2015/advanced-performance-audits-with-devtools/

• WebKit for Developers

  Feb 2015: A lot’s happened since I wrote this post two years ago. Chrome forked WebKit and started Blink, Opera adopted Chromium, and node-webkit became nw.js. This post describes a complexity of defining WebKit that doesn’t exist much anymore; with Chrome’s departure the WebKit world is more simple and clear. WebKit is deployed through iOS Safari and Mac Safari, and the active GTK community leverages WebKit inside the GNOME Platform. Some smaller mobile browsers use WebKit, some Chromium, some

  發文日期不明Paul Irishhttps://paulirish.com/2013/webkit-for-developers/

• Why moving elements with translate() is better than pos:abs top/left

  Update (2016): The more canonical writeup of this technique is at High Performance Animations - HTML5 Rocks. TL;DR: Only transform & opacity; never top/left! In modern days we have two primary options for moving an element across the screen: using CSS 2D transforms and translate() using position:absolute and top/left Chris Coyier was asked why you should use translate. Go read his response which covers well why it’s more logical to move elements for design purposes (with transform) independent o

  發文日期不明Paul Irishhttps://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

• Chrome Canary for Developers

  If you do front-end web development and already use Chrome as your development browser, I encourage you to use Chrome Canary. A new Chrome Canary build is available daily (we cut at 2am PST and take the best of last 40 revisions, to be specific). Running fresh builds gives you great goodies to look forward: Chrome DevTools features $_ (for the Console’s most recently evaluated result) Styled console logs (see The Breakpoint ep #2) JPEG decoding time instrumentation in Timeline Lots more: read Be

  發文日期不明Paul Irishhttps://paulirish.com/2012/chrome-canary-for-developers/

• Interview On Treehouse

  The great folks at Treehouse sat down with me for 30 minutes to talk about frontend development, my background, HTML5 Boilerplate and tooling. A few highlights: 3:40 Where’d I grow up? What was I into? (Also, the supercool IE4 DHTML event I went to!) 14:45 What’s my favorite feature inside the HTML5 Boilerplate? 18:34 Will web development even out where we don’t need to fuss over so many fallback scenarios? 22:52 Are abstractions okay? Should you always learn what’s going on under the covers fir

  發文日期不明Paul Irishhttps://paulirish.com/2012/interview-on-treehouse/

• Why I'm so excited about Web Platform Docs

  I absolutely love developing for the clientside of the web. Delivering the actual interactions and UI that all users feel is an absolutely gratifying experience. However… it’s not a piece of cake to develop for all desktop browsers, mobile browsers, and all the device/OS combinations within. It’s hard to track down accurate info, but hey we get by with an unruly combination of Mozilla’s MDN, StackOverflow, HTML5 Please, W3C/WHATWG specs, Wikipedia, and a mental inventory of blog posts, tweets an

  發文日期不明Paul Irishhttps://paulirish.com/2012/why-im-so-excited-about-web-platform-docs/

• A browser benchmark that has your back: RoboHornet

  The past few years’ browser focus on speed has been great for us and our users. We’ve seen a huge and dramatic performance boost on benchmarks like Sunspider, Kraken, and Octane. But, these benchmarks, often crafted by JavaScript VM engineers, test raw JavaScript performance, which is rarely the bottleneck we have in our apps. These days, our performance bottlenecks are oftentimes DOM, API methods, SVG. Those are our priorities. So then why do we see all browser vendors competing on raw

  發文日期不明Paul Irishhttps://paulirish.com/2012/a-browser-benchmark-that-has-your-back-robohornet/

• Academic research on browsers, frontend development, and debugging

  University-level education has never really touched too directly on what we do as frontend developers. I know I was self-taught in the ways of the browser, as were all of my friends. Luckily the sort of webapp work we do these days is quite sophisticated so those CS graduates bring much of the great ideas to the JavaScript community. (Alex Sexton has been a personal inspiration here) Early last year, something clicked in my head when I saw this video: Crossing the Chasm: Pitching Security Resear

  發文日期不明Paul Irishhttps://paulirish.com/2012/academic-research-on-browsers-frontend-development-and-debugging/

• Developers We Admire.

  One of the good things about having the eyeballs of many people is that you now have the ability to throw other people into the limelight that completely deserve to be in it. Divya Manian and I have been, for a while now, putting together a list of people in the front-end development community who, in our opinion, could use more broad acknowledgment and attention. They’re also inspiring because… They are excellently skilled in their area of expertise and go out of their way to teach others how t

  發文日期不明Paul Irishhttps://paulirish.com/2012/developers-we-admire/

• The Skinny on IE's Update Policy

  Every month, WebKit, Firefox and Opera are shipping incredible features; IE10 is also going to settle up and even out those HTML5 Test scores (plus some features they may debut, like Grid Layout!). But while these features are becoming available in some browsers, most of us can’t use them because we have a sizable audience who have been left behind on old browsers. A while ago I made a big fuss about IE’s lack of solid upgrade path and how it meant we’d end up with 10 major versions of IE in the

  發文日期不明Paul Irishhttps://paulirish.com/2012/the-skinny-on-ies-update-policy/

• Accessibility and Developers

  Jacob Thornton has an inspiring slide deck on accessibility that brings to fore some of the concerns that web developers have with implementing features around accessibility. For a very long time, developers have been told about making websites ‘accessible’. Like it is a faucet that should be turned on or off. Till Victor Tsaran’s demonstration of using a screenreader (which was in 2007 - a very long time since accessibility evangelism began) - very few web developers had any idea of the real im

  發文日期不明Paul Irishhttps://paulirish.com/2012/accessibility-and-developers/

• Talk: Tooling & The Webapp Development Stack

  One of the things I recognize at Google is how productive developers surround themselves with powerful tools for iterative development and debugging. For us front-end developers, the ecosystem of tools has exploded in the past two years, as we have a lot more software and libraries beyond Firebug and jQuery to help us build webapps. In the talk below I walk through the current ecosystem of tools and how they can make your development experience a more enjoyable one. My slides: Because there are

  發文日期不明Paul Irishhttps://paulirish.com/2012/talk-tooling-the-webapp-development-stack/

• Vendor prefixes are not developer-friendly

  or… The premise of prefixes makes unrealistic demands on how developers maintain sites There’s a lot of conversation about making prefixes work (by changing policy), but I believe they already are at odds with the developer workflow. In this proposal I hope to show that: prefixes are not developer-friendly recent features would have been in a much better state without prefixes implementor maneuverability is not hampered without prefixes The developer experience If I’m using a feature that’s pref

  發文日期不明Paul Irishhttps://paulirish.com/2012/vendor-prefixes-are-not-developer-friendly/

• * { box-sizing: border-box } FTW

  One of my least favorite parts about layout with CSS is the relationship of width and padding. You’re busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And ‘lo and behold, you now are subtracting pixels from your original width so the box doesn’t expand. Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding. So as you know,

  發文日期不明Paul Irishhttps://paulirish.com/2012/box-sizing-border-box-ftw/

• Moving The Web Forward

  This Wednesday, me and a ragtag team of like-minded developers launched Move the Web Forward, an initiative to direct people’s passions into productive efforts that assist not only the web community but the entire web platform. People often feel the need to “give back”, but when it comes to contributing it’s a challenge to find the right place. This is something I’ve seen happen firsthand in the jQuery and HTML5 Boilerplate communities. The MWF effort was inspired by a tweet by WebKit extraordin

  發文日期不明Paul Irishhttps://paulirish.com/2011/moving-the-web-forward/

• Web browser, frontend and standards feeds to follow

  While a lot of conversation has moved to twitter and G+, hugely useful information is still published regularly to blogs. I’ve shared collections of frontend development feeds twice before. Now I’m back, but with three choices: Download this: frontend-feeds.opml 2013.07.26: Poor Reader. :’( Here are the three below bundles grouped up into an OPML file. Your new news reader can import them in one go. Also, do not forget the most important site that has no feed: webplatformdaily.org. It’s the best

  發文日期不明Paul Irishhttps://paulirish.com/2011/web-browser-frontend-and-standards-feeds-to-follow/

• The Fundamentals, Primitives and History of HTML5

  Just gave this talk at W3Conf about some of the innerworkings of HTML5. Lots of did-you-know and cool insight into how browsers work. 37 minutes long, The Primitives of the HTML5 Foundation - Slides I do discuss optional start and end tags as well as not quoting your attributes. I concede that these ideas scare the shit out of people. In fact, when I first heard Jens Meiert propose the idea in 2009 my brain rejected it. Still, I think many of the markup parsing curiosities that can be frightenin

  發文日期不明Paul Irishhttps://paulirish.com/2011/primitives-html5-video/

• Semantics in practice and mapping semantic value to its consumers

  Divya Manian kicked off a good bout of discussion of HTML semantics with her post Our pointless pursuit of semantic value. It called into question the amount of time we spend on identifying the Right and Best ways of marking up our content while highlighting details of some of the consumers of semantics like assistive technology (AT). Jeremy Keith responded in Pursing Semantic Value. I wanted to chime in on Jeremy’s post so, I’ve published below my comment from the original post: Thanks Jeremy f

  發文日期不明Paul Irishhttps://paulirish.com/2011/semantics/