CodeinWP CodeinWP

Adding CSS to a Page via HTTP Headers

Adding CSS to a Page via HTTP Headers I’ve been coding websites for a long time but even I was a little puzzled when I came across a Hacker News comment where the commenter described their own makeshift CMS that involves using your own file system. The most interesting part to me was when the person said they add CSS to pages on their personal projects by means of HTTP headers.

I had heard of this technique before and the person does say in the comment that this doesn’t work in every browser. But I decided to do some research to figure out how one might do this and why this would be easier than just dropping in one or more <link> elements in the HTML.

Read Article

Front-end RSS Feeds (2020 Edition)

RSS Feeds Back in 2011, Paul Irish posted his personal list of frontend RSS feeds for front-end web developers. It was a great list, but after some time it needed some refreshing.

In 2014 I published my own list of categorized feeds for front-end developers. I cleaned up Paul’s feed list quite a bit and added some new feeds, while splitting the feed up into manageable categories.

Read Article

CSS4 is a Bad Idea

CSS4 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”.

Read Article

The Weird World of Infinity in JavaScript

Infinity in JavaScript 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.

Read Article

So You Really Want to Learn React? Well, So Do I.

Learn ReactI 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.

Read Article

DOM Element Dimensions and CSS Transforms

DOM Element Dimensions and CSS TransformsIn 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.

Read Article

Using the adoptNode() Method with Embedded iframes

Using the adoptNode() Method with embedded iframesThere’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:

Read Article

Being Aware of Initial Values in Your CSS

Initial Values in Your CSSIn 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:

Read Article

A Huge List of Summer Learning Resources for Front-end Devs

Learning ResourcesAs 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!

Read Article