Blog

Categories: Portfolio, Web Dev Training

Instagram clone in Elm

CodeMentor has published the first part of my tutorial on creating an Instagram clone in Elm. It covers how to create nested components and the basic life cycle and architecture of Elm frontend web apps.
I am seeing more power and usability in the Elm programming language and it has been great to compare it with how AngularJs, Ember.js and React & co. work. The performance is really quite something, the virtual dom is very cool and it is neat to see how the DOM changes in the developer tools of Chrome and Firefox.

What I love is the syntax which has sensible import and export module declarations, cleaner and almost completely optional type annotations (excellent type inference), all data structures are immutable by default, and the compilation speed is quick.

The frontend web development world has changed a lot in the last 5 years and it is wonderful to see developers using ES6 and Flow or TypeScript and realizing the value of type checking and of great tools like webpack.

The reason I am writing about Elm and exploring the language and its libraries is because it is so unlike the typical JavaScriot syntax and is much more integrated than the alternatives (such as React). The other reason is to see what ideas and design patterns can be brought back into the usual JavaScript development. That was why I explored Sweet.js which is a way to have compile-time macros that are modeled after Lisp integrated with JavaScript.

It is exciting to be a frontend web developer with all these good tools, frameworks and libraries.

click here to check out the first part of Building An Instagram Clone in Elm.

Categories: Portfolio, Software Development

Emacs Mode for Flow Type Annotations and React JSX syntax

Emacs Flow JSX: While I have been focusing on writing more about existing tools and how to use them, like Elm for frontend web development and Perl 6 just for fun, I still find a need to create new tools and update my own toolkit.

I’m working on a React project and it uses fancy new ES6 syntax in JavaScript and it also uses the Flow type checker. The first thing I noticed in Emacs, my text editor, was that the syntax highlighting was broken in strange ways whenever I opened up a JavaScript file that had type annotations or JSX in it. I asked on reddit for a solution to this problem and people pointed me to existing modes that kinda sorta did what I want.

So I decided to try and create a new syntax highlighting mode from scratch. This allows me to use the mode as a base for more interesting functionality; especially when I need to customize things for the React project I’m working on.

You can check it out here: https://github.com/omouse/emacs-flow-jsx

The #1 Reason to Use Emacs

This is the main reason I use Emacs. It lets me create new tools and update my tools to match the projects that I’m working on. I’ve done this over the years and it’s always been the one thing that keeps me coming back to Emacs. I have tried other IDEs and text editors and they do have their own conveniences but they just don’t have the power that Emacs has. Being able to define your own functions to automate repetitive tasks is great. Being able to define your own functions that turn a complex task into a simple task is even better.

Here are some examples over the years of tools I’ve built with Emacs Lisp to help me in my daily work:

Some other examples of functions I’ve written in Emacs Lisp to make it easier to work on a project:

  • Functions for jumping to the definition of a function or class
  • A function for opening the test/spec file of a class
  • Some functions to run a whole test suite on a virtual machine through SSH, and to run particular tests from the point I’m at in a file

All of these were customized for each project because each project has its own standards. Jumping to the definition of a class that’s written by your co-workers is different from jumping to the definition of a class that you’ve downloaded as part of another package (for example, searching through “lib/” rather than “node_modules/”).

If you decide to pick up Emacs and learn to use it, you’re going to be extra productive over the years, any initial hurdles you encounter will be worthwhile because your peak productivity will be higher than others in the long-term and that’s the #1 reason I keep using Emacs.

Categories: Portfolio, Software Development

React vs Elm: Creating a comment box component in Elm

I recently published an article on CodeMentor.io titled “Building a Facebook-like comment box: a React tutorial in Elm” where I use the Elm programming language to essentially duplicate the React.js tutorial.

Update: I conducted a webinar where we built an Instagram clone in Elm.

The article has code examples and a step-by-step on installing Elm, running the Elm Reactor and then writing the code for the comment box. There is no JavaScript involved aside from the JavaScript generated by the Elm compiler.

elm vs react tutorial on codementor by Rudolf Olah
Click above to read the Elm Tutorial on building a comment box just like Facebook’s

Comparing Elm to React for JavaScript Frontend Web Development

The article has a brief comparison between React and Elm. It explains why you would want to use Elm for building your JavaScript frontend:

While the performance of React is awesome, at a certain point, you will notice that having React just isn’t enough.

You’ll also want Redux, Flux, or some other data flow library installed.

You will want Webpack and Babel installed so that you can use the latest features of ES6 (also known as EMCAScript 2016).

Then you’ll probably want to add type-checking and static types at that point, so you will also need to install Flow, a JavaScript type-checker.

Elm will give all the goodies that React, Redux/Flux, and Flow give you but as a collective programming language rather than as individual libraries.

Essentially, Elm is a functional language with the framework built in for solid frontend web development, it compiles to JavaScript. It’s similar to TypeScript in that respect, however Elm goes much further because it has its own syntax for better type-checking and compilation.

Also, instead of having to find individual tools, everything that you need to create fast components and single page applications come with Elm. It’s a batteries-included language. It comes with a REPL (command line interface). The Elm-Reactor included with it will reload any changes you have made to an Elm file. With all these elements, it is the perfect language for rapid frontend web development. You can learn Elm quickly, and learn to quickly build, test, and refactor Elm components in a way that can’t be replicated by tools like TypeScript or ES6 or React or Angular.

Compare React and Angular To Elm

So while React is great for creating web components, when we compare it to Elm, it can be hard to get started because it requires a bit more infrastructure around it (with Babel, Webpack, Flow, TypeScript, etc.) to really get started on developing a production-ready web application.

Note: React isn’t the only JavaScript framework/language/library to suffer from this, Angular also has a problem with setting up infrastructure (as do other JavaScript libraries). This is probably why React killing Angular in the JavaScript web framework wars is not so far-fetched. You can learn React and Angular fairly easily for the simple tasks. However, when projects become complex, the infrastructure starts to get in the way and it can be hard to learn how to debug the issues. It may be possible that if you compare other JavaScript frameworks like Vue.js to Elm, you will find they have better infrastructure and a good developer feedback loop.

Updated: Instagram Clone Article Published

It’s one of the first pieces of code I’ve written in Elm. I have been working on two other projects; one is an Instagram-clone, which I did an “office hours” live coding session for on CodeMentor.io.

The instagram code is neat because you can see how quickly you can write up a grid layout. You can see how to work with modals/pop-ups and how to manage state within an app. You can check out the code for the instagram clone here. The instagram clone is licensed under the Apache license 2.0.

Event Creation Tool written in Elm

The event creation tool for an event ticket sales page is cool. It explores more state management in the context of an app. For example there’s a way to switch the type of event you’re creating in the app. When you switch, an explanation page appears in between to give you guidance on how to create the different type of event that you just switched to. the event creator web app is licensed under the AGPL. You can check out the code for the event creation page for an event ticket sales website is here.

More Articles On Elm

I will be publishing another article on Elm (update: it has been published) very soon that is a continuation of the Instagram-clone code. It will include an API server to show how to use HTTP and AJAX calls. Furthermore, it will show you how to embed and fullscreen a component. This is vital if you want to use Elm today in an existing project and integrate components in a piecemeal fashion.

2017 UPDATE

instagram clone in elmUPDATE: The 2-part article on creating an Instagram clone in Elm (instaelm) has been posted on Codementor:

 

Categories: Portfolio

Presentation on FreedomBox and Pokemon Go at ActivateTO

On 17 October 2016, I gave a presentation at ActivateTO, a Toronto-based non-profit that hosts a speaker series. It was located at Toronto City Hall which is a very nice venue, very organized with great audio/visual gear (projectors and mics). My presentation included FreedomBox.

The topic that night was Pokemon Go and its implications for society, including its impact on personal privacy, ethics and responsibility of the game developers to their audience, and how game players interact with one another.

My presentation covered community-building alternatives like Loomio and privacy protection like Signal and the FreedomBox, a suite of software for the Raspberry Pi (and other hardware). The idea is that Pokemon Go encourages people to form small communities but that they’re all within the service of one commercialized game development company that has profits as its overriding goal. I pointed out that Pokemon Go had, within a month, started to explore how to inject more advertisements into the game and I predict, at some point (maybe during the winter months) when player engagement drops and there are fewer people playing the game, that they will be look at selling data to marketers and advertisers.

presentation by Rudolf Olah on FreedomBox, Loomio and Signal related to Pokemon Go

The presentation was great to give and there were quite a lot of people in the audience and I hope I enlightened them as to the other possibilities that exist out there.

I also made a few choice remarks about the ethics and responsibility that software developers have to their users/audience and how in 2016 we can’t ignore basic privacy implications in the code that we create. We have to be far more responsible and communicate more with our users to ensure that we’re doing the right thing.

Categories: Leadership

4 Things To Know About Teamwork

Here are the four things to know about teamwork:

  1. When the situation is tense, call a timeout, it’s the only thing that will work
  2. Information needs to be as close as possible to the team members that can make use of it
  3. Be aware of the message you’re sending as a team leader, senior developer, CTO because it affects how the team works together
  4. Some team members want to learn new things and develop their skills, you absolutely must help them do that whenever possible

https://speakerdeck.com/omouse/4-things-to-know-about-teamwork-for-software-engineering-teams

Continue reading “4 Things To Know About Teamwork”

Categories: AngularJS, Portfolio, Software Development

Forget React, Learn AngularJS 2.0 with this video tutorial!

In the last few weeks I’ve been busy preparing AngularJS 2 courses and I’m really excited about the first video tutorial that NeverFriday Software Expertise is releasing.

1

In this tutorial you learn how to create an AngularJS 2.x project and how to create a comment box directive component. In the React tutorial, they show you how to create a comment box just like on Facebook so I thought, why not show how easily it can be done in AnagularJS 2?

And let me tell you, it was really easy. AngularJS 2 has all the same features you liked in AngularJS but it has a better structure and better modularity. I just made a giant list of differences between Angular 2 vs 1.

Learn AngularJS 2 and create a cool component in less than 30 minutes. Click here to buy the video (prices go up in November so buy it now!)

 

Categories: Portfolio, Software Development

Use JSON in Perl 6, article published

I wrote an article for codementor.io on how to use JSON in Perl 6.

It’s a good tutorial and introduction to Perl 6 which hasn’t seen wide adoption yet. It’s a solid language which has had a lot of thought put into it and the libraries that exist for it so far are good. Since it’s still Perl, it has that hack-y, fast-paced feel to it where you feel like you can quickly put together a one-off script to get the job done or put together an MVP (Minimal Viable Product). However, since Perl 6 is better designed, you can build a well-structured, well-engineered large project.

Learning new languages and how they work can help make you a better programmer and introduce new ways of thinking that can make it easier for you to find solutions to technical problems.

Categories: Leadership, Portfolio

Quoted in “The Secrets Behind Great One-on-One Meetings”

I was recently quoted in the free ebook from O’Reilly, “The Secrets Behind Great One-on-One Meetings”. As an aspiring interview coach for software developers, it feels great to offer advice especially on the subject of one-on-one meetings.

It’s a great short ebook and very useful for those wanting to see the value of one-on-one meetings. Teams function more smoothly when team leads and managers take the time to have one-on-one meetings. While it can be tempted to put them off or to try and broaden your reach by using surveys instead, a one-on-one is more useful and personal.

Check out the book and look for my quote!

Categories: Leadership, NeverFriday Leadership Podcast

Episode #1 – Team Lead As Coach

In the first episode of the NeverFriday Leadership Podcast, I talk about the fixer vs the coach way of thinking when leading a team and about the team lead as coach.

Download the “Team Lead As Coach” episode of the NeverFriday Leadership Podcast

In this episode I mention Jill Geisler’s article on What Great Bosses Know “Are you a coach or a fixer” http://whatgreatbossesknow.com/?p=2052

Categories: Leadership

From 0 to 90 Days: Forming Your Team

Dave Kellogg has written a solid article about the 90-day rule and leadership. This is the rule where it takes 90 days for the team you’re leading to become your team. As a new team leader, it can take some time to get used to your team and to figure out who the great team members are and who are the ones that need some mentoring, coaching or training.

In project management, they talk about forming, storming and norming your team. Within 90 days, your team will pass through each of those stages. Initially, the team forms. Then, there is some storming and conflict that is resolved to build up a better functioning team. Finally, with your leadership, the team is in the norming stage where everyone works well together.

Leadership is Investing Your Time Understanding Your Team

Kellogg has great tips on how to handle this situation, where you have inherited a team and are expected to lead them:

Invest a lot of your early time in understanding your team.  Their strengths and their weaknesses.  What their internal customers think of them.  What you think of their work.  What coworkers think.  Understand their backgrounds, interview them, and go review their LinkedIn profiles or CVs.

He suggests that team leaders understand the personal wants and needs of their team. As a result, you become a more effective leader because you are using empathy to relate with your team. Also it can lead to your becoming a better coach and mentor, because you understand what they’re looking for in a career:

Remember that it’s about personal wants and needs.  Where do your team members want to be in a few years?  Do they see a way to get there from here at your company?  Are they happy with short-term constraints or are they struggling to get out of meetings in time to hit childcare before those draconian fines kick in?

You can read the full article here, highly recommend it.