Search
JavaScript Labels
15.1.2019
No matter how long you’ve been a JavaScript developer, there will always be language features that you didn’t know about until you saw them in a fringe piece of code. Your reaction generally is a bit like: One of those features I see developers quizically trying to figure out...
Using React Portals to Render Children Outside the DOM Hierarchy
15.1.2019
Say we need to render a child element into a React application. Easy right? That child is mounted to the nearest DOM element and rendered inside of it as a result.
render() {
return (
<div>
// Child to render inside of the div
</div>
);
}
But! What if we want...
Super Simple GraphQL with Node
14.1.2019
GraphQL is a specification and therefore language agnostic. When it comes GraphQL development with node, there are various options available ranging from
Algorithmic Layouts
10.1.2019
Don't miss this video by Heydon that digs into CSS layouts. It's great how he combines fundamental knowledge, like the way elements flow, wrap, and can have margin with new layout methods like flexbox and grid (with specific examples). Of particular note is the clear demonstration of how flexbox...
Toggling Animations On and Off
9.1.2019
A nicely detailed tutorial by Kirupa that gets into how you might provide a UI with persisted options that control whether animations run or not.
The trick is custom properties that control the movement:
body {
--toggle: 0;
--playState: "paused";
}
Which are used within animations...
How To Learn CSS
8.1.2019
Outside of my extreme envy of the SEO they are going to get out of this, Rachel is spot on here. Learning CSS has some pillars, like language syntax, selectors, layout, and flow that, once learned, unlock your CSS merit badge.
What I would add is that if you really want to learn CSS, give yourself...
How to Add a User Stylesheet in Firefox
29.12.2018
While many like to complain about CSS these days, it’s important to remember how amazing CSS is; the CSS language is: easy to learn easy to read easy to write simple to understand Web developers and designers alike love that CSS allows us to take text/media and present it in a beautiful...
Regarding CSS’s Global Scope
20.12.2018
html {
font-family: Roboto, sans-serif;
}
With the except of some form elements, you've just set a font on every bit of text on a site! Nice! That's probably what you were trying to do, because of the probably hundreds of elements all over your site, setting that font-family every time would...
Build a Secure Node.js Application with JavaScript Async Await Using Hapi
18.12.2018
At the core of the JavaScript language is its asynchronous programming model. Unfortunately, dealing with callback functions has long been a source of frustration for many developers. JavaScript Pr
Nobody is quite wrong.
17.12.2018
There are two opposing views on using non-polyfillable new web features that I find are both equally common in our industry:
Websites don't need to look the same in every browser. The concept of progressive enhancement helps with that. There are tools, even native language features, that help with...
Keep Math in the CSS
12.12.2018
There is a sentiment that leaving math calculations in your CSS is a good idea that I agree with. This is for math that you could calculate at authoring time, but specifically chose not to. For instance, if you needed a 7-column float-based grid (don't ask), it's cleaner and more intuitive:
.col...
Why isn’t it <style src=””>?
10.12.2018
The way JavaScript works is we can do scripts as an inline block:
<script>
let foo = "bar";
</script>
Or, if the script should be fetched from the network...
<script src="/js/global.js"></script>
With CSS, we can do an inline block of styles:
<style>
.foo...
Accessible SVG Icons With Inline Sprites
7.12.2018
This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here's the ideal example:
<button type="button">
Menu
<svg class="svg-icon"
role="img"
height="10"
width="10"
viewBox="0 0 10 10"
aria-hidden="true"
focusable="false">
...
CSS Selectors are Conditional Statements
6.12.2018
foo {
}
Programmatically, is:
if (element has a class name of "foo") {
}
Descendent selectors are && logic and commas are ||. It just gets more complicated from there, with things like combinators and pseudo selectors. Just look at all the ways styles can cascade.
Jeremy Keith:
If...
How to Get and Set CSS Variable Values with JavaScript
8.10.2018
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,...
Build Your First Angular Website: Contact Form Validations
30.8.2018
We've created our contact form and are able to submit it using the processForm() method on our class:
<!-- form goes here -->
<form (ngSub
What bit of advice would you share with someone new to your field?
18.7.2018
The most FA of all the FAQs.
Here's Laura Kalbag:
Find what you love. Don’t worry about needing to learn every language, technique or tool. Start with what interests you, and carve your own niche. And then use your powers for good!
And my own:
Buy a domain name. Figure out how to put an HTML file...
Why 'This' in JavaScript
14.7.2018
While JavaScript is a fun and powerful language, it can be tricky and requires a proper understanding of its underlying principles to mitigate common errors.
In this post, we shall be introd
The div that looks different in every browser
13.7.2018
It's not that Martijn Cuppens used User Agent sniffing, CSS hacks, or anything like that to make this quirk div. This is just a plain ol' <div> using the outline property a la:
div {
inset 100px green;
outline-offset: -125px;
}
It looks different in different browsers because browsers...
Emojis as Icons
11.7.2018
There are lots of unicode symbols that make pretty good icons already, like arrows (←), marks (✘), and objects (✂︎).You can already colorize these like a normal font glyph. Then, there are emojis, those full-color suckers we all know about. What if you could take just the shape of an emoji...