Tag: tips

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?

My Intro to HTML5 Boilerplate @ IBM developerWorks + Another Wrinkle on Customizing

Posted on by Rob Larsen

I wrote an article about getting started with HTML5 Boilerplate. It’s live at IBM. Check it out:

Kick-start your web development with HTML5 Boilerplate.

I’ve got some more content coming up on IBM over the next few months on some pretty exciting topics. I’m in the middle of a deadline for one right now, actually…

That begs the question- when will I sleep?

Answer: never.

Continue reading “My Intro to HTML5 Boilerplate @ IBM developerWorks + Another Wrinkle on Customizing” →

Targeting Multiple HTML Files in the HTML5 Boilerplate Build Script

Posted on by Rob Larsen

This came up in a comment here, so I thought I’d bubble this little tip to the top.

To target multiple files for URL rewriting in the HTML5 Boilerplate build script (as of version 0.95) use the fileset element instead of the file argument in the “html” target:

  
<target name="html" depends="">

    <echo message="Clean up the html..."/>

    <!-- style.css replacement handled as a replacetoken above -->

    <replaceregexp match="&lt;!-- scripts concatenated [\d\w\s\W]*?!-- end concatenated and minified scripts--&gt;" 
    	replace="&lt;script src='${dir.js}/scripts-${build.number}.min.js\'&gt;&lt;/script&gt;" flags="m">
	  
        <!-- grab everything html -->

       <fileset dir="./${dir.publish}/" includes="**/*.html"/>

    </replaceregexp>

    <replaceregexp match="&lt;!-- yui profiler[\d\w\s\W]*?end profiling code --&gt;" replace=" " flags="m">

        <!-- grab everything html -->

        <fileset dir="./${dir.publish}/" includes="**/*.html"/>

    </replaceregexp>

    <!--[! use comments like this one to avoid having them get minified -->

</target>

You then need to expand the fileset element in the next three targets (htmlbuildkit, htmlclean, htmlcompress) to include subfolders.

Replace

<fileset dir="./${dir.publish}/" includes="*.html"/>

with

<fileset dir="./${dir.publish}/" includes="**/*.html"/>

And that should do it.

Using CSS zoom and CSS Transforms For a Better “Increase Text Size” Button

Posted on by Rob Larsen

So… the site I’m working on has one of those “increase text size” controls. On this project it’s turned out to be one of those features that shows up in comps and somehow falls through the cracks until later on in the project cycle. Situation normal, really, as it isn’t a big feature. It’s just one of those things that needs to be buttoned up before the site can go live.

Anyway, I was thinking about how to do implement it the other day. I haven’t done one of these in a long time and the only other time I did one it involved crafting separate, albeit small, style sheets for the larger text sizes. I didn’t want to go that way again. Basically, I just didn’t want to write new style sheets- even small ones.

What’s a fella to do?

zoom

So, thinking about it a little bit, I seized upon using the non-standard CSS zoom property. Supported in Internet Explorer (zoom:1 is often used for a hasLayout toggle) and Webkit browsers, it would represent a simple (1 line!) CSS solution to this problem. It’s also one that I like better aesthetically as the site looks the same, just bigger. I figure there’s a reason all browsers have moved to this behavior when hitting ctrl+.

The problem was figuring out an equivalent for FireFox and Opera which don’t support zoom

Enter CSS 2D Transform

A little searching and experimenting later I came up with the idea of using CSS Transforms and the scale value to approximate zoom in browsers that lack support.

Let’s see how I did it.

As you go through the following keep in mind this hasn’t actually gone through testing yet so something weird could yet shake out. I just wrote this code yesterday, so you guys can be my sanity check.

Also, is anyone else doing this?

Continue reading “Using CSS zoom and CSS Transforms For a Better “Increase Text Size” Button” →

Interviewing With Me? Here’s an Easter Egg. I’ll ask you this JavaScript Question During the Interview.

Posted on by Rob Larsen

We’re hiring in my group.

Cool, right?

So, I’m once again interviewing. Yay me.

Since I’m no longer running a group I don’t have to worry about any of the administrative type things (“this is what the company is about,” “this is what we do,” etc.) That’s good as it just allows me to test people on technology. That’s really my favorite part of the interview process anyway. Win.

The following is a tiny snippet I’ve been using to test people’s knowledge of JavaScript fundamentals.

Why share it here? For one thing it’s kind of interesting to me since it’s a very small snippet but it can expose a lot about the way the person approaches the language. Basically, if you can get this and you’re still pretty inexperienced you’ve probably read a book, taken a class or read a blog post or article written by someone smart. That’s a bonus.

And then there’s the Easter Egg part. Meaning, I’m still going to be using this going forward with the answer sitting right out here in the open. Why?

Here’s how I see it. If a candidate:
Continue reading “Interviewing With Me? Here’s an Easter Egg. I’ll ask you this JavaScript Question During the Interview.” →