Wern Ancheta

In this article I’m going to share some of the applications and development tools that I install on my Windows machine.

HeidiSQL

HeidiSQL is a database manager for MySQL and MSSQL Databases. Download

Peazip

Not really a development tools but its useful for extracting archives for software packages. Download

PHP

PHP is a server-side scripting language that I currently use to take care of the back-end stuff for the web applications that I build.

Download

MySQL

MySQL is a database management system commonly used with PHP to build dynamic web applications.

Download

Apache

Apache is an HTTP Server used to access the PHP applications from the browser.

Download

CURL

CURL is a command line tool for transferring data using the FTP or HTTP protocol. I commonly use it to install packages which uses CURL. For Windows users the latest file under the Win32 - Generic section should be downloaded.

Download

Chrome Canary

To get access and play around with the most cutting edge stuff in Google’s Chrome browser I always use the Canary Build. It’s a very useful tool to learn which features will be coming to the future versions of the Chrome Developer tools.

Download

Chrome Plugins

I also use some plugins to further improve my productivity when using the Chrome Browser.

• MeasureIt
• JSONView
• PageSpeed Insights
• EyeDropper

Octopress

Octopress is a framework built on top of the Jekyll static site generator. I use it on my blog so I also consider it a s a development tool.

Download

Ruby

When I need a break from PHP I also play with Ruby. I use the installer from rubyinstaller.org to install ruby on my machine.

Download

Node.js

I haven’t really played around with Node.js because I only have it installed on my machine to have access to the Node Package Manager which I can use to install development tools like Coffeescript, Bower, Hogan.js, and Grunt.

Download

Chocolatey

Chocolatey is a package manager for Windows much like the apt-get that we use on linux distributions like Ubuntu or Linux Mint. Chocolatey can be installed by simply pasting the following commands in the command-line.

1

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%systemdrive%\chocolatey\bin

After that you can just paste in commands to install applications on your machine. So for example if you want to install notepad++ you simply execute the following command:

1

cinst notepadplusplus

Or if you want Sublime Text 2 instead:

1

cinst sublimetext2

Nice and easy!

Download

Sublime Text 2

Yes I also use Sublime Text just like many of us. It’s like the text-editor of the century. I believe I won’t switch to any text-editor soon.

Download

Sublime Text 2 Packages

Sublime Text 2 is already awesome but its even more awesome with some packages installed. To install packages you must first install the package manager. You can do that by executing the following command in the Sublime Text console. You can access the console by pressing ctrl + `:

1

import urllib2,os; pf='Package Control.sublime-package'; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print('Please restart Sublime Text to finish installation')

Here are some of the packages that I currently have on Sublime Text:

• Alignment
• Clipboard History
• Bracket Highlighter
• Dayle Rees Color Schemes
• DocBlockr
• Emmet
• PHPTidy
• SidebarEnhancements

If you want more sublime text 2 goodness you can check out Alex Maccaw’s article: Setting Up Sublime Text 2 or Drew Barontini’s Sublime Text 2 Setup

Package Control Installation

Git

Git is a version control software which I primarily use to keep track of the changes and to push to a remote repository for the projects that I’m working on.

Download

Wordpress

Wordpress is a content management system that I used for the past few months to create plugins for. It’s built on top of PHP and uses MySQL as its database.

Download

POEdit

POEdit is a cross-platform gettext catalogs editor. I use it to easily create translations for Wordpress plugins. The way it works is simple, you simply open the file that you want to create translations for and it will automatically scan it for the groups of text which are wrapped in __('') and _e(). After that you can just use Google translate to translate the text that its lists out.

Download

Everything

Not really a development tool but its a very useful software for quickly finding and opening files that I want to edit.

Download

Composer

Composer is like the NPM equivalent for PHP. It’s also a package manager used for installing different tools for PHP. You have 3 options if you want to install it on Windows. First is using CURL:

1

curl -sS https://getcomposer.org/installer | php

Another is by simply creating a new PHP file and putting the following code then execute it.

1

php -r "eval('?>'.file_get_contents('https://getcomposer.org/installer'));"

The third option is by using the Windows installer

Once you’re done installing Composer you can go ahead and search from the packagist site to search for some packages. In the screenshot below we have the eher/phpunit package. You can see all the information regarding its requirements, suggestions and conflicts be sure to read it before trying to install anything.

You can install packages by simply copying the string under the dev-master or the top-level section. In the example above we have "eher/phpunit": "dev-master". Just wrap it in curly braces and put in the require property.

1
2
3
4
5

{    
  "require": {
      "eher/phpunit": "dev-master"
  }
}

After that just save the file as composer.json and then execute composer install on the same directory where you have that file. It may take a while depending on the package so be patient and don’t close the command-line. If the package that you installed can be executed from the command-line simply add it to the environment variables so that you can easily execute it from the command-line regardless of the path where you are currently in.

Download

Want to get a job in the Web Development Industry? That’s easy! You must know HTML, CSS, JavaScript and PHP. Nah! Sometimes that is all you really need but most of the time you need to know more than that in order to get the job you want. In this article I’m going to share to you some of the tips that has worked for me in finding a job in Web Development.

First of all just to make sure that we are on the same boat. What is a web developer? According to Wikipedia:

A web developer is a programmer who specializes in, or is specifically engaged in, the development of World Wide Web applications, or distributed network applications that are run over HTTP from a web server to a web browser.

Ok so a web developer is actually a programmer who works on the web. Web developers can be classified into 4 groups:

• front-end developer
• back-end developer
• middle-tier developer
• full-stack developer

The front-end developer mainly works on the public facing part of a web application. Front-end developers are mainly concerned with UI components, browser support, front-end performance, and everything else that the user can perceive. Common technologies involved are HTML, CSS, JavaScript.

The back-end developer mainly works on the back-end of the website or the things that happens in the background while the user is interacting with the web application. This is the core of the web application. Common technologies involved are server-side technologies like PHP, Python, and Ruby. Back-end developers also works with databases such as MySQL, PostgreSQL Oracle, and MariaDB.

The middle-tier developer mainly works with services that sit between the front-end and the back-end. The middle tier developer is mainly concerned with how the front-end and back-end of the web application is going to communicate.

Lastly there’s the full-stack developer which knows how to do a bit of the front-end, back-end and middle stack.

So which do you want to be? Personally for me I’m currently working as a full-stack developer. I work a bit on the front-end, back-end and the middle stack. The advantage of the first 3 types of developers is that they’re specialists. They have a very deep understanding of the technologies that they are working on, specialists are often rare so their salary is very high. The advantage of being a full stack developer is that its easy to become one and you will be more marketable since you know a lot of different skills and technologies. The only downside is that they don’t make as much salary as the front-end, back-end and middle-tier guys make.

Back to the main topic of this article. Here are some tips to get a job in web development:

• Have a Portfolio / Github / Stackoverflow / LinkedIn / Blog
• Learn things on your free time
• Network
• Apply for that job

Have a Portfolio / Github / Stackoverflow / LinkedIn / Blog

You must have your own portfolio, github, stackoverflow and linked In. You can also create a blog if you like writing and sharing your ideas.

If you’re a new graduate you might not have anything to put in your portfolio and that’s just normal. What you can do is to work on personal projects or create a blog. A personal project can be anything that you really want to create. For developers its common to work on projects that can help them in their daily tasks like generators, code linters, or libraries. You can also have a personal project that involves technologies that you want to learn. For example, if you want to learn how to use the Facebook Graph API you can go ahead and plan out the application that you want to build. It doesn’t matter if you don’t know anything about the technology or if the features that the application that you have in mind are already present in Facebook. Just dive in to the Facebook Graph API Documentation and figure out how to do stuff using the API by Googling stuff. You can also ask questions at Stackoverflow if you get stuck.

The fastest way to learn things is to dive right in to doing it, but be sure to google best practices and look at code that other people have written so that you’ll have an idea on how to do things the right way.

Once you have setup your personal project you can just go ahead and push it up on Github so that the rest of the world can see it. It doesn’t matter if other people thinks your code sucks. What matters is that you know you’ve done a good job and is constantly working on improving it.

You can also create your stackoverflow profile and answer some of the questions that you can already answer. It doesn’t matter if the question that you’re trying to answer has already an accepted answer or that the question is already 3 years old. Just answer the question as best as you could and people will surely notice. They will give comments on how to improve your answer and you will even get an upvote if they think your answer is awesome.

Lastly you can also create your LinkedIn profile and start putting some of your achievements in school and the personal projects that you have worked on in your free time. Link to your portfolio, twitter, Google plus, stackoverflow, github or even your facebook if you want. Its okay to put in a lot of information about your past achievements and projects but be sure to only include the things that actually matter to the career that you are trying to pursue. In this case being a web developer. So there’s no need to put in your linkedIn profile that you are actually a chess champion or a basketball super star.

Learn things on your free time

The best way to make yourself more marketable is to learn things on your free time. Its a good time to learn something new. Especially now that there’s so much good learning resources out there which are free to use. Here are some of the resources that I have personally used:

Udacity Codeschool A Beginners Guide to HTML and CSS Mozilla Developer Network Google

The sheer amount of stuff that you need to learn in order to become a proficient web developer is staggering. But the key is don’t be overwhelmed because its just how things are in this field. Just take it easy and learn things one at a time. My advice is that you should learn first the fundamentals before diving in to the shiny and new stuff. An example would be to learn first how to do things in JavaScript before you learn jQuery. Write plain CSS first before using CSS Preprocessors like LESS and SASS.

Network

Its always a good idea to have a network of people who can recommend you for a job. If you have taken up college, it can be your classmates, teachers, friends. It can also be like-minded people that you have met online. A good place to find those connections is linkedIn, a social network for professionals. But be sure to keep your linkedIn profile updated so that people will actually notice your profile. Its also a good idea to add recruiters who are recruiting professionals in the field of web development. You can also join groups in LinkedIn and start contributing to the community. There will be a bigger chance that someone will notice you and can recommend you to a client.

Apply for that job

We are never really 100% ready to apply for a job that we want. Sometimes were not confident that we enough of that specific technology in order to apply. But that’s actually a good sign that you’re ready. If you’re familiar with the Dunning-Kruger effect which according to Wikipedia is:

a cognitive bias in which unskilled individuals suffer from illusory superiority, mistakenly rating their ability much higher than average. This bias is attributed to a metacognitive inability of the unskilled to recognize their mistakes.

Not having the confidence that you already know enough to start appliying for a job means that you’re already in the second stage of competence which is the conscious incompetence which means that you already recognize your lack of knowledge or skill on a specific field. This is enough to drive you into learning more.

At some point in time when you feel like you already have the minimum requirements to get started with applying for a job then you can go ahead and start applying. Here are some good places to start looking for jobs:

• Craigslist - you can look at web/HTML/info design jobs, internet engineering jobs, and software/QA/DBA/etc jobs. Sometimes there are bad eggs that you have to filter through. Some signs that a job posting is a bad egg if there are lots of mispelled words and there’s really no sane job description which gives you a bit of idea what you will be working on once you get accepted for the job.

• Jobmote - by far has the most quality job listings I’ve ever found. These are human curated job listings so the bad eggs are already filtered out. These are mostly telecommuting jobs.

• Staff - mostly telecommute jobs. You will get emailed when there’s a job opportunity.

All you really need to get to that interview is to have an awesome Résumé and cover letter. I won’t be delving into those in this article since they have already been written a dozen times before. Just Google those and you will surely find an answer.

Closing Thoughts

I cannot assure that this will work for you as well as it worked for me but just give it a try if you really want to get that job. All I can say is that you’re already half-way to getting that job if you have the genuine passion and you really love web development and building things.

Developers are not really the healthiest group of people in the planet simply because our faces are just buried in front of the computer 8 hours a day (or even more) 7 days a week. Were just sitting all day thinking of how to solve a problem, which technique to implement, and writing code.

Here are the things that I personally observe in order to stay healthy:

• Exercise
• Eat healthy foods
• Stand while working
• Sleep well
• Take breaks

Exercise

Always try to get atleast an hour of exercise everyday. Doesn’t matter which time you exercise(either morning or afternoon) or what type of exercise you do. What’s important is that you enjoy exercising and don’t think of anything else while doing it. I personally like brisk walking, jogging and running. I live close to a spacious school ground and that’s where I usually exercise so there’s really no excuse in not exercising.

Eat healthy foods

Always try to eat fruits, vegetables and have soup for every meal. Soup helps in making the food easier to digest. You can also try to eat less meat since meat is harder to digest than vegetable. If you’re the carnivorous type then there’s no excuse in drinking 8 - 10 glasses of water everyday. Actually you can drink more if you’re sweating a lot when exercising. Water helps in digestion, combine it with fiber which you can get from a whole bunch of fruits and vegetables leads to a healthier stomach.

Also try chew the food well, eating a meal in 20 to 30 minutes is a good indication that you’re chewing your food well. The stomach digests the food that we eat but digestion actually starts in the mouth when we chew our food. This will lead to better digestion which leads to better stomach and colon health.

Stand while working

Try to get a standing desk. Sitting is not good especially if you don’t take frequent breaks. If you don’t have the budget or you’re earning for something else you can always try to look for an alternative standing desk. I personally use our chest and drawer as my standing desk simply because it matches my elbow height and I feel comfortable using it.

Sleep well

Always try to get atleast 7 - 8 hours of sleep each night. This ensures that our mind is in its optimum state when we wake up. Fresh, happy and ready to solve some problems.

Take breaks

Take breaks every 50 - 60 minutes. Stretch up and do a micro-exercise, its a good way to make sure that your blood is flowing properly. Venous diseases like hemorrhoids, deep vein thrombosis, and varicose veins are born from not moving too much and staying in just one position all day.

It’s been a year since I started working remotely and I never regret any moment of it. In this post I’m going to share some of my thoughts in working remotely. Some of the pros and cons, and how to stay productive even if there’s no boss breathing down your neck.

For those who don’t know what telecommuting is. Here’s a helpful description from Wikipedia:

Telecommuting, remote work, telework is a work arrangement in which employees do not commute to a central place of work.
A person who telecommutes is known as a “telecommuter”, “teleworker”, and sometimes as a “home-sourced” employee.

Ok now that were on the same page let’s begin.

Pros

• Less interruptions.
• Less distractions (only if you are disciplined).
• Less time wasted on transportation.
• Comfortable work environment.
• More productive.

Cons

• No social interactions. Telecommute workers will basically miss out on random office chats and other social events that happens outside the office (E.g. company paid outings).

• There’s so little trust. This is basically because the person that you are working with doesn’t see if you’re really working or not.

• You can’t ask for help. Team mates can be working while you’re sleeping and most of the time they’re too busy with their own work.

• You can’t see what other employees in the company are working on. Though this is normal I believe there is a benefit in knowing what projects others are working on especially the senior one’s. You know the type of office interaction where you can ask questions to other employees and learn something from their answers.

How to Stay Productive

Telecommuting is hard if you don’t have the discipline to work without a boss breathing down your neck every second of the day. So the main ingredient needed to successfuly work remotely is discipline. The kind of discipline that will keep you from looking at your Facebook or Twitter stream every 5 minutes. Or watching some dancing cat ninjas on Youtube. Or endlessly browsing Stumbleupon.

Another important ingredient is love for the work that you do. By loving the work that you do you will have no problem working overtime if you don’t think you’ve done good enough for the day.

Lastly, you should always have a todo list so that you can keep track of what to do, what’s done and what needs some review.

That’s all there is to it really. You don’t need the Pomodoro technique or any other technique to be productive. All you need is discipline and love for your work.

In this article I’m going to walk you through some of the things that we can do with the Chrome Developer Tools to improve our web development workflow.

Accessing Chrome Dev Tools

You can access the Chrome Developer Tools by clicking on the Chrome Settings button -> Tools -> Developer Tools.

Elements Panel

First there’s the elements panel which we can use to inspect and edit the html that is used in a web page.

This is very useful for when you want to edit the HTML of the web page that you’re working on, adding some classes or attributes on the fly.

As you can see from the screenshot above there’s a bunch of things that you can do with the currently selected element like copying its HTML, Edit the HTML, or deleting the node which you can do by just pressing delete on your keyboard. If you mess up you can always press on ctrl + z to undo the changes that you’ve made.

You can also edit entire HTML blocks or navigate directly to the parent element of the currently selected element.

You can also drag elements around by holding the left mouse button and then dragging the element to where you want it to be and then finally releasing it.

Another thing that you can do within the elements panel is live editing of the CSS used in a particular element.

You can add new styles by pressing tab while the cursor is inside the value of the last property for a specific selector. As you can see from the screenshot below it also gives you a nice auto-completion for every property and values that are currently supported by the browser.

You can also disable a specific style by unchecking the checkbox before the property:

To delete a property entirely you can press delete while the cursor is either inside of the property or the value.

There’s also a sweet color picker which you can use to experiment on the color that you want to use.

You can also directly edit the css file by clicking on the name of the css file that you want to edit.

After that you can just edit the file like you usually do in a text-editor and the web page will be automatically updated as you type in the value for each property. The only difference is that you don’t get the auto-completion while in this mode.

But the only problem with this is that all your changes only lives on the browser once you refresh the page all your changes will be gone. And the only plugin-less solution would be to click on the filename of the css file that you’ve edited then copy all of its contents and then paste it back on your source file. Or you can actually right click on the file and then click on save.

Resources Panel

Next is the resources panel where we can see some of the resources that the web page has loaded on initial page load. That includes the current page (html), images, script files (mainly JavaScript), stylesheets, and other types of media. Each of these files are group according to their file type so all stylesheets are under the same group, all the JavaScript are in the same group, etc. Also note that the ordering depends on what has been loaded first. So the first files that were loaded during page load are first on the list.

From the resources panel you can also see what’s stored in Web SQL, Indexed DB, local storage, session storage, cookies, and application cache which is mainly specified in the manifest file whenever you want your application to be accessed offline.

The resources panel also gives you a nice preview of the file that you’re currently viewing. For images you get something like this:

And for HTML, CSS, and JavaScript files you get to view the source:

Network Panel

Next is the network panel where you can see the list of files which are loaded by the web page. Either on initial page load or while the users are interacting with the web page. So you can actually see the AJAX requests, template files and other network requests in the network panel.

Here are some of the information that you can see on the Network Panel:

Name - the name of the file that was requested.

Method - the method that was used to get the specific file (GET, POST).

Type - the type of file that was requested.

Status - the status of the request status. The common status are 200 OK which means the request was successful and the file was directly downloaded from the server. There’s also 304 not modified.

Initiator - the page that requested the file or resource. This is usually the current page.

Size - the size of the requested file in kilobytes.

Time - the time between making the request and the server’s first response in milliseconds.

Timeline - shows the waiting and receiving time for each file. The waiting time is the amount of time in which the browsers waits for the file upon requesting it. The receiving time is the amount of time in which the file is downloaded.

Clicking on each file allows you to view the request headers, preview, response, cookies and the timing.

headers - this shows you the details of the request like the Request URL which is the URL to the file that is requested. The request method which is usually GET or POST. The status code which you also saw from the network request summary earlier.

There’s also the Request Headers and Response Headers. The Request Headers are the information that is present in the browser. And the Response Headers is the information returned from the server.

Some of the information that are present in the Request Headers are the Referer which is basically the url of the file that initially requested the file or resource, the User-Agent is the browser used by the user to access the web page.

While the Response Headers contains information like the name of the Server (Apache, ECS, Nginx and a bunch of others), the current system date of the server, the entity tag.

preview - this is usually the source of the file. If its an image file you usually get a preview of the image.

response - the same as preview but this time you only get the raw data.

cookies - this is usually the cookies stored by the website that the user is currently looking at.

timing - the same as the information displayed in the waterfall timeline that you see on the network request summary only this time its only for the file that you have clicked on.

Sources Panel

The sources panel allows you to view and edit the source files used in the current web page. We kind of touch on this earlier when we click on a filename on the elements panel we get redirected to the sources panel and then it allows us to edit the file that we selected and the changes would be automatically reflected on the page. But that’s just on the css side of things. You can actually debug JavaScript code as well in the sources panel. The official Chrome Dev Tools documentation already had us covered in the Breakpoints section so I won’t delve much in how that’s done.

Timeline Panel

The timeline panel allows you to view information regarding the performance of your web app. Things like paint times, frames per second, and memory consumption. It gives you a complete overview of how your web app performs.

You can start using the timeline panel by clicking on the record button found at the lower left portion of chrome dev tools.

Then interact with your app a bit. Usually you would interact on the parts of your app in which you want to measure the performance. Once you’re done click on the stop button.

On first look this might really look complicated. I also had no idea where the hell should I start looking the first time I used the timeline panel.

First let’s talk about the colors that you see in the timeline panel:

Blue - sending of requests and network related stuff. Yellow - execution of JavaScript code. Purple - css calculation and rendering. Green - repaints (updating the page).

The length of these colors depends on the amount of time (in milliseconds) that the browser executed the operation. That’s about all I can share about the timeline panel. I’m not really in the level yet of measuring the performance of the applications that I’m trying to build especially in the frontend because I do more backend than I do frontend.

Console

The console panel allows you to play around with JavaScript code that you want to include in your application. It also serves as a shortcut in selecting elements in the DOM.

There are also some shortcuts which you can use to select elements.

To select the element that is currently selected in the elements panel you can use $0:

Of course you can also use $1, $2 and other numbers for as far as your memory can reach to select the elements that were previously selected. So if you select the body then the main wrapper then the first child of that wrapper. $0 returns the first child of the wrapper, $1 returns the wrapper, and $0 returns the body.

Other things that the console allows you to do:

• view errors - the console automatically allows you to view errors in your JavaScript code like parse errors when trying to call JSON.parse on an invalid JSON string.

• assertion - checking if a specific condition is true. You can use the assert method to do assertions. For example when checking if the following values are true:

As you can see from the screenshot above the first two conditions returned undefined which means the assertion has pass. While on the 3rd condition the assertion failed since were using the strict equality operator which also checks the data type of the variable and not just its value.

You can also assert return values from functions as well:

As you can see from the screenshot above the first assertion failed since 3 is not equal to 4. But the second assertion passes since 3 is less than 4. This is a pretty simple example but you can also have more complex functions checked by console.assert as long as they have return values which it can check.

Resources

Chrome Dev Tools Documentation

Need a css framework? There’s Foundation, Bootstrap, HTML Kickstart, Kube, Skeleton, Baseline, Gumby, Ink, Groundwork. There’s also a bunch of others which are based from Bootstrap: Flatstrap, Metro Bootstrap.

Need a boilerplate? There’s the HTML5 Boilerplate, 320 and up, HTML5Bones.

Need a package manager? There’s component, ender, bower, jam, NPM.

Need a browser tool? There’s Firebug, Chrome Developer tools, Page Speed Insights, JSON View, YSlow, MeasureIt, Colorzilla, CSS Usage, PageSpeed, SEO Doctor.

Need a coding tool? There’s Codekit(for Mac), ScoutApp (for Windows), LiveReload, Yeoman, Grunt, Lumbar, Yeoman, Sublime Text, Brackets.

Need a css base? There’s reset.css and normalize.css.

Need a CSS Compiler? There’s SASS + Compass, LESS.

Need a validator/linting tool? There’s JSLint, JSHint, JSON Lint, HTML Validator, CSS Validator.

Need a static site generator? There’s Jekyll, Octopress, Middleman.

Need an MVC/MVP/MVVM Framework? There’s Backbone, Ember, Knockout, Angular.

Tired of writing helper functions from scratch? There’s underscore.js, sugar.js, lo-dash, yepnope.js, modernizr, accounting.js.

Need to work with SVG? There’s Processing.js, Raphael.js, SVG Kit and SVG Web.

How about templating libraries? There’s Smarty, Handlebars, Mustache, Hogan.js.

Need a JavaScript library? There’s jQuery, Dojo, Mootools.

You think JavaScript is ugly? There’s Coffeescript, TypeScript, Dart.

Want a back-end framework? There’s Ruby on Rails for Ruby, Laravel for PHP, and Django for Python, Node.js.

Need a database? There’s MySQL, PostgreSQL, MongoDB, CouchDB, RavenDB.

How about a Software Development Methodology? There’s Waterfall, Prototyping, Spiral, RAD, Agile.

How about Design Patterns? There’s Singleton, Adapater, Bridge, Facade, Factory and a bunch of others.

Heck there’s a lot! The list is endless and it’s hard to keep up. There’s always something new everyday. There’s always a new technology, methodology, library, and tool. There’s always a new blog post, video, and podcasts that speaks about these technologies, methodologies, libraries and tools. There’s always a new, cool and faster way to solve problems.

There’s always this temptation (in most cases obsession) to check out all the shiny and new stuff, to read all those blog posts which speaks about them. And before you know it there’s no more time left for you to solve the real problems that needs solving.

Most of the tools, libraries and methodologies that comes out everyday is yet another way to solve existing problems. The only difference is that its newer and it looks sexier. But sooner or later it becomes out of fashion and a shiny new thing will replace it again.

What’s important is learning the core technology behind a library, so instead of learning jQuery, Mootools or Dojo we should first learn JavaScript. Instead of learning how to use Bootstrap or Foundation we should learn the basics and important concepts in CSS first. Core technologies that makes the whole platform (the web) work never gets replaced thus it should be given the priority before the shiny and new stuff. And once your done learning the core technologies you’re in a good position to try out some of the shiny and new stuff. And by try I mean giving it a go for a week or so and see if it feels right for you. If it feels right for you and you think it makes you more productive then you should definitely include it in your daily workflow.

Who cares if you’re using MS Paint and not Photoshop. Who cares if you’re using Notepad or Dreamweaver instead of Sublime Text. Who cares if you’re still using alert instead of console.log to debug your JavaScript. If you think you’re productive by using some of the old tools then why not right? At the end of the day it doesn’t really matter what tools, libraries or methodologies we use as long as we get to solve problems and we make our clients happy by solving them.

In this tutorial I’m going to show you how you can access the e-bay finding API to access products that are sold from e-bay. Product data such as the list price, available quantities, images are available from the e-bay finding API.

In this tutorial I’m going to walk you through some of the templating libraries that I’m currently using for my projects specifically the following:

• Mustache
• Handlebars
• Smarty

Mustache is available for a bunch of languages but were going to use the JavaScript version for this tutorial. Handlebars is only available on JavaScript. And Smarty is for PHP.

You can either use chrome dev tools, JS Fiddle (or any alternatives) or a local file for this tutorial.

In this post I’ll be sharing some of the things that I’ve discovered while working with Octopress.

Introduction

As you all know Octopress is a blogging framework much like Wordpress but only static and its powered by Jekyll which is a static site generator. Static means that it generates html and other assets whenever you generate the site. Every configuration are stored in files. Therefore there’s no database involved. There’s no login and other dynamic things that you might find in Wordpress and other CMS.

Perhaps this is one of the posts where I share the things I want. A few alternative titles might be:

What kind of Companies do I like to work for?

Things I’m looking for in a Company

What makes a company awesome?