Getting Started with using an API

You’ve heard about application programming interface. Companies like Twitter, FaceBook and Google have them. With an API, you can use it build new and interesting things.

Getting Started with an API

What is an api?

By definition, it is an application programming interface. Programmers use an api to create a new app that uses the data from another source like getting the current weather in Austin, TX.

How do I start using an API

To start learning how to integrate an API into a web project, you can use an API that provides photos as a placeholder. You could use an API like Dog CEO API to place photos of dog or other animals quickly in your design.

If you prefer, you can start with Programmable Web’s API University. The API University provides you with tips, tutorials and best practices on using and designing APIs.

Where do I find APIs?

You can find apis at Programmable Web , API List or API Hound. Or on Reddit where you can find recommendations from other programmers.

Summary

With an application programming interface, you don’t need to know the same programming language that they used to build the API. You can incorporate it into your WordPress, static website or other CMS easily. With so many APIs to choose from, you can create almost anything.

4 Ways to Add Code Snippets to Your Blog

When you write a blog post that features code, you’ll want to show your code. But, you don’t want it to act like code. What are your choices for adding code to a blog post? You can manually show your code, use a plug-in or embed it into your post. Which one do you choose?

4 Ways to Add Code Snippets to Your Blog

1. Code it manually yourself

Write the code to style it yourself without using a plug-in or hosting your code on another website. You can create a code snippet with HTML and CSS. With the HTML tags <pre> and <code> and CSS, you can style your snippet to work with your design.

Code Snippets in HTML and CSS

2. Use a plug-in

If you prefer not to code it yourself, your next option is to use a plug-in. For WordPress, you can use a plug-in called Code Snippets. With Code Snippet, you can manage your snippets easily.

Code Snippets WordPress Plugin

3. gist.github.com

Don’t want to code it yourself or use a plug-in and you have a github account? You can host your code on gist.github.com. They provide you with a way to embed code snippets on your blog.

gist.github.com

4. CodePen

Are you a CodePenner? If you are and have a self-hosted WordPress blog, you can embed your pens or use the CodePen Plugin. CodePen takes care of the code and formatting for you. Refer to CodePen’s documentation on the best method for you.

CodePen Embed & WordPress Documentation

Summary
Whether you create code snippets with code, use a plugin or host on gist.github.com or CodePen, these methods provide 4 different ways to show your code.

Tools to help clean up your CSS

You have created an awesome website. Over time, you add more pages, content and tweaks to the site. As your website gets larger, so can your CSS. You may add new styles for displaying a landing page, carousel or videos. Eventually, you have unused styles that no one remembers what it was used for. This unused CSS can start to slow your site down.

Tools to help clean up your CSS

Cleaning up your CSS from design changes and other additions can be a hard, time-consuming and tedious task. How do you clean up your website without breaking the site?

Steps to clean up your CSS

  1. Find and fix errors
  2. Identify unused CSS
  3. Validate with W3C Validator
  4. Test your website with the updated CSS

Find and fix errors

Errors can creep in your CSS. You may forget a semicolon, copy code from CodePen or Stack Overflow that solves a problem or another team member added custom CSS to solve a problem.

CSS Lint

CSS Lint analyzes your CSS and tells you what you are doing wrong. You can use it to help clean up your CSS and learn how to write it better.

CSS Lint

Identify unused CSS

As you develop your website, your CSS file can grow. It may contain CSS styles that are no longer used or styles that were abandoned. With a large website, it can be hard to tell which styles are still in use.

Use UnCSS to remove unused CSS

UnCSS is a Node.js powered tool that removes unused CSS from your stylesheets. It created a new CSS file with only the styles that are being used. Want on online options? UnCSS Online lets you test the tool for smaller CSS codebase.

UnCSS Online

Validate with W3C Validator

When you have fix your errors and removed unused CSS, use the W3C (World Wide Web Consortium) validator to check your website. It checks to ensure the technical quality of your website. You want to make sure that you didn’t introduce new errors into your cleaned up CSS.

W3C Validator

Test your website with the updated CSS

Since CSS is not easily testable, you want to make small changes and test each change. You want to make sure that the styles you removed or updated don’t break your design.

Cleaning up your CSS code is difficult, time-consuming and tedious. These tools can help to make the task easier.

What CSS tools have you used to make the process easier?

How I make Atom work for me

My new favorite text editor is Atom Code Editor. With Atom, you can modify the editor to fit your needs. I am going to show you a handful of tips and tricks that I use to make Atom work for me.

How I make Atom work for me

Customize Atom

You can customize fonts, font size and themes.

Change font and size

Don’t like the default font? Is the size too small? You can change that.

Atom > Preferences > Editor

  1. Enter a font name that you want to use.
  2. Enter a font size.
  3. Save.

Atom Editor Settings

If you want to go a step further, you can edit Atom’s stylesheet.

Themes

Atom comes with two default themes: Light and dark. If you don’t like them, you can install a new theme. Don’t know which one to install. Use Atom’s theme search to find your next favorite theme.

Atom > Settings > Themes

Atom Themes

Keyboard Shortcuts

Want to work faster in Atom? Use these keyboard shortcuts. Since, I use Atom on my Mac, the shortcuts are for a Mac.

Duplicate a line

When you are writing code, sometimes you have to write the same line over and over again. Instead of copying and pasting, you can have Atom do the copying and pasting for you.

  1. Go to a line you want to duplicate.
  2. Press the keys CRTL + SHIFT + D. It copies and paste your current line.
  3. Repeat for as many times as needed.

Move lines up or down

Have you ever need to rearrange some lines? Move one up from its current spot. Instead of cutting and pasting, you can use this shortcut to move a line up or down one.

  1. Go to a line you want to move.
  2. Press CMD + CTRL + UP (arrow). It moves your line up one row.

If you want to move it down, use CMD + CTRL + Down (arrow).

Comment out code

Different code can use different syntax for comments. You can use a shortcut to comment out your code. It will put the right syntax for comments depending on the language. You don’t need to remember to use the right comment syntax.

  1. Highlight the code that you want to comment out.
  2. Press CMD + /. Atom add comments to your code.

Conclusion

Atom is a great text editor. I like that I can customize it to look they way I want by changing the settings or install optional plugins. Atom’s shortcuts help you to use it even more productively.

Create a custom build of Bootstrap

How do you customize Bootstrap? The quickest way is to customize the CSS. You create own theme to make your Bootstrap website look they way you want it to.

What if you want to do more? You can customize your build of Bootstrap. There are two options: use a Bootstrap generator or modify your copy of Bootstrap.

Create a Custom Build of Bootstrap

Use a Bootstrap Generator

You can customize and download your very own custom build of Bootstrap. With Bootstrap’s Generator, you can choose which components, Less Variables and jQuery plugins that your version will support. Before you customize Bootstrap, read the documentation to learn how it works.

Custom Build Bootstrap Choose Components

Customize your build

When you customize your build, you can choose from a previous version that you built or start from scratch.

When you start from scratch, you have four steps to complete.

  1. Choose your components
  2. Select the jQuery plugins that you require
  3. Customize Less variables to define your colors, sizes and more
  4. Click on Compile and Download your customized version

First, choose the components that you want to support. You may choose your components either by unchecking the ones you don’t need or using the Toggle All button. It turns off all of the components in this section, so you can choose individually the ones that you want.

Next, select the jQuery plugins that you require. You may turn them all off using the Toggle All button or unselect them individually.

Once you picked your jQuery plugins, you can modify the Less Variables. For each variable that you want to change, edit the value in the text box provided.

Finally, click on the Compile and Download button to create your customized version. If you haven’t already, create a Bootstrap website to test your new customized version. You can always go back and change your version if it doesn’t work the way you want it to.

Modify Your Copy of Bootstrap

Don’t want to use a generator? You can modify your own copy of Bootstrap. Before you modify your copy, you need to understand how Bootstrap is organized and what you want to change. Keep your changes separate. Bootstrap recommends modifying the variables.less file. In Customizing Bootstrap the Right Way, Mark Healey recommends creating your own file with all your changes and modifying the bootstrap.less file to import your new file. His method makes updating Bootstrap simpler when they make changes.

Whether you choose to customize Bootstrap by creating your own theme, using a generator or modifying the files, you can make it your own.