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.
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.
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).
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.
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.
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.
UPDATE: The 2-part article on creating an Instagram clone in Elm (instaelm) has been posted on Codementor:
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.
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?
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.
Instead of writing a new app from scratch, this guide could have been a guide on specifying the SoundCloud client app in a meta-description language. Then using that meta-description language to generate all of the React.js and Redux code that is needed.
Unfortunately, this guide is plain programming with no metaprogramming at all.
The first speaker, James Wilkinson (executive director of Full Stack Toronto), spoke about front-end web development optimizations. What was really cool was the overview of the tools that are available for checking performance. The part about having a performance budget for website load time was great and gave me some ideas on how we would determine what a good baseline budget is for the current project I’m on.
The highlight for me was that those hero images take a while to load and James walked through the painting that happens in a web browser to show what happens on slower internet connections. Having a huge hero image means there’s going to be a blank spot on your website while it loads on a phone or 3G-connected tablet.
The second speaker, Avery Francis, who works at Rangle.io as a talent manager. Her talk was about diversity in tech and some of the ways that organizations can improve their hiring practices and their company culture to make it more diverse and inclusive. She also went over a few reasons why you want more diversity such as better work atmosphere and increased productivity (therefore….increased profits). Personally, a more diverse and inclusive environment is typically more comfortable and has a really amazing impact on product. More diversity leads to more viewpoints and perspectives and leads to better user experiences in products.
node-oauth-libre now has support for promises thanks to the bluebird library. This support is optional and does not break compatibility with existing uses of node-oauth. To use it, you must explicitly import it.