SelectableText widget and structured error messages in Flutter 1.9

Posted on Leave a comment

Flutter 1.9 is out. As one may guess from this post’s title, my favorite changes are:

  • SelectableText widget
  • Structured error messages (enabled via VS Code or Android Studio settings)

Structured error message support was proposed 8 months ago! I find Flutter’s current approach to displaying error/exception messages are pretty useful as they are. Adding more structure certainly doesn’t hurt. When I started programming more than a decade ago, I had always imagined a future where a developer would not need to leave their IDE to find help in fixing their errors. Now that it’s finally here, I wonder what took it so long 🤔. I think both React and Flutter have done a wonderful job here.

Here’s a short video about what’s new:

The joy of creating in Flutter

Posted on 1 Comment

I am now officially in love with Flutter. What started as a crush has turned into something palpable. For the past 2 weeks, I have been heavily invested in learning Flutter from App Brewery’s bootcamp-style course. If there’s one takeaway from the course, it is this: Flutter+Dart is a lethal combination. I have now come to truly appreciate the ‘promised’ language for frontend and the frontend itself.

I must confess, though. I did not hold the same feelings for Flutter in the beginning. At a couple of meetups, I have called Flutter all sorts of blasphemous things — difficult to learn, highly inconsistent, and a confused approach — all without closely working with it. I, however, assure you that Flutter is none of the above. On the contrary:

  • its composition-over-inheritance approach makes it easy for beginners,
  • its Widget-oriented design makes it consistent, and
  • Dart’s succinct and familiar (JavaScript-like) syntax makes things less confusing

The App Brewery course I mentioned before has been an eye-opener. The course itself is pretty long and exhaustive, but rewarding. Since it’s geared toward absolute beginner programmers, I was able to go through it at 1.5x playback speed and even skipped a few sections. I am currently at 64%, hoping to complete it by the next weekend.

During this time, I customized my VS Code quite a bit to my liking (this post’s featured image), so much so that creating Flutter apps in Code is a far more pleasant experience as compared to officially recommended Android Studio. This, of course, is made possible by the awesome Flutter team who does not want to tie developers to Google’s ecosystem.

If you are curious about the source code of the app seen in this post’s featured image, here’s the GitHub link. It’s an app called BMI Calculator that I created as part of the course. Go ahead and explore my commit history to see how easy Flutter makes creating beautiful-looking mobile apps.

Contributing to open source projects

Posted on Leave a comment

It’s high time for me to level up my developer mojo. Clearly, doing side projects isn’t the way to do so. They usually aren’t tough enough. Then what is? Why, of course, large enterprise projects. Based on this logic, I have decided to dedicate a couple of hours everyday to working on complex, large-scale open-source projects.

I recently picked up a new skill, Redux, and renewed my knowledge of React. So much so that I have drifted away from Angular in favor of React. React+Redux is a deadly combination. It sort of brings out the JS nerd out of you, and makes you better at best practices. No wonder why the best websites around are using React. (install the React DevTools browser extension and discover for yourself)

After looking around, I have shortlisted these two projects to focus on:

  • Calypso – a new frontend for WordPress.com
  • Mattermost webapp – frontend for an amazing free & open-source Slack replacement

Both are written in JavaScript (my love) and extensively make use of React and Redux. I have already started making slow but steady progress. My first pull request, although trivial, was recently approved and merged at wp-calypso.

Optimistic updates

Posted on Leave a comment

It’s a cool UX trick I learned recently makes applications exponentially responsive. Traditionally, when we make an async API call or something similar (to perform a time-taking operation) we show a spinner (or a loading message) to indicate to the user that something is going on in the background and that they should wait a bit before the final results. Although now widely accepted, this approach sometimes creates ‘blocking’ experiences especially when used extensively. You do not want to give an impression to your users that your application is completely dumb on its own and needs to fetch data from the all-knowing server all the time.

Optimistic updates is a strategy where you ‘optimistically’ assume that your time-taking operations will always succeed. So, instead of making users wait or showing a loader, you show the final results (when you can) right away!

Eg. On click of an item’s delete button just instantly remove the item from UI and perform the actual (server-side) delete operation in the background. The same goes for adding a new item, and so on. This will create a slick and snappy user experience that your users will love. If a background operation does fail, perhaps undo the change in UI and show a relevant error message to the user.

Of course, this strategy isn’t perfect. But it’s cool, for sure. I must have seen it at least half a dozen times before but officially learned it in this beautiful Redux course on Pluralsight by the awesome Cory House.

Check my commit to see how optimistic deletion can be implemented in a React-Redux application.

My customizations are now a WordPress child theme

Posted on Leave a comment

This website uses a theme called Storefront. It’s a minimalistic yet elegant theme from Automattic (the creators of WordPress). I literally browsed hundreds of modern and ‘top’ themes at various sources before falling for this one. It was a good fit in its vanilla form and required only little customizations to suit my needs.

Yesterday I logged into my WP admin after a few days and saw several updates piled up. Storefront was one of them. I didn’t upgrade right away for I knew my customizations would be go away with its previous version. I had committed the cardinal sin of modifying the theme directly.

When I found out about the concept of child themes, I said to myself, “shit, I should have guessed already.” A child theme is one that contains files and assets you want changed in a ‘parent’ theme. So, rather than directly editing style.css or functions.php in a parent theme, one can create a child theme and add their modifications there. That’s what I did then. I created a child theme called Storefront AB, derived from the beautiful Storefront theme.

That was fun. It’s live now!

WordPress is a beautiful, sophisticated software, built to scale to millions of websites globally. A lack of something like the concept of child theme didn’t just feel right. I should have trusted my instincts earlier.