Quick Tip: Grab a Website’s Favicon

This is a handy little trick to grab a favicon from a website. Often in client work, you’ll find yourself on a short deadline and maybe missing a few pieces of media.

I’ve ran into this a handful of times during a site rebuild or the creation of a microsite for a larger brand — you have all the pieces set and you realize you are missing the favicon. Your client-facing options are to email your point of contact, often times sparking a chain of internal emails to hit the original designer, who eventually gets the file back to you.

In the same way that some basic photoshop skills can you save the entire process days, this favicon grabbing trick can be pretty handy. Simply use this url pattern:

http://www.google.com/s2/favicons?domain=www.example.com

To be explicit, where I have www.example.com place the domain you are interested in retrieving the favicon from. You can drop the www. as well, assuming the domain allows it.

This process will take you to a standard image file url — like if you did a Google image search and clicked view image.

how to get a favicon from a webpage

Pretty handy, super easy — hope it helps!

~ تمام شده ~

Ruby Regex Using =~ to Parse Data

I recently had to parse through a large dataset, millions of lines. When you have to parse at this scale regex should be the word buzzing around in your head.

Regex, or regular expressions, are a tool used throughout programming languages, in Google Analytics, I would guess Microsoft Excel, etc. Regex allows you to declare general rules for how a string should or should not be.

How a String Should or Should Not Be

Let’s take an example here:

So here we have a string that has some (not entirely accurate) information about Saied Abbasi. The string includes 5 spaced ‘words’, or smaller strings within it. Let’s pretend the words correspond to these values:

SA0228 = Saied Abbasi’s initials and his birthday of February 28th
PIS = the zodiac sign Pisces
R1 = Ruby 1 year experience
JS1 = JavaScript 1 year experience
WP4 = WordPress 4 years experience

Imagine you have a millions records like this for different individuals and you want the initials of each individual and know how many years of Ruby experience they have.

You would need to write some logic to move through each complete string. Then you would need the internal ‘words’ in an array. So taking a single line with our string example and creating an array:

If we only care about an individual’s initials we could combine Ruby’s gsub method and some regex — a powerful combination!

So if our dataset is kind enough to always include initials followed by a four digit birthday and we only care about retrieving the initials we could use some code like this using our variable words representing an array of strings:

So here we take our array of words and remove the first word, ‘SA0228’. On the variable word we use gsub with an regular expression. We say if the string includes any characters with the exception of capital letters from A to Z, then replace those outliers with “” — a blank space, which removes them.

This leaves us with just SA which we set equal to a variable initials.

When I write regex I give it a quick test over at Rubular.

Now we want to move through the remaining words and find any that match the letter R followed by one or two digits for years of experience. We could make an explicit little method like this:

Here we do a loop using the each method. This will let us cycle through each word in the words array one at a time. Each time through we take an individual word and we check it against the regular expression R\d.

Breaking down =~
When we run the string “R1” and evaluate it against =~ /(R\d)/ the return value is 0. This corresponds to the first index where our regex expression finds a match. In this case the capital R at index 0. If we ran the expression AR1 =~ /R\d/, the return value would be 1 corresponding to the R at index 1.

For clarification, our regex is checking for a capital R followed by any 0-9 value (\d is a shorthand for any digit value). Within the syntax there is another aspect worth highlighting, when we use =~ we wrap our regex in / slashes — one at the beginning and one at the end. The parenthesis make sure the R value is immediately followed by a digit, while a string like RP1 would not return a integer as the regex would not match.

Another thing to highlight, if we ran JS1 =~ /(R\d)/ the return would be nil. In Ruby the only ‘falsy’ values are false and nil. 0 is a ‘truthy’ value. This is really handy because we can use our =~ regex statements in conditional clauses, like we do above. Pretty cool! For lots of information on true and false values in Ruby and other programming languages check this out.

I use word[0] = ‘0’ as a benchmark tested way of quickly replacing the value at index 0 with ‘0’. This then allows me to easily run .to_i to turn our string of numbers into an integer.

From here we have the initials and the years experience in Ruby. You can imagine when tackling a huge dataset how regex and the =~ evaluator can be extremely powerful.

~ تمام شده ~

Contributing to Open Source

As a quick precursor, every day I have the privilege of using open source software and you do too. Open source refers to an app, software, platform, codebase that shares their source code with the public allowing developers to study and contribute to that code base. Most mainstream coding languages are open source and WordPress itself is an open source project. It is an amazing convention that enables the rate at which web development evolves.

This past weekend I attended a Hacker Hours Meetup event here in NYC.  A group of 20 to 30 developers were presented 5 potential open source projects to make a contribution to. One of the projects was Exercism.io which is an application that provides coding challenges in over 30 programming languages. The tool was actually introduced to me earlier this year and I knew from personal experience that it was pretty great.

Under those circumstances I figured contributing to an application I have used would be a nice way to reciprocate. This was my first open source contribution, other than some minor merges to the Flatiron School’s online learning platform, so I was not expecting to do anything to impactful. As I glanced through the Github repository I saw some reported issues and the documentation around making a contribution.

I was overwhelmed. I spent 20 minutes looking into issues to realize the issue had already been resolved or perhaps was too convoluted for me to tackle. Eventually I saw a report of a broken link — easy enough.

I used a broken link checker tool to see if there were more broken links or if the links resided in a template that was being used for several pages. By the end of it I had made a few pull requests and was happy with my day.

A few days later, a friend I made at the Meetup sent me a screenshot from a blog post by Katrina Owen, who wrote Exercism.io were she thanked me for fixing a bunch of broken links! Having the author of application publicly thank you for your first open source contribution is pretty cool. The full post is here.

Screenshot 2016-05-03 18.09.56

~ تمام شده ~

Week 1 of JavaScript, jQuery, and AJAX | Genin

This last week or so at Flatiron we have been learning JavaScript and jQuery. And within the last 24 hours AJAX. Though all three of these topics are vast and in many respects fun I found myself at a loss as to what to blog about.

In an effort to find a topic I came across a variety of things that were either too broad, too complicated, or too simple to do a proper post on. However, I have collected enough mini-topics to throw together a grab bag of fun things to consider about JavaScript, jQuery, and AJAX.

1. Pre-Packaged Plugin One: Parallax

Parallax is an effect that became very popular on the web in the early 2010’s. It is typically used as a banner image that stretches the width of a website. You can see demos here:
http://stephband.info/jparallax/demos/target.html
Conceptually what is happening is an images with transparency are placed on top of one another. Each image has an absolute position (think the board game Battle Ship). The position begins to move in response to the users mouse. If an image is larger it will move at a different rate than a smaller image. This variance creates the illusion of depth amongst the different images.

With some knowledge of JavaScript and jQuery you can grab the code to do this and play with it to your needs:
https://github.com/stephband/jparallax

2. AJAX with a time interval

Ever felt really frustrated that you have to click each time you want your AJAX requested .gif to refresh on the page. Well with this bit of code, that could definitely be used for a better purpose, you can trigger your AJAX at a time interval.

Theorizing a better implementation. We are doing a quick AJAX project that taps into the Spotify API. It embeds a single song and begins to play the track. We highlight this particular track and do not want to display an entire playlist. However, it would be great if the user did not have to select a new track each time a song is over.

One possible solution would be to make the request interval equal to a variable that corresponds to the song length.

3. AJAX with bookmarks and the back button

Put simply, they do not inherently get along. The back button may take into account each AJAX request and force a user to cycle through several clicks before arriving at their desired content.
A bookmark of a page with information generated with AJAX will take a user to the static page before the AJAX request.
The solution:
http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps

4. AJAX calls are visible in Developer Tools

From stackoverflow:
-From within the developer tools click on the Network button. If it isn’t already, enable it for the session.
-Click the “XHR” sub-button.
-Initiate an AJAX call.
-You will see items begin to show up in the left column under “Resources”.
-Click the resource and there are 2 tabs showing the headers and return content.

5. JavaScript Plugin Two: fullPage.js

fullPage.js is a well put together example of yet another design trend, full screen sections. These sections are great for a desktop experience. They allow the designer to more dynamically control what a user is viewing at one time. Content is divided up into vertical slides, each slides fills the entirety of the viewport at a time.
http://alvarotrigo.com/fullPage/

6. jQuery Hide & Show Timed Transitions

jQuery allows you to hide and show elements on the page. Hide and show take arguments of keywords that equate to predefined speeds. For example see this code:

Hide and show also take a specific time in milliseconds. For example:

So this hide process will take 2 seconds.

You can also create your own keyword variables with a specific time. I could foresee this being handy on a specific project were you wanted consistent timings but the defaults were too fast or too slow.

BONUS

Quick Tips on Succulent Care:

1. Let them dry out completely, your plant will not die from lack of water. Or at least it will take much longer than you think.
2. If a plant is completely dry, arid, for days. You can water it completely without worry.
3. Gentle pour with water that is room temperature.
4. Succulents thrive in soil that drains.
5. A transplanted plant is a sensitive plant — let it adjust to its new environment without your care.

~ تمام شده ~