Watkins Web 2: Blog

Posts tagged with “resources”

Learn Javascript at Code Academy

This looks pretty great. Try doing the Javascript exercises right in your browser:

http://www.codecademy.com

jQuery Fundamentals

jQuery Fundamentals

Those of you interested in learning jQuery in more of a ground-up way (rather than cut, paste, and guess) should check out jQuery Fundamentals, an impressive one-page tutorial.

Chocolat Text Editor

If you’re feeling bored with Textwrangler and want to try a new text editor, take a look at Chocolat. It’s got the usual features plus another few: Dreamweaver-like code hinting, tabs, and a project drawer that just shows the files available in the current directory.

It’s free for now only because it’s still being developed (and might crash on you), so you’ll eventually have to pay for it. Still, worth a look.

Chocolat Screenshot

New HTML5 details tag

Found out about a new HTML5 tag called details that seems pretty interesting. Before it would take javascript to achieve this effect. I think it's also possible with CSS. It basically add an arrow that hides content and when the arrow is clicked it shows the content. Click it again and it hides the content.

Here's the link to the article

*So I tried an example in this post, which I've since changed. The result was interesting. It worked (don't think this site uses the html5 doctype) but it didn't work correctly. It scooped up the previous post and put that in the hidden content. Very strange

Post-Flash HTML5 video

I found an interesting article about dropping the development of mobile Flash and the problems with standards based HTML5 video that I thought was pretty interesting.

Read the article here.

A List Apart Web Survey Results

Here are some interesting results you may want to look at. It looks like out of 16,000+ people there are more people 19-44 working as web developers/designers. From the previous years data the 19-29 year olds dropped and the 30-44 year olds went up.

2010 Web Survey

You can take the 2011 survey. Can't wait to see the results.

InstaCSS

InstaCSS

You all should check out InstaCSS, a sort of quick-reference website for CSS properties. For each property you search for, you’re given a plain-English description, some technical definitions, and then some examples towards the bottom. This could be a useful site to have open as you work on your projects!

More Mobile Development

Just ran across this site today and had a lot of information I haven't seen before on Mobile Web Design. It's definitely worth a quick read over. With some nice little iOS and Android specific stuff. Also, it has a little about telling the device what resolution the site is based on. Something I've been having a problem with when trying to target smart phones and tablets.

HTML5 Rocks: Mobifying

Link Images: It's just another detail

Thought this was interesting. I was trying to message a friend on facebook with a link to my project. I thought it was strange when it grabbed a random image from my site to post with the link, title and description. I thought I would investigate it and found out what code to use so that you can control which image is displayed in this case and in others like it. Just a little detail.

<link rel="image_src" href="http://site.com/image.jpg" />

This is a meta data tag and should go inbetween the <head> of your document.

Mobile First

I thought some of you might be interested in reading a little about designing mobile web apps. This is an excerpt from Luke Wroblewski's book. It's pretty interesting if I do say so. There are a lot of great observational tips to keep in mind when thinking about designing for mobile.

click here or don't. It's up to you.

Sad days for HTML5?

Bruce Lawson reports on the loss of HTML5's <time> tag and the pubdate boolean attribute.

I guess my first project using new tags is already outdated. That was fast.

Here's the link to the article

It’s with great sadness that I inform you that the HTML5 <time> element has been dropped, and replaced by a more generic – and thus less useful – <data> element. The pubdate attribute has been dropped completely, so there is now no simple way to indicate the publication date of a work.

To me the data tag seems a little too broad. I was just beginning to like the time tag. The Opera browser has already implemented use of the time tag. What's it all mean?

Also, neat little trick I just learned. If you accidentally close a tab in Chrome you can recover the tab and the entire session of the tab with the quick little kehyboard shortcut shift-ctrl-T

You can view the bug and comments here.

HTML5 for Web Designers

HTML5 for Web Designers book cover
Wow, you can now read the entirety of Jeremy Keith’s HTML5 for Web Designers for free online.

I recommend the last chapter, Using HTML5 today, in particular. It’s also worth taking a look at the way Keith has marked up the pages themselves. View source!

Responsive Media

Here are two resources I’ve found useful in making responsive designs recently

  • Flexslider is a jQuery plugin that turns an unordered list of images into a “carousel” or simple cross-fading slideshow. It’s very similar to the Cycle plugin, except that it manages responsive images much better: just leave the height and width attributes off your <img /> tags, set them to max-width:100% in your CSS, and they’ll work as they should.
  • Elastic Videos shows you how to embed Youtube videos so that they, too, can resize with the browser.

this might be elementary... but i had to share

CSS Cheat Sheet

jquery

Here is a JQuery How To site with some basic JQuery stuff on it. Like commenting out a line.

Demo: htaccess, server paths, relative vs. absolute

Please download the files to your desktop.

Update: Here are some more resources on using .htaccess to reconfigure server behavior:

FTP

Here’s a quick overview of FTP. Dreamweaver has FTP built in:see the Files palette. For freestanding FTP clients on the Mac, I recommend Panic’s Transmit ($34). The best free option appears to be Cyberduck, though its interface is a little clunky.

In general with FTP you have to fill out a bunch of fields correctly to connect to the server successfully. Almost all are case-sensitive, and it’s common to just make everything lower case for simplicity.

Lets review the settings assuming your name is Joe Schmoe:

Name: My Watkins web space
This is just a nickname for your own reference. Be descriptive.

Protocol: FTP
Stands for File Transfer Protocol. The most common alternative is sFTP: it’s much more secure and you should use it when you can. But our provider (Dreamhost) uses FTP.

Server: ftp.watkinswebdev.com

Username: wat_jschmoe

Password: [you got this in class]

Port: 21
Rule of thumb: FTP requires Port 21. sFTP requires Port 22. For what it’s worth, all internet traffic is sent through a port: the world wide web itself usually uses Port 80. See the Wikipedia article on port numbers for more.

Remote Path: watkinswebdev.com/jschmoe
This simply tells the FTP client to jump directly to a particular sub-folder on your server as soon as it connects (so as to save you clicking). On watkinswebdev.com we need to jump two levels down until we get to the folder that contains your “root” folder. If you sign up for hosting yourself, you might well need to use a Remote Path that looks like jschmoe/web/public/. The point is that the particular folder structure on the server usually looks a little different from the web URL structure. But once you figure out what the “root” folder is, it makes sense: Putting a file called page.html in watkinswebdev.com/jschmoe means it will be available at http://www.watkinswebdev.com/jschmoe/page.html.

Update: for your reference, here’s about what your FTP settings should look like you’re using Cyberduck:

FTP Settings

Writing HTML with Textile

(To see the formatting syntax that created this post, view the Textpattern article that created it).

Textile is basically a shorthand for writing HTML with less code. It also does some automatic typographic conversion: straight ASCII quotation marks become “smart quotes,” double dashes become em dashes — like this — etc. There’s a more comprehensive list on the Threshold State site. Update there’s also a really great Textile Reference Manual on the same site.

This is strong text and this is emphasized text. All-caps strings of text longer than 3 letters — like NASCAR — get converted to <span class="caps">NASCAR</span>. This provides us with a global hook so that we can reduce their size and add letter-spacing, creating nice-looking small-caps with a single CSS rule.

This is is a top-level heading (an h1)

This is Subheading (an h2)

  • This is an unordered list
  • Another item
  • And another item
  1. This is an ordered list
  2. Another item
  3. And another item

This is an image:

This image is 800 px wide

And here’s a blockquote:

We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness. That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed, — That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to them shall seem most likely to effect their Safety and Happiness.

You can use the code tag for code samples: <div id="awesome">. And here’s a whole block of code:

p {
color:red;
}

Google reverse image search

Not sure if anyone has played around with it, but the google reverse image search is pretty cool. It's probably more helpful for design research, but there's one feature I'm really enjoying. The show visually similar images feature. You can just drag any photo from your computer or the internet and drop it on the Google Images search bar. It will pick images with a similar color palette and forms. Pretty cool!

google_image_search_1

google_image_search_2