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.

5 Ideas for Making a Screenshot Great

You want to include a screenshot of your app on your blog post or website. How do you make it look great? You want your screenshot be apart of the design and attract the attention of visitors.
5 Ideas for Making Your Screenshot Great

What can you do?

Use a colored pattern

Put your screenshot on a solid or patterned background. The background can help to draw attention to your screenshot.Scrrenshot with blue-green background

Place it on an image of a computer or phone

Create a screenshot that shows how your app looks on a desktop, phone or tablet. With a blank template, you can size it to fit. First, resize the computer monitor image to the size you want. Then, resize your screenshot to fit inside the monitor. You may need to crop and resize to get it to fit without looking squished.
Screenshot in Monitor

Add text to the screenshot

Is there a feature or part of your app that you want to show? Take a screenshot that focuses on that area of your app. Then, use your favorite photo editor to add text that describes the features that you are showing.
Screenshot with text

Create Multiple Screenshots

One screenshot doesn’t show the uniqueness of your app. Try three. Layer them on top of each with the most important screenshot on top. Or show it on a desktop, tablet and phone.
Three Screenshots

Add a shadow behind it

Use your favorite photo editor to edit the screenshot and add a background shadow to the image. The shadow can make it look like it is hovering over the background on your page.
Screenshot with a shadow

Your screenshot is an important part of the design. You want to make it stand out. Mix and match one or more of these techniques. You can make it look great by using one or more of these additional design techniques.

What do you do to make your screenshot great?

Should you build a website with a static site generator?

How do you build a website? For most developers, there were only two options to choose from. You create a website by hand coding every single page in HTML, CSS and JavaScript. Or you use a content management system like WordPress. Now, you have a third option. You can use a static site generator.

Static Site Generators

What is a static site generator?

Static websites don’t require a database. Each page displays images, videos and text. They don’t pull information from a database when you go to the page or do something on the page. You can build a static website using a text editor. A static site generator helps you to build a website quickly. It creates all of the html code for each web page. A generator lets you focus on the important part, the content, not the structure of a web page. One of the popular generators, Jekyll, lets you create websites and blogs.

Why would you want to use a static site generator?

  • Pages built in HTML load faster. They don’t have to make calls to a database in order to display a page.
  • You can control how the website looks. When you use a Content Management System (CMS), you must build your website the way the CMS wants.
  • Your website is too small for a CMS. For some projects, a CMS can be overkill. You wanted a site with 5 pages that lets people know about your business. A CMS has features that aren’t needed by this website.
  • CMS’s require continual maintenance. Your CMS may make changes to improve functionality and security. Any themes or plugins that you use may have additional updates that will need to be monitored and updated as needed.
  • Better Security. A CMS has a database, a login and other code that opens the site for attack. This can make it harder to find problems. You may have to start over by deleting everything including the database. With a static site, attackers have little or no opportunities to damage your site. They would need to gain access to your web host to damage your pages or upload malware. When that happens, you can change your password, delete the site and re-upload it again.

Why you should use a CMS instead of a static site generator?

  • Your website has a large number of pages to maintain. A CMS makes updating and changing a website quick and easy.
  • No administration. You have to know markup and generator tools in order to make a simple change.
  • Limited themes or other resources available. If you want to do something like moderate comments, you have a limited number of options. With a CMS, you can choose from readily available plugins or themes to do what you need.
  • Your client wants to update their website themselves. Static site generators currently lack an administration interface to make this easy.
  • You can’t decide which static site generator to use. With a CMS, you choose one of the popular ones: WordPress, Drupal, Joomla or Kentico. Static Site Generators come in many different flavors. You have to decide what programming language it is written, what kind of website you are creating and more in order to narrow you selection down.

How do I choose a static site generator?

You’ve decided that a static site generator is a good solution for your project. With many static site generators to choose from, which one do you chose? First, Use staticgen.com to review the Top Open-Source Static Site Generators. It allows you to sort by languages, stars, issues, forks and name.

Then, ask yourself the following questions to narrow your choices down:

  • What type of site are you going to make? Some static site generators work better for a blog.
  • What programming languages are you familiar with? You can choose from JavaScript, Ruby, Python, Go, PHP and more.
  • What templates does it use? Liquid, EJS, or Jade.
  • What type of license? MIT, BSD, or APL 2.0
  • How many people use this generator? The more popular it is, the more likely you can get help when you need it.

Summary

Is your next web project going to be built with a static site generator? A static site generator can help build a fast and functional website without the extras that a CMS needs. Static Site Generators as well as CMS’s have strengths and weaknesses that affect the design of your website. As with any web project, the type of tools you choose should work with the content you intend to put on the website and not against it.

What to learn more?

Mobile Design Typography

Content is the most important element of your website. With a wide range of mobile devices available to people, your websites and apps must be readable on all. To maintain the readability of your content, you need to consider the fonts you choose, size, contrast and line length. How do you use Mobile Design Typography to make your content responsive and readable?

Mobile Design Typography

Fonts

Not all fonts look good on a small screen. Display fonts like script fonts may look good on a desktop screen, but on mobile they can shrink down too small to read. A script font like League Font is fine for the desktop, but on mobile it can be unreadable.

League Font

What are your options?
You could increase the size of the font. At a larger size, your chosen font may be look better. Or you could replace the font with one that is readable on small devices. You have to decide if you really need to use this font in your design.

Size

Size is also important. Too small and your content is unreadable. People leave sites if they can’t read it on mobile. If you choose a size that it too large, it could dominate the content. It could take up so much space that you end up scrolling constantly while reading the page. You have to find a size that works well at that size.

Line Length

How long should a single line of text be? It depends. Readability is determined by the font, character and word spacing and the word lengths. Even the device that you are using can affect readability. A general guideline is 9 – 12 words per line. 9 – 12 words is a comfortable range for people to read. Line Length and Column Widths explains why your text should be about 9 -12 words long.

Contrast

What is contrast? Contrast is how every element in a design which includes font, size, color, line length and images works to create a good user experience. The easiest to learn is color. How do your color choices affect the design? With mobile design, you need to also think about size, font, line length, position and shapes. On Web Designer Depot, John O’Nolan explains how to fully understand contrast in design. He shows you how to use them for a better user experience.

Horizon Coworking in Madison, WI

Summary

Your content is an important element of your design, especially on mobile. When developing for mobile, consider how the font type, size, line length and contrast can effect the readability of your site. If it isn’t readable, your visitors will leave. Keep them on your site by focusing on how fonts look on mobile.

For more information on Mobile Typography, check out these articles:

Do You Need a Website Refresh or Redesign?

What do you do if your website is old or needs to change? Do you start over? Should fix what is not working for you? With a website, you have two options: refresh or redesign. Fix what you think needs an update or start over with a brand new site.
Redesign or Refresh?

Refresh or Redesign

What is a refresh? Fo example if your website was a house, a refresh would be like making over a room. To update your room, you may repaint the walls, replace a rug, curtains or even pillows and add new furniture. When you refresh your website, you leave the way the website functions and change how it looks. This may include changing the colors, fonts or even images.

What is a redesign? A redesign is where you start over. Instead of a makeover, you would tear the house down and build a new. With a website, you start over by building a new site.

When should I refresh my website?

Refresh or redesign? It depends on your needs. Why are you updating your site? Do you need to fix some small issues? Has your business changed and your website no longer reflects your brand? If you need to make small fixes, than a refresh will work for you. If you need to have it reflect how your business has changed, you want to redesign.

How do I do refresh my website?

  1. Decide what your goals for the website are.
  2. Look at your content and determine if you need to add, delete or update pages.
  3. Prioritize what you want to work on.

What are you site goals?

When looking at a redesign or refresh, you should reevaluate your site goals. Is it performing the way you expect? Does it reflect your current brand? Are there any pages that just don’t work?

Do you know what content your site has?

Audit your website by figuring out how many pages you have and what they focus on. Is each page current, out of date or needs a slight tweak? Decide which pages you want to work on, remove and update.

Prioritize

What do you want to work on first? Does your content need updating? Do you need to change the look and feel first? Decide what you want to work on and schedule how you are going to accomplish fixing or updating your site.

Summary

Your website should change to reflect who you are as a business. This means you may need to either refresh or redesign your website. What you choose to do depends on your goals. Sometimes, your may need simple fixes and refreshes your website is the best choice. Other times, you may choose to start over because it is just easier and a better way to achieve your goals.