Desk Talk - Front-End Development + Web Design: html5

Showing posts with label html5. Show all posts

Friday, March 14, 2014

Developer Toolkit - Essentials

I've made a post before about developer toolkits and stuff to add to them, but I haven't really mentioned the essentials. In today's post, I'm going to go over items that I use almost on a daily basis. Sometimes, I don't even realize I am using them because they are part of my boilerplate. Let's get started:

1. HTML5 Boilerplate

This is basically an HTML5 ready template to get started with your projects. It includes a lot of stuff that I'm going to go over, but I have just started using this boilerplate. Before, I had to download everything separately.

2. Normalize.css / Reset.css

These stylesheets reset CSS so that your document is pretty much clean from styling. It's a great way to start projects because you don't have to tackle with any predefined CSS styles. These stylesheets are also great for browser compatibility. For example, a line height might look different across several computers.

3. HTML5 Shiv

This makes older versions of IE understand HTML5 tags. Very useful, but it looks like the days of supporting XP are numbered.

4. jQuery

Download the full or minified versions and slap them on your <head> tag. This is the most popular Javascript library out there.

5. Modernizr

Another Javascript library. This one checks to see if your browser has certain features.

6. Adobe Kuler

This tool is more for a designer, but I have really grown to enjoy the application. It comes in both a desktop and mobile version. It basically helps you choose color palettes. You can also take pictures with your phone and it will auto detect the color palette of the picture.

That's about it for my toolkit. Again, these are my most-used tools. There are plenty of tools out there and I ocassionally I will use them, but these are a must-have.

Take care and stay tuned for more updates!

Thursday, March 6, 2014

CSS Code Snippets

People love to save time. It’s no surprise to find that developers enjoy saving time as well. Mentioned in a previous blog post, developers are very particular about which code editor they use. As we saw with Sublime Text 2, some editors have built in features that allow users to save time and code faster. In this week’s post, we will go over another way in which people save time while working on projects: CSS code snippets.

CSS can be very basic; it’s a markup language. In contrast to JavaScript, there is usually just one or two ways to make the document behave or look a certain way. As a result, you can easily build something and share it with somebody. CSS is very easy to tweak as well, so why not allow users to change up the code so that it suits their needs?

Some friendly and good-hearted developers have done just that.

Let’s say you want to quickly build a div that has a border radius. If you’re like me, you still have trouble remembering the exact syntax to do so and looking up the documentation for it can be time consuming. Instead of researching, try finding a tool for it. In the border radius example, you can adjust the settings of the CSS to suit your needs. We will go over a few websites that have these types of tools!

5 CSS Code Snippet Websites

CSS3Generator

The site provides 12 different tools including border radius, box shadow, multiple columns, transition, and transform. One of the features that I really enjoy is the browser compatibility feature. For each tool, the site will tell you which browsers the code is compatible with (including browser versions).

CCS Tricks

This site is a classic, fantastic resource. The author, Chris Coyier, is well known in the developer community for his work on the site and his work with Codepen. CSS Tricks provides a ton of snippets; some of which are more complex than CSS3Generator’s. For example, he provides snippets for useful LESS Mixins. He also provides snippets for other languages, so you can definitely spend a few hours here if you wanted to.

CSS Button Generator

HTML5’s button tag is nice and all, but it looks extremely plain. This fancy little tool allows you to dress up buttons. You can even create them with gradients and hover effects.

CSSFlow

This site provides some really nice looking results. If you’ve got time, there are 11 full pages of code snippets ranging from toggle switches, buttons, tables, bars, etc. A lot of it is really trendy looking as well. The site also provides some nice looking UI kits.

Thursday, February 27, 2014

Twitter: Who to Follow?

Twitter is inescapable. With 200 million active users, Twitter is one of the most successful start-up companies of all time. Twitter also just recently joined the NY Stock Exchange. With that many heads talking, Twitter can provide a great wealth of knowledge and resources for any subject. With that said, Twitter should be a part of every web developers toolkit and should be treated as a resource.

Informative websites and founding developers can both be found on Twitter, but for this week, we will target some important people to follow so that you can get up to date information straight from the people developing the future. In a sense, you’ll get to see history be written in the development community. Ok, let’s not get too geeky here.

Developer Twitter Accounts:

John Resig - @jeresig

John is the founder of jQuery, which is by far the most popular Javascript library. John currently lives in Brooklyn, NY and is working at the Khan Academy. Previously, he worked for Mozilla.

Eric A. Meyer - @meyerweb

Eric Meyer is best known for his writings on web standards and cascading style sheets (CSS). He is an active writer and has published several books. He is also extremely active on Twitter with over 23,000 tweets.

Jeffrey Way - @jeffrey_way

Jeffrey Way is an extremely active voice within the developing community. He frequently writes at Nettuts+, where he breaks down concepts into easy to digest tutorials. He is the founder of Laracasts.

Paul Irish - @paul_irish

Paul was previously on the jQuery team for a few years, but has switched to the Google Chrome Developer relations team. He created the HTML5 boilerplate and also created the familiar Modernizr tool.

That’s it for now, but keep it mind there are hundreds of developers actively tweeting! On top of developers, there are also website gathering resources on Twitter such as Nettuts+.

What is an API? A Brief Overview

If you’re new to the world of front end development, you might have heard the term “API”. API stands for “Application Programming Interface” and is something that we use all the time without knowing about it. APIs allow for the communication between two different applications. For example, a project can author an API that allows for other projects to pull features or data from their interface. The original project doesn’t have to share any of their code for the features or data.

Here’s a definition from Wikipedia:

“An Application Programming Interface (API) is a particular set of rules and specifications that a software program can follow to access and make use of the services and resources provided by another particular software program that implements that API. It serves as an interface between different software programs and facilitates their interaction, similar to the way the user interface facilitates interaction between humans and computers.”

Mentioned previously, APIs are everywhere. Let’s take a news article for example. At the bottom of the page, articles usually have a social media bar that has links to facebook, twitter, reddit, etc. so that you can share the article on your own social media page. All of these features are powered by APIs. Even the comment system, which is sometimes powered by facebook comments, uses the facebook API to pull your profile name, picture, location, etc.

The LATimes uses the facebook commenting system for their news articles

What can you do with them?

If you’re a blogger or journalist, having those sharable social media buttons would be a nice touch for your content. However, we’re not all journalists.

I think most people have a Twitter account nowadays. Twitter has built a widget that uses their API to create a timeline for one individual. You can then link this timeline on your webpages. I’ve used this for several projects and it is a great way to show off tweets without having to actually go to Twitter. Again, Twitter is using an API to share their features with another application without having to share their code for Twitter.

To access this widget, just go to your settings menu, then go to Widgets, and Create A New Widget.

I decided to create a timeline for my master’s program:

Tweets by @EloniMedia

This is just one example of what can API can do. I’ve also recently worked with Vimeo’s Player Embedding API to show all of my account’s videos on a web page without having to go to the actual Vimeo website.

For your next project, explore how you might possibly display something with an API rather than the normal way.

Friday, February 21, 2014

Resource Roundup - Keep Your Skills Up To Date With These Five Resources

Coding is similar to every other profession in that one needs to keep up to date with their knowledge and skill sets so that they don't fall behind. This is possibly true for coding more so than any other profession because the technology changes so rapidly. If you fall behind, you might fall out of your job.

Luckily, the coding community is an active bunch of bloggers, writers, and networkers.

In this week’s blog post, I’ll share some of my favorite resources that I have been following since my venture into front end development.

For Beginners:

CodeCademy

If you have never coded a single line of text in your life, then CodeCademy is a great stepping-stone towards front end development. It has detailed, interactive tutorials on multiple languages including HTML, CSS, PHP, JavaScript, jQuery, Python, and Ruby.

For Everybody:

Hey, designer!

Hey, designer! is a great resource for both developers and designers. A small portion of my blog is dedicated to web design, so why not share a resource that has both subjects underneath one website? Hey, designer! is basically a resource gathering board; all of the links lead to external sites. Posts range from educational blurbs about design to in depth JavaScript library tutorials. The best part of the site is the trending section, which shows which articles have been clicked on the most for the day, week, or month.

HTML5 / Javascript Weekly

If you’re looking for a once a week update that comes as one newsletter, these resources are great. Once a week, an email will be sent in a newsletter format with the latest news surrounding each subject. Each newsletter features a featured section, code and tools, watch, read, and a job openings section (ding ding!). I recommend signing up for both.

Here’s an example issue for HTML5:

http://html5weekly.com/issues/125

Codepen.io

Like art, checking out other people’s work is a part of being an artist. It keeps you on your toes, culturally up to date, and it might spark some inspiration. Codepen.io is a great resource if you want to see what other people are doing. Projects are hosted on Codepen with all of their code available for the world to see. Most creations are on the brink of falling apart, but these people are trying to push the boundaries of coding. However, when something works well and you want to use it on your site, you are able to by just copying and pasting the code. Everything is shared. After all, everything is stolen from somewhere nowadays. You just have to steal correctly.

THE Front End Development Resource

I saved the best for last. Yes, I meant to capitalize the; this resource is the resource to end all resources. I’m not sure who this person is, but they have combined every front end development resource out there into one, easy to navigate document. Everything is split up into categories, so it’s easy to digest. It might take you a year to go through it all, but it is definitely worth playing with. And look, it’s hosted on GitHub. This could be a project that a lot people have worked on.