front-end development 2013

So, 2013 is going to end soon, 2013 is a year of major change of my front-end development process / work flow, below are list of tools that I can’t work without it.

Text Editor

  • Sublime Text
  • VIM

Compilers

  • SASS (css compiler)
  • Bourbon (sass mixins)
  • CoffeeScript (javascript compiler)

Version Control

 

  • Git
  • Bitbucket
  • SourceTree

 

Unities

  • Iterm 2
  • YeoMan
  • Codekit / Koala
  • NPM

Frameworks 

  • jQuery
  • Twitter Bootstrap
  • HTML5 Boilerplate
Its important that I made these changes, it helps me rapidly write codes and focus on enhancement rather than slicing the site from the PSD…
SASS, which is the css compiler helps a lot on CSS development, useful features like curly braces, mixins, includes, and more…or if you have never heard of it you should check out this post. What I think it’s much much easier to write css now days, so get SASS or other CSS compiler like LESS, STYLUS… whichever you prefer, it’s the same concept.
With bourbon, writing CSS/SASS/SCSS is even more simpler, bourbon provide mixins that we front-end developer could easily include and it will automatic produce those prefix that is just awesome for your css development.
NPM (node package manager) is another great tool that helps a lot in web development, the community is big and strong. there are lots of module that we could use to rapid our process, like we could install YeoMan.

npm install – yo

Once installed you can see the cute YeoMan character, and if you need to start an application just start by typing yo and choose an option that you want to create, or you could do “yo someApplicationName” and Bammm! thats it.

YeoMan works very well with Grunt and Bower, but instead I prefer Codekit, its much easier to work with, because of the user friendly GUI, its just awesome. when you edit your css it will automatically update on the browser and change it without refresh, but it will also compress your files. I know it can be done by Grunt if you do not want to spend some cash on that, however I highly recommended this tool as for those are new developer or unfamiliar with Grunt.

web development has just got better and better, its so much easier than those old days, lots of tools, huge community. looking forward to 2014 and practice more to improve ourself, not just outside by inner self too.

Here is a screenshot of my workflow:

 

Generate md5hash in mac terminal

Most of the time you need to generate a md5hash password for your mysql or any other purpose, you go to some md5hash generator website, but thats just wasting of time, and thanks to openssl you can generate using your terminal

echo -n “string that you want to convert” | openssl md5

Just for fun

Check out the elf yourself for fun,

Read More

Working on a Ghost Theme

Am developing an ghost theme, very clean and neat flat design, below is a screenshot of preview, if you guys want it, please comment, you will be the first one to receive the theme for free!

 

Themeing in Ghost blogging platform

Once you installed Ghost in my previous post guide, open up the ghost folder location, you will see a folder name “themes” in ghost/content/themes there is where contains all themes in your ghost app which is similar to wordpress which is wordpress/wp-content/themes/themeName.

Go ahead copy the default theme casper and paste with any name you like,
either keep or delete the 2 text files which is the LICENSE.txt and README.md (by the way if you need visual Markdown editor check out my previous post on Mou)
As you can see there are 3 main files and a assets folder here for now,
  • assets(Folder)
  • default.hbs
  • index.hbs
  • post.hbs
Read More

Ghost blogging platform

Kickstarter funded Ghost pure blogging platform,built in node.js, if you are not familiar with node.js which is basically a platform that allows you to write server side programming in javascript, build with google V8 engine(super fast speed). There are many talks about this platform which to replace wordpress, which I am not sure about that, currently there are some restriction for none geeky users which required to install node on your server to be able to use this platform which not alot servers have it.

Anyway Ghost was released to public two days ago, you can download from http://ghost.org/ or github https://github.com/TryGhost/Ghost and install it locally, with simple steps below.

Once you download, unzip to somewhere you like, open your terminal, cd to that location.

type:

npm install or sudo npm install

this will install the node.js dependencies and as easy as that, to run this program, you can do

npm start

Open it up your browser which this runs locally on http://127.0.0.1:2368/

and when first start it will ask you about to create an password on http://127.0.0.1:2368/ghost/ which is the admin area where you blog and post using markdown syntax.

o…ya before this make sure that you install node.js, I have been playing with it for about 3-4 hours,which I talk abit about themeing in Ghost in next post.

 

Introducing Mou markdown GUI editor

Recently I found an awesome app for markdown editing visually called Mou, still in beta when I am writing this article, but has got all the features that I need(more than what I need), anyway once you download from its official website, http://mouapp.com/, open up, as see from my screenshot below, it comes with 2 column layout, very simple very beautiful yet powerful, on the left side where you write the markdown syntax and right side is the live visual. 

Of course if you are not familiar with markdown syntax, you can quickly get a cheat sheet from https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet. However something you would like the ability of click and choose styles or insert images etc, currently Mou come with these features by either choosing Action the menu panel or you can see the shortcuts that they provided when you click action

I have to say its more than what we need as a markdown editor, there is one feature that I would suggest is to have right click and choose action which is lack in the editor, other than that it perfect.

Introduction to Mongodb

Untitled Blog Post Name

MongoDB is a NOSQL database model which is unstructured/schema-less type, its easy to scale, and fast to query large data type comparing to traditional database type such as mysql.

There are quiet a few choice to choose for nosql, here are some of the big names out there:

  • CrunchDB
  • MongoDB
  • Redis
  • Gemfire
I choose MongoDB because i typically find that its easier for me to understand and has got lots of great tutorials on the net.
Read More

Todo list google chrome extension

Recently while talking with my girl friend, she ‘s looking to build something and in order to do that she need to write down a todo list, so I build this chrome extension for anyone who wish to keep their list directly on google chrome, its simple and easy use tool. Its built within few hours, if you are looking to add in features, do comment below so I add keep adding features and maintaining this little project.

google chrome extension

Access your raspberry pi with your macbook pro

For those who have a macbook pro and raspberry pi and you do not want to use a new keyboard and monitor or mouse, you can use your macbook pro to access your raspberry pi even with screen share.

first you need to connect your raspberry pi with ethernet and USB power adaptor. which like my photo bellow the yellow as the ethernet and black as the power adaptor.

once you are connected it will automatic startup your raspberry pi, and now you can access it by ssh, well before that make sure you share your ethernet connection.

Read More
Page 5 of 9« First...34567...Last »