Our Blog

Decreasing your website load time

By Juan Pablo Ventoso
January 7, 2020

Photo by Johan Larsson, used under CC BY 2.0

We live in a competitive world, and the web is no different. Improving latency issues is crucial to any Search Engine Optimization (SEO) strategy, increasing the website’s ranking and organic traffic (visitors from search engines) as a result.

There are many factors that can lead to a faster response time, including optimization of your hosting plan, server proximity to your main traffic source, or utilization of a Content Distribution Network (CDN) if you are expecting visitors on an international level. Some of these solutions and many others can be implemented with only a couple hours of coding.

Inline styles and scripts for the topmost content

Nobody enjoys waiting for long load times. When opening a Google search link, being met with a blank page or a loading GIF for several seconds can seem agonizing. That’s why optimizing the initial rendering of your page is crucial.

The content that immediately appears to the user without the need to scroll down is referred to as “above-the-fold”. This is where your optimization efforts should be aimed. So here’s a plan to load and display as quickly as possible:

• First, differentiate the …

Useful terminal tools

By Jon Jensen
January 3, 2020

Photo by Tee Cee · CC BY 2.0, cropped

Like most of my co-workers, I spend a lot of time in a terminal emulator (console) in a shell at the Linux command line. I often come across tools that make work there nicer, but sometimes I forget about them before I integrate them into my workflow. So here are notes about a few of them for myself and anyone else who may find them useful.

HTTPie

HTTPie is:

a command line HTTP client with an intuitive UI, JSON support, syntax highlighting, wget-like downloads, plugins, and more.

Given how commonly-used curl, wget, and GET/POST (lwp-request) are, it is nice to see some innovation in this space to enhance usability.

Here is a simple example that demonstrates several HTTP redirects with full request and response headers, colorized:

http -v --pretty=all --follow endpointdev.com | less -R

The color highlighting of the body, not just response headers, is the main difference here from curl, wget, etc.

Also nice for ad-hoc interactive use is that the verbose header output is sent to stdout instead of stderr, so it shows up in less without needing to have the shell merge it with 2>&1 before piping to less.

An aside on HTTP redirects

In the …

Making sense of XML/JSON items in the shell

By Muhammad Najmi bin Ahmad Zabidi
December 31, 2019

Working as a system administrator means I have to spend quite some time during my work (and even during casual surfing) with the terminal. Sometimes I feel that certain information I want could just be fetched and parsed through the terminal, without having to use my mouse and point to the browser.

Some of the websites I visit use XML and JSON, which we could parse with Bash scripting. Previously I wrote a Ruby script to call Nokogiri to parse the XML elements until I found a Bash tool that could do the same thing.

These tools have already been around for quite a while—I’d just like to share what I did with them. The tools I used are xmlstarlet for XML parsing and jq for JSON.

XML

I have the following XML elements, and I’ll save them to a file called data.xml:

<rss version="2.0"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
    xmlns:admin="http://webns.net/mvcb/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:content="http://purl.org/rss/1.0/modules/content/">

    <channel>
        <title>eSolat JAKIM : Waktu Solat Hari Ini …

A Career Talk for 1st Graders

By Steph Skardal
December 6, 2019

Giving a Career Talk to 1st Graders

This week, I gave a career talk to my daughter’s 1st grade class and I talked about my job as a software engineer. I started with this video, which depicts two kids explaining to their dad how to make a peanut butter sandwich (called the “Exact Instructions Challenge”), but he takes them very literally and acts as though he has no context on how to work with peanut butter, jelly, and bread. The video got some giggles!

After the video, I talked about how the video was similar to what I do: I give computers instructions, and like that silly dad, computers don’t know anything about what they are being told to do. I hope they understood the analogy!

I have 5 Alexas!

We talked about what a computer is and how we all have a lot of computers at our house (“I have 5 Alexas at my house!”, “I have a PS4!”, “I have a PS2!”), even some that can turn the lights on and off now. I didn’t show them code because I didn’t think it would mean much to them, but a couple of the kids in the class had worked on kid-friendly coding projects.

I talked a little bit about my education (1st graders aren’t quite sure what this “college” thing is), and how I work from home. …

Reviewing the Code

By Kürşat Kutlu Aydemir
November 26, 2019

Code review is analysis of source code of a software project by reading the code itself or sometimes using automated tools to analyze it, and it is part of the Software Quality Assurance (SQA) activities which define the quality assurance of the whole software development lifecycle.

As we go through the flow of a code-review, we’ll understand what to assure by doing code review. Code review lifecycle covers the guidelines and the code review process itself.

Code review guidelines

Preparing for code review

• Pick the right reviewers. The reviewer should be an experienced software architect. Sometimes, less experienced groups can join the review team. Communication is also important, since frequent round table code review meetings with the developers are not usually productive.
• Let authors annotate the code before review indicating which files have precedence for review. Annotation by the developers to orient the reviewer so they know where changes have taken place and where to review is a good practice.
• Request code review. Requesting code review just before testing is another good practice.

Tips for reviewer during the code review

• Review small pieces of code at a time, for …

A Project Manager’s Toolkit

By Elizabeth Garrett Christensen
November 16, 2019

I do a lot of project management work related to web applications. Everyone assembles their own set of useful productivity tools and I’m feeling pretty good about how I’ve got things set up at the moment so I thought I’d share my secret sauce. I’m interested to hear what other people have found useful as well so feel free to share in the comments.

Chat Tools

Ok, this one is all over the map. Slack is obviously the big one and many of our clients use that with us. Most larger organizations incur a cost (smaller projects are free). Internally End Point uses Zulip, which is a pretty decent open source application. Zulip doesn’t have as refined a user interface as Slack, but it works for our needs, and also has a mobile app I can use on the go.

I also highly recommend Skype. While it’s not the best system out there, so many people use it, it is almost impossible to avoid. Skype is really easy way to get someone’s attention and I use it with a lot of my clients for quick one-on-one questions and chats. Google Hangouts chat is also really nice for working with external folks and will run in your menu tray and mobile phone, so you can stay up to date wherever you’re working. …

Winning with CSS Grid and Autoprefixer

By Greg Davidson
November 4, 2019

Photo by Stijn te Strake on Unsplash

Using CSS Grid Today

Support for CSS Grid is excellent (over 90% globally! 💯). I have been using it in a variety of client projects for the past few years with great success. The combination of CSS Grid and Flexbox has made layout on the web much simpler, more fun and less frustrating compared to the hacks techniques which were used for CSS layout in the past. Definitely give it a try if you haven’t already done so.

IE10 and IE11 support an earlier version of the CSS Grid spec and with help from Autoprefixer we can reap the benefits of CSS Grid in those old browsers with a little bit of extra work. I’ve long been a huge fan and happy user of Autoprefixer. It’s a PostCSS plugin that examines your CSS and augments it with vendor prefixes and alternative syntaxes. Although vendor prefixes (e.g. -webkit, -moz, -o, etc.) are much less common these days, there are a few still in use.

CSS Grid Basics

With CSS Grid the basic idea is to define the grid, i.e. the rows and columns that make it up, and then go about placing elements on the grid. Think of a website layout with a masthead, navigation, hero image, main content sidebar, and footer as an …

Rails Exception Notification and Logging

By Patrick Lewis
October 31, 2019

Photo by Randen Pederson, used under CC BY-SA 2.0, cropped from original.

Exception handling is an important component of any Rails application that is intended to be deployed in a production environment.

If you have ever felt your heart sink because you received a screenshot of your Rails application with this dreaded “something went wrong” message from a customer or client, you know what I’m talking about:

Though developers strive to deploy projects that are free of bugs and never throw an exception, the reality is that people using your Rails applications do sometimes encounter errors. When that happens it’s better to have your application automatically notify you of the event, rather than finding out about it for the first time when someone calls or emails you.

Exception Notification

The Exception Notification gem is a stalwart of the Ruby/​Rails ecosystem and the standard solution for configuring your Rails project to notify you when errors occur. I typically use the gem to deliver notifications to a development/​hosting team via email, but it has a variety of built-in notifiers that can output to just about any location you would want: Slack, IRC, Amazon SNS, etc., plus an …