web

Atom: a potential replacement of Sublime Text 2/3

Github Atom’s website and How to get Atom for Linux

Sublime Text 3’s website and How to get Sublime Text 3 for Linux

 

 

Disclaimer: Atom still has to live through the v1.0 release. It’s still in a beta (sort of), so there could be bugs

 

I’ll start with a  list the problems I see in Sublime Text 3 and Atom’s solution.

1) Contributing is hard

However Atom is open sourced under MIT license and you can directly contribute through the atom github repo.

2)  Lack of package control and other necessary packages from the get go

The most popular Sublime Text 2/3 plugin for so much time (Package Control), still isn’t added to Sublime Text 3 by default. This, plus other plugins are lacking in the default.

However Atom has the most needed Sublime-like plugins installed.

3) After effects of Package Control – total packages disarray

The github team does one thing perfectly right, they handle the packages/themes sharing, but also make publishing extremely easy. As seen here. The team also released  an Atom package

4) Overcomplicated settings as packages increase. Drop-down menu madness suggested?

As installed packages increase, Sublime Text 3 adds more and more drop-down menus, while also increasing the json settings files. All results to a cluster of settings in JSON files. While JSON is easy to use, it doesn’t beat the native 2 clicks GUI enable/disable menus in Atom.

 

Bonus points for Atom

Core settings done right.

Atom core settings

Atom core settings

Easy individual package settings control.

Atom settings

Atom settings

 

Sublime Text 2/3 key bindings carried over, plus super easy cheatsheet-like options.

Atom keybindings

Atom keybindings

Package control has its attention and it’s integrated well

Atom package control

Atom package control

Themes are themes and don’t mix with packages. Also way easier management.

Atom themes

Atom themes

 

HOWEVER! Many plugins have yet to see an implementation to Atom, so it might be too early for some really plugins-dependent Sublime users to switch. The good thing is that the GitHub team progresses at a steady pace, Atom gains more and more interest and it won’t be long until plugin developers port their plugins for Atom.

Advertisements

Fonts 101. Meet the font typefaces and differentiate them easily!

After the monospaced fonts post, I decided that it’s good to go one step back and clear up the misunderstandings with some of the font typefaces(families).

The more common typefaces are:

  • serif
  • sans-serif
  • monospace
  • cursive
  • fantasy

The differences can be easily seen with this (Credits Learning Web Design, 4th Edition, great image!)

Image to help differentiate font typefaces

The “weirder” ones

  • script/calligraphy
  • symbol/icon

calligraphy is self-explanatory, but here’s an example symbol font

symbol font

CSS3 tip of the day: Responsive web design – Font-sizing with rem

To create good responsive web design you must use proportionally-sized text units like em and % (percents).

However, CSS3 introduces a new proportionately-sized text unit rem.

rem – stands for root em.

1em = 1 x current font size. If current font-size is 15px. 1em = 15px and 2em = 30px and so on.

But! rem is always calculated relative to the font size of the <html> element. Not the font size of the containing element.  3rem is always 3 times the font size, wherever you apply it.

Which browsers support this? Chrome, Firefox3.6+, Safari 5+, IE9+, Opera 11.10+ (but not 11.10)

The old common em calculation problem: It always gets complicated to calculate the resulting font sizing in pixels after applying em. Sure it’s easy to use 1 or 2em but what happens when you need more accurate sizing like 1.64, 0.67 … ?

Well, people have thought of a solution back in the days of em. Fortunately, the same solution can be applied to rem.

Since you should be using rem in the future, always make sure that 1rem is equal to 10px.

How? 

 
html { font-size: 62.5%; } /* 10px */

p { font-size: 3.2rem; } /* 32px */

li { font-size: 1.6rem; } /* 16px */