Notice: wp_deregister_script was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or login_enqueue_scripts hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.) in D:\home\site\wwwroot\wp-includes\functions.php on line 3547 Ghostly Code - I write code.

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 code releases and development tips.

CSS Content Queries

In the past few weeks, Content Queries have taken the CSS world by storm. It’s a brilliant idea, particularly for sites with content management systems. Essentially you’re changing the way something is displayed based off of how many of that element exist. There’s even a great set of SCSS mixins already available!

The code is as simple as:

nav li:nth-last-child(n+6),
nav li:nth-last-child(n+6) ~ li {
    /* your code */
}

Read more about it at A List Apart.

http://alistapart.com/article/quantity-queries-for-css

Development Toolset: Spring 2015

I’m starting a new series of posts, where once a quarter I’ll post my current list of development software. This is the first of such posts.

Over the past few months, I’ve starting using Git and SCSS, both of which required some studying and re-thinking my workflow. I may have written about a few of these tools before. Here’s a list of all the tools I’m currently using:

Adobe Photoshop

Probably the best known image editing software in the world. I use Photoshop to slice up graphics that our designers put together. I’d actually like to replace this one with something a little more lean, but so far I haven’t found anything quite as good for Windows. If you have any suggestions, please comment!

adobe.com/photoshop/

Brackets

I’ve mentioned this one previously, and I still have very high praise for it. It’s an awesome, flexible code writer, completely with themes, extensions, and more. I use a handful of extensions with this, but the primary one is Brackets Git, a great tool that lets me perform Git operations right from within Brackets.

brackets.io
github.com/zaggino/brackets-git/

FileZilla

Honestly, I really don’t care for FileZilla, but it’s the best FTP client for Windows I’ve yet found. It’s not that it’s terrible, I just really can’t stand the UI. Prepros, an application mentioned below, does include some FTP capabilities, but they’re a lot more limited than FileZilla. If anyone has any suggestions for a beautiful FTP client, please comment below.

filezilla-project.org

Firefox Developer Edition

Lately I’ve been on an anti-Google kick, so when Mozilla announced their Firefox Developer Edition a few months ago, I jumped right on board. Firefox is fast, clean, and highly extensible, and Developer Edition has tons of great tools readily exposed in the toolbar.

mozilla.org/firefox/developer/

Gulp

While I’m no master, I’ve started looking at Gulp, a JavaScript-based task runner with tons of plugins. I’m currently using it to maintain the same asset files between static and WordPress sites, but I’m sure it can be used for much, much more. I’ve barely scratched the surface.

gulpjs.com

Prepros

Prepros is a great tool for compiling all kinds of code. It works with LESS, MarkDown, SCSS, JavaScript, and much more. It’s incredibly powerful, and it’s provided entirely for free, if you don’t mind a trial nag screen. Of course, I paid the $30 to support the application, as I’d recommend you do too!

prepros.io

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.

ellipsys

Ellipsys

Ellipsys, a subsidiary of Keystrokes, also launched their new site today! Ellipsys is a non-medical transcription company, offering services to corporate and enterprise environments. We re-built this site under the same program as Keystrokes, integrating HTML5 and responsive design.

This site was actually quite a bit more difficult than Keystrokes, due to their carousel-style slideshow, and the content area with complex border radius and inset shadows.

The slideshow ended up being directly ported from the old version of their site, being replaced by a static image on mobile. This was the simplest way to go, as it’s nearly impossible to create the same style carousel in a responsive layout, and it’s typically better to disable slideshows on mobile anyway.

Their content area was a bit more tricky to nail down. I ended up using a pretty nifty border-radius feature to create the arched effect: border-radius: 50% 50% 8px 8px / 25px 25px 8px 8px;. The 50% indicates to extend half the way of the entire content area, enabling the responsive aspects of this feature. The box shadow is pretty straightforward, using the inset modifier.

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.

keystrokes

Keystrokes Transcription Service

Occasionally we re-build older sites to use some of the latest technology, like HTML5 and responsive design. As part of that program, we recently re-launched Keystrokes Transcription Service! As their name implies, Keystrokes provides transcription services for the medical industry. It’s still a modern looking site, and now has a great responsive view, complete with what I call an app-style slide out mobile menu.

This build was fairly straightforward, except for the “swoosh” that appears on every page. I ended up having to do some trickery with a pseudo-sidebar in the header to maintain the illusion of the swoosh overlaying the actual sidebar. It turned out well, but it did take quite a bit of experimentation to accomplish.

Full-featured Custom jQuery Slideshow

The other day I re-built my slideshow system from scratch. It’s highly customizable, built in SCSS, and very lightweight. That being said, there are some limitations to it. For example, really the only transition it can do is fade, and that relies on CSS3 rather than a jQuery effect. Anyway, here’s a feature list:

  • Custom built from the ground up
  • Bug free (at least so far)
  • Highly customizable
    • It can either generate the required HTML, or you can set it up in the slideshow yourself. Great for ensuring that the first slide displays even if someone has JavaScript turned off.
    • Navigation arrows (again, can be turned off)
    • Navigation bullets (can be turned off)
  • Works in IE8+, Chrome, Firefox, and Safari.
  • Relies on CSS3, rather than jQuery, for animations and responsiveness. This of course means there will be no transitions if a browser doesn’t support that CSS3 feature, but the slides themselves will still change.

I’m probably forgetting stuff, but just download the code and try it yourself. If you have any questions about it, please post below and I’ll be glad to help!

http://git.ghostlyco.de/revxx14/jquery-slideshow

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.

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.

weblinx-corporate-desktop

Weblinx.com

At Weblinx, we just launched our brand new site! This build was particularly tricky, as it used a ton of stuff I’ve never worked with before. The vision for this site was to showcase our abilities, and it definitely accomplished it. The design is one of the best we’ve ever put together (portions from all of our designers where part of this build), and the functionality is really cutting edge.

This was the first “parallax” style site I’ve ever built, meaning things fade in and move as you scroll down the page. I used a framework called Scroll Magic to accomplish this, and it worked out great. While there’s definitely a bit of a learning curve to get started with Scroll Magic, once you get it down, it’s awesome. Scroll Magic makes it simple to create custom functions that fire when a user scrolls to certain points on the page.

It’s a great responsive site as well, with  awesome transitions between view states. it works on everything from Android to Xbox. It’s a fantastic site.

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.

ammef

Age Management Medicine Education Foundation

We recently got a rush project in for AMMEF, an organization that trains physicians for elderly care. There where a few unique elements to this site, including a distributed vertically centered navigation, and equal height columns. I achieved the navigation system using display: table-row;, which worked fairly well, although single line navigation elements do have a bit of empty space on the top and bottom. I tried using align-items: center;, but that proved to be a bit too complex, and didn’t fall back very nicely in IE9.

In any case, it’s another great looking site, with great features and a full WordPress theme, with near complete control over ever facet of the template.

← Older