Select Page

Category: Article

Getting Around a Revoked Certificate in OSX

Let me start this off by saying this is not an ideal trick and one I hope no one else needs to use because it’s a bad idea to work around a browser feature that’s aimed to protect your security. That said, I am in the process of testing a product and ran into a weird situation where our team had to revoke the SSL certificate we had assigned to our server. We’re going to replace it but I have testing to do in the meantime and need access to our staging server, so waiting is kind of a...

Read More

The Output Element

Last night I was rooting around in the cellars of a particularly large codebase and stumbled upon our normalize.css which makes sure that all of our markup renders in a similar way across different browsers. I gave it a quick skim and found styles for a rather peculiar element called that I’d never seen or even heard of before. According to MDN, it “represents the result of a calculation or user action” typically used in forms. And rather embarrassingly for me, it isn’t a new and fancy addition to the spec since Chris used it in a post all the way back in 2011. But regardless! What does output do and how do we use it? Well, let’s say we have an input with a type of range. Then we add an output element and correlate it to the input with its for attribute. See the Pen Input Output #2 by CSS-Tricks (@css-tricks) on CodePen. It… doesn’t really do anything. By default, output doesn’t have any styles and doesn’t render a box or anything in the browser. Also, nothing happens when we change the value of our input. We’ll have to tie everything together with JavaScript. No problem! First we need to find our input in the DOM with JavaScript, like so: const rangeInput = document.querySelector('input'); Now we can append an event listener onto it so that whenever we...

Read More

Creating Vue.js Transitions & Animations

My last two projects hurled me into the JAMstack. SPAs, headless content management, static generation… you name it. More importantly, they gave me the opportunity to learn Vue.js. More than “Build a To-Do App” Vue.js, I got to ship real-life, production-ready Vue apps. The agency behind Snipcart (Spektrum) wanted to start using decoupled JavaScript frameworks for small to medium sites. Before using them on client projects, however, they chose to experiment on themselves. After a few of my peers had unfruitful experiences with React, I was given the green light to prototype a few apps in Vue. This prototyping...

Read More

Reboot, Resets, and Reasoning

I saw in an article by Nicholas Cerminara the other day (careful visiting that link, looks like they have some tracking scripts run wild) that Bootstrap 4 has a new CSS reset baked in they are calling Reboot: Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon. If you’re new to CSS development, the whole idea of a CSS reset is to deal with styling inconsistencies across browsers. For example, just now I popped a onto a page with no other styling whatsoever. Chrome applies padding: 2px 6px 3px; – Firefox applies padding: 0 8px;. A CSS reset would apply new padding to that element, so that all browsers are consistent about what they apply. There are loads of examples like that. By way of a bit of history… In 2007 Jeff Starr rounded up a bunch of different CSS resets. The oldest one dated is Tantek Çelik’s undohtml.css (that’s a direct link to the source). We can see that the purpose behind it was to strip away default styling. /* undohtml.css */ /* (CC) 2004 Tantek Celik. Some Rights Reserved. */ /* http://creativecommons.org/licenses/by/2.0 */ /* This style sheet is licensed under a Creative Commons License. */ /* Purpose: undo some of the default styling of common (X)HTML browsers */ By far, the most...

Read More

5 Tips for Starting a Front-End Refactor

For the last two weeks, I’ve been working on a really large refactor project at Gusto and I realize that this is the first time that a project like this has gone smoothly for me. There haven’t been any kinks in the process, it took about as much time as I thought it would, and no-one appears to be mad at me. In fact, things have gone almost suspiciously well. How did this happen and what was the issue? Well, we had a problem with how our CSS was organized. Some pages in our app loaded Bootstrap and some didn’t. Others were loading only our app styles and some weren’t loading the styles we served from our component library, a separate repo that includes all our forms, buttons, and variables, etc. This led to all sorts of design inconsistencies but most important of all it wasn’t clear how to write CSS in our app. Do the component library styles override Bootstrap? Does Bootstrap override the app styles? It was scary stuff. The goal was a rather complex one then. First, I needed to figure out how our styles were loaded in the app. Second, I wanted to remove Bootstrap from our node_modules and make a new Sass file with all those styles. Third, I then had to remove all our Bootstrap styles and place them into the component library...

Read More
000webhost logo