Web Development, Potential and You (Part 2): The Value Of Adopting The Bleeding Edge

While writing the previous article about going beyond the “status quo” and actually focusing on improving the quality and worth we have as developers, my plan was to discuss a great deal on the hidden potential of the web and go quite deep on the topic. Turns out, I really like seeing words on my screen. The article became way longer than I would have liked so I had to cut it into 2 parts.

Whether you’re into web development or your interests lie elsewhere, I’m pretty sure that some of the parts in this second section will give you a new perspective as well as some fresh ideas you can use.

(Also, the-too-lazy-to-read version is in the conclusion, but you’d be sorely missing out on a lot of practical advice and million dollar ideas. You’ve been warned)

I’m now a pro! Where to from now?

I believe that for someone out there, the epiphany I had on web development was actually good enough to inspire action and make one a better developer. By having developers on a wider spectrum of skill levels and abilities evenly distributed, things become easier and more profitable for all of us, even the developers without a lot of skill starting out in the game. I know that sounds counter-intuitive, but think about it.

The really experienced/talented developers who’ve pushed further can take on the much more difficult (higher paying) projects whilst the developers with slightly less skill are still free in the more casual market. The obvious benefit of this is simple. If there are developers of different skill levels each undertaking jobs equivalent to their skill level, it means that there’s actually less competition for everyone since all the developers are spread over different playing fields. Less competition means more people can have more work to do, more fulfilment, satisfaction and of course, more money to take back home at the end of the day. Isn’t that a beautiful picture?

Problem is, in Zimbabwe it’s not quite that easy. Like one commenter on my previous article quoted, it’s the economy, stupid! Don’t get me wrong, our new President sure knows how to sell dreams, and also I was kinda getting annoyed at all the Asante-sanaring (yup, that’s a new word I made up) of the old administration. Our economy still has a long way to go before we’re all swimming in those cool websites and web apps projects that we all would like to undertake.

Therefore, this means that most of the projects in Zimbabwe are going to remain as those cheap websites that we’re used to, the type developed on a shoestring budget. So even if you’re the most amazing web dev in Zim, you’re probably going to be stuck with a lot of those. After enough of those, you’ll probably decide to move out of the country with your expertise and our vicious cycle continues.

Another issue that adds fuel to the fire is that a lot of people originally weren’t web developers, but because of our economic situation, they had to pick up those skills just to survive. I’m pretty sure that they’re some C and Assembly gurus who had to jump to web development which wasn’t really (and still isn’t) their cup of tea but simply because it’s only a few industries here that are automated enough to not expose “a lack of skill”.

It’s not a mystical revelation that I’m speaking about, nor is it something really shocking, it’s just reality at this point. I’m sure if we tighten our belt, really start learning and pushing our skills to be far better, we’ll eventually hit the point where we can stand amongst international competition without being embarrassed. But I personally am a little bit of an overachiever.

I always hear people saying “we are x years behind in technology” but let’s face it, the technology is here. All those 4^th and 5^th gen core i5/i7 laptops, latest galaxys and iphones etc are available, here… in Zimbabwe. What’s lacking is the skill to use this latest and greatest technology. But the good news is we can acquire this.

This is where our opportunity to be an outsourcing powerhouse can come from. From the potential of the latest and greatest web technologies. Also, for those guys sitting at home with their really impressive Assembly, OpenGL and C/C++ skills: come aboard and join us on the journey of mastering the true web here. Browsers are shifting to assembly languages and low level to handle the stuff that the developers who are pushing the limits of the web are throwing at it.

I’m going to try to keep the next section short because each of these hidden gems in the web is worth a topic in and of itself that describes its potential (hmm, that could actually be a cool web series) but I’ll try to leave various resources that you can learn from.

Okay, let’s jump in:

 

Offline first web apps

It’s quite possible to not have seen or heard much on this topic, even though I have seen it capturing attention in 3^rd world countries. Anyway, if you don’t know, offline-first web apps are basically websites, with the interesting ‘cache’ (pun of catch, offline first joke couldn’t resist) of storing critical components of the website (or even the entire website), making it work even when completely offline the next time it loads.

This has a lot of interesting implications, especially in our bandwidth starved country. Pages load way faster, bandwidth used to load a site become a ton less if the site was visited even once before on the same device. Actually, when done right, one can even access the website when they completely don’t have access to an internet connection (hence offline first).

There’s a lot more I could say about this one and its potential but that would probably make this article longer and it’s nuanced enough to be a topic on its own.

 

AMP

If Offline first web apps were a person, then AMP would be the person he/she shares a totem with.

They’re not exactly closely related, but both deal with making the web quicker and easier to load for mobile phones.

AMP stands for Accelerated Mobile Pages. It’s actually a standard of guidelines that Google designed itself to increase the loading speed of mobile pages.. For one, Google actually caches the AMP version of the website on their server so it loads near instantly when a person clicks the link on Google search.

The second and most important point is that on mobile, AMP pages are given a much higher rank in terms of SEO meaning your obscure page will be more visible and the public. Also, because of the fast load times, the public will love your page too.

Good for: SEO gurus and people who want an edge over their competitors

 

WASM

Remember how I was talking about the internet now having byte code and Assembly? Well, this is it. It’s actually a spec widely being advocated by all the major Browser companies that have both C and Assembly to browser byte code compilers; however, currently you can just compile your code to JavaScript.

Why this matters is because wasm or WebAssembly as it’s called has been bench marked and results show it to be exponentially faster than JavaScript at most tasks. Reason why that’s important is that JavaScript is one of the major bottlenecks in the really complex websites, so this would mean more buttery smooth and fancy sites. Also, if you have previous fancy C code rejoice, you can plug it in and use it as a library in your browser. How is that not awesome?

Good for: those C/Assembly old timers who want to jump in on the web hype train

 

WebGL

Truth is, I’m jealous of sites that use WebGL. They are some of the most prettiest and interactive sites on the planet (and I’m sure most expensive too).

WebGL is actually a port of OpenGL to web browsers with a few of the functions and features edited and reworked a bit to suit the context of the web. If you’re an OpenGL guru, you’ll be in extremely familiar territory. In fact, most of the tutorials on WebGL right now are just OpenGL tutorials rewritten into JavaScript which would be surprisingly easy to pick up for somehow who’s done a lot of C++.

I’m quite confident that if you were an OpenGL guru and took a semi-serious approach of learning WebGL, you’d pretty much be able to use it just as adeptly. Of course, due to the nature of the web, convenience and flexibility, you’d probably be able to do even more impressive stuff in no time.

Good for: the C++ programmers and developers who played around with OpenGL but maybe want to look for opportunities in web

 

WebVR

Last year, I had the chance to play with an Oculus Rift and I was left super impressed and excited for the future of VR.

I initially had a hype for it when I heard about it but got a bit sceptical overtime. However, after I saw it first hand, I became a believer. I think WebVR has a lot of the stuff going on for it that so much of the more expensive rigs like the Rift and HTC Vive do not.

WebVR also has the added advantage of being accessible to someone with a smartphone or can afford a cheap VR set which I’m sure quite a few people can qualify for. The biggest weakness and reason why VR isn’t taking up faster is because of the lack of engaging apps and software which are relevant to us.  Probably if one could make a Grace Mugabe simulator 2018 in VR maybe people would throw money to see that insanity

Good for: Web Developers who’d want to try their hands in VR but can’t afford the crazy hardware and computational strain

 

Browser Extensions and Webstore Apps

I know, browser extensions and webstore apps (basically a fancy hybrid between app and extension) doesn’t seem as glamorous as those other super cool cutting edge stuff. However, if you were to ask me I’d say there’s a good market if this one is played right, let me explain.

All these other things are okay and cool in that they take their data online but all of them have one limitation; they can’t access stuff in the computer directly. This is where I think Extensions and Web Apps can shine.

Web Apps have a native like application feel with the UI, Creativity and Extensibility of the web. You don’t even need to spend a lot of money to design a companion app because it can do all that for you, especially if the app has offline first principles baked in where it can run like a truly native experience. Plus, it can run in the background making it able to load extremely fast. It also has access to Device specific features such as battery life, storage etc. giving it far more capability and usefulness than the web. The best of both worlds wouldn’t you say?

Extensions are actually a little more interesting for me because while Web Apps are like Websites on Steroids, Extensions are like pared back unobtrusive (if done right) applications that handle one thing and do it well.

The hidden power in this is that you could actually distill all the values and features of a large complex site into an extremely lite on the go version which can then expand into a full blown website when you want to actually use all the power features.

One of my favourite extensions right now and a near perfect example has to be the sidebar extension of WhatsApp that comes backed into the Opera Browser for 3 reasons.

1. Most of the time my phone will be on the charger whilst i’m using my laptop and it’s frustrating to leave my laptop when i’m busy to check on a WhatsApp message.
2. I know WhatsApp Web and Desktop exist but there are just some times when I can’t focus my full attention on just chatting but I’m willing to compromise by replying here and there whilst still looking and mostly focusing on what I’m doing online (e.g during a live stream of a lecture)
3. If I want to share something I’m already viewing in my browser or PC real quick so I screenshot the page but transferring to my phone or Desktop/Web would just take too long and make me lose track of my thoughts (see 2.)

This is where sidebar WhatsApp really shines.

It gives you all the critical capabilities of WhatsApp such as chatting, sending files but in a way where it just occupies a tiny portion of your screen when you’re chatting (leaving lots of room to continue with whatever you were doing) and when you don’t really need it, quietly slides back to the sidebar drawer, gently notifying you of new messages with a red dot and a simple beep sound in case you missed the visual cue.  Personally, I feel the extension does such a great job and as such I’ve hardly, if ever, needed to use the (still great) WhatsApp web and Desktop alternatives.

The second and even more powerful feature of extensions, is that they have the ability (with your permission of course) to utilise Browser APIs which if you actually dig down into the documentation (going beyond again) can do some stuff that native apps can do and a few more where they wish they could.

One example which would be a super cool idea combines both the FileSystem/CacheAPI and the Tabs API. Now the Tabs API can actually read all the links that are open in a specific window (actually it can go further than this) and can save them. Another one of my favourite extensions called TabHamster does this where it saves all the tabs in my window as a dropdown of links with a custom name I can refer to later.

The FileSystem API, you guessed it, can read and write stuff off the computer. Now combine the 2 and that’s where my idea comes in. Imagine an extension where instead of just saving the links of the webpages you were researching like TabHamster, you can also Cache all the webpages themselves at once!

This would be really useful when you have internet at certain places and times and want access to your research, without having the hassle of saving/printing webpages one by one. Just one click, choose a suitable name and voila, all the pages are saved. All you then need to do is click on the link in the extension and a cached page instantly appears.

I know I can’t be the only one imagining how useful and convenient that would be, in fact, if someone actually manages to make it please send the extensions store link and I’ll be sure to give you a digital donation as a token of my appreciation.

 

Conclusion (Finally)

I’m sure this is a lot to take in, plus hopefully you’re looking deeper into some of the more interesting fields that caught your eye and are thinking up crazy cool ideas. Most of the technologies outlined here are maybe 2-4 years old at best with stuff like WebGL and WASM still being built up day by day. Plus these are only the things I’m aware of, imagine what other hidden gems that are maybe still sitting in the various documentations that someone will unearth a pretty interesting use for. An example would be AJAX.  AJAX  went for about 4 years unnoticed before developers actually realised it’s potential and now it’s one of the essentials.

The point isn’t to make you a crazy mole that digs deep into manual after manual, finding the most obscure little things and trying them. Those people are called Scientists and that’s their job description. Instead, especially for someone above intermediate, look for just one bleeding edge technology (like the ones described) to master.

Learn and practice it until you can use it easily and more importantly, practically.  We have a lot of catching up to do with the international market and I feel the best way we can not only catch up, but be desirable is if we dip really down, up our quality, and have something that a rare few offer even globally.

The great news about this approach is that not only do you master a skill that very few people have which makes you appealing to even places like Silicon Valley, but also it promotes collaboration and cooperation with other developers. Jack might be a C++/OpenGL fan who became an incredible WebGL dev, whilst Jill can turn even the most complex and bloated web app to be a sleek offline first machine that’s bandwidth friendly. Even if both can be considered front-end developers, they each offer something so unique that a company would outsource a project to both of them even if they were only considering one front-end developer simply because they can justify their cost and worth.

With 6 technologies outlined here to master, that means a 6^th of the competition, even internationally. And this is how you build a strong developer economy.