ARWHD

2016

Quick, what are the two most useful features of every CSS pre-processor out there? Top of that list are probably variables and concatenating files. There have been rumblings about CSS getting native variables for a few years now and they’re finally in the wild in major browsers.

2015

I switch between browser and editor, from editor to terminal and then into the company chat at sporadic times. The amount of those transitions accrue to the point where it’s time to think critically about whether there aren’t easier ways of do it.

I’ve been trying to write this post for almost a year. Flexbox is a really well-supported feature by now. I’ve been using it on almost every site I’ve worked on since December 2013. By far the best way to understand how to use flexbox is to experiment with your layout, your UI components, your own needs.

I’ll keep this brief, there’s a lot of mindless dog-piling on Bower and package managers in general. I get it, it’s an easy target but that doesn’t solve the problem (neither does building another package manager).

We have a problem with graphics editors. There hasn’t really been an intentional application for designing user interfaces in, ever. Adobe keeps trying to make Photoshop for the web and for UI design, and it keeps coming up short for me and probably for a lot of other people. But remember, Photoshop is like 25 years old. And Photoshop is a photo editing software; layout, typography is an afterthought and lot of things you’re looking for are hidden or in layer styles.

I like SVG and I like Gulp.js and I don’t think that working with either should be a pain in any way. I’m going to walk through my way of building an icon system with Gulp. This may not be best way to work with SVG, but this is my current workflow for building icon systems.

2014

Following up with a post I wrote a little while back, I’m still learning JavaScript. There’s a lot of take in and the thing I find the most difficult is keeping terminology straight. I get what a loop and a variable are, but somethings in JavaScript are really similar in meaning and syntax that it makes it hard to follow stuff.

Responsive typography isn’t as hard as we make it out to be. After a lot of experimenting and a lot of screwing it up, I found the best way to respond to different screen sizes is to have a straight forward approach.

There’s a few technologies I’ve heard about, read loads about, played a lot with a little bit, gotten excited about, but have never used them in a real project for a client or for a side project. I felt really guilty for that, but now I don’t.

Most of the time I spend working on stuff is in Atom Editor from Github, it’s by far my favorite text editor. It’s amazingly customizable, flexible and I thought I would share how I customize it and use it on a daily basis.

If you write Sass there’s a chance you’re only seeing the tip of the iceberg. Most times when I write Sass everyday, I use imports, nesting and variables then less often mixins and extends. All makes authoring stylesheets incredibly easier, but that’s not all of what Sass can do, hell that’s not even close.

JavaScript has always been a pain point for me. It’s not a brutally visual language like CSS and isn’t as easy to pick up as Sass. Being a designer, I found it really hard to understand console.log or the difference between functions and methods, let alone what qualifies as an object; none of those things are on the surface.

Last week, a client asked me what responsive web design (RWD) is and I wasn’t sure where to begin describing what it is and how it would help her business. There are lots of things we ascribe to and associate with RWD as designers and hold to when defining it, while on the other hand when you talk someone outside the web/tech industry, most times clients and others I’ve talked to just think of it as “oh, like mobile”. And that doesn’t really being to cover what it is or what it really does for users.

I’ve used CSS transitions sparingly. But a few recent posts got me really interested it going to town. During 2013’s 24 Ways there was a post about the hover paradigm1 and it got me thinking about CSS transitions. Then this post on the Cognition Blog2 and that rekindled the thought that CSS transitions are a significant part of a website’s design.

I was preparing a longer redesign for a while. A lot of my energy was spent writing about web typography and I realized that I was seriously unhappy with the typography on this site. When I went to change it I then remembered that I had no deployment workflow in place to deploy the changes from my local site to the master branch of my repo on Github.

So you’re a freelancer or remote worker and you’re working from home. You’re passionate about what you do and love throwing yourself into learning new things and the projects you’re commissioned to do, and you can’t help but want to share about it in your blog. That’s all great. A lot of us are like that.

Every time I work with a client on a Wordpress related project, the number one thing being asked for is customization. Out of the box, Wordpress really isn’t very opinionated about what it will let you customize and the content you’ll be able to add. It comes with some basic content types (posts, pages, media, attachments, menus) and the rest is up to your imagination.

Designers need to care about performance. It’s a huge contributing factor to user experience and a main cause of higher bounce rates.
80% of page load time is due to the front-end: images, web fonts, scripts, stylesheets.

About Charles

Charles is the writer behind this site, he is a designer, a podcaster on Viewsources and stream of profanity on Twitter. ARWHD is a blog about design, front-end development and hitting your targets. Get more updates on Twitter. Subscribe via RSS.