Wern Ancheta

Adventures in Web Development.

Always Scratch Your Developer Itch

| Comments

As developers, no matter how busy we are with our lives, its important for us to always scratch our developer itches every now and then. What I mean by itches are the things that you want to do as a developer. Be it working on a side-project that you’ve been wanting to do for months, playing with a new technology, library or a programming language. Or reading an in-depth article about a new programming technique. Or watching a video tutorial about a framework that you’ve been wanting to learn. Or watching recorded talks from developer conferences all over the world. Or writing an article about a cool technique you’ve discovered recently. And other things that you always have at the back of your mind but never really got to do because of lack of time.

Lack of time is always the reason we give to ourselves. But time is not really the problem. We can always make time for something if we really love to do it. Yes we also have lives to live. But we also need to give priority to the things that matter to us as a developer. As a developers, we have the responsibility for continuous learning. To improve our craft for the better. And this is what it means to scratch your developer itch. If you have it, you’ll always find time to scratch it no matter how busy you may be.

On the contrary, we also have lives to live. Nothing is more important than our families and our lives as actual people. So giving time to that is our priority as a human being. After all life is not all about work. Life is about living it in the best way possible. And that is through spending quality time with our loved one’s.

In conclusion, its really all about balance. If you can’t find time every weekend to scratch your own developer itch, then maybe do it once or twice a month. Maybe 4-8 hours twice a month doing a side project is a good start. You can also go to work early and read up on blogs before and after the alloted time for work. Listen to podcasts while commuting. Most podcasts provide download links to each episode which you can save into your mp3 player of smartphone. Watching a 5-minute video tutorial just before going to bed. Every bit of time counts. It doesn’t matter how little or how much, what’s important is to give time to scratch our developer itches whenever we can. If you do, you’ll be a happier developer. Its like the feeling you get when you were finally able to get what you’ve been wanting to buy for a long time.

On Sleep

| Comments

As developers we tend to not give much priority to sleep. Most of the time its due to a lot of responsibilities: work, family, and side-projects. And oftentimes we even bring in our todo list in our mind when we go to bed. As a developer myself, I tend to get less sleep than what’s required. Sometimes not enough to fully function and be productive during the day. In this blog post I’m going to share some of the things I’ve learned about sleep.

Stages of Sleep

There are actually stages to sleep, its not just being awake or asleep. It is important that we understand this concept because its the core of what sleep is all about.

  1. Stage 1 – also called light sleep. This is where we drift in and out of sleep.
  2. Stage 2 – heart rate slows down and body temperature starts decreasing in preparation for deep sleep.
  3. Stage 3 – breathing becomes slower, blood pressure begins to drop, muscles becomes relaxed, cell growth and restoration occurs.
  4. Stage 4 – slow brain waves are produced.
  5. REM – Rapid Eye Movement sleep. This is where dreams usually occur. The body becomes immobile. Energy is provided to the brain and body.

Factors Affecting Sleep

There are 5 factors which affects sleep:

  • Light
  • Consistency
  • Activeness
  • Environment
  • Consumption

Light

Light affects the production of melatonin, a sleep hormone. Ample exposure to light during the day, and minimal exposure during the night 1-2 hours before sleep is recommended. The best light source is sunlight in the morning around 6-8 AM. For rainy days you can use light boxes. The main idea is that exposure to light helps produce serotonin, a neurotransmitter which affects sleep.

Earlier I’ve said that light exposure should be minimized during the night. But we haven’t really defined what light is. Light is not just the fluorescent light, its also the light which is emmitted by electronic devices such as laptops, tablets and smartphones. And if its not already obvious, the light which comes from a television is also light. As a developer I want to maximize the amount of time I spend doing something productive. And that almost always means staring at the computer screen until I actually go to bed. This is not good for sleep as it decreases melatonin production. A good alternative is to install flux. What it does is adjust the color temperature to adapt to the time of the day. This effectively reduces the bluelight which is bad for sleep. If you’re using a tablet or smartphone at night, simply look for similar apps. Blue light filter is a good one for android phones.

Consistency

Our bodies love consistency. The idea is that you should always sleep and wake at the same time. Our bodies have something like an internal clock. And if you’re consistent with your sleep schedule, you almost always wake up or feel sleepy at the same time of the day. You wouldn’t even need an alarm clock to wake you up if you’re consistent.

Activeness

Regular exercise is important. As developers, were basically one of the people with the most sedentary job. Our brains and fingers are the only part of the body that is moving. So to get good sleep we must make it a habit to have exercise of around 20-30 minutes a day. Quality sleep is all about temperature oscillation. The idea is that the higher the temperature our body reaches during the day, the lower it gets during the night. And the lower the temperature means more deep sleep. Take note that exercise a few hours before sleep is bad as it makes you active. Personally I prefer exercising in the morning as it completely removes the possibility of exercising too near before bed time. And it hits 2 birds with one stone, as I also get some morning sunlight while exercising. Jogging, cycling and running are good types of exercise.

Environment

The environment also affects sleep. The temperature should neither be too hot or too cold. Around 18-23 degree celsius is a good baseline. Turning on the AC is also good. It effectively lowers the room temperature and also blocks out outside noises because of its white noise. Its a no-brainer that to get quality sleep you must always sleep somewhere where you’re comfortable. Sleeping position affects the quality of sleep as well, the general rule is to always sleep in a position in which you are comfortable. But its always a good idea to avoid sleeping on your stomach, as it reduces the amount of oxygen that goes to your lungs.

Consumption

What we eat affects our sleep as well. Here are some foods which is good and bad for sleep.

Foods to consume
  • Cherries
  • Milk
  • Jasmine Rice
  • Banana
  • Sweet Potato
  • Turkey
  • Valerian Tea
  • Walnuts
  • Almonds
  • Cheese and Crackers
  • Lettuce
  • Tuna
  • Garlic
  • Chamomile Tea
  • Honey
  • Shrimp

Basically anything else which can help produce melatonin. Or foods which has sedative properties or natural muscle relaxant.

Foods to avoid
  • Alcohol
  • Fat
  • Dark Chocolate
  • Coffee
  • Soda
  • Spices
  • Chicken
  • Celery
  • Ice Cream

Avoid anything that is high on fat content or caffeine. Its best if you can avoid caffeine entirely as it stays on your body for long periods of time once consumed. Also avoid diuretics, a subtance which promotes the production of urine.

The general consumption rule is don’t eat too close to bed time. Eating around 2-4 hours before sleep is a good idea. 2 hours for light meals, 4 hours for heavy meals (dinner buffet). Another important thing is to stay hydrated, 8-10 glasses (8 ounces) of water is recommended. You can definitely consume more if you’re an athletic type or you sweat a lot. Always remember to not drink too much near bed time to avoid waking up to go to the bathroom. As a rule, avoid drinking too much water 1-2 hours before sleep. You can consume in small amounts (half a glass) if you want.

Sleep Supplements

Sleep supplements helps you fall asleep easier. Here are some sleep supplements which you can try if you’re having trouble falling asleep:

  • Valerian
  • Melatonin
  • Magnesium
  • Theanine
  • 5-HTP
  • Antihistamines
  • Anti-depressants

You can look for these supplements on Amazon or Google. Just be sure to consult your doctor before taking any of these supplements. Because some might negatively affect an existing condition that you already have.

As a general rule, sleep supplements should be avoided and should only be taken when you really can’t sleep. They are just short-term fix, and they can leave chemicals in your body which can take around a week to fully expel. These chemicals might make you feel sleepy during the day which is not good for productivity.

Napping

You can nap around 20-30 minutes to gain a boost of productivity and avoid feeling tired or sleepy during the day. The best time to nap is around 1pm after lunch.

Sleep Tracking

If you want to have an idea how much sleep do you get per night. You can buy a sleep tracking device. Currently there are two brands which dominates this market: Jawbone and Fitbit. Just search for those on Amazon and pick one that feels right for you. These devices gives you a detailed look on how much sleep you get. That includes all stages of sleep that I’ve mentioned earlier. Its basically a wearable device (wristband) which you can then connect to an app in your smartphone.

Sleep Disorders

There are lots of sleep disorder out there but I’m only going to walk through these two: Insomnia and Sleep State Misperception.

Insomnia

Insomnia is a sleep disorder characterized by difficulty or inability to fall asleep. It can be either primary or secondary insomnia.

  • Primary insomnia – means that your insomnia isn’t caused by any existing medical condition.
  • Secondary insomnia – means that your insomnia is a result of an existing medical condition such as asthma.

If you believe you have an insomnia, its better to consult it to a doctor. A psychiatrist can help in most cases. Because oftentimes what’s causing you to not be able to sleep is only in the mind. If a psychiatrist cannot help you, then look for a sleep specialist.

Sleep State Misperception

Sleep State Misperception is the inability to perceive sleep from wakefulness. People with this condition may report having only slept for a few hours but in fact they have slept more than that.

Tips and tricks on falling asleep faster

Finally here are some tips and tricks on how to fall asleep faster:

  • Exercise in morning. Brisk walking, jogging or running will do. If you have a bicycle you can also use that.
  • Take a warm bath before going to bed.
  • Read a boring book.
  • Use a todo list, don’t try to hold things in your brain too much. As a developer, I always have things I want to do. Be it playing around a new technology, a library or a programming language. Or watching video tutorials and recorded talks from conferences all over the world. Or finally start a side-project I’ve been wanting to do for months. Or read an article about what’s new in the world of web development. Or write an article for my blog. The list is endless. The idea of a todo list is to put as much things outside of your brain as possible. This way you don’t have to think about it or maintain it on your brain like a file that’s saved in a filesystem in your computer.
  • Get into a journaling habit. A bullet list of all the things you’ve accomplished that day will make you feel at ease and awesome about yourself.
  • Picture yourself as dead tired.
  • Relax your mind. Imagine a beautiful and relaxing scenery such as the beach or mountain top. Basically anything that you find peaceful.
  • Use air-conditioning to lower the room temperature. A cool environment will make you fall asleep faster.
  • Turn off all the lights. If you can go pitch black or near pitch black do it.
  • Hypnotize yourself. Imagine a pendulum swinging in front of your eyes back and forth.
  • Listen to relaxing music. Look for soft piano pieces by mozart and put it into your phone or mp3 player.
  • Get out of bed if you really can’t sleep. If you still can’t sleep 30 minutes after going to bed then its best to get out and do something that would occupy your mind. Like watching TV or reading a book. Just go back to bed once you feel sleepy again.
  • Change position. Put your pillow to where your feet is currently pointing.
  • Take some deep breaths. Inhale then count up to four then expel it around 8 counts. Then repeat again until you feel relaxed.
  • Listen to a sleep hypnosis podcast.
  • Replay all the things you did in the morning in your head.
  • Stretch like a cat, curl your toes, or rub your belly. All of this somehow triggers us to yawn, which signals our bodies that hey its now time to fall asleep.
  • Don’t watch the clock when you can’t sleep. This will only make it worse as it makes you more anxious and pressured to fall asleep faster. Forcing yourself to sleep is no good. Just remember that it will to you eventually.

Resources

On Driving

| Comments

Its been a month since I started to learn how to drive. In this blog post I want to touch a bit on what I learned about driving so far.

Before Starting

  • Check the wheels if they are on good condition.
  • Make sure that both side mirrors are set.
  • Make sure that the hand brake isn’t currently active. In most cars all you have to do is hold the brake, press the button with your thumb and then push the lever down.
  • Just before you use the ignition key to turn on the engine, fully hold down the foot brake, set the car from park (P) to drive (D), then slowly release the foot brake.
  • Always remember to start slow. Apply as little pressure to the gas pedal as possible.

Overtaking

  • Don’t try to overtake if you’re not sure if there’s an approaching vehicle on the other lane.
  • Do not try to overtake on curves.
  • Do not try to overtake inside a town or a city.
  • Before trying to overtake a vehicle, check both side mirrors if there’s any other vehicle also trying to overtake.
  • Use the left signal light before trying to overtake to let others know that you’re trying to overtake. Once you’ve succeeded, use the right signal light and then go back to your lane.
  • When another vehicle tries to overtake yours, slow down a bit.

Emergencies

  • When an ambulance or police car is approaching or coming from your back, keep up with your normal speed and move the car to the side of the road to let them pass.

Curves

  • Slow down before approaching curves to avoid possible collision.

Intersections

  • Always slow down before approaching intersections. Around 20-30 kph. This is to make sure you don’t collide with other vehicles. You can never really know what approaches you in intersections so slow down.

U-turn

  • When going from one lane to the other make sure that u-turn is allowed.
  • If you want to give yourself more space, park your car on the side of the road first then when the road is clear, maneuver the wheel to the left. Most of the time you’ll have to turn the wheel to the left until its limit. If it isn’t enough, stop the car with the foot brake and then use reverse mode to move the car backwards a bit. Use the foot brake again and then turn the car to drive mode and turn the wheel to the left as much as its needed. Just before the car is completely facing in the right direction, turn the wheel to the right until its in its neutral position. Most wheels in modern cars actually go back to neutral position automatically but its safer if you don’t rely on that. Because most of the time you’ll want to move it to neutral position as fast as you can.

Speed

  • Don’t try to go faster than what you can handle. My personal limit is 60 kph, I don’t try to go faster than that.

Rough Road

  • If you actually care for your car, slow down when approaching rough roads.

Horn

  • Only use the horn when its absolutely necessary. Sometimes its prohibited to use it on some areas.
  • Do not use the horn to vent out your frustration. An example of this is when bicycle riders or sidewalk vendors use the road as if they were riding a car. Just give the horn a light tap, and if the bicycle rider still doesn’t move to the side simply go pass them if the situation allows.

Stay Cool

  • Be sure to keep your head cool at all times. You don’t want your driving to be affected because of your frustration.

Parking

  • Be sure that you are only parking your car where it is allowed.
  • Completely stop the car with the foot brake before putting the car into park mode and pulling the hand brake.
  • Be sure to leave enough space to maneuver your car later on. You don’t want to get to close to another car to avoid scratching it.
  • If the situation allows, use reverse mode when parking your car, this means that the tail of your car goes inside and the head is outside. This makes it easier for you to go out later on.

That’s it! I’m still a beginner at this so I’ll be adding more things to this blog post in future as I learn more things about driving. For now I’m going to leave you with this saying:

Better late than dead.

Introduction to Laravel Bootstrap Starter

| Comments

I’m still on side-project frenzy. This week its the Laravel Bootstrap Starter. I created this project to make it easier for me to setup a Laravel project faster. I’m using Laravel in the company that I work for and every time I start a new project I have to install it via composer, configure it so that it doesn’t show /public in the URL. From there I add the default controllers, add the sign up and login code, add the functionality for updating and resetting password, install node, grunt and then bower. And then install the grunt plugins that I need for front-end performance optimization. The list goes on, and just setting up a project may take a whole day. That’s why I decided to create this project.

Features

Like most of the projects that I decided to do so far. It only contains the essential features:

  • sign up and login
  • resetting passwords
  • admin (updating account information)

Future Plans

As I move along with this project I’m gonna be adding the following features:

  • social login – google, twitter, facebook, linkedin
  • database backup – every project must have an automated database backup functionality. I’m thinking of using cron for running the backup script and then upload the backup to an Amazon s3 bucket.
  • generators – there are 2 projects doing this already, one is Jeffrey Way’s Laravel 4 Generators and the other is Wes Dollar’s forked version, both looks pretty good. I think I’ll be able to get some ideas from these projects. Basically the plan here is to be able to use the terminal for generating boilerplate code which I can then build upon.
  • build tool integration – I want to be able to just hit one command and it will install and configure everything that I need to get the project started. Yeoman seems to be a very good fit for this.

Introduction to Ahead

| Comments

I’ve been in side-project frenzy these past few weeks. And this time I’m writing again about another side-project that I’ve been working on, its called Ahead. Ahead is an app that allows you to schedule posts to your facebook, twitter and linkedin accounts. Pretty much like Buffer. But Buffer has limits for free accounts, that’s why I built this app so I can schedule posts without limits.

How to Use

You can use Ahead by going to its demo website. Create and account then login. Once logged in, go to the networks page and connect the accounts where you want to publish by clicking on the connect button:

networks

Once your accounts has been connected, you can now start scheduling posts:

schedule new post

You can check the time in which your post will be published from the posts page. From the published column you can also see if your post has already been published or not:

posts

If you don’t want to select the networks in which you want to publish all the time, you can visit the settings page and then select the networks which you want to select by default:

settings

If you don’t want your posts to be published one hour after another you can also add custom schedules by visiting the schedules page:

new schedule

Just select an interval that you want and it will be available as an option when you schedule a new post. Of course you can also select a default schedule from the settings page once you’re done creating a schedule. Currently only the following intervals are supported:

  • every 1 hour
  • every 2 hours
  • every 3 hours
  • every 4 hours
  • every 5 hours
  • random time in the next 72 hours (3 days)
  • random time in the next 168 hours (1 week)

Future Plans

Ahead is still in early stages of development. Its already quite functional but I’m planning to add the following features in the future:

  • Publish posts without links – currently it can only publish posts with links in it. I originally envisioned this project for my personal use only and I don’t really schedule posts without links in it.
  • Add social login – currently you can only start using the app by signing up with your email.
  • Email verification – currently you can use fake emails when signing up.
  • Editing and deleting posts – currently you can no longer edit posts that has already been scheduled. I’m planning to add an edit or delete feature in order for users to be able to make changes to their scheduled posts.
  • Immediate publishing – currently only scheduled posts are supported.
  • Add custom intervals to schedules

Introduction to Publicizr

| Comments

A couple of weeks ago I started building a project called Publicizr. I created it for the sole purpose of easily publishing a link to my Facebook, Twitter and LinkedIn profile whenever I publish a new post on this blog.

Dependencies

This project depends on the following Ruby gems in order to work:

  • linkedin – used for connecting/publishing to Linkedin.
  • twitter – used for connecting/publishing to Twitter.
  • koala – used for connecting/publishing to Facebook.
  • em-resolv-replace – used for fixing the issue with koala not being able to publish to Facebook from the localhost.

How to Install

You can install Publicizr by requiring the following Ruby gems in the Gemfile used by your static blogging engine:

1
2
3
4
gem 'linkedin', '~> 1.0.0'
gem 'twitter', '~> 5.11.0'
gem 'koala', '~> 1.10.1'
gem 'em-resolv-replace', '~> 1.1.3'

Once you’ve added those, save the changes to the Gemfile then execute bundle install on your terminal.

Once everything is installed, look for the Rakefile used in your static blogging engine. For Octopress/Jekyll its located in its root directory. Next add the following on the Rakefile. If the Rakefile is requiring other gems, just put these below those gems. If not then put it on the first line of the Rakefile:

1
2
3
4
require "twitter"
require "koala"
require "linkedin"
require "resolv-replace"

Next, put these on the last line of the Rakefile:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
desc "Publish post to facebook, twitter and linkedin"
task :publish, :content do |t, args|

  if args.content
    post = args.content


    #start post to twitter
    tweet = Twitter::REST::Client.new do |config|
      config.consumer_key        = "{twitter-app-key}"
      config.consumer_secret     = "{twitter-app-secret}"
      config.access_token        = "{twitter-user-token}"
      config.access_token_secret = "{twitter-user-secret}"
    end

    tweet.update(post)
    #end post to twitter

    #start post to facebook
    @graph = Koala::Facebook::API.new("{facebook-user-token}")
    @graph.put_wall_post(post)
    #end post to facebook

    #start post to linkedin
    linked_in = LinkedIn::Client.new('{linkedin-app-key}', '{linkedin-app-secret}')
    linked_in.authorize_from_access('{linkedin-user-token}', '{linkedin-user-secret}')

    linked_in.add_share(:comment => post)
    #end post to linkedin

    puts "Your post has been shared!"

  else
    puts "Supply your post!"
  end


end

Basically what it does is declaring a rake task that will publish whatever content you pass into it. If you don’t need to publish to all 3 (Facebook, Twitter, LinkedIn), feel free to comment out the lines between the lines which says ‘#start post to facebook’ and ‘#end post to facebook’. Just replace ‘facebook’ with your social network of choice.

At this point the project still requires you to create your own app on each of the social networks. You can do that by visiting the following links and then look for the page for creating a new app:

Once that’s done, you also need to create an app using your language of choice (PHP, Ruby, or Python) that will allow you to retrieve user tokens. If you’re primarily a PHP developer you can use the following libraries to ease the work that you need to do:

Once you’ve acquired the applications keys and user tokens you can now replace the values which says something like {twitter-app-key}, {twitter-app-secret} on the publish task in your Rakefile. Basically anything that’s wrapped in curly brackets, you need to replace those in order for the plugin to fully function.

How to Use

You can use publicizr by executing the publish task then supplying the content of your post as an argument:

1
rake publish["new blog post: newsletters I subscribe to http://wern-ancheta.com/blog/2014/09/07/newsletters-i-subscribe-to/"]

Support

Any Ruby based static blogging engine is supported. You can check out this big list of static blogging engines and look for the ones that are built using Ruby.

Future Plans

Publicizr is already useable but still requires a bunch of work in order to get setup and running. That’s why I plan to add the following features in the future:

  • automatically detect last post that was created and publish it automatically when the blog is deployed.
  • website for retrieving user access tokens which you can then paste into the rake file. This removes the need for creating your own apps and retrieving your keys from it.

Newsletters I Subscribe To

| Comments

Following last weeks post on Podcasts I listen to. This time I’ll talk about some of the newsletters I subscribe to.

Ruby Weekly

Ruby Weekly is an email round-up of Ruby news and articles. This newsletter is mainly about Ruby but you can also find some interesting stuff here even if you’re not a Ruby developer. Links to articles about command line tools, databases and version control are also included in every issue.

Schedule: Every Friday

Visit Site

JavaScript Weekly

JavaScript Weekly is an email round-up of interesting JavaScript news and articles. It also has a jobs section in which you can find jobs exclusively for JavaScript developers or engineers.

Schedule: Every Friday

Visit Site

Webtools Weekly

Web Tools Weekly is a front-end development and web design newsletter with a focus on tools. Each issue features a brief tip or tutorial, followed by a weekly round-up of various apps, scripts, plugins, and other resources to help front-end developers solve problems and be more productive.

Schedule: Every Saturday

Visit Site

Gamedev.js Weekly

Gamedev.js Weekly is a newsletter all about HTML5 game development. I’m not really a game developer myself so reading articles from this newsletter is just for me to have an idea how games for the browser are being developed.

Schedule: Every Saturday

Visit Site

StackExchange Programmers Newsletter

A curated list of interesting programming questions from the programmers.stackexchange website.

Schedule: Every Saturday

Visit Site

DB Weekly

A weekly round-up of database technology news and articles covering new developments, SQL, NoSQL, document databases, graph databases, and more.

Schedule: Every Friday

Visit Site

Versioning

A daily newsletter by Sitepoint. If you are tired of keeping yourself updated via your twitter feed, hacker news, and a bunch of other sources then Versioning is for you. As they curate a bunch of links that web developers might find useful.

Visit Site

Hacker Newsletter

If you can’t keep up with Hacker News, Hacker Newsletter is the way to go. Kale Davis curates only the most interesting stuff that you might find on Hacker News.

Schedule: Every Friday

Visit Site

Responsive Design Weekly

A free, once–weekly round-up of responsive design articles, tools, tips, tutorials and inspirational links.

Schedule: Every Friday

Visit Site

Node Weekly

Node Weekly is a free, once–weekly e-mail round-up of Node.js news and articles. Its still from the same guy (Peter Cooper) who brought us the awesome JavaScript Weekly Newsletter. But this is primarily focused on Node.js.

Schedule: Every Friday

Visit Site

WPMail.me

WPMail.me is a free WordPress Newsletter, once a week, with a round-up of WordPress news and articles.

Schedule: Every Friday

Visit Site

PyCoder’s Weekly

A free weekly e-mail newsletter, on Fridays, for those interested in python development and various topics around python.

Schedule: Every Saturday

Visit Site

Python Weekly

If PyCoder’s Weekly isn’t enough, Python Weekly has got you covered. Its a free weekly e-mail newsletter, for those interested in python development and various topics around python.

Schedule: Every Friday

Visit Site

PHP Weekly

As the name suggests, PHP Weekly is a newsletter featuring the best articles, tutorials, talks, news, jobs, and tools about PHP. Based on my experience so far, every issue is a fat one. And when I say fat it means that there’s bunch of stuff in there for you to consume. You couldn’t ask for more from this newsletter. Its the best thing there is if you want to keep yourself updated about PHP stuff.

Schedule: Every Thursday

Visit Site

Postgres Weekly

Postgres Weekly is a free, once–weekly e-mail round-up of PostgreSQL news and articles.

Schedule: Every Wednesday

Visit Site

Web Design Update

Web Design Update is a plain text email digest dedicated to disseminating news and information about web design and development with emphasis on elements of user experience, accessibility, web standards and more

Schedule: Every Wednesday

Visit Site

ng-newsletter

Ng-newsletter is a weekly newsletter of the best AngularJS content on the web.

Schedule: Every Wednesday

Visit Site

Ember Weekly

Ember Weekly is a newsletter dedicated to bring you the latest Ember.js news, tips and libraries.

Schedule: Every Monday

Visit Site

HTML5 Weekly

HTML5 Weekly is a newsletter that features HTML5 and Web Platform technology roundup, CSS 3, Canvas, WebSockets, WebGL, Native Client, and more. Basically all things HTML5 and related technologies.

Schedule: Every Wednesday

Visit Site

Perl Weekly

Perl Weekly features hand-picked news and articles about Perl.

Schedule: Every Monday

Visit Site

DevOps Weekly

Devops Weekly curates the best and latest articles all about DevOps. If you’re not familiar with DevOps, its basically a short term for Development and Operations. Its mainly focused on IT operations, tooling and collaboration.

Schedule: Every Monday

Visit Site

UX Newsletter

Another newsletter from Stackexchange which features the most interesting questions about User Experience in the past week.

Schedule: Every Monday

Visit Site

Web Developer Reading List

An all in one newsletter for web developers. It contains news on both front-end and back-end stuff.

Schedule: Every Friday

Visit Site

CSS Weekly

A weekly e-mail roundup of css articles, tutorials, experiments and tools curated by Zoran Jambor. There’s not much in every issue but the quality makes up for it.

Schedule: Every Tuesday

Visit Site

Podcasts I Listen To

| Comments

To take a bit of a break from the usual web development tutorials that I published. This week I’ll be talking about some of the podcasts that I usually listen to when I’m just chilling out doing nothing. Podcasts are a really good way to keep yourself updated as a developer even if you’re not in front of a computer.

Shoptalkshow

A podcast where they talk about front end web design, development and UX. Its hosted by Chris Coyier and Dave Rupert. Each week they either interview someone from the industry or have a Rapidfire show in which they answer questions submitted by their listeners.

Visit Site

Ruby Rogues

Not like what the name of the podcast suggests, Ruby Rogues isn’t exclusively for Ruby stuff. I’m not a Ruby Developer myself but I often listen to this podcast because they usually talk about general stuff that developers would want to listen to. Things like self-evaluation, staying sharp, and education. They also usually invite someone from the industry to be in the show so that’s a bonus as well. At the end of each episode they have a picks section in which each of the hosts pick anything that they want to plug into the show. Such as books, games, a random article.

Visit Site

JavaScript Jabber

Pretty much like the Ruby Rogues podcast because its created by the same guy: Charles Maxwood. They mostly invite JavaScript developers to talk about their projects. Such as Guillermo Rauch of Socket.io, Jo Liss of Broccoli.js.

Visit Site

Freelancer Show

Another podcast from Charles Maxwood, the Freelancer Show. As the name suggests, its a podcast about freelancing. If you’re looking into doing freelancing on your part-time or you want to do freelancing full-time then this podcast is for you.

Three Devs and a Maybe

A podcast about Web Development. Though if you visit their website they usually talk about PHP stuff. If you’re a PHP developer then this podcast should definitely be on your listening list.

Visit Site

This Developer’s Life

A podcast about developers and their lives. Though this podcast is not ongoing anymore, most of the things that you’ll find in here are still relevant. Its about the daily lives of developers after all. Their content is mostly on story format. And each episode has a specific theme. Things like obsession, learning, competition, getting fired and many others.

Visit Site

The JavaScript Show

Though this podcast is no longer active, they have some good stuff in here that you might want to check out. Each episode is fully dedicated to JavaScript stuff, that is both client-side and server-side. Its from the same guy (Peter Cooper) who’s curating the contents for the JavaScript Weekly Newsletter so the JavaScript Show is basically a JavaScript Weekly in audio format.

Visit Site

FaceOff Show

Another podcast which is no longer active but still pretty useful is the FaceOff Show. They have a total of 126 episodes before they stopped but the content is still available on their website to download or to listen to. The FaceOff Show is a holistic podcast, its basically all of the podcast mentioned above combined into one. In other words, its all thing development.

Visit Site

Getting Started With Amazon EC2

| Comments

In this tutorial I’m going to give you an introduction on how to setup an Amazon EC2 instance that uses the LAMP stack. This tutorial assumes that you already have an AWS account setup.

Setting up the instance

The first thing that you need to do is to login to your AWS account. Once logged in, click on the instances link found on the left side of the screen. Once in the instances page, click on the ‘Launch Instance’ button. You will then be redirected to the page where you can select the operating system that will be used for the instance that you want to create:

choose AMI

If you’re using Ubuntu for your development, it would be much easier for you if you also select the Ubuntu Server, the 64-bit version if preferred. Just click on the ‘select’ button beside the Ubuntu instance.

Next, we need to select the instance type. For starters you may want to try the t2.micro instance as its eligible for the free tier, this means that you don’t have to pay anything when you launch this type instance.

choose instance

If you’re looking into launching an instance which exactly fits your needs, check out ec2instances.info. Note that an instance that’s not eligible for free tier would cost you per hour so be really careful with the instance that you select.

Once you’re done selecting the instance type, click on the ‘Next: Configure Instance Details’, that will redirect you to the page where you can configure details about your instance. Things like the Virtual Private Cloud, Subnet and Public IP. Usually you don’t really have to touch these settings so just leave the default ones.

configure instance

Next click on the ‘Next: Add Storage’ button. That will redirect you to the page where you can configure the size and volume type of the storage that will be used for your instance. Just input 30 for the size as free tiers are eligible for up to 30 GB. If you have selected something higher than the free tier, you can find information on how much storage size you can have at ec2instances.info. For the volume type, just use the general purpose SSD.

add storage

Next click on the ‘Next: Tag Instance’ button. That will redirect you to the page where you can assign a key-value pair to your instance. This allows you to tag your instance with those key-value pairs which enables you to categorize your AWS resources in different ways. We won’t really be using tags in this tutorial so if you want to learn more about tagging your instance, check out the official docs.

tag instance

Next click on the ‘Next: Configure Security Group’ button. That will redirect you to the page where you can configure the security group used by the instance. In simple terms, security groups allows you to set the ports used by your instance and which IP addresses are allowed access to those ports. You can assign different settings for inbound and outbound rules. Inbound rules are the settings used for requests made to your server by other computers.

For inbound rules you would commonly have the following settings:

  • Type: SSH – this allows you to access your instance via SSH.
  • Protocol: TCP
  • Port: 22
  • Source: 0.0.0.0/0 – if you got a static IP assigned to your computer, its more secure if you set that IP for this field. Otherwise just select ‘Anywhere’ which allows access to any IP.

  • Type: – HTTP – this allows you to access your instance from the browser.

  • Protocol: TCP
  • Port: 80
  • Source: 0.0.0.0/0 – this means anyone which has access to the internet can access your instance via the DNS provided by Amazon or the public IP assigned to your instance.

For outbound rules:

  • Type: – HTTP – this allows your instance to download stuff from the internet.
  • Protocol: TCP
  • Port: 80
  • Destination: 0.0.0.0/0 – this means that your instance can make the request to any server.

  • Type: MYSQL – this allows your instance to make a request to the MySQL server.

  • Protocol: TCP
  • Port: 3306
  • Destination: 0.0.0.0/0 – this allows your instance access to any MySQL server. You can also set this to the private IP of your instance. You can only specify a single IP so if you’re planning to access other MySQL servers aside from the one installed on your ec2 instance then just select ‘Anywhere’.

That’s pretty much it.

You can learn more about security groups in this page: Amazon EC2 Security Groups

Once you’re done configuring the security group, click on ‘Review and Launch’ button. You can now review the details of the instance, once you’re done reviewing just click on the ‘Launch’ button. Amazon will now prompt you to create an ssh key or use an existing key if you already have an existing one. You can use the ssh key to authenticate yourself when logging in to your instance via ssh. Keep the ssh key somewhere where you can easily find it. For me I prefer putting it in the ~/.ssh directory.

Installing Software

Now that you have launch the instance you can now access it via ssh. To do that, login to your amazon account, click the ‘services’ link on the upper left corner of the screen, hover on the ‘All AWS Services’ link then click on ‘EC2’. That will redirect you to the ec2 dashboard page. Once you’re there, click on the ‘instances’ link. This will list out all the instances that you have created in the current region that you have selected. If nothing is listed on that page the instance that you have created might be on another region. To change the region you can click on the second link from the right. The one which looks like a place in the world. Select any of the places listed in there and your instance will be listed in any of those. Next click on the instance listed then copy the value for the ‘Public DNS’. Open up a terminal, cd into the directory where you have your ssh key then execute the following command:

1
ssh -i amazon-aws.pem ubuntu@the-public-dns-of-your-instance

Breaking the command down, -i allows you to specify the ssh key file. In this case the file name is amazon-aws.pem. Next is the username of the user you want to use to login, in this case the username is ubuntu. That’s the default username for Ubuntu ec2 instances. Next is @ followed by the public dns of your instance. If you have already assigned a domain name to your instance you can also use that.

Once you’re logged in you can now start installing software. Ec2 instances doesn’t come pre-installed with Apache, PHP and MySQL. So you would need to install it yourself. Here are some of the software that I usually install on an ec2 instance:

Curl:

1
2
3
sudo apt-get install curl
sudo apt-get update
sudo apt-get install libcurl3 php5-curl

Composer:

1
2
curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer

Apache:

1
2
sudo apt-get install apache2
sudo /etc/init.d/apache2 restart

PHP:

1
2
sudo apt-get install php5
sudo apt-get install libapache2-mod-php5

MySQL:

1
2
sudo apt-get install mysql-server
sudo apt-get install php5-mysql

Configuring Apache

Once everything is installed you still have to configure Apache to use a different web directory. This is because the default one isn’t really that friendly. As you have to sudo every time you need to save or update something from the directory. My preferred directory is one that is on the home directory. As you won’t need any special privileges to do anything inside of it. To configure Apache to use a different directory, cd into the /etc/apache2 directory then open up the apache2.conf file. You can open up the file using a text editor like nano, vi or vim. Once you’re in that directory open up the file using the text editor of your choice:

1
sudo nano apache2.conf

Now look for the Directory directives and update it to use a value similar to the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<Directory />
        Options FollowSymLinks
        AllowOverride None
        Require all denied
</Directory>

<Directory /usr/share>
        AllowOverride None
        Require all granted
</Directory>

<Directory /home/ubuntu/www>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
</Directory>

For the configuration file above were using /home/ubuntu/www as the web root directory. You can change this to any directory on your home folder. Just be sure that the directory exists.

Still on the same directory, cd into the sites-available directory then open up the 000-default.conf file. Look for the DocumentRoot directive and specify the path to your web root directory.

1
DocumentRoot /home/ubuntu/www

Once everything is done, restart Apache using the following command:

1
sudo service apache2 restart

Conclusion

That’s it! In this tutorial you have learned how to set up an ec2 instance, install software needed to host a website. You can use the free tier to quickly test out an app idea and bring it online for everyone to test out.

Getting Started With Supervisor

| Comments

Recently in my work I had this node.js script that I had to run persistently. Its basically a server that will generate images based on some JSON data that’s passed from the client side. So I did some searching and found Supervisor, a process control system. It allows you to run programs persistently.

Installation

You can install install Supervisor by executing the following command in your terminal:

1
sudo apt-get install supervisor

Configuration

Once the installation is done, you can now create the config file. This is where you specify which script you want to run, the directory in where you want to run it, and a log file in which the output is redirected.

1
sudo nano /etc/supervisor/conf.d/image-creator.conf

Here’s what a config file looks like:

1
2
3
4
5
[program:imagecreator]
command=node image-creator.js
directory=/home/ubuntu/www
stdout_logfile=/home/ubuntu/logs/image-creator.log
redirect_stderr=true

Breaking it down. This is where we set the name of the program. Yes the program: is always there, only the thing that comes after it is updated. In this case the name of the program that I gave is imagecreator.

1
[program:imagecreator]

Next is the command that you execute when you’re running the program in the terminal. In this case were executing the script via the node command:

1
command=node image-creator.js

Next is the directory where the program is stored. This can also be the directory where you want to execute the program:

1
directory=/home/ubuntu/www

This is where you specify the file where you want to redirect the output of the program:

1
stdout_logfile=/home/ubuntu/logs/image-creator.log

Lastly, we specify whether to send back the stderr output to supervisord on its stdout file descriptor:

1
redirect_stderr=true

That’s pretty much all we need for the configuration file. You can go ahead and save it. If you want to specify more settings, check out the docs on configuration

Adding the Process

Now that we have a configuration file in place we can now tell supervisor to add it to the list of processes that it currently manages. You can do that by using supervisorctl:

1
sudo supervisorctl

Executing the command above will let you enter the supervisor program. Next execute the following commands in order:

1
2
3
reread
add imagecreator
start imagecreator

Breaking it down:

  • reread tells supervisor to read the configuration files that are available.
  • add tells supervisor to add the program into the list of programs that it will manage.
  • start tells supervisor to run the program.

Conclusion

That’s it! Supervisor is a neat little program that allows you to run programs persistently. Just be sure that errors are handled accordingly because supervisor wouldn’t continue running your program if an error occurs while its running.