Category Archives: Back in the olden days…

Things were probably different when we were younger, but it doesn’t mean it was better. Or does it?

And now…back to it has to work in all browsers

As we struggled with trying to make advanced designs work in Internet Explorer (6 & 7), I think those of us developing for the web (at least at my job) finally convinced the designers to embrace progressive enhancement. It was a beautiful thing.

Now that we have lots of cool things getting adopted by more and more browsers, you would think, “this is awesome, progressive enhancement for the win!” But instead of designing that way, with fallbacks, we have reverted to the “make it work the same everywhere” mindset and are designing advanced UI with no fallbacks. So, once again, we are requiring javascript to create UI. (I’m not talking about our Javascript technologies like React, I’m talking about needing to code things that can be done in CSS in some browsers but not all.)

Wrong, wrong, wrong.

No, no, no.

I think web designers have a responsibility here that many are failing. They see a design on a site in their modern browser (or that someone used javascript to create) so figure it can be done and they will design something similar. Number one, they should know how the web works and what it takes to code that UI, or number two, if they don’t, they should listen to the people coding up their designs and work with them on graceful degradation or come up with another design that will work the same way everywhere. No javascript required.

Period. End of story. Let’s keep the web fast and make our sites only get better as more browsers implement the good stuff.

PS I haven’t used them much, but I have also decided today that I am going to start recommending using polyfills that can eventually be dumped. (If we are going to be using javascript, anyway.) When I can’t win the progressive enhancement argument. Like, um, most of the time.

New-fangled Front-End Development

There once was someone I worked with – who knows, he may read this – who said software engineers are ruining the web. I think the comment was motivated because he was showing me a page that was rendered with javascript and I asked him how it loaded, performance-wise.

There are some pretty smart people writing some pretty smart plugins for some pretty cool interaction patterns and also for helping to hide the complexities of cross-browser javascript. For me, in my prototyping role, I like that. I like that a LOT.

Kid: "Daddy, can you help me with my homework? I have to make a web page about ladybugs." Dad: " Of course, sweetie."But here’s what I don’t like. Where I once was able to download a set of files and plop them in a directory, whole install / build processes have been created to do essentially the same thing. And I’m not sure why. To me, that’s like handing control of your project over to someone else who has decided for you how you should set it up. And when developer of x plugin installs dependencies that conflict with developer of y’s plugin and with your version of Gulp, then you are screwed. Now you need to spend time untangling the mess. And if you’re like me, and you aren’t into writing your own build tasks, you are pretty much in a pot of hot water.

Here is an example. I just want that minimized js file. That’s all. Only it comes with all this other stuff…

file structure

Here’s the workflow I prefer.

1. Buy Codekit. The developer has done some pretty terrific work here and answers support questions and keeps things updated. Your browser auto-refreshes with each change you make. You can make use of autoprefixer, minimizers, syntax checkers. It really is a great piece of software. (There is also Prepos, which runs on Windows. I used to use that before another developer pointed me to Codekit.) Also, as someone who has used a gulp/watch task that a developer set up for a project, Codekit is much more robust. It doesn’t exit if you run into a syntax issue – and it is way easier to read the error log. Save the files in the wrong order when using Gulp and BAM! The process comes to a screeching halt and you have to restart your server/build tasks.

2. Download javascript files for the plugin you want to use, and link them into your files via a script (and sometimes a css) tag. It’s really not that hard. Sometimes these javascript files are hosted on CDNs (content delivery networks) but I’ve had stuff stop working on me, so I prefer to download my own versions and make sure things don’t start breaking as time goes by.

And number 3 is for the plugin developers.

3. KEEP IT SIMPLE! Don’t create stuff on top of other dependencies. Don’t require a certain compiler. Make your stuff work with Codekit and maaaaaaannnnnnnyyyyyy more people will be using your plugin. People like me, who prototype, who live in the design world more than the developer world. Make it easy for us. Please! Don’t complicate the web! You aren’t making it better with your complicated processes. You are only making it better for a small subset of people. Other front-end devs like you. And there are a lot of people that can benefit from your brain and your creations if you’ll KEEP IT SIMPLE!

Thanks for listening.

10 Hours Later...Dad: "Alright! We are almost there! I got Node running on Heroku with a MongoDB that's going to house your content. Now, I pushed everything to GitHub. so if you need to make edits, you need to create your own SSH key and upload that to GitHub. But before that..."

Yes, I know, it shouldn’t take a developer 10 hours to spin up Node and Mongo on Heroku, it just feels like it when you’re striving for simplicity.

 

When I was your age, we used brackets and parentheses in our code, and we liked it!

Sometimes when I’m using a sewing machine, I find that pushing the fabric through gets so repetitive that I don’t realize that something weird happened with the thread coming out of the lower bobbin, so when I stop to look after I’m done, I see that the underside is a weird clumpy, stringy mess. And then I have to start over.

I get that same feeling sometimes when I’m coding with CoffeeScript and Jade. For those of you unfamiliar with CoffeeScript, it’s just like JavaScript, but you don’t have to use parentheses or brackets. Or semi-colons. In fact, you’re punished if you do. Although for functions without arguments, you need to use parens otherwise it will get mad. So it’s fickle. Plus, you can’t just make your changes and it will just work, you need to compile CoffeeScript into JavaScript. I think psychologically as you’re writing it, you believe it is saving you time not having to write “var” to declare variables and writing your if/else clauses more like a sentence (which is actually nice, but I’m disappointed when I can’t use if … ? … : … syntax), but I tend to think in the long run, you don’t save time because you won’t run into the errors that you would with normal JavaScript. Ok, so debugging JS is a pain in itself, but adding syntax errors on top of that drive an old woman battier!

error: reserved word “var”

Jade has a similar idea except it is a templating language for Node, so it’s basically HTML without brackets. I recently spent a lot of time rewriting my HTML so there are no brackets and making sure I’m indenting properly. Of course, after I figured out that I can change the indenting to use spaces from the bottom of Brackets, I got much less of those errors, but there’s nothing like vague errors like “Error at new JS_Parse_Error” that only get resolved after trying if/else clauses with and without the leading -. Looking now at the docs, I guess you never need the leading – anymore, which is a good move because I could never figure out when I needed it and when not.

Invalid indentation, you can use tabs or spaces but not both.

Aaaack!

Don’t get me wrong, I love the evolution of programming languages, and it’s good to see that people are still coming out with new stuff, but sometimes I just feel like I’m too old to understand why not using brackets is so awesome. Especially when I sit there writing some code and I go to the browser to test it, and there’s an error because I indented poorly.

I just started a new prototyping project using Node, and I actually pined for two seconds about how it would be nice to use Jade, but then I found EJS which accomplishes the same thing, but it’s more of the PHP/JSP/Angular approach where you just add code directly into your HTML. Whew! There really is a language that exists for everyone. You don’t have to force yourself to use something just because everyone else does. I’ll be ok until the next wave of new-fangled languages come out. Maybe like this?!

gladys

This has been brought to you by Gladys, whose first programming language was Logo.