In this new Pattern Build series, we’re going to pick a pattern on the web and write modular, responsive, and reusable HTML and CSS for the particular pattern. This week, we’re going to recreate the cards seen on CodePen.
Articles I've written about workflow, code, tools, productivity tips, and more.
I’ve talked a lot about GitHub in the past for version control, as well as working collaboratively with a team. However, I’ve found additional uses for GitHub. Particularly, storing documents -- a collection of Markdown files -- that are managed entirely within GitHub’s interface. Let’s talk about how to set this up.
In order to stay on top of projects and tasks, I use a combination of notes and todos. When working on a team, I use tools like Trello and GitHub, but these notes and todos are just for me, so I have a specific approach to how I manage them. Let’s talk about each of these systems of organization.
Spreadsheets are excellent for presenting information in an easy-to-read format. They allow you to present data, make calculations, and apply conditional formatting. But, if we’re being honest, they sometimes leave much to desire in terms of design. That doesn’t have to be the case, though! Let’s talk about some easy ways to format spreadsheets for maximum pretty.
Workflow automation is all about continual refinement. Nothing is perfect, and you will continually evaluate and improve your systems of organization. It’s an endless battle, and things can always be better.
Alfred is a powerful efficiency application for the Mac. I use it to launch applications, search sites on the web, create custom workflows, and a whole lot more. I’d like to focus on a few, specific aspects of Alfred usage: Custom Searches and Hotkeys.
To test systems of organization, I use a process I call the “Input-System-Action Process.”
For me, organizing is second nature. It weaves itself through all facets of my life. And this includes the code that I write. No matter the language, I “design” my code to optimize readability. I’m biased, but I think it looks better, too.
On the front-end team at Code School, we've implemented the idea of "Weekly Project Iterations."
Workflow automation improves efficiency and productivity, and there are a variety of ways to achieve it. Continuing on in the series on workflow automation, let’s turn our attention to Keyboard Maestro.
Workflow automation improves efficiency and productivity, and there are a variety of ways to achieve it. Continuing on in the series on workflow automation, let’s turn our attention to Hazel.
Workflow automation improves efficiency and productivity, and there are a variety of ways to achieve it. Continuing on in the series on workflow automation, let's turn our attention to bin scripts.
That's my definition of workflow automation. Essentially, it's reducing a set of tasks into an automated process. In this first article in a series on workflow automation, I'd like to discuss what types of things I consider workflow automation, why it's important, and how to determine when and where to set it up.
As developers, we spend a lot of time on the command line. It's important to not only be comfortable working in it, but to create efficiencies for how we work in it. Let's go through 5 tips to improve productivity on the command line.
Contextual style changes can bloat CSS. Whether it's random spacing or color changes (damn designers), small variations can get out of hand. How can we manage contextual tweaks _without_ growing the size and scope of our CSS? Let's take a look at using single-property tool classes for managing one-off design changes.
I constantly evaluate my workflow to discover areas of repetitiveness. If I’m continually repeating a particular process, I will work on automating it.
A common misconception I see with new developers is the apprehension to “Google” something. There’s an assumption that Googling is wrong or somehow cheating. Despite popular belief, developers don't store every single piece of information in their head. Developers use Google. A lot.
At Code School, we work hard to constantly improve the front-end development team organization. I thought I’d spend some time talking about the organization as it stands right now.
I spend a large majority of my day working with Git and GitHub. I’m also very opinionated, so this is a random collection of opinions and techniques that I employ while working in said technologies.
Trello is a great tool for managing projects. I've developed a specific project template for use in Trello that has been working out really well.
Gulp is a streaming build system that helps to automate and enhance your workflow. Let's look at some ways that we can clean up the Gulpfile in order to make it more modular and customizable.
Firstly, what are "dotfiles"? Well, dotfiles is a name used to denote a set of configuration files (generally hidden ones with a '.' before the filename) that are used to set up and configure various applications and settings.
If you work with Git and GitHub on a large team, then you're probably familiar with the idea of feature branches.
When it comes to writing modular CSS, I try to stick to the Single Responsibility Principle wherever possible. This will limit the scope of your modules and allow you to easily build and combine them to create flexible style patterns.
I'm not good at sharing the things that I build. Well, externally, that is. My coworkers know all about the little applications I create, and I'm more than happy to show them off to them. Why? Is it because I trust them and know that they'll only give me constructive feedback? Am I scared of the Internet? I don't know. Whatever the reason, I'm not doing it anymore. I've let way too many projects sit in a private GitHub repository. No more!
Middleman is my preferred tool when it comes to building static sites. Not only do I use it on all my deployed sites, but I use it even when I'm prototyping an application that will ultimately move into a different system. Let's talk about static-site generators and, more specifically, Middleman.
In this article, I'm going to cover the basics I go through when setting Moom up, and cover some more advanced tips and tricks. Hopefully this is useful if you have trouble understanding Moom's full power. Let us begin.
We all have moments where a project stagnates, we get "writer's block" (or at least the equivalent of that for front-end developers), and we need a "win" to keep the motivation rolling. For me, that's building little apps for myself. Let me tell you about "Gificiency," my outlet that helped reinvigorate my motivation on a project I was working on.
Alfred is a fantastic application that I could simply not live without. It's the first application that I install on a fresh copy of OS X. I'm going to show you how to set it up to optimize your productivity with the application.
It feels like such a short time ago that Nick Walsh and I, determined to apply proper conventions to our CSS, came together and created MVCSS.
The usefuless of this setup guide will vary based on your personal preferences for how your text editor should function, but it should help with the initial setup of Sublime Text.
I would like to share my thought process behind building modular HTML and CSS components. I assume you have a solid grasp of HTML and CSS, and you are looking to get into the more complex details of writing modular, maintainable markup and styles.
One of my favorite aspects of the team at Envy Labs is the way in which problems are approached. They are not viewed as something only pertinent to the team member that is tasked to work on that particular problem. Rather, problems are approached in unison, using what I like to term, "The Method of We."
Moom is a real thing, and it is amazing. There are numerous window management solutions out there on the Mac (Divvy, Breeze, etc.), but Moom is by far my favorite.