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!

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.

8 Minutes to CSS Genius | Box Shadow Ninjutsu

In just 10 minutes you too can be a CSS genius. Do you like style? Do you like color? Don’t hesitate say yes aloud, now! This is the CSS tutorial for you, right here on this page are all the answers.

*I do not actually cover box shadow.

Okay!

So in this quick tutorial I am going to briefly touch on div’s in HTML, basic CSS, tools for implementing CSS, and bootstrap. Bootstrap is a stylesheet with a ton of pre-built styles that you can link to elements in your HTML. People freak out about it. It is powerful and approachable. However, I typically utilize Bootstrap for its columns. More on this later.

First you should have a basic understanding of HTML and CSS syntax. I am only briefly going to look at each. First HTML’s syntax looks like this:

In short this will produce an unordered list with list items inside of it.

CSS’s syntax looks like this:

The selector is the tag or element from HTML you want to style. A selector can also be a class or id that you create in HTML. The property is the type of styling you want to do. The value is actual styling, in this case all header 1’s (h1) will have a red font color.

Okay! A page of HTML looks like this:

WOW! This guy is a great coder. Yes.

Sai-tip: Copy that code into a text editor like Sublime and save it with .html after the file name. The text editor will markup the file highlighting the different aspects: HTML tags, tag attributes, content etc.

The important element to note here are the div tags. When you are first introduced to div tags I think it helps to consider them as labels for your code. Each div tag opens and then closes. Everything in between the opening and closing tag contained within that div and therefore inherits stylings from the div.

So in the code example we have a div tag that we are thinking of as a label for our container. Our container holds everything within the body tag. The body tag holds everything you see rendered on the page.

We also have div tags for navigation, content, sidebar, and footer. Each of these sections of code correspond to what you imagine on the front-end.

CSS uses these labels as a map to navigate what is called the DOM. If you want to use CSS to make the navigation div have a blue background then you can use CSS to target that section and style it. So our HTML above with the navigation div could be selected and styled in CSS like this to produce a blue background:

WOW! This guy cannot be stopped.

Okay, so here is the point in the tutorial where I sit you down and give you a solid heart to heart. The amount to which you believe me will directly correlate to how smart you are.

Learning how CSS works will take a little practice. Having a solid conceptualization of what is happening and what tools are out there will make it dramatically easier.

Okay, I am really happy we had that talk. I am standing again and therefore back to teaching.

So the next thing you need to do is have a flashback. You have worked in Microsoft Word, sent an email, played with InDesign, or any other software that had a text-editor. Any of the ways you were able to manipulate text in those programs you can do with CSS.

For example, you can make text larger, bold, add spacing between words, lines, letters.

If you want to play around with editing text and colors, here is my recommendation. I am assuming you are using Google Chrome and an Apple computer: press command+option+i. That will open this up:

Screenshot 2016-03-17 19.24.27

See my cursor about 50% of the way down the screen over on the left side. It is hovering over a button that will allow you to click on anything on the page to see the related HTML and CSS. In the bottom right corner is a bunch of CSS. You can select a HTML element, then edit the CSS live. You can read through the current CSS and get a sense of how things are working. You can uncheck each CSS property to see what it looks like without it!

This could easily be overwhelming, but getting in the habit of using the Chrome’s developer tools to play with CSS will help you immensely. Essentially you are providing yourself an instant feedback loop on your customizations.

Now it is time to up our game. The game upping process involves Bootstrap. You may be tempted to hold onto Bootstrap and that is okay, but yet again I think it is great to use for columns especially when just starting out.

So CSS allows you to more elaborately position HTML elements on the screen. But positioning in CSS is a little tricky. In comes Bootstrap columns. Nothing else, not tabs, not a bunch of extras that are going to convolute your learning experience. Columns!

So here is the grid model (aka columns!):

lg_grid

The screen is divided into twelve evenly sized columns. You can combine columns however you would like. A row all the way across will consist of twelve columns. As an example I can take 2 columns together + 4 columns together + 6 columns together to make a complete row across the screen.

Within the first two columns I could have my logo. In the next 4 I could have empty space. In the last 6 I could have a navigation. These columns have predefined styles in Bootstrap’s CSS. You simply name your div labels (class & ids) to match Bootstrap’s labels and positioning has become dramatically easier.

Here is the HTML from before with some Bootstrap labels linked up.

I want to introduce one last concept about every HTML element and how CSS can manipulate it. It is called the box model:

boxmodel

Content represents the text, link or whatever it is you have inside your HTML element. Each layer moving out can be manipulated to have color and size. You will see this same representation in Chrome’s inspector (command+option+i) if you switch from the “style” tab in the bottom right corner to the “computed” tab. That is it! Go forth and conquer!

BONUS:
CSS Cheatsheet, go forth and cheat!!! But honestly, cheat a lot in code because the resources are endless:

Cool color thing:
http://www.colllor.com
http://infographic.arte.tv/cinema/polar/fr/femme-fatale#/presentation

Obligatory gif:

WordPress’ Event-Driven Architecture vs MVC

So I was thinking recently I wonder which parts of Ruby I have been learning could apply to WordPress. More specifically we just started working with Rails which is a framework for Ruby, the two together giving us Ruby on Rails.

Ruby is our programming language. Rails is a framework that is neither a forward-facing web application nor a programming language. Rails is a library of ruby that allows us to expedite the application building process.

Ruby on Rails employs Model View Controller (MVC) which is a standard for dividing your code base on its function. The Model is the logic. The View is what you see when visiting a webpage. The Controller is an between that requests logic when needed and sends the appropriate view.

WordPress on the other hand is employing an event-driven architecture. Which can be visualized like this:

2013-08-22-10.39.31-1024x768

WordPress’s Event-Driven Architecture uses hooks to make changes at specified event triggers.

For instance when a webpage is called it will hit the head tag. In WordPress you could write an Action hook to say send in this meta description when the head tag is called. A meta description being that little snippet you see below a search result in google. WordPress also offers a secondary type of hook called a filter that is commonly used for manipulating data.

WordPress has similar pieces to Rails but a common theme my research to compare the two of them was the sentiment: not to get too hung up on the comparison because the two do not really translate to one another.

WordPress uses MySQL as its database. The WordPress dashboard — which is WordPress — functions as the Application Layer. And templates are used to render views. There is a lot of commingling of functionality here that would drive a MVC programmer a little mad.

I found this quote by Tom McFarlin that I found helpful in beginning to sort out the differences:

“Simply put, frameworks are not applications, foundations are applications.

Just because a web application can be built using WordPress does not make it a framework. It’s a foundation. It’s an application unto itself that can be extended into further applications.”

For the time being that is pretty much all I wanted to get down on paper (blog paper). A short and early exercise into comparing something familiar to me (WordPress) with the approach to web applications that I am learning (Ruby on Rails).

I leave you with a funny little middle ground I stumbled upon. There is a plugin out there that allows for a MVC framework within WordPress. As I looked through how to setup the plugin, the PHP used to install the basic framework is extremely similar to Ruby. Take a look: