Tag: tools

Windows Apps for Web and Front End Developers

Posted on by Rob Larsen

Spurred on by this post by Rey Bango, I thought I’d share some of the tools I’m using myself when working on Windows. Rey’s post is great, but since Window-based developers are under-served by the community (even though there are a lot of us) I figured it couldn’t hurt to add my own options. These are almost all in addition to the tools Rey mentions as I use a lot of the same tools in his post.

Visual Studio 2012

As I mentioned, I’m going to try to avoid a lot of repetition of Rey’s options in this post (which is why you won’t see Sublime Text mentioned, even though it’s #3 in my code editor triumvirate.) Still, I feel like I have to add in my two cents on VS2012. One of the weird things about the web developer community is that, as a whole, we recognize that the tools we have aren’t as good as they should be. Some of this stuff is hard to do right or do efficiently and doing both is often the domain of the real experts. Then, in the very next breath, some folks will pile onto Microsoft and Adobe with as much vitriol as they can manage. The thing is, and this is something you pick up pretty quickly when you start to work with XAML, Silverlight and Flex refugees on the open web stack, Adobe and Microsoft created pretty sweet tools and APIs. People could get their jobs done. No, they weren’t perfect but their developers felt empowered. It’s surprising that they stick around at all, after they see what our ragtag band has to offer.

VS2012 is one of those tools. Yes, it costs money. Yes, it only runs on Windows. Yes, it’s a multi-GB install. No, it has no street cred. All that said, even out of the box it’s a powerful editor for web tech and, if you take the time to configure it properly it’s ridiculous.

I’ve been using this more and more recently.

Adobe Dreamweaver

This isn’t necessarily a Windows-only thing, of course. But still, it’s worth pointing out as Dreamweaver gets a bad rap.

Yes, it’s a WYSIWYG editor that people have made awful things with for 15 years and people disparage “Dreamweaver developers” as people who don’t know how to hand-code anything.

The thing is, while it can be those things, it’s also pretty great. From the beginning (FWIW, the first version I used, 1.2, came out in 1998), Dreamweaver has embraced and understood JavaScript in ways that other editors only started to recently. Dreamweaver extensions are written in JS so JavaScript isn’t some add-on, it’s core to the product. It’s also the heir of HomeSite, the great web-centric text editor that was my bread and butter for nearly the entire 2000s.

While it’s still got WYSIWYG features aplenty, it’s a fine, configurable editor with great code hinting, excellent site management tools and plenty of opportunities for automation. Mixed with Adobe Fireworks, you can smoothly move between graphics files and your web editor for even more webtastic power. My go-to editor at home where I’m running CS6.

I love being able to open an HTML document and having the full context of the attached files available when I’m editing. You always remain in the context of the HTML page, even when you’re switching back and forth between the attached JavaScript and CSS files.

TextPad

My utility text editor. If I need to open and manipulate a big text file on Windows I do it with TextPad.

MarkdownPad

A great editor for Markdown files. Buy the $15 license and get support for Github flavored markdown right on your Windows desktop.

Paint.net

I run CS6 at home. Having a big monitor, mouse, scanner, etc. make for a better experience with my CS6 Creative Cloud subscription. That said, I have a Lenovo Yoga that I spend a lot of time on and having Paint.net on it for basic image manipulation. It’s a great image editing app. It’s not a Photoshop replacement but for an image editing utility it can’t be beat.

Minimalist GNU for Windows/Minimal SYStem

If you’ve installed Git for Windows, you’ll know these projects as “Git Bash.” While I’m a fan of Powershell and pin it to my taskbar, I’m glad to have this scaled down Bash prompt available to me as well. It’s surprisingly robust.

WinSCP

I’ve just started using this tool as a replacement for FileZilla and like it. The difference maker for me is that the local window is just an Explorer window, which means that all the customization I have on the Explorer context menu are available right in the WinSCP interface. When you’re trying to put out a fire, it’s a big deal to be able to fall back on consistent patterns (right click> open in Sublime Text, for example)

WinMerge

I don’t get bent out of shape with conflicts because I’ve got WinMerge. It’s just good software.

Mongoose

While I’m as happy to spin up a node server to test locally as the next guy, double clicking a file to start up a quick web server is super convenient. No command line needed. Drop mongoose.exe in a folder, double click and you’re good to go. Pretty sweet little app.

7 Zip

The Swiss Army knife for compressed files.

Java, Ruby, Perl, Python, and Node installed and on my path

Many doors open up if you’ve got common programming languages installed and on your path. I’ve obviously made good use of Java over the years, but I commonly use Node, Python, and even Ruby tools.

S3Fox

While much of the work I do with Amazon S3 and Cloudfront is automated, occasionally you need to get up there and poke around. S3Fox adds an FTP style interface for AWS right into a Firefox tab.

Those are my additions to the Windows web dev canon. What else is out there? What are we missing?

H5BP Ant Build Script v1.0 Released

Posted on by Rob Larsen

After a year of living as its own repo, contributions from a bunch of people and a flurry of activity from yours truly over the past month*, I just released the 1.0 version of the H5BP Ant Build Script.

Download a zip or browse the code on github.

Moving to semantic versioning was a good idea by itself and it also served as a perfect opportunity to celebrate the features we’ve been able to add over the past year.

Check out these highlights from the changelog:

– Added support for SASS (*.scss) files (#71)
– Added optional jsdoc3 task (#70)
– Added option to compile LESS CSS (#56)
– Concatenate scripts in order they appear in the HTML (#6)
– Added requireJS support (#18)
– Added sample QUnit Task (#133)
– Added ability to opimize images in multiple directories
– Added advpng optimization (#84)
– Added optional image revving (#135, #3)
– Rewrite relative CSS asset urls when inlining @import calls (#2)
– Added HTML Validation (#27)
– Added new, configurable tokens for concatenation (#95)
– Added async and defer as separate options on the script. (#128)
– Added optional progressive jpeg conversion

I also touched up the documentation and generally made it feel more like a project.

Here’s the big contributor party. This is everyone who’s touched this project from the beginning (including its life as part of the core HTML5 Boilerplate project.)

All these people are awesome:

[master]> git shortlog -s -n
   115  Rob Larsen
    84  Paul Irish
    31  Divya Manian
    14  paulirish
    13  Shi Chuan
    11  darktable
    10  Matthew Donoughe
    10  Samus_
     8  Joe Morgan
     6  Andreas Marschke
     6  calvin
     5  Chris Rowe
     5  Ziggy
     4  Audioname
     4  Daniel Holth
     4  Guillaume Moulin
     3  Kim Blomqvist
     3  bholt
     3  drublic
     2  Andrew Le
     2  Beau Simensen
     2  Calvin Rien
     2  Dan Lopretto
     2  Daniel Filho
     2  John Bacon
     2  Kushal Pisavadia
     2  Maurice W
     2  Ramiro Rikkert
     2  See Guo Lin
     2  Steve Lindstrom
     2  Tarcio Saraiva
     2  alvincrespo
     2  gbakernet
     1  AD7six
     1  Aaron Kavlie
     1  Adrien Kohlbecker
     1  Alex Whitman
     1  Brandon Holtsclaw
     1  Bruno De Barros
     1  Chris Hager
     1  Chris Morrell
     1  Corey Ward
     1  Daniel Reiser
     1  Dave Kirk
     1  Dmitry Gladkov
     1  Egor Kotlyarov
     1  Greg Zoller
     1  Gregory Pakosz
     1  Hans
     1  Jeremey Hustman
     1  John Attebury
     1  Josh Farneman
     1  Kyle Robinson Young
     1  Martin Balfanz
     1  Nic Pottier
     1  Nicholas Camp
     1  Nicolas Gallagher
     1  Robert Doucette
     1  Rutger de Knijf
     1  Taylor Ralston
     1  Tharique Azeez
     1  Thomas Kahn
     1  crappish
     1  d8uv
     1  dplesca
     1  elexx
     1  localpcguy
     1  mikemorris
     1  mikkotikkanen
     1  owilliams
     1  philipvonbargen
     1  rdeknijf
     1  rwldrn
     1  toddhgardner
(END)

*yes, I have a funny way of celebrating having a life again.

HTML5Boilerplate 0.95 Released. Please Break the Build Script.

Posted on by Rob Larsen

The latest version of HTML5 Boilerplate was released and the build script I worked on is included as a beta feature. I’m happy to see it in the wild even though it reminds me that I’ve got a couple of outstanding enhancements I want to take care of at some point (soon? *fingers crossed*)

Anyway, check it out and definitely take the build script for a spin. Know Ant and want to help out? Want to port it to another build system (that would be awesome)? Dive in. We’re happy for the help.

An Ant Task to Comment Out console.log Calls from JavaScript Files

Posted on by Rob Larsen

As someone who started out doing JavaScript in the 1990s, I’ve been through the dark ages of debugging. Alerts, logging application data into DOM elements, etc. After having been through all that doom, I’m clearly a fan of console.log. I use it all the time. I bet you do too. It’s super useful.

The one downside? Leaving calls to console.log into code that’s being tested (as in, QA) or is destined for production (as in, emergency bug fix.) With Firebug or a similar tool running, you’re fine. Without it?

"console" is not defined.

I’ve seen this more times recently than I care to admit.
Continue reading “An Ant Task to Comment Out console.log Calls from JavaScript Files” →

How To Make a Web Site the Modern Way. Part 0: Introduction

Posted on by Rob Larsen

Well, I leaked it earlier this week, so I might as well get started.

Welcome to How to Make a Web Site the Modern Way, a blog series outlining, to the best of my ability. how to build an HTML page using today’s best practices. The focus won’t be on specific coding techniques, although there will be some of that, it will be on how the pieces fit together. Without experience, it’s tough to know how the pieces of a web page fit together in the best way. I’ve got some of that experience and I’d like to share it with people. So at the end of all of this, I’m hoping this series will serve as a one stop shop for people looking to understand the big picture.

First up: The Anatomy of an HTML Page .

Some basic principles:

  • Fast: I want pages to be as fast as possible by default.
  • Findable: This isn’t really the same as SEO, but it’s kind of like a cousin to it. I want to make pages spiderable, human scannable, computer readable and generally information rich.
  • Standards compliant: I’m not a standards zealot, but I try my best to follow web standards wherever possible.
  • Accessible: I try to make pages as accessible as possible.
  • Usable: Usability is a deep topic, but there are things you can do, by default that will enhance the usability of your site.
  • Intuitive: I want developers to look at the stuff I do and say “hey, that makes sense.” I also want it to make sense to me when I return to it in six months 🙂
  • Breakable: Which is a funny way of saying “graceful degradation,” a concept that colors a lot of what I try to do. The idea being- if something’s going to break, or not work as expected, make sure that it’s not totally screwed up

The Rest of the Series