Article Archives

The WP REST API for Remote Control WordPress

At my day job, we have about 1,000 sites spread across 30 WordPress multisite installs. The installs all run many of the same plugins and settings, especially at the network level. This causes a lot of wasted time for our staff: They have to manually repeat the same settings across 30 installs. Because of this, we're moving to something I like to call "Remote Control WordPress".

(more…)

How I Ended Up With Element Queries, And How You Can Use Them Today

We often want a component to respond to the dimensions of its parent element rather than the dimensions of the browser window. Currently that’s not possible but ultimately that’s the idea behind Element Queries, and over on Smashing Magazine Tommy Hodgins has written about the development of EQCSS.js, a JavaScript library which allows developers to write element queries.

This implementation of element queries is interesting as it suggests that we can style an element dependent on the features of another element, even if it’s not the parent. Tommy makes an example like this:

@element '.widget' and (min‐width: 500px) {
  body {
    background: red;
  }
}

If the .widget element is larger than 500px then the body would change its background color, and so this opens up a whole new field of experimentation with CSS. It’s pretty exciting stuff, if you ask me.

Collaborative Engineering and Design Tools

Working at any large company, the greatest hurdle is always the problem of scale. Be it engineering, design, or how they work together, communication is the key to a successful business. Here are some of the tools that I've seen help a great deal while collaborating on a large team. With a number of engineers and designers in the mix — not to mention hybrids like me — working together seamlessly and staying focused on a common goal for a long period of time can be challenging. Here are a number of tools I've seen firsthand to ensure tight and seamless collaboration and communication.

(more…)

A Front End Developer is Aware

One idea that has lodged itself into my brain recently (largely from this panel discussion) is how a front end developer needs to be aware. In a general sense, the front end developer is positioned in the middle of lots of other jobs. Everybody involved in a web team ends up talking with the front end developers. That makes sense. The front end developers create the actual thing people interact with. Everything comes together with the front end developer. Perhaps that's why it's such a fun job!

Because the front end developer is this central hub position and dealing with lots of different people doing lots of different jobs, the job can be done better if they are aware. Aware of everything else that makes a website tick.

(more…)

​Sponsored: Stop Running Out Of Money

YNAB: You’ve Never Budgeted Like This Before

YNAB is different because it works. By combining a proven method with award-winning software, on average users save $200 the first month, and $3,300 by month nine. YNAB will teach you to think about your money differently and give you the tools to put it into practice. What have you got to lose? (Except all that debt and stress, so, sort of a lot, actually.)

Sign up for a 34-day free trial to see for yourself. No credit card required.

Leverage WordPress Functions to Reduce HTML in your Posts

There is a debate on whether HTML classes belong in your content. As in, classes that are strictly related to the presentation of that content. Sometimes the use of these classes is unavoidable. A callout paragraph, a pull quote, a carousel in the middle of a post... you'll need classes to style and add functionality to these things.

While you sometimes need them, the less you write them into the actual post content, in my opinion, the better.

(more…)

The Ninth Fourth

Another year! They tick by all-too-quickly these days. It's time for another commemorative post, as we do. A state of the union. A mile-marker style post where I talk about the year gone by and where things stand 'round here.

(more…)

Makin’ GIFs

These are the ways in which I make GIFs. Sometimes for blog posts. Sometimes for tweets. Sometimes for documentation. Sometimes for fun. GIFs can be tremendously useful and communicate better than a still image or even video in some circumstances.

I use a Mac so these are mostly Mac things.

(more…)

Sponsor: ​The Best Checking Account in America

Money magazine recently named The Aspiration Summit Account as the "Best Checking Account in America".

​The Summit Account is an online-only checking account with no fees, no minimum balance and no minimum monthly deposit requirements. You can earn up to 1.00% interest and get unlimited ATM fee reimbursements. Perfect for frequent travelers and smart savers!

Interestingly, Aspiration incorporates a "pay what is fair" model. You choose your price and pay a "tip", a monthly recurring payment up to $6 per month (you can choose as little as $0). Best of all, the company donates 10% of its revenue to charity.​ Secure your spot!

Dreamweaver Beta

The only jokes more played out than IE jokes are Dreamweaver jokes. But Dreamweaver just dropped a new Beta that some developers are pretty into. Anselm Hannemann:

This is a reduced workspace that then deactivates a couple of tools to declutter the UI from panels that are intended for users seeking for UI-supported editing. The new coding workspace simply focuses on code, and is intended to please professional coders who don’t want to use the visual tools and prefer a basic code editor with some context-helpers.

Quick Edit looks interesting - it takes you to the relevant CSS based on the HTML element you have selected in the HTML code. Preprocessing built-in is smart, too.

Weird that they demo Emmet, but don't call it Emmet, they call it a "Web Development Toolkit"

Recreating the Twitter Heart Animation (with One Element, No Images, and No JavaScript)

I recently saw a recreation of the Twitter heart animation among the picks on CodePen. If I happen to have a bit of time, I always look through the code of demos that catch my attention to see if there's something in there that I could use or improve. In this case, I was surprised to see the demo was using an image sprite. I later learned that this is how Twitter does it. Surely it could be done without images, right?

(more…)

PHP School (Learn PHP Through Command Line Workshops)

The following is a guest post by Aydin Hassan, who is going to introduce to you a really compelling way to learn PHP. I'm sure all of us get asked by our less experienced acquaintances "how do I get started with X?" or even "what book should I buy?" Books can be great, but given the choice, learning code by actually coding in an interactive environment will do you better.

(more…)

How to Ask Good Coding Questions That Get Great Answers

I see my fair share of poorly-asked technical questions. Zell Liew's advice:

The onus is on you to craft questions that others can understand and reply quickly.

Reminds me of two excellent sentences by Pamela Marie:

And also: Reduced Test Cases

Sponsor:​ Bushel – A Beautifully-Designed Solution for Managing Apple Devices

Bushel is a cloud-based Mobile Device Management (MDM) solution for the iPads, iPhones, and Macs in your workplace. Bushel makes device management accessible and affordable for everyone, so businesses can support their users without help from IT.

Bushel helps you:

  • Configure settings on all of your Apple devices quickly and consistently over the air.
  • Manage your devices by centrally deploying apps anytime from anywhere.
  • Ensure the sensitive company information your employees access on their Apple devices remains secure.
  • Enforce passcodes and encryption over the air and even remotely lock or wipe a device.

Manage 3 devices for free. Add more for just $2/device/month.

Don’t Overthink It (Flexbox) Grids

Four years ago I posted "Don't Overthink it Grids" and it resonated with quite a few people. Even back then, I thought we might have been at Peak Grid. Someone was promoting a new grid framework practically every week.

That article was my way of saying: "Fear not! You can make a grid yourself! You don't need a complicated framework." It might not have been quite as fancy, but that's how I rolled. You float a couple of elements with some percentage widths and call it a day.

These days, if you are ready to jump to flexbox for layout, DIY grids are even easier.

(more…)

The Essential Meta Tags for Social Media

These days, almost every website encourages visitors to share its pages on social media. We’ve all seen the ubiquitous Facebook and Twitter icons, among others, just begging to be clicked. This comes as no surprise as sharing via social media, the internet incarnation of word-of-mouth, is one of the most effective ways for businesses and individuals to gain awareness.

When users choose to share these links, it is tasked to the web developer to make sure that the associated web pages are properly prepared, which is what we’ll look at now. Facebook and Twitter are, by far, the most popular social media platforms, so let’s focus on those two.

(more…)

​Sponsor: ​Hired – The End of Job Searching

​Designers and developers are in demand, so shouldn't companies apply to hire you instead of the other way around? That's exactly how it works on Hired.

Hired is a platform that gives you an easy to way to get jobs at top companies in SF, NYC, and 14 other tech hubs around the world.

It's totally free, and Hired will block your employer and anyone else you want from ever seeing your profile. Even if you're just curious to find out your market value, trying Hired is easy and there's no commitment. Just click here to create an account, and instantly apply to 3,000+ companies within 10 minutes.

Google Fonts Redesign

It's a big redesign of a site I'm sure all of use have visited many, many times. It even resides on a new subdomain: fonts.google.com.

Live typing samples in the search index for the win! There are also much nicer font specimen pages with clearer examples, cool/nerdy data visualizations, and pairing recommendations. Reminder that you may want to use a bit more sophisticated font loading than the snippets they provide, though.

Typography Handbook(s)

I ran across this Typography Handbook the other day and thought it was very well done. It gets you right away by looking at two resumes and having your rather instinctively prefer the one with nice type, even though the information on them is exactly the same.

Reminds me of how many other typographic "handbooks" there are:

Form Validation UX in HTML and CSS

You can do and impressive amount of form validation with just HTML attributes. You can make the user experience pretty clean and clear with CSS selectors. But it does require some CSS trickery to get everything just right!

(more…)

Interactive Data Visualization: Animating the viewBox

Controlling the way that a data visualization lays out on your page on the fly is powerful in terms of conveying information. In the past, we've talked about how we can use this to hide and show information for responsive development. When working with SVG, we can do this by using the viewBox as a camera, isolating the relevant information on the page to highlight information for the viewer. There are so many uses for this technique. We're going to be looking at a new way of working with it dynamically to get the processor to do the heavy lifting for us.

(more…)

Run Multiple Find & Replace Commands in Sublime Text

I run Find & Replace commands a lot. Sometimes I'm changing a class name. Sometimes I'm looking for a function reference and want to make sure all instances have been accounted for. Sometimes I'm working on an article and and some conversion process requires some global changes. I've often wished I could run a single command to run all the Find & Replace commands I normally have to do individually. I finally web searched my way through a solution so figured I'd write it down.

(more…)

AOS: CSS-Driven “On Scroll” Animation Library

The following is a guest post by Michał Sajnóg, a front end developer at Netguru. Michał has created one of those "when you scroll to here, trigger this animation" libraries. One of the things I like about it is that it leaves as much as it can to CSS for creating and controlling the animation themselves. Not to mention it's proved itself by working well on a number of production sites. I'll let Michał walk you through it.

(more…)

“… have a tendency to latch onto big opinions about How Things Should Be.”

I like Rachel Nabors measured thinking in this week's Web Animation Weekly:

Scrolljacking has become a dirty word. But what is scrolljacking, and is it really all bad? Motion design on the web is young. Many agencies latch on to the newest techniques to dazzle clients, but industry heavyweights and aspiring leaders also have a tendency to latch onto big opinions about How Things Should Be.

At best: design innovation should propel the web forward while experienced leaders apply the brakes of caution lest we hurt ourselves or our users. At worst: creative trends make portions of the web uninhabitable for users; or would-be heroes bolster their own position by adopting black and white views on new and possibly revolutionary design techniques. For this reason, we must turn to research and facts rather than opinions and fashion to help us think for ourselves.

Find and replace "scrolljacking" with "whatever controversial thing people are talking about".

Websites We Like: June 2016

We have a new thing we'd like to try! We're going to round up some websites that we like and share them with you. We’ll take a look at the weird and peculiar, the shocking and downright odd; websites that spark our interest and make us double-take. We might choose a website for a number of reasons, such as in the use of a particular technical feature, or it might be a website that stands out from the crowd because of its typography.

This is entirely subjective and not a competition. Let’s begin!

(more…)

Improving Your CSS with Parker

Harry Roberts has written about Parker, a stylesheet analysis tool by Katie Fenn. He explains why using tools like Parker are wonderfully helpful to developers:

I use Parker almost daily, and regularly go through it with my clients and workshop attendees. Parker surfaces some really interesting numbers, and if you know what they represent, you can draw some really valuable insights about your CSS from them.

Harry also describes a very important reason as to why developers might use lots of selectors per rule. So instead of containing styles within a single class, such as .btn { }, many developers often chain multiple selectors together, like .btn, .input[type="text"] {}, which tends to lead to unmaintainable code:

The surprisingly still-persistent fear and avoidance of judicious use of classes in our HTML often leads to developers creating (and subsequently maintaining) unwieldy lists of selectors that are all chained to the exact same declarations. By adopting a more class-based architecture, we can begin to recycle these rules in a much more terse and practical way.

Sponsor: Segment, the last integration you’ll ever need.

Are you tired of integrating third-party services into your website? Yeah, we were too. That’s why we made Segment.

From advertising to personalization and support, our extensive partner network includes the industry’s leading marketing technology solutions, data warehousing and analytics tools. Segment’s developer-friendly APIs set the standard for customer data platforms and is trusted by thousands of awesome companies like New Relic, Crate & Barrel, Intuit, Product Hunt, Instacart, InVision, and Bonobos.

With Segment you can reclaim hours of tedious integration work and get back to building your core product. We even offer a free tier. Try Segment today.

Instant Loading: Building Offline-First Progressive Web Apps

There was a lot of great talks from Google’s I/O event this year, and Jake Archibald’s talk on building offline-first is certainly one of them. The DevTools in 2016 talk is great too.

Or, decide for yourself! There is a playlist of all of them and Robert Nyman rounded up everything as well.

Also, if you're interested in hearing more about this "Progressive Web Apps" stuff and the debate around it...

Ways You Need To Tell The Browser How To Optimize

In the past few years, there has been a number of front end features in which the performance onus has shifted from browser to developer. Rather than the presumed "browsers will get faster at running my code", there is a little more "I need to change the way I code for browsers to get faster."

(more…)

Vanilla List

Vanilla List is a repository of JavaScript libraries; datepickers, form validation and push notifications are just some of the libraries available if you can’t (or don’t want) to a library dependency.

inStyle (Modifying the Current Selector `&` in Sass)

The following is a guest post by Filip Naumovic from Salsita Software. Filip has built a Sass tool to help with an issue I know I've experienced many times. You're happily nesting in Sass. You're maybe a level or two deep, and you need to style a variation based on some parent selector. You need to either break out of the nesting and start a new nesting context, or go nuclear with @at-root. I'll let Filip tell the story of his new tool that changes that.

(more…)

​Sponsor: ​LightCMS

LightCMS is the fastest growing white-label Content Management System on the market. Their Developer Program gives you all the tools you’ll need to build your web design business on a top-tier, cloud-based platform and your customers don’t ever have to know it’s not your CMS. They’ll even invoice your customers on your behalf. You’ll of course have full access to the HTML and CSS of your sites and you’ll even get a free website for your business.

If you're sick of patch updates and security vulnerabilities, LightCMS may be a good option. You can try it free for 14 days. No credit card required.

Considerations for styling the `pre` tag

I wrote about a bunch of design things you should think about if you use the <pre> tag in your content. Things like:

  1. Do you use the <code> tag inside?
  2. Choosing a font stack
  3. To wrap or not to wrap?
  4. How you can (easily) make code blocks auto-expanding
  5. Dangers if it is headed to email
  6. Syntax highlighting
  7. Language labeling
  8. White-space control
  9. Alternatives

Sticky Footer, Five Ways

A brief history, if you will.

The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.

(more…)

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag