I write code.

My name is Jacob Bearce. Clean, custom code is what I do. I've built everything from feature-packed WordPress templates to single-page showcase sites. Follow me here for weekly code releases and development tips.

Setting up my own Git server

I’ve never been a user of Git, but lately I’ve been really interested in how I can improve my work flow. I’d been told by several people that Git is fantastic and I should give it a shot, but I just never got around to trying it out.

This week I decided that would change. I spoke with Jason Kinney, who used to work at Weblinx with me, and he explained many of the great things about Git to me. While many features are great for people who collaborate, I work on most of my projects alone, so the thing that really caught my attention was version control.

Using Git, you can have backups of every version of your site. You can revert back to any stage in the development cycle, merge back certain files, create separate branches for development vs production, and much more.

So off I went, trying to get started with Git. I looked in to hosting my projects on GitHub, but unfortunately I couldn’t use that for most of my projects with Weblinx because they’re closed source.

I did some digging, and I found a great looking system called GitLab. I had an old netbook laying around, so I installed Ubuntu Server 12.04 LTS on it, and got to work. GitLab offers great “Omnibus” packages that make it super easy to install on several OS’s. Sadly, because I had to use an x86 chip, I couldn’t use their pre-built packages. Instead, I followed the instructions provided for installing from source.

Strangely, when I first tried setting everything up, I kept getting errors when trying to use apt-get to install anything. I did some Googling and finally ended up posting a question on the Ask Ubuntu site. After several hours of fighting with the command line (it’s like an alien language to me), and with the help of a user on Ask Ubuntu, I was able to fix the issue.

It turns out I was having a “hash mismatch” issue. I was able to run some commands to clear this up:

sudo rm /var/lib/apt/lists/*
sudo apt-get update

So on I went, having no more problems plugging in commands until I hit Step 5, Redis. Every time I would try to run echo 'unixsocketperm 770' | sudo tee -a /etc/redis/redis.conf, and then sudo service redis-server restart, I would get an error saying something about “too many parameters.” After a few more hours of Googling, I discovered that the version of Redis that comes bundled with Ubuntu Server 12.04 LTS doesn’t support unixsocketperm. So I just skipped that step and everything worked fine.

I continued down the list, and everything else went fine. Or so I thought. The next day when I tried to connect, I realized something was amiss. I couldn’t push/pull/etc with git, so I did some more research. It turns out I had forgotten to set the gitsite_url. I set it to the domain I set up, http://git.ghsotlyco.de/, and it started working fine.

The only issue remaining is that notification emails aren’t sending out. I’m not too worried about that for my uses, but it is one little thing that’s not working.

Overall, this project went really well and I think it’s going to turn out to be a great investment. I can now privately manage my projects using git, without having to pay for private repos.

My next project is figuring out how to create automatic off-site backups of the server. I’ll report back when I get that up-and-running.

Brackets! An awesome open source coding application

For the past few years, I’ve been using Code Writer for Windows 8 as my main coding applications. It’s a great app, with a  simple, clean interface and tons of great features. Unfortunately, it doesn’t support SCSS. That meant when I decided to start learning how to write SASS I’d have to abandon Code Writer. I was sad to leave it, but after my first week using a new application, I’m not missing Code Writer at all.

I’ve switched to Adobe’s new open source application called Brackets. There’s a ton of great features, my favorite of which include:

  • Extension support. Anyone can write an extension for just about anything. There are extensions for WordPress hinting, color previews, SCSS lint, and tons more.
  • The interface is super clean and just great to look at.
  • A ludicrous amount of files are supported. Markdown, SCSS, PHP, HTML ASP, and tons more.

All that being said, there are a few drawbacks to using Brackets:

  • There doesn’t seem to be any way to disable tag autoclosing. Even worse, when code autocloses, and you hit Ctrl+Z to undo it, it gets rid of the last >, and of course adding it back in autocloses the tag again. You have to delete the extra tag by highlighting it and deleting it. It’s a pain, but it’s one of only a few complaints, so I can live with it.
  • Code Writer had a neat feature that would you swap two characters by placing your cursor between them and hitting a keyboard shortcut. Brackets doesn’t support this.

While there’s definitely a few annoyances, overall, I love Brackets, and I don’t think I’ll ever be able to go back.

brackets.io

Learning SCSS for the First Time

Today, I decided to try out SCSS for the first time. SCSS, also known as SASS, is essentially an extension of CSS that allows you to use things like variables and JavaScript-like functions and “mixing” to supercharge your code.

When I first heard of SCSS, I thought it sounded unnecessary, as if it would overcomplicate my work flow. I was worried I’d have to change the way I write code, or that it’d be very complex to learn.

I must say, after giving it a shot, it’s fantastic, and I don’t think I’ll ever be able to go back to using plain CSS. For me, SCSS to CSS is as jQuery is to JavaScript. It simplifies things incredibly, as a ton of extremely useful pre-built functions, and is super easy to learn.

I’ve only skimmed the surface of SCSS, but so far, these are the features I can’t live without:

  • Math based values. I can use math functions to calculate my line height, font size, and margins in ems, and set up fallbacks for unsupported browsers with one line of code.
  • Variables. In most designs, you’re likely to reuse the same color in several different elements. For example, a navigation bar might be blue, headers might be blue, and links might be blue. Using SCSS, you can set up a variable and call that variable wherever that color is used. No more copy pasting or referencing a PSD to retrieve the same color over and over.
  • Color functions. I can use SCSS’s feature “lighten,” or “darken,” to easily change a color for a hover state.

I’m using these two tools to code and compile my SCSS:

  • Brackets – a great open-source code editor from Adobe.
  • Prepros – a compiler of many languages with many features, like creating a local server, auto-refreshing previews, and built-in FTP.

I can’t wait to get in more involved and learn more

Disclaimer:

I am not a designer. All designs featured on this website where designed by team members at Weblinx, Inc. For information on a specific design, contact me with the name of the project.

edgemark-desktop
Disclaimer:

I am not a designer. All designs featured on this website where designed by team members at Weblinx, Inc. For information on a specific design, contact me with the name of the project.

fox-valley-park-district-desktop

Fox Valley Park District

I just wrapped up the Fox Valley Park District project. We where lucky enough to get a responsive rebuild project thanks to some work we did for them regarding their mega menu. This is a WordPress site, and I have to say, the templates we had to work with where a mess. I opted to completely scrap the temaplte and start over. Once I got done with it, all the code was clean, functional, and concise. And the responsive conversion turned out great as well!

It should be noted that Weblinx didn’t design this one.

Disclaimer:

I am not a designer. All designs featured on this website where designed by team members at Weblinx, Inc. For information on a specific design, contact me with the name of the project.

bartlett-park-district-desktop

Bartlett Park District

I recently re-built the Bartlett Park District site from the ground up to include responsive layouts. Considering the sheer amount of content on the site, I was able to complete this project relatively quickly. Bartlett Park District has a custom content management system (built by my colleagues at Weblinx), and using the templating system I was able to apply changes throughout the site.

Disclaimer:

I am not a designer. All designs featured on this website where designed by team members at Weblinx, Inc. For information on a specific design, contact me with the name of the project.

Test Caption
Disclaimer:

I am not a designer. All designs featured on this website where designed by team members at Weblinx, Inc. For information on a specific design, contact me with the name of the project.

summit-machine-tool-desktop
Disclaimer:

I am not a designer. All designs featured on this website where designed by team members at Weblinx, Inc. For information on a specific design, contact me with the name of the project.

wmc-productions-desktop

Smooth Responsive Widths

I’ll often see responsive websites that have what I call “jumps.” Instead of smoothly transitioning from desktop to tablet to phone, a site will have three “states,” and each state is coded for a specific width (or 100% width). While this certainly gets the job done, it feels half-complete. These jumps can often result in poorly designed sites for 7″ tablets, a huge market. Small tablets like the Nexus 7 or iPad Mini should display a smaller version of the tablet site, not the phone version, as they often do.

Instead of these three view states, I create what I call a variable responsive site. I trim things down at specific screen sizes, but I never do any hard jumps to specific view sizes. I test the site at all possible widths (between 320px and 1280px) and create break points where things start to get funky. This ensures the site looks good, no matter what device you’re using it on.

Part of this is simply ensuring a nice transition to variable width. We’ll often start a site with, say 1024px width, but of course we need that to automatically respond to the browser size at a certain width. Instead of forcing 100% width at 1024px browser width, I’ll instead create a media query like so:

#wrapper {
width: 1024px;
}

@media screen and (max-width: 1279px) {
#wrapper {
max-width: 1024px;
width: auto;
}
}

This simple bit of code means that when the browser gets resized, there will never be a jump in width. When the window gets too small, #wrapper will simply smoothly transition in to the full width of the browser window.

← Older