Web Tools
Two years ago when Web Tools was released, CSS Grid was not supported in its current form by any browser. Now it is supported by all of them. But, in my opinion, unlike most features of CSS that have come before, Grid needs some good tooling around it to help ease work with it in development. So I have started to work on some tools to help with Grid and along the way, I have been dabbling a lot with Grid.
Below is a basic experiment: reproduce the layout of the new App Store on iOS. Along the way, I also found good use for CSS Custom Properties — Variables. I hate that they aren’t called variables. — in setting the background of articles, the background and text color of the text block on each, and more.
CSS is getting more and more powerful. But, along the way, it is getting more and more simple. Where old layout techniques (tables, floats, flex box) were truly ill-suited for layout, CSS Grid is 100% made for layout. So go, dabble with Grid. Grab a comic book and reproduce the layout. Or a poster from the 70’s. Learn the ins-and-outs of it because this is the future of where front-end web development and web design is.
Permalink
I needed the break. Our second child is scheduled to be delivered on December 18th. Of course, that means a ton of prep over the last couple months, including much-needed cleaning, a lot of furniture building, and rearranging everything. And then there is Christmas. Which I kind of love more than any other holiday.
So with an extended weekend because of Thanksgiving, we got a lot done in the Finley Home. Mostly during (well-fought) naps of our daughter Lottie. But I also got some good development time in to work on a couple of projects. I pushed two of the first updates Web Tools has seen in almost a year. For an app that I barely touch, it is still pulling about $200 a month in sales.
I also built a dresser, cycled 30 miles, got our live Christmas tree (see above), and ate a fair amount while attempting not to gain any — regret-inducing — weight. I'm down 25 pounds since the start of Summer and would prefer to keep it that way.
So: great weekend. Relaxation, code, family, and food. I give thanks to God for all of that. My wife is amazing, my daughter is a dream that I enjoy daily, and we have so many blessings in our life that I cannot begin to list.
Permalink
I went to Agile training last month at Asynchrony. Our department director wanted our team and a few others to go. I agree with almost everything about Agile. It’s easy to, at least for me.
Last week, as I prepped for our team’s next project, I decided that I want to push myself to do as much from my iPad Pro as possible. I have edited many sites from my iPad. But at work, I have been working on a C# website for the last few months. Despite trying, it was much easier to work in an IDE (Visual Studio for Mac Preview) on this site. But our next project is a complete redesign of a marketing site, setting it up on a LAMP box with a PHP-powered CMS.
There is a difference between making quick updates to a site and starting one from scratch. Quick updates typically only require Coda and Web Tools. But starting from scratch sometimes requires more tools. So I started looking at what I needed.
Image Tools is what I came up with. Two new tools coming soon to Web Tools. Easily open an image and use a ruler to measure and a loupe to grab colors.
My typical flow is to jot down a stream of consciousness in iA Writer. Lots of unfiltered thoughts. But this time, I downloaded Trello. I’ve never necessarily hated Trello, but I have a thing about todo list apps. I buy tons of them. Trello just didn’t fit my flow before. But this time it did. I created my Ready, Working On, and Done columns and started adding cards to my Ready column.
Saturday, as I finished my designs, I started working cards through my columns. And crap, I’m starting to like Trello.
Permalink
Here is another great article on web development on the iPad. This stood out to me as I had the same thing occur the other day:
Not all is rosebuds and blue skies though, as Coda has quite a few issues that make it less than ideal for all circumstances. First, the app is very prone to crashing. I’ve had quite a few crashes that I just can’t explain. The app will simply stop responding at random points while I’m typing and not respond until I force quit and restart the app.
I built the website for Ergo Web Tools in Coda after designing it in Graphic. Every once in a while the app would lock up while I was typing and never catch up. I’d have to force quit the app and relaunch it. What’s nice is that Coda remembers your place in a “site” when you come back, but the bad news is if you were running any process in a Terminal tab, it doesn’t restart.
I develop on a Digital Ocean droplet where I have Sass, Grunt, and more tools installed for easy access. So I have to, when Coda decides to lock up, restart my “sass --watch” command. When this happens a dozen times over a couple hours of coding, it is rather frustrating.
Over the next week I’ll likely be sharing a bit more of my design/dev process and some requests that I’d have for the developers behind the apps I’ve been using. iOS has made huge strides over the last few years and doing “real work” is becoming even more plausable.
Permalink
At some point, the difference vanishes. Most people never did “real work”, by whatever metric, on their computer; they were happy to browse web pages, send emails, Skype friends, whatever. Yet the redoubt of “real work” is defended valiantly, perhaps by those whose jobs depend not on the work, but on the tools used for it – the PC. It’s very notable how often those defending the “real work” divide are also systems administrators of some sort. It’s as if, like the London cabbie, they felt their employment was in peril, while everyone else adapts around them.
For myself, I ask “What do I need to be able to do my job?” LAMP environment? I set up a Digital Ocean droplet that I can SSH/SFTP into. Sass and Grunt? All set up on the droplet. FTP client and code editor? Coda for iPad is fantastic. But I’m a front-end developer, so the browser is a key tool in my toolbox. I need a web inspector to see what styles are applied to an element. I need a way to test responsive websites across many sizes. I need a JavaScript console to look for errors and help with debugging. There are a few apps for viewing the source of a page, but that doesn’t quite scratch my itch. There are a few apps with a simple console, but none of them really work well with the iPad’s big screen. They all seem built for iPhone and enbiggened for iPad.
So what is a front-end web developer to do? Before Thanksgiving I started doing a lot of research and over Thanksgiving weekend (which was nice and extended for me) I started to build something special.
I call it Web Tools. Keep it simple, right? To start (1.0), Web Tools has a scalable web view that allows you to test any width you want and a web inspector to allow you to easily drill down through the DOM tree and see what styles are applied to each element. And this is just the start. More great features are coming to Web Tools in the coming months, including a powerful JavaScript console.
Building websites on the iPad, even an iPad mini like mine, is a joy when you have the right tools. So I am working to bring desktop-level tools to the iPad to remove excuses. As Twitter says, it’s the #yearofticci.
Web Tools launched today and can be had for a $5.99 introductory price. Head over to the App Store andbuy a copy!
Permalink