May 2017 • Modern Web and Mobile Development and more...

Hi everyone,

how have you been doing this week? I hope you did well! So, today I am going to talk about the event my friend Lefteris and I went to! By the way, this is the ticket so I do not have to type a lot of info:

If you read the description of the event it was all about WebVR!!!! Awesome stuff!

Mozilla has made tremendous contributions to the entire Web in general for a lot of years now (everyone know this) and they support free, open source projects and diversity over the web. They promote freedom of accessing the web for everyone and protection from people and organizations who try to limit users freedom to their benefit and much much more! You can see their mission statement here:

https://www.mozilla.org/en-US/mission/

It’s worth it: please do read it.

What we saw in their was remarkably cutting edge. From Project Quantum to WebAssembly and from CSS Grid to WebGL2 and Three.js, A-Frame and WebVR in general. Even Drupal already has many modules for webVR. Check them out:

At this point I need to make a brief introduction about all these new technologies and provide the resources for further reading.

A-Frame

This is the most advanced work I have ever seen in for making VR experiences on a web page! I cannot describe the magnitude of this thing but I can imagine the endless possibilities opening up for website building and web development in general. For example, let’s say you have a hotel business and you want to make an intro like no other!

You can introduce your guest user inside your own hotel and show him around in the most immersive way ever possible!

Of course, we are not there yet but imagination is a powerful force!

Read more here: https://aframe.io/

WebGL2

Reading from the specification,

WebGL™ is an immediate mode 3D rendering API designed for the web. This is Version 2 of the WebGL specification. It is derived from OpenGL® ES 3.0, and provides similar rendering functionality, but in an HTML context.

WebGL 2 is not entirely backwards compatible with WebGL 1. Existing error-free content written against the core WebGL 1 specification without extensions will often run in WebGL 2 without modification, but this is not always the case. All exceptions to backwards compatibility are recorded in the Backwards Incompatibility section. To access the new behavior provided in this specification, the content explicitly requests a new context (details below).

source: https://www.khronos.org/registry/webgl/specs/latest/2.0/

I haven’t used 3D Web Graphics before but I have seen some sporadically as small parts of a website and stuff. Combine WebGL2 with WebAssembly and you get yourself games that has nothing to be jealous of games made with engines like Unreal engine or whatever. I agree with the speaker said. Everything will be done through the browser and on the browser pretty soon.

Watch this demo:

‘After the Flood’ illustrates many of the key, new aspects of WebGL 2.

Transform feedback: to animate leaf particles on the GPU.

3D Textures: used to create procedural clouds.

HDR rendering with MSAA: for correct blending of antialiased HDR surfaces.

Hardware PCF: for better shadow filtering at a lower cost.

Alpha to coverage: to render antialiased foliage.

…and much more.

Other key demo features are:

Compressed textures: DXT, PVR and ETC1 are used to reduce VRAM usage.

Asynchronous asset streaming: to get the demo loading faster.

Runtime lightmap baking: to generate realistic shadows that render fast.

Procedural water ripples

Planar mirrors

source: https://blog.playcanvas.com/mozilla-launches-webgl-2-with-playcanvas/

Three.js

This is an awesome library, A-Frame is built alongside: A-Frame provides a declarative, extensible, and composable structure to Three.js. So, you can imagine what user experiences you can make with this awesome library. In thei webpage you can see a lot of portfolio projects made with Three.js. Already!!

source: https://threejs.org/

CSS Grid

Css Grid is one of the options of the CSS declaration ‘display’. Until now there was no such great support among browsers, but lately everyone has been talking about it.

You can read more and better here:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

We saw an example where you have a boxed layout with some text and between two paragraphs you want to insert an image which needs to be fullscreen. That’s super easy with CSS Grid unlike using conventional CSS with negative margins or calc() etc. It’ s two lines of code. You use the property grid-column assigning each element you want to the desired location, so in our example you specify image’s column to be the full-width wrapper and everything else the boxed element.

Project Quantum

And here is the best treat! I kept it for the end to end this vast presentation with this mind-blowing project! It is a new engine built on top on Gecko engine. Better read the wiki page:

Quantum is not a new web browser. Quantum is Mozilla’s project to build the next-generation web engine for Firefox users, building on the Gecko engine as a solid foundation. Quantum will leverage the fearless concurrency of Rust and high-performance components of Servo to bring more parallelization and GPU offloading to Firefox.

source: https://wiki.mozilla.org/Quantum

Be sure to check it out! It is probably the next big leap towards the future!!!

Conclusion

I want to stress out that we are living in a super exciting era of web development. Future historians of the web will mention the pioneers of now with great awe and admiration for the achievements they made during these times. Furthermore, I do not know if there is a better time for a developer like me and many more to work and advance! Extremely wonderful possibilities are open and if you are a person who settles for nothing less than continuous development and progress and enjoys learning constantly, I think future will be all yours! Great times!

I hope you enjoyed this post as much as I did!

Cheers! Go dive into web awesomeness! I forgot! Here are some useful links you can contribute too:

Contribute to the Code Base: https://mzl.la/developer_guide
Participate in Outreachy Project: https://wiki.mozilla.org/Outreachy
Start your webVR project with the Mozillians: https://mzl.la/campuswebVR
Come work with Mozilla: https://careers.mozilla.org

PS: I forgot to mention that WebVR is an experimental JavaScript API that provides access to Virtual Reality devices, such as the Oculus Rift, HTC Vive, Samsung Gear VR, or Google Cardboard, in your browser.

Hi there to all of you! Today we are going to introduce the newly released command line tool for building and testing really easily React native apps: create-react-native-app. This tool is the equivalent for create-react-app of Facebook! With this build tool you can setup a “Hello world” app in no-time! I tried it and it works! I started making a mobile app with React Native which will be like a news feed or a mobile version of my blog! So, with this app I managed to retrieve the 10 first blog posts and display them to the screen of my phone! Due to the fact that I am still not familiar with the different components of Android and/or iOS I will share any code in this post. I am still trying to figure out things myself.

For detailed instructions on how to do things and run your development server or if you want to install your app in your phone you should visit this link: https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/README.md

Although, to be honest with you I still can’t figure out how to install the APK file after publishing to Expo standalone app service!

Caveats

The only caveat I find using this great tool is that I do not think I managed to overcome the very complex nature of React native development for real! What I mean is that I tried making my blog app with both ways:

react-native init AwesomeProject && cd AwesomeProject && react-native run-android

and the new one:

create-react-native-app my-app && cd my-app/ && npm start

Using the former I cannot understand exactly how it works, because each time I do not see the app immediately as they say in the Facebook setup page you will see with the command: react-native run-android. I always have to type:

react-native start

so as to actually run the app in my phone etc. I think the tutorials are not quite clear or updated a lot. Things change pretty fast in the area and nobody can keep up with no hurdles!

As regarding the latter, a caveat is that you have to install an app in your phone called Expo! Although this is super, I would love not to use its environment every time I want to build something. I even published my test app in the standalone service website they own, but to be honest I did not see any IPA/IPK file to download only a huge button saying:

OPEN IN EXPO APP (binding the URL of the published app to my newly registered Expo account)

From reading the instructions in the page for standalone app someone expects some file download or sth! Didn’t see any as I mentioned before! The result was, instead of having to run the commands every time in the terminal to produce the QR code and scan it, I now have my app on my account so I can click on it any time I want and run my app! To be honest this is not something I was looking for: I thought I could install the .apk directly on my device!

Quick note: I haven’t tried the npm run android command which runs the app in the Android simulator etc.

Conclusion

Despite all these confusing ways to make a mobile app, the work that has been done with React Native is absolutely amazing! This new build tool I think will help a lot of people get into mobile development relatively smoothly and get familiar with the ins and outs of it.

Regarding my own level of knowledge about the subject, I have to admit I really “suck”! I am still trying to find out what goes where and which tool is for which job and always bumping on bugs and errors, so my mobile experience so far is hectic and slow! I am confident though since everything in programming requires its time and consistent efforts to get it, that soon enough despite the steep learning curve I will have my app up and running smoothly.

But for the time being, Cheers! and happy mobile development with React Native!

PS: Dear Lord, I just thought about updating or upgrading your apps! This should be tough taking into account that even making a simple app is currently difficult! Let’s see how it goes in the near future!

Hi there, in this post we will talk a little bit about Unit testing and TDD. I just started out using it whenever I can, that is in my own projects because in my daily work we never practice TDD. Sigh!

TDD (Test Driven Development)

TDD is a method of writing software which results to writing source code as bug free as possible and which makes development and delivering finished products way faster due to this fact (overall time becomes less and less using this technique eventually). The benefits of TDD are not limited only to the latter. It forces you to become a better developer because it makes you think well before you implement, better structure your code design and architecture. This is done by pushing you to write functions or other building blocks of your project as small and simple as possible, so they can be easily testable. I will give you an example for you to see what’s going on and talk about the process afterwards.

So, this above is the finished file. We will break it down and talk about what we did and why we did it in the following paragraphs. The process we followed above is called Unit testing and the units in our example are the two functions average() and sum().

Steps of unit testing

The first step when writing tests is to figure out the requirements you need to meet and which are asked by your client or manager or boss. In our example we need to implement two functions: one in order to use it as a tool for summing up an array of elements (we preassume that they are numbers). The second one is a function which gives us the average of the numbers array.

Unit tests seem like pseudocode but they mostly care about inputs and outputs! If you take a certain input you expect to have a certain output. So, the second step is to write our two assertions, one for each function.

The final step of the process is to write the actual functions until all our tests pass!

NOTE: we could write some more tests checking about the inputs we get. If it is an array and if it is an array of numbers etc. to be more sure we write the most adequate sum and average functions we possibly can!

So, this is a simple example of Unit testing!

Cheers!

Hi, I want to share with you the books I managed to finish after the last time I talked about them. My intention is to share with you some really good books. But, as always I will do it in small steps at a time!

1. So, here is one of the few biografies I have ever read in my life, Titan: The Life of John D. Rockefeller, Sr., by Ron Chernow, a specialist as it seems in biography writing.

This book is read with great delight and the narrative is extremely powerful. The author made a really really extended study of John D. Rockefeller and he is concentrated more on the personality and the gossip and the microcosm of his life. As it is obvious, Ron Chernow falls in love with his subject although he tries to be as objective as possible. What he writes down is carefully filtered through exhausting study and research.

What I gained from this reading

I have always liked John D. Rockefeller, the richest man of all times. When I saw a documentary a couple of years ago in Youtube (if I can recall correctly, this one here, Ron Chernow also comments in this). From that video I copied the bookkeeping habit. I have bought a small notebook where I jot down any expenses I make during the day. Now, with the book I even bought a real ledger book and keeping my earnings and expenses balanced! I think this habit saved me countless money so far. Especially, when I realized WHERE the money were spent! 40% of it was garbage stuff! Now, all these stupid purchases are dead and gone and instead the money go to savings account in order to invest them when I have a good amount of it.

Other things that stroke me where that he was extremely frugal for a multimillionaire and he despised mindless spending like hell! Furthermore, when he retired he played golf with passion almost until his death! Other incidents like when he was emptying all local banks of money loans in order to purchase every company, every refinery etc. blew me away. Can you imagine that he was walking down the street and bankers offered loans to him like we say good morning to each other?

2. Outliers: The Story of Success, by Malcolm Gladwell

This is a book about extreme successes and the different and really interesting points of view the author insists on making these success stories real. It is not pure luck, it is not pure efforts, it is not pure circumastances.

There are a lot of examples analyzed and Gladwell like performing a surgery breaks them into small pieces making a clear and strong point each time. Have you ever heard of the rule of 10000 hours of deliberate practice in order to achieve mastery to any profession, art or science field? Here it is.

To be honest I heard a lot about this rule. First time I encountered it was in some developer’s website claiming that in order to become a true master in programming you need 10000 hours or 10 years of programming in your hands. If I remember he was answering in some question like: How to become a programming ninja or sth like this, whatever.

Epilogue

I highly recommend these books to you. They will expand your thinking and give you a ton of information and ideas which you may implement in your daily life.

Have a nice reading!

M	T	W	T	F	S	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

2017 / 05

Mozilla Developer Roadshow Event

A-Frame

WebGL2

Three.js

CSS Grid

Project Quantum

Conclusion

Introducing the newly created create-react-native-app command line tool

Caveats

Conclusion

Unit testing

TDD (Test Driven Development)

Steps of unit testing

Books read since last report

What I gained from this reading

Epilogue

Categories

Tag cloud

Recent posts

How to test login with Cypress and CircleCI in a secure way

2020's year resolutions

How to properly test a React component: an example

Refactoring a generator

Defensive coding

Discover MDN