Web Workflows Part 3 | Compass And Sass

This article will focus on Sass and Compass.  Sass stands for Syntactically Awesome Stylesheets.  Sass enhances regular css with variables, mixins and nesting.   It is compatible with css, has a large community, and a lot of features.   There are a number of frameworks that were built with Sass, including Compass.

The aim of Compass is to provide a clean framework, free of presentational classes.

Compass provides:

  • Reusable patterns to keep your styles powerful and efficient
  • Easy sprite creation
  • Simplified CSS due to Compass mixins
  • Typography rhythms that look great
  • The ability to create extensions and download them

Sass and Compass can be a little intimidating to set up and learn at first, but it is well worth it.  Once you have these two down,  they give you power and flexibility when styling your websites.

Read More


Web Workflows Part 2 – Gulp

Gulp.js is a build & task runner. Compared to other task runners that perform similar functions, like Grunt.js, Gulp is considered fairly easy to use. Gulp developers named their main data processing tasks “pipes”. The syntax for setting up pipes is pretty easy to learn. Gulp has strict standards for plugin development, so the plugins used with Gulp usually serve one specific purpose and are easy to setup.

Using these plugins, Gulp can setup functions to automatically compress files from development folders and write the compressed files into production files. If you combine this with Gulp’s watch function, files you update will be synced with each other. This way any updates you make to html, css, js files, ect, the compressed files will update right away.
You can even set your workspace to automatically update the web browser you’re using after file updates, through Grunt’s livereloading function. Like we briefly covered in the last article, When coupled with a version control system like Git, you can collaborate with a team, and all the members will benefit from the automatic updates that can be used with Gulp.

With Git, you can push the most current version of your project from your desktop up to Git Hub online. This will contain any versions and branches you have committed, so the project can be rolled back if needed. If a new team member comes on board, they can clone the project from Git Hub down to their desktop, create a new branch so that the version they are working from remains in-tact. Team members should create new versions and if needed, branches often. If anything goes wrong, they can roll back to a previous version or branch.

Hopefully, this article has shed some light on how Gulp.js can improve your web workflow experience.

Read More

Web Workflows Part 1 – Git

Web Workflows Part 1 – Git

Recently, I went through a very informative web workflow course on the excellent video tutorial site  The course itself, called Web Project Workflows with Gulp.js, Git, and Browserify, can be found by clicking here. The course inspired me to try to spread the word a little bit more about the technologies and languages featured in the course.  The Lynda tutorial covers a lot, so I thought I’d break the sub topics into several companion articles. This article will focus on Git, which is an open source version control system.  It is a low resource platform, and performs complex tasks quickly.

If you’re able to get past the initial fear of using command prompt for PC, or terminal for Mac, Git is a powerful version control system that will allow you to create multiple versions and “branches” within your project.  For a cheat sheet of Git commands, click here.

Git is installed and used locally on your computer, however, there is an online companion, known as Git Hub.  It is really easy to develop on your computer and then push your work to Git Hub online for your team, your self on a different workstation, or students to access onine. If you are using the free version of Git Hub, all of your projects will be public, meaning anyone can view, and even clone them.  If you go for the paid version, which is somewhere around $7 a month, you can publish private projects.  The cloning of projects can be very handy for learning, a teacher can post their project, package all the dependencies, and students can clone all the versions and branches of a project and experiment in their own independent sandbox version of the project.  Git Hub recently released a desktop version, with a user interface and everything.  For more information on the desktop version of Git Hub, or to download it, click here.

Whether you’re adding content to a team project, experimenting with different code solutions, or attempting to implement new features, branches give you an added peace of mind and keep the project organized. Once you get the hang of it, it is really easy to roll back to previous versions within a branch, or even switch to other branches and versions within those branches on the fly.  With every save within a branch, or new branch you create, it’s a great idea to include a message which clearly describes the changes you committed.

Once you’re used to branches and versions, you’ll find what is known as Friction-less Context Switching very useful.  An example of this context switching is starting a new branch to try out adding some new features, and merging the the new features with a previous branch if you’re happy with them.

Role based Codelines is another useful feature of git.  It’s a great idea to setup branches that serve different purposes or “roles”, such as development, testing, and production.  Working with other platforms like Gulp (which will be explored in a future article), you can have uncompressed files that are more human readable in a development branch, and have these files compressed and committed to a production branch to increase speed and performance once the web project is ready to go live.

Hopefully, you’re starting to see the potential to dramatically improve your workflows with Git & Git Hub.  Part 2 for Web Workflows will be coming soon.

Read More

Mobile Applications – Hybrid or Native?

Mobile Applications – Hybrid or Native?

Lately, there has been a lot of hype around hybrid web applications. Is the hype deserved?  When should an app be built in hybrid form instead of native?  This article hopes to shed some light on the advantages and disadvantages of both hybrid and native application development.

Pros of Hybrid App Development

We’ll start with hybrid apps.  Essentially, frameworks like Phonegap and Ionic with Angularjs  combine native device sdks with web development languages.   This allows developers to build apps that work cross platform, meaning they will work on Apple, Android, and other device operating systems.   Needless to say, this can speed up production time and reduce the size of the team needed.

Due to the cross platform nature, all of the app’s code is contained within one project.  Add in online version control systems like Git, and this makes it easy to share access to the code and work on the app as a team.

Another advantage is how updates are handled with hybrid apps.   Since the content is housed in web languages, content updates are fairly simple and immediate.  The exception to this of course, is a more advanced update, like a major feature overhaul.

Cons of Hybrid App Development

The main drawback however, is that hybrid apps are unable to have as much functionality as native apps.  They do not have as much access to the functionality of sms, camera, hardware buttons, and contact features, as a few examples.

Pros of Native App Development

Building native apps allow developers to use device specific features to their full potential.   This allows you to give the user a much richer experience.  When developed for native platforms, apps have more access to native APIs, have more advanced graphics, animation, and UI.

Cons of Native App Development

Writing native apps require more specialized expertise, and may require multiple highly skilled developers to build app versions for each platform.  Also, even with more people working on the project, it could take a lot more time than if it were built as a hybrid app.


Needless to say, if you want native apps, you’re going to need a much larger budget than if you were to go the hybrid route.  However, if you have desire to provide the best user experience possible as well as the time and money to invest, native apps are most likely the way to go.  If you do not need all of the bells and whistles, and are looking for an advanced website type of experience in app form, hybrid apps are more than capable of achieving those goals.  It’s worth keeping an eye on both app forms as new technologies come out.  Hybrid app frameworks are still relatively new. Even though devices will continue to advance, hybrid developers will continue to find clever ways to bridge the gaps between the two development styles.

Read More

Remote Computer Support

Remote Computer Support

What Is Remote Computer Support?

Having your computer repaired can be a hassle.  Different repair companies handle the work in different ways.  Some come out to your home or business and repair the computer on site.  Other companies do not bring their tools with them. Instead they come out, pick your computer up, bring it into their shop, and do the repairs there.  There are also companies that do not have a mobile service at all, if you want your computer fixed, your only option is to bring it in to the repair company’s physical location.  A newer, and often more convenient service method is something known as remote computer support.  Computer repair companies like remote support because it cuts down on the costs associated with repair vehicles, like gas, insurance, and general wear & tear.  They also like that it eliminates driving time and makes scheduling easier.  Customers like it because once the remote connection is established and the technician has control, the customers can go about their day while the repairs are performed.  So to summarize the service types, repair companies generally offer Remote, In shop, and Mobile computer repair options. Many computer repair companies offer a combination of the three major types of service.  But for the purposes of this article, we’ll be focusing mostly on remote computer repair support.

If you need remote computer repair, companies like La Crosse, Wisconsin based Remote Fix It Now and California / Nevada based Tech 2U, who got their start doing Sacramento Computer Repair and now have five locations and a remote support office, are reputable businesses known for remote support.  Many companies, including Tech 2U, offer subscription plans for remote support.  The way these membership plans typically work is for a monthly, semi-annual, or annual fee, you gain access to a specified amount of remote support during the provider’s remote support office hours.  This can be a great solution for people or businesses that need tech support often, as it can save a lot of money in the long run.

The way remote computer repair works is companies connect to your computer online, and preform the necessary repairs.  So as long as your computer can access the internet, you are able to at least have the issues you’re experiencing diagnosed.  Over the phone, the technicians commonly walk you through downloading software or direct you to a web application, like logmein, that will serve as the connection between your computer and theirs.  At this point you enter in a code that they provide for you, and they take over your computer.  While they are connected remotely, you and them both have control over the mouse and keyboard.  Many issues can be resolved remotely.  The repair technicians can run diagnostics, clean viruses, perform tuneups, updates and upgrades, whatever they need to do to get your computer running great again (as long as it isn’t a physical hardware issue).

If you would like more information on how remote computer repair works, here’s a link to the wikipedia page.

Read More

Thoughts On Windows 10 & Cortana

Thoughts On Windows 10 & Cortana

After putting it off for almost 2 weeks, yesterday I caved in and upgraded the Windows 8.1 install on my work computer to Windows 10.  Thankfully, I am pleasantly surprised.  So far it seems like it has everything I love from Windows 7, the few things I enjoyed about Windows 8, and some great new features as well.  As I use Windows 10, my favorite features may change, but right now the new feature that stands out the most to me is Cortana. So without further ado, here are my initial thoughts on Windows 10 and Cortana.

The new start menu is great. In my opinion, it’s even better than the classic start menu introduced in Windows 7. One reason I like it better is because it has scroll-able tiles to the right of the start menu list. But what I love most is the digital assistant, Cortana.  After a simple set up, Cortana has a number of helpful features to keep you organized and entertained.  It’s easy to search the web or your computer, through text or voice, just by clicking in Cortana’s “Ask me anything” search bar.  You can store your favorite places, types of food, movies, ect, and Cortana will make recommendations based on these favorites.  When you pull up Cortana’s menu, there is a grid layout of information based on your favorites and what you want displayed.

A lot of this is nothing new. Google, Apple, and others have already had similar digital assistant technology for years now. This may seem like a small thing, but one main reason I like Cortana so much is because I was prompted to go through the simple setup as soon as Windows 10 was installed. As much time as I spend on my phone, I prefer doing most of my searches on desktop computers. I like the idea of booting my computer, and Cortana having everything organized and updated for me, just one click away.


Read More

Responsive Grids For Web Design 1

Responsive Grids For Web Design 1

The demand for responsive and adaptive website design is increasing by the minute.  Every day, more people are using their phones to shop, surf the web, do their banking, and so much more. In April, Google started boosting search results for websites that are mobile friendly.  This was dubbed “Mobilegeddon”, because thousands of companies, including some big corporations, do not have responsive web sites. If you need to upgrade your website in order to make it mobile friendly, you are not alone.

Thankfully, there are a number of responsive web design frameworks available. If you’re using a CMS, like WordPress or Joomla, there are countless themes and templates that are built to be responsive, right out of the box. But for the purposes of this article, we’re going to focus a bit more on CSS grid frameworks.

For this entry, we’ll be focusing on Twitter Bootstrap. Bootstrap is easy to learn, highly customization, and fairly lightweight. Like many grid frameworks, the heart of Bootstrap is a CSS column class system. You set a div container, either at full width, or a set width like 940px. Once you’re working within the container, you start creating the div columns. At this point, each column div is set with a range of up to twelve columns, across four screen sizes. The screen sizes for columns are large, medium, small, and extra small. At each size, you set how many columns, out of twelve, you want the div to occupy. So a div that took up twelve columns, across all four screen sizes, would look like this:

<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-12″>content</div>

If you wanted the div above to only take up 9 columns once it got to mobile phone, you would change the xs class, like so:

<div class=”col-lg-12 col-md-12 col-sm-12 col-xs-9″>content</div>

And if you wanted two equal columns side by side, you would do it like this:

<div class=”col-lg-6 col-md-6 col-sm-6 col-xs-6″>content left</div>

<div class=”col-lg-6 col-md-6 col-sm-6 col-xs-6″>content right</div>

This is just a small sample of what you can do with Bootstrap, once you have the column sizes down, there are a number of bells and whistles you can fit within the grid. These include a banner with a call to action, accordion tabs, drop down menus, and more. All of these components have default styles that look pretty professional, and can also easily be customized to your liking if you know CSS.

For more information on Bootstrap, visit their site by clicking here.

Read More