サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
davidwalsh.name
Anyone is capable of having their caps lock key on at any given time without realizing so. Users can easily spot unwanted caps lock when typing in most inputs, but when using a password input, the problem isn’t so obvious. That leads to the user’s password being incorrect, which is an annoyance. Ideally developers could let the user know their caps lock key is activated. To detect if a user has th
Every once in a while I learn about a JavaScript property that I wish I had known about years earlier -- valueAsNumber is one of them. The valueAsNumber provides the value of an input[type=number] as a Number type, instead of the traditional string representation when you get the value: /* Assuming an <input type="number" value="1.234" /> */ // BAD: Get the value and convert the number input.value
Every once in a while you encounter a CSS annoyance that takes some cleverness to discover. One such case rears its ugly head in unwanted and unexpected scrollbars. When I see unwanted scrollbars, I usually open developer tools, click the element inspector, and hover around until I find the villainous HTML element. As a visual person, I find that process effective but not efficient. Recently I was
The need for position: sticky was around for years before it was implemented natively, and I can boast that I implemented it with JavaScript and scroll events for ages. Eventually we got position: sticky, and it works well from a visual perspective, but I wondered how can we determine when the element actually became pinned due to scroll. We can determine if an element has become sticky thanks to
In 2001 I had just graduated from a small town high school and headed off to a small town college. I found myself in the quaint computer lab where the substandard computers featured two browsers: Internet Explorer and Mozilla. It was this lab where I fell in love with Mozilla -- a browser that gave developers actual tools to solve dev problems. It took me 7 years to get to Mozilla. I spent 5 years
I hate slow websites. They are annoying to use and frustrating to work on. But what does it mean to be “slow”? It used to be waiting for document load. Then waiting for page ready. But with so many asynchronous patterns in use today, how do we even define what “slow” is? The W3C has been working on this with the new Event Timing and Element Timing API, and has defined some new Web Vital metrics to
Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have to be clever to innovate at the bleeding edge of the web. I was recently lucky enough to interview a Web Developer at the web's l
Just like every other programming language, JavaScript has dozens of tricks to accomplish both easy and difficult tasks. Some tricks are widely known while others are enough to blow your mind. Let's have a look at seven JavaScript tricks you can start using today! Get Unique Values of an Array Getting an array of unique values is probably easier than you think: var j = [...new Set([1, 2, 3, 3])] >
CSS variables are a very welcome addition to the language, despite them being incredibly basic. Sure we could use SASS or stylus but languages should never count on developers relying on frameworks and toolkits to accomplish what we know we need. And just like every other part of a webpage, you can get and manipulate CSS variable values -- let's check out how! Setting and Using a CSS Variables T
I work on a really complex debugger at Mozilla but, and don't tell my colleagues, I sometimes enjoy simply using console.log and other console commands to get some simple output. I know, I know, but hey -- whatever gets the job done. A few years ago I detailed console.time and console.timeEnd for measuring time for a given set of tasks; let me show you console.timeLog, a new function in Firefox
*"If you stream it, you can do it" -- Walt Disney[^1] * Streams are trickling into the scene as we search for ways to improve performance. What if instead of waiting for our entire ajax response to complete, we could start showing the data as it arrives? Streams allow us to do this. They are a data source that can be created and processed incrementally. This means as chunks of data become availabl
Development of new features for the core JavaScript language has really improved over the last five years, thanks in part to JavaScript frameworks pushing the limits and proving how important given functionality can be. My previous ES6 posts, Six Tiny But Awesome ES6 Features and Six More Tiny But Awesome ES6 Features, highlighted a dozen excellent features that were added to JavaScript to make o
Proper logging is of massive utility for web apps, both during development and after deployment. What can sometimes be difficult is organizing both the code and output of logging, i.e. knowing where each log message is coming from. I recently found debug, a Node.js utility for organized and optimized debugging. Creating an instance of debug is simple and you can create multiple loggers per file:
Image optimization is a huge part of improving front-end performance. We've traditionally used JPG/JPEG, GIF, and PNG images but Google and the Chrome team developed the WEBP format which crunches file size and optimizes rendering. If you go to a site like GIPHY in Chrome you'll be served a WEBP, but if you go to the same page in Firefox you'll be served a GIF. Since GIPHY lazy loads its images
Web developers still have a difficult job when it comes to mobile; the web will never provide as many APIs or as much control as native mobile platforms but our users expect the same excellent experience. Creating HTML5 games and media-heavy apps for the web can be really difficult, as you really have to pay attention to performance the the rest of the little things that native platforms provide.
There are a variety of strategies for protecting your important online credentials. We often hear about password managers and generators, but for me, the more important strategy is using two-factor authentication (2FA). Passwords can be guessed, phone numbers can be spoofed, but using two-factor authentication essentially requires that user be in possession of a physical device with an app like
My original post featured DOMParser, a JavaScript API for converting HTML strings into DOM nodes. While DOMParser works well in most cases, that API does have some rough edges and isn't as performant as another API: ContextualFragment. I've rewritten this post to highlight ContextualFragment, but if you still care to learn about DOMParser, please see the original text at the bottom of this post. I
Utilize tooling that harnesses the power of Webpack with ease of simple presets to quickly start JavaScript projects, all without upfront configuration. Taking the plunge into starting a new JS project often brings along a significant effort into preparing your environment prior to starting development on the project. Many developers have a preference for using cutting-edge features and modern too
Notifications can be a godsend or the bane of our existence these days. Every app you install on your phone wants access to notifications, as do desktop apps, and now we have a Web Notifications API along with a Web Push API, just in case you don't already have enough notifications in your life. Appointment reminders from Calendar are always welcome (I'd otherwise forget every event) but does W
Last week I wrote 6 Great Uses of the Spread Operator, a post detailing how awesome the spread operator (...) is for working with arrays and other iterable objects. As always my readers chimed in with a few other great uses and which you should check out in the comments. And of course as soon as I publish the post I find another great use of the spread operator while I tinker with Babel and Reac
Thanks to ES6 and the likes of Babel, writing JavaScript has become incredibly dynamic, from new language syntax to custom parsing like JSX. I've become a big fan of the spread operator, three dots that may change the way you complete tasks within JavaScript. The following is a listing of my favorite uses of the spread operator within JavaScript! Calling Functions without Apply To this point we'
Everyone in the JavaScript community loves new APIs, syntax updates, and features -- they provide better, smarter, more efficient ways to accomplish important tasks. ES6 brings forth a massive wave of new goodies and the browser vendors have worked hard over the past year to get those language updates into their browser. While there are big updates, some of the smaller language updates have put
Speech recognition software is becoming more and more important; it started (for me) with Siri on iOS, then Amazon's Echo, then my new Apple TV, and so on. Speech recognition is so useful for not just us tech superstars but for people who either want to work "hands free" or just want the convenience of shouting orders at a moment's notice. Browser tech sometimes lags behind native technology but
Query string parameters have been incredibly useful on the server side since the internet took liftoff, but it wasn't until AJAX-driven web apps became popular that we relied too much on them on the client side. Not only do we grab parameter values but we also modify them dynamically with the History API, so these parameters play a major role outside of the initial page load. We've always been abl
The infamous sleep, or delay, function within any language is much debated. Some will say that there should always be a signal or callback to fire a given functionality, others will argue that sometimes an arbitrary moment of delay is useful. I say that to each their own and one rule can never dictate anything in this industry. Writing a sleep function is simple and made even more usable with Ja
While writing the article for David Walsh’s blog I had posted a version of the article on Medium to have @cramforce, the lead on Google AMP, answer the questions brought up. Here is a link to the article where he posted those answers: bit.ly/1VCLBr0 As developers we know that site speed is extremely important. In recent years, the developer community has created and supported new browser specifica
The awesome ServiceWorker API is meant to give developers a bit more control over what is and isn't cached, and how. Sure we can play games with ETags and the like but doing it programmatically with JavaScript just feels better, more controllable. As with every API, however, adding stuff to cache isn't just fun and games -- you have to do the cleanup work yourself too, and by "cleanup work" I me
I like clean code so I do what I can to avoid unwanted JavaScript global variables. I initially thought that keys(window) would give me window property leaks but that didn't work because browsers returned different results, so I moved on to using an IFRAME to compare default window property keys. When I first tried this method, I got a lame error about an IFRAME element's contentWindow property b
Updated 9/1/2015: My original method, keys(window) gave unhelpful results in browsers other than Chrome. I've updated this post with a more reliable method. JavaScript globals are considered bad. And as a contributor to the MooTools project, I've heard this on a daily basis for the better part of a decade. MooTools got knocked for extending natives but also for placing objects in the global spac
次のページ
このページを最初にブックマークしてみませんか?
『https://davidwalsh.name/』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く