♪ One sign up here, one sign up there, why do I have to create an account everywhere? ♫
Thanks to unDraw for the illustration
♪ Wes can hum, Wes can drum, All this drumming, my thumb is numb ♫
Today I research about why Node.js is trending and if what it offers is right for me.
I am still unsure if I should switch from PHP to Node.js but I still have lots to learn about it before I can make a decision.
Since I am a big fan of Laravel, it won’t be easy to be convinced to switch. Plus, I need to see more about the frameworks available for Node.js and if they can match what a framework like Laravel offers.
♪ dollar dollar bill y’all ♫
♪ What’s the time? Time for another CSS design! ♫
♪ Click a panel and it will grow; From greyscale to color, they will go ♫
Last time I started to research about Node.js and try some basic examples using its raw form.
Today I tried Express.js, and although it seems very light and fast, I want a framework that does more right off the bat. I come from the Laravel framework mindset, so I was hoping for something similar for Node.js.
Turns out, that there exists a framework called Adonis, which is built on the principles of Laravel, but I still need to look into it more to see whether it is lacking behind, or more advanced, when compared to Laravel.
It seems like theere are other good alternatives as well, some mature choices such as Sails.js and Meteor, and some other lesser known ones such as Feathers.js.
I will need to try more than one of them, because there are many to choose from, which makes it harder to choose!
I spent the weekend and today working on this website so that I can show all my progress in this challenge in an interactive manner.
So far I have always shown my creations as a video, to show how one can interact with it and how it reacts to different screen sizes.
However it is always better to give you the component and you can interact with it however you wish. I also add some of these results to Codepen but that has its limitations.
This website is in the form of a timeline and one can expand each day individually to view more information about it.
I have bought a Digital Ocean VPS with an Ubuntu distro, and have set up the LEMP stack on it.
This website was then deployed on such server.
This challenge is not based on any of the challenges I am following. It was just an idea I had in my head which I wanted to implement. It turned out to be a very simple challenge, thanks to the animate.css library and the simplicity of Vue.
♪ Picasso was a great painter, and I’m a professional procrastinator ♫
CSS is very difficult, but once you learn it, it is very powerful.
It is not just used for styling things, but also for giving them life!
You can make basic interactivity with elements, and also animate them with keyframes. Isn’t that awesome?
I’ve been seeing pug.js (formerly known as Jade) a lot, but I never tried it because I’m used to normal HTML.
Pug is a template engine, to write HTML in a simpler and cleaner way, which will then be compiled into normal HTML. You can do loops and conditions with it, which is similar to using Vue to manipulate the DOM, so it is not that useful when used with something like React or Vue, but it is still useful to create cleaner view code.
I decided to try it out when I was working on the CSS loading animations, because it was using simple HTML structures so I thought it is good to start small. I liked it! But is it worth the extra learning curve? It does produce cleaner code in my opinion, and it is not hard to use, but if you don’t feel like learning a new thing just to create HTML, then don’t bother. I think I will be using it more in my future works, which will help me decide if it is worth using or not.
I’ve been looking into a bunch of Node.js frameworks lately. I’ve watched a few crash-courses for some, and even tried a few of them in a mini-project scenario. Some of the most interesting ones for me were Express.js, Nest.js and AdonisJS.
My favourite so far is AdonisJS, which I plan to be using for further testing and experimentation in the coming days. I might even create a real, but small, project with it, because I think that’s the best way to use a framework.
The reason why I seem to prefer AdonisJS is mostly because I come from a Laravel framework background, which is the framework that AdonisJS is inspired from. This would make it much easier for me to learn than something like Nest.js, which seems to take after Angular a lot, which is not something I am fond of. The community behind AdonisJS also seems to be growing rapidly, and even as a framework, it has been getting a lot of traction lately, being featured on a bunch of articles such as Scotch.io.
I will let you know how I am progressing with AdonisJS in the coming days, although I cannot share much about the project, I will try to still share about my experience working with such a framework.
I started a new project, to experiment with AdonisJS. It is a boxing ring and some audience, and the plan is to use sockets to create some kind of interactivity between the spectators.
I am going to learn some new technologies with this project. So I am looking forward to see where it leads.
I’ve been trying to create a project with AdonisJS, and unfortunately for me, I decided to use web sockets in this particular project idea. I didn’t want to just learn another framework by building a boring CRUD app. I wanted to create something bigger and more interesting, however Adonis web sockets are giving me lots of trouble to work with Vue.js and I can’t find very good help online. That’s not my biggest disappointment, it’s just that I am wasting lots of time being stuck, and not working on my daily challenges. Therefore, for now I will be putting the boxing project at a lower priority as I don’t want to stay stuck on it.
This is a cool effect that I’ve wanted to learn about for a long time! Thankfully it was part of JS30 so now I can understand how it works. Thanks, Wes.
I’ve done a simple input with a key up event to automatically search when the user types, but only when the user stops typing for 350ms, to prevent calling the API with every key stroke.
Axios was used to fetch external data from a public API.
I also toggle a loading animation which I found on Codepen when I am requesting data from the API.
You can’t just call the API request with every key up event, as that would send too many requests and cause a problem of race conditions.
Let’s picture the problem. If you press a key, a request is sent, and press another key, you can’t guarantee that the first API request will complete before the second one, so your last-received response might be from an ‘old’ search term.
To help with this problem, I used debounce, which is a technique used to group a number of sequentials calls into one, along a time period.
This does not fix the problem, it just helps, and prevents lots of unnecessary calls to a server. To really fix the problem, you have to cancel the request itself, which Axios allows by using a cancellation token.
I was looking at day 13 from JS30, which focuses on animating in elements on scroll but I didn’t like how dirty it is to just do a simple animation on scroll.
I looked at some libraries which already do this in a clean and fast way, and found a very popular library called Animate on Scroll (AOS).
I tried it and it is very easy to hook up and use. They even have a few options to customize your app.
I’ve learned about some cool functions and techniques like destructuring assignments. I bet there’s much more awesome stuff to see!
There are different solutions to make your SPA crawlable. The simplest one is to pre-render your app, which generates static HTML files out of your code. This however is problematic if your content changes frequently or is different per user, as you can’t have dynamic content if it is staticly generated. A pre-rendering tool would go through each of your routes and builds HTML files, which would also make websites very fast as they just serve HTML without having to compute anything. Also, this would make hosting very easy and cheap!
For Vue.js, Nuxt seems like an awesome way to do both of these. This is going to be next on my challenge list, where I will try to convert my #100daysofcode website to be server-side rendered. Let’s see how it goes, next time!
It’s not as easy as I thought to convert a working website from a Vue.js SPA to Nuxt. It would be much better to start a project from scratch with Nuxt if you know that you will be going to that direction.
It is not impossible to do so, it is just more work. I’ve been doing progress and I will get it finished soon.
You have to change the ways to import libraries, and you have to cater for DOM manipulations so that they don’t execute on the server side, since the server cannot access the DOM.
Today I made some time to finish my 100 days of code website’s conversion to Nuxt, to get server side rendering in my client site rendered app. The next step is to deploy it, but from the quick research that I’ve done, it is not as straight forward to build and deploy a Nuxt app.
So, today I installed Unity3D. It is a very popular game engine which is beginner friendly and there is lots of learning material online. I used it a long time ago but I just wanted to try it again.
I just did some simple stuff with it, such as dropping things down from the sky and used the physics engine to have them collapse with the floor and with each other. They stack pretty nicely. 😃
I loaded up a project I worked on a long time ago and took some parts of it. I continued experimenting with the physics engine, so I made a quick 3D model of a track and put some balls on it. I added some spots that will give a speed boost so that the balls collide fast with each other and show a ‘Kapow!’ message. I think it is pretty cool how simple this is to do.
There are more advanced ways to store data in your browser, as LocalStorage is synchronous, and only allows 5mb of data. It is not secure to store data as the data can be viewed by the user, so do not store any sensitive data! It is not a replacement for a database.
localStorage.setItem('name', 'Duane'); const name = localStorage.getItem('name'); localStorage.removeItem('name'); // clear all saved data localStorage.clear();
Flexbox is awesome, probably my favourite part of CSS. It is not hard to understand, it just needs a little effort at first. Once you get the hang of it, you’ll be able to place things where you want and lay elements as you imagine.
If you want to create layouts with code, or work in front-end, I really suggest you check it out. It does not need a library, as it comes with normal CSS and is supported by all the major web browsers.
I finally managed to deploy this website! It was nothing like I ever did before, reverse proxy, what?!
When you have a Node.js application, you run it on a mini server by Node.js, but that makes it run on localhost and a port. So how can you make it accessible to the public? You need to use a reverse proxy, which I’ve set up on my Nginx-based VPS. Basically you set a rule in Nginx to redirect external requests to the localhost app, and that’s it. Once you get it, it is pretty simple.
After that, I had a bunch of problems with nuxt.js to make certain code that should only run on the client side check which environment it is currently in before executing.
It was a learning curve, but I have learned so much and that’s how you get better. My next project that uses Nuxt.js will be smoother now thanks to this headache.
Digital Ocean has some awesome tutorials about this, and other related things.
I did some experimenting with particle systems. Games are much better when there is visual ques to help you understand what is happening. An example of this is when a bullet hits a wall, there’s a particle that shows dust, or a spark.
Creating a particle is more artistic than programmatic, so I used some programming with Unity’s classes to programmatically spawn and start particles, depending on data such as; what the speed of the collision was; what type of object was hit, and anything else that comes to mind to make it seem more realistic.
I created some simple sprites to form a character design and learned how to switch between animation states to programmatically trigger animations based on the character’s class.
For example, when the speed is high (because you hold the direction key for a second) the character will use the running animation, but for slow speeds it will just walk.
Also, when you have low health, the character will use a wounded animation. Animation states can also be hybrid, so you blend between a wounded and walking animation, this is the power of Unity’s animation system.
I just managed to finish my first major freelance project which has been going for months.
It was based on Laravel (PHP Framework) and I used Semantic UI because back then I didn’t create my own designs.
I learned a lot about Laravel from this project, and I also learned about limitations that can arise when using a UI component library. This led me to start practising creating websites from scratch, which was more of a confidence issue than a skill issue before. Once you get your feet wet and start learning, it will all get better with time and work!
I was thinking of starting a game in the past few days, and although I had some nice ideas for an original piece, I realized after some prototypes that creating a game alone would take so much time which I don’t feel ready to spare.
There’s also the problem that usually, a person is not good at all aspects of game development. In my case, the artistic side is lacking as I found it hard to create characters. I tried both 3D and 2D and figured that the best approach would be to team up with an artist.
Teaming up would make everything serious and I’m not ready to do that right now as I want to explore different things and learn more about web development to better equip myself in my main objectives.
This means that for now I will be putting game development on the side and approach it again later on in the future when I can dedicate more time and general commitments to it.
As I am a coder at heart, when I used to have a vision for a piece of UI, I would get straight to coding it.
Lately I’ve been hearing a lot about Adobe XD, which is a free tool by Adobe to design and prototype user interfaces. I decided to try it out and I liked it! This changed me, as then when I had visions of user interfaces I went straight to designing it in Adobe XD instead. This made me much more creative as I was not limited by code, and dragging and placing components around with a snapping tool makes everything easier to come up with cool designs.
It’s always good to keep learning and trying out new things and approaches to keep evolving yourself.