Over on CSS-Tricks, Chris breaks down what some in the industry have said on the possibility that there will one day be a CSS4. The latest article that Chris references is one by a well-respected member of the community, Peter-Paul Koch (“PPK”).
In brief, PPK believes in initiating some sort of marketing gimmick wherein we basically try to repeat the success of the buzz surrounding “CSS3” by pushing the name “CSS4”.
You are probably aware that ECMAScript has something called Infinity, which is a numeric value that you can apply to any variable, the same way you can apply other numbers as values for variables.
Infinity of course is not the same as other numbers, so I thought I’d summarize, with examples, many of the quirks and useful facts around JavaScript Infinity and how it works.
I probably don’t need to tell you that if you want to make it easier marketing yourself as a strong front-end web developer, it’s important to learn React. No, it’s not absolutely crucial, nor is it required. But React is undoubtedly the most important UI library in the front-end landscape in 2019 and it’s not going away anytime soon.
In a recent issue of my newsletter, I briefly discussed many (if not all?) of the different ways you can retrieve a DOM element’s dimensions via JavaScript.
These include getBoundingClientRect()‘s width and height properties, offsetWidth and offsetHeight, window.getComputedStyle(), the document.styleSheets object, and scrollWidth and scrollHeight.
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:
At some point when reading about scope in JavaScript, you may have come across the term hoisting. It’s often used in the context of variable or function definitions.
For example, consider the following code:
In CSS, every property has what’s referred to as an initial value. Sometimes this is called the default value, but the spec uses the term initial, which I think is a slightly better term.
Technically speaking, the initial value of any given property needs to be declared only if that value is overriding a previously-defined value that’s not the initial value. But initial values are often present even when they’re not necessary.
For example, suppose I have a block-level element that I want to take up the full width of its parent. I want it to sit on its own “line”, so to speak, in the layout, so I add the following CSS:
As summer officially approaches, you might find a little down time during a vacation or other weekend getaway to do some reading, watching, or listening — or maybe even take a full-blown online course of some sort in order to pick up a new skill.
In the past, I did the occasional “Learning Tools” issue in my newsletter, where I would list resources like these. But because I have so many regular tools to include, I’ve stopped doing those for now. My list of learning resources is still pretty big, so I thought a roundup here would be appropriate. Enjoy!
If you’ve been writing CSS for some time, then you’ve certainly done something similar to the following, and likely multiple times in a single stylesheet:
The lone declaration in the rule set above is what’s commonly referred to as a font stack. This line defines the font that the browser should use for the specified element (in this case, for the <body> element). The stack is “Arial, Helvetica, sans-serif”. This instructs the browser to take the following steps:
In most cases, you should not use a leading or trailing space in an HTML attribute value. For example, if you add a leading or trailing space to an ID attribute, you wouldn’t be able to hook into that value in CSS using the ID selector (not that you use IDs as selectors, right?):
This happens because spaces are not allowed in an ID selector. But interestingly, there is a way around that using CSS’s attribute selector:
