glyphicon cheatsheet 23 Sep 2014

Glyphicons are included as part of Bootstrap, here are the html entities used for the glyphs.

  • glyphicon-asterisk
    = *
  • glyphicon-plus
    = +
  • glyphicon-euro
    = €
  • glyphicon-minus
    = −
  • glyphicon-cloud
    = ☁
  • glyphicon-envelope
    = ✉
  • glyphicon-pencil
    = ✏
  • glyphicon-glass
    = 
  • glyphicon-music
    = 
  • glyphicon-search
    = 
  • glyphicon-heart
    = 
  • glyphicon-star
    = 
  • glyphicon-star-empty
    = 
  • glyphicon-user
    = 
  • glyphicon-film
    = 
  • glyphicon-th-large
    = 
  • glyphicon-th
    = 
  • glyphicon-th-list
    = 
  • glyphicon-ok
    = 
  • glyphicon-remove
    = 
  • glyphicon-zoom-in
    = 
  • glyphicon-zoom-out
    = 
  • glyphicon-off
    = 
  • glyphicon-signal
    = 
  • glyphicon-cog
    = 
  • glyphicon-trash
    = 
  • glyphicon-home
    = 
  • glyphicon-file
    = 
  • glyphicon-time
    = 
  • glyphicon-road
    = 
  • glyphicon-download-alt
    = 
  • glyphicon-download
    = 
  • glyphicon-upload
    = 
  • glyphicon-inbox
    = 
  • glyphicon-play-circle
    = 
  • glyphicon-repeat
    = 
  • glyphicon-refresh
    = 
  • glyphicon-list-alt
    = 
  • glyphicon-lock
    = 
  • glyphicon-flag
    = 
  • glyphicon-headphones
    = 
  • glyphicon-volume-off
    = 
  • glyphicon-volume-down
    = 
  • glyphicon-volume-up
    = 
  • glyphicon-qrcode
    = 
  • glyphicon-barcode
    = 
  • glyphicon-tag
    = 
  • glyphicon-tags
    = 
  • glyphicon-book
    = 
  • glyphicon-bookmark
    = 
  • glyphicon-print
    = 
  • glyphicon-camera
    = 
  • glyphicon-font
    = 
  • glyphicon-bold
    = 
  • glyphicon-italic
    = 
  • glyphicon-text-height
    = 
  • glyphicon-text-width
    = 
  • glyphicon-align-left
    = 
  • glyphicon-align-center
    = 
  • glyphicon-align-right
    = 
  • glyphicon-align-justify
    = 
  • glyphicon-list
    = 
  • glyphicon-indent-left
    = 
  • glyphicon-indent-right
    = 
  • glyphicon-facetime-video
    = 
  • glyphicon-picture
    = 
  • glyphicon-map-marker
    = 
  • glyphicon-adjust
    = 
  • glyphicon-tint
    = 
  • glyphicon-edit
    = 
  • glyphicon-share
    = 
  • glyphicon-check
    = 
  • glyphicon-move
    = 
  • glyphicon-step-backward
    = 
  • glyphicon-fast-backward
    = 
  • glyphicon-backward
    = 
  • glyphicon-play
    = 
  • glyphicon-pause
    = 
  • glyphicon-stop
    = 
  • glyphicon-forward
    = 
  • glyphicon-fast-forward
    = 
  • glyphicon-step-forward
    = 
  • glyphicon-eject
    = 
  • glyphicon-chevron-left
    = 
  • glyphicon-chevron-right
    = 
  • glyphicon-plus-sign
    = 
  • glyphicon-minus-sign
    = 
  • glyphicon-remove-sign
    = 
  • glyphicon-ok-sign
    = 
  • glyphicon-question-sign
    = 
  • glyphicon-info-sign
    = 
  • glyphicon-screenshot
    = 
  • glyphicon-remove-circle
    = 
  • glyphicon-ok-circle
    = 
  • glyphicon-ban-circle
    = 
  • glyphicon-arrow-left
    = 
  • glyphicon-arrow-right
    = 
  • glyphicon-arrow-up
    = 
  • glyphicon-arrow-down
    = 
  • glyphicon-share-alt
    = 
  • glyphicon-resize-full
    = 
  • glyphicon-resize-small
    = 
  • glyphicon-exclamation-sign
    = 
  • glyphicon-gift
    = 
  • glyphicon-leaf
    = 
  • glyphicon-fire
    = 
  • glyphicon-eye-open
    = 
  • glyphicon-eye-close
    = 
  • glyphicon-warning-sign
    = 
  • glyphicon-plane
    = 
  • glyphicon-calendar
    = 
  • glyphicon-random
    = 
  • glyphicon-comment
    = 
  • glyphicon-magnet
    = 
  • glyphicon-chevron-up
    = 
  • glyphicon-chevron-down
    = 
  • glyphicon-retweet
    = 
  • glyphicon-shopping-cart
    = 
  • glyphicon-folder-close
    = 
  • glyphicon-folder-open
    = 
  • glyphicon-resize-vertical
    = 
  • glyphicon-resize-horizontal
    = 
  • glyphicon-hdd
    = 
  • glyphicon-bullhorn
    = 
  • glyphicon-bell
    = 
  • glyphicon-certificate
    = 
  • glyphicon-thumbs-up
    = 
  • glyphicon-thumbs-down
    = 
  • glyphicon-hand-right
    = 
  • glyphicon-hand-left
    = 
  • glyphicon-hand-up
    = 
  • glyphicon-hand-down
    = 
  • glyphicon-circle-arrow-right
    = 
  • glyphicon-circle-arrow-left
    = 
  • glyphicon-circle-arrow-up
    = 
  • glyphicon-circle-arrow-down
    = 
  • glyphicon-globe
    = 
  • glyphicon-wrench
    = 
  • glyphicon-tasks
    = 
  • glyphicon-filter
    = 
  • glyphicon-briefcase
    = 
  • glyphicon-fullscreen
    = 
  • glyphicon-dashboard
    = 
  • glyphicon-paperclip
    = 
  • glyphicon-heart-empty
    = 
  • glyphicon-link
    = 
  • glyphicon-phone
    = 
  • glyphicon-pushpin
    = 
  • glyphicon-usd
    = 
  • glyphicon-gbp
    = 
  • glyphicon-sort
    = 
  • glyphicon-sort-by-alphabet
    = 
  • glyphicon-sort-by-alphabet-alt
    = 
  • glyphicon-sort-by-order
    = 
  • glyphicon-sort-by-order-alt
    = 
  • glyphicon-sort-by-attributes
    = 
  • glyphicon-sort-by-attributes-alt
    = 
  • glyphicon-unchecked
    = 
  • glyphicon-expand
    = 
  • glyphicon-collapse-down
    = 
  • glyphicon-collapse-up
    = 
  • glyphicon-log-in
    = 
  • glyphicon-flash
    = 
  • glyphicon-log-out
    = 
  • glyphicon-new-window
    = 
  • glyphicon-record
    = 
  • glyphicon-save
    = 
  • glyphicon-open
    = 
  • glyphicon-saved
    = 
  • glyphicon-import
    = 
  • glyphicon-export
    = 
  • glyphicon-send
    = 
  • glyphicon-floppy-disk
    = 
  • glyphicon-floppy-saved
    = 
  • glyphicon-floppy-remove
    = 
  • glyphicon-floppy-save
    = 
  • glyphicon-floppy-open
    = 
  • glyphicon-credit-card
    = 
  • glyphicon-transfer
    = 
  • glyphicon-cutlery
    = 
  • glyphicon-header
    = 
  • glyphicon-compressed
    = 
  • glyphicon-earphone
    = 
  • glyphicon-phone-alt
    = 
  • glyphicon-tower
    = 
  • glyphicon-stats
    = 
  • glyphicon-sd-video
    = 
  • glyphicon-hd-video
    = 
  • glyphicon-subtitles
    = 
  • glyphicon-sound-stereo
    = 
  • glyphicon-sound-dolby
    = 
  • glyphicon-sound-5-1
    = 
  • glyphicon-sound-6-1
    = 
  • glyphicon-sound-7-1
    = 
  • glyphicon-copyright-mark
    = 
  • glyphicon-registration-mark
    = 
  • glyphicon-cloud-download
    = 
  • glyphicon-cloud-upload
    = 
  • glyphicon-tree-conifer
    = 
  • glyphicon-tree-deciduous
    = 

Why do you need html entities?

<svg width="1em" height="1em" style="border: 1px solid black">
<text dy="1em" x="0.5em"><i class="glyphicon glyphicon-envelope"></i></text>
</svg>

gives [], explanation: <i> is not allowed in <text> so it renders outside of SVG.

<svg width="1em" height="1em" style="border: 1px solid black">
<text dy="1em" x="0.5em"class="glyphicon glyphicon-envelope"></text>
</svg>

gives [], explanation: the css has a :before selector with a content, which will not work for an SVG element.

<svg width="1em" height="1em" style="border: 1px solid black">
<text dy="1em" x=".5em"><tspan class="glyphicon">&#x2709;</tspan></text>
</svg>

gives [✉], explanation: <tspan> is allowed in <text> so it renders inside of SVG, hence the clipping.

<svg width="1em" height="1em" style="border: 1px solid black">
<foreignObject fill="blue" height="1em" width="1em" dy="1em" x=".5em"><i class="glyphicon glyphicon-envelope"></i></foreignObject>
</svg>

gives [], explanation: <foreignObject> allows to let the browser render an object, but it gets overlaid on top of the SVG. Also check out what happens when you zoom in/out.

Building a blog on github. part 2. 21 Sep 2014

If you missed it, here is part 1.

Enter scaffolding tools

What is a scaffolding tool?

Okay, Jekyll is a static page generator and gives you the ability to transform your markdown posts into html pages, but from a reusability point of view, it is sort of limited. Are you going to use jekyll for all your apps? Maybe, maybe not.

That’s why you may want to look for a scaffolding tool. Yes, you know; those metal or bamboo structures around buildings when they are getting built. Doesn’t matter which kind of building / app you want to build, you can use a scaffold.

Okay, where can I find one?

Yeoman is one of them. Want to build a blog with Jekyll? Yeoman’s got your back. Want to build an Angular app? Yeoman’s got your back. It has more than a thousand generators to help you build the app or website you want to build. Oh, and a generator is just a bunch of recipes, they have generators / recipes for all kinds of projects.

Enter Yeoman.

Yeoman is comprised of a set of CLI tools that are based on Node.js – so yes, if you haven’t installed it yet, you may need to. The package can be installed with npm. The [getting started] will walk you through the steps.

Install the tools:

npm install --global yo

Install a generator (e.g. jekyll):

npm install --global generator-jekyllrb

Get started, please note our little friend will ask you some questions so please pay attention.

$ yo jekyllrb

     _-----_
    |       |
    |--(o)--|   .--------------------------.
   `---------´  |    Welcome to Yeoman,    |
    ( _´U`_ )   |   ladies and gentlemen!  |
    /___A___\   '__________________________'
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

This generator will scaffold and wire a Jekyll site. Yo, Jekyllrb!

Tell us a little about yourself. ☛
[?] Name: Damien Nozay
[?] Email: damien@example.com
... more prompts ...

And when it’s done, you can see what it has generated for you:

$ git status -uall
On branch master

Initial commit

Untracked files:
  (use "git add <file>..." to include in what will be committed)

    .bowerrc
    .csslintrc
    .editorconfig
    .gitattributes
    .gitignore
    .jshintrc
    Gemfile
    Gemfile.lock
    Gruntfile.js
    _config.build.yml
    _config.yml
    app/_layouts/default.html
    app/_layouts/post.html
    app/_posts/2014-09-22-welcome-to-jekyll.md
    app/_posts/2014-09-22-yo-jekyllrb.md
    app/_scss/main.scss
    app/_scss/readme.md
    app/_scss/syntax.scss
    app/index.html
    app/js/main.23ed95cc.js
    bower.json
    package.json

nothing added to commit but untracked files present (use "git add" to track)

If we were using jekyll directly rather than yo, we would be starting the edit-compile-serve / edit-preview loop with jekyll serve; with the inputs I gave to yo, I chose to use grunt which takes care of that.

grunt serve

And here is our shiny new blog:

jekyllrb generated page

Building a blog on github. part 1. 21 Sep 2014

I knew GitHub provided hosting for project documentation and I did use it in the past with content that I manually wrote, but that’s a lot of moving pieces. Thing is, I’m not a front-end engineer and while css, html and javascript are not foreign to me, it’s not something I do all day long, my day job involves python, databases, backends and infrastructure.

Enter github pages.

Okay, so where do we start?

GitHub makes it easy, you can go to https://pages.github.com/ and they will take you through very simple steps to get static pages working. The only part that was confusing for me is that for user pages (username.github.io) you need to use the master branch whereas for project pages you need to use gh-pages branch. This is esp. confusing if you use some of the tools that help you build static pages.

  1. create a GitHub account if needed,
  2. create a username.github.io repository,
  3. start coding, e.g. add your own index.html page.

So that would be something like:

# create clone
git clone https://github.com/username/username.github.io
cd username.github.io

# create content
echo "Hello World" > index.html

# and publish...
git add --all
git commit -m "Initial commit"
git push

Enter static page generators

Fancy, but can you help me write a blog?

Alright, first came the index.html then came the static page generators. We’re humans, free-flowing plain text is what we’re good at. While I’m sure some of you guys out there can literally piss out html (or lisp, or even straight asm code haha), the rest of us wouldn’t mind writing plain text files and have some kind of compiler to make them html.

What is a static page generator?

  • plain text in, html out,
  • markdown in, html out,
  • textile in, html out…

Wait, what about templates?

Ha, you got me. It’s actually text + templates = .html. You can find a list on the python wiki.

Why is a static page generator useful?

The less html tags you have to write, the more productive you get?

The other answer to that is that some of the websites are there are not apps, people intend them to be just content (e.g. blogs, knowledge bases). What that means is that there may be much less backend involved, or if it is involved, it is in order to generate some content and serve a response. Does the response need to be cached? Is the response deterministic? If it is you could just craft the responses once, on your machine maybe, and not worry about processing the requests and waste expensive infrastructure. Found some content out there explaining what is a static website which I’ve found linked on jekyllbootstrap.

Jekyll huh?

Yes, Jekyll. The GitHub pages have some good info on using jekyll with pages so I just followed that.

So that would be something like:

# install jekyll
gem install jekyll

# create clone
git clone https://github.com/username/username.github.io
cd username.github.io

# create content, with some help
jekyll new .

# test locally
jekyll serve

# and publish...
git add --all
git commit -m "Initial commit"
git push

Jekyll will generate a bunch of files for you, include a footer, a header, a main.css, and an index.html.

$ tree
.
├── _config.yml
├── _includes
│   ├── footer.html
│   ├── head.html
│   └── header.html
├── _layouts
│   ├── default.html
│   ├── page.html
│   └── post.html
├── _posts
│   └── 2014-09-21-welcome-to-jekyll.markdown
├── _sass
│   ├── _base.scss
│   ├── _layout.scss
│   └── _syntax-highlighting.scss
├── about.md
├── css
│   └── main.scss
├── feed.xml
└── index.html

5 directories, 15 files

Do I have to ctrl-c each time I make changes?

No, you don’t, just use jekyll serve --watch and that will look for file changes and re-process your pages.

jekyll default page

Conclusion

Getting started with GitHub pages isn’t too hard. A lot of great tools now make it a breeze to get up and running. Upcoming part 2 will have more info about the tools you can use to take it a step further.

Font Awesome. 21 Sep 2014

I icons.

Font Awesome is a pretty good collection of icons you can use for your GUI and/or blog.

Examples:

  • <i class="fa fa-square"></i> will give you .
  • <i class="fa fa-terminal"></i> will give you .
  • you can even stack’em and get
  • or add some color:
  • or let them spin:

All in all, it is a great complement to the Glyphicons shipped with Bootstrap.

Hello, World! 20 Sep 2014

Because every language needs a "Hello, world!".

The contents of this website are  2014 Damien Nozay under the terms of the MIT License.

Made with love thanks to: Font Awesome· Bootstrap· Jekyll· Yeoman· Github· and others...

Documentation licensed under CC BY 3.0