There’s an interesting DOM feature that I just came across that’s a method of the
document object that allows you to remove elements from an
<iframe> that’s embedded on a page and drop them into the current page (or vice versa).
In other words, you adopt the elements from the child frame into the parent. The code for
document.adoptNode() looks like this:
In response, a couple of other developers released a Google doc that explains why you should not be too quick to drop jQuery without careful consideration of all the problems it overcomes.
In this post, based on some instructions in that Google doc, I’ll describe how you can examine the DOM bugs and incompatibilities that jQuery attempts to address.
But even if you already have a basic understanding of what JSON is and have used it in some of your projects, there might be a few things you weren’t aware of. So in this JSON tutorial and guide, I’m attempting to provide a fairly comprehensive discussion of JSON, its history, and its usefulness. I’ll close with a list of some practical JSON tools that might come in handy in future projects.
Unless you’ve been under a transpiler-sized rock for the past five years or you’re an absolute beginner to front-end coding, then you’ve probably heard of npm.
Maybe you’ve clicked through to the GitHub repo of a tool of some kind, and you noticed the installation instructions had a couple of different possibilities, including something like this:
A couple of years ago I wrote an article for a company called Thinkful on CSS positioning, which also included a screencast that I hosted on my ImpressiveWebs YouTube channel. The video was “unlisted” but I’ve now made it public, and since some time has passed I thought I would post the video here.
It’s pretty basic stuff for most experienced CSS developers, but if anyone wants a quick primer on CSS positioning, this should be a good guide. The video is embedded below and I’ve summarized the content here in this post.
The subscriber count has grown to almost 10,000 as of this writing, and that number is growing by about 70 each week. For the past couple of months, I’ve been displaying the subscriber count on the home page, and manually editing it every once in a while.
As you might already know, CSS3 transitions and animations allow you to animate a specific set of CSS properties. One of the properties that cannot be animated is the
It would be great if we could do it, but it’s not currently possible and I’m guessing it never will be (e.g. how would you animate to “display: table”?). But there are ways to work around it, and I’ll present one way here.
I don’t think this happens very often. To be honest, I don’t think I’ve ever used a percentage value on a top padding/margin, or a bottom padding/margin value. Even for height values, I may have used a 100% value for a hack, but nothing else.
Nonetheless, using percentages on those vertical parts of a page are somewhat different in the way they are calculated, compared to other properties that take percentage values.
As many of you know, I’ve recently launched a new weekly newsletter called Web Tools Weekly. In addition to providing a weekly, categorized list of tools for front-end developers, most issues begin with a brief tip or tutorial that usually includes code examples that have syntax highlighting.
In addition to the unique property/value pairs that CSS offers, there are also a small handful of language-wide features that can come in handy, including a few that are brand new in the spec.
These often go unnoticed, especially by beginners, because when CSS properties and their possible values are discussed (in tutorials, books, or even in the spec), these features are usually omitted for brevity.