DEV Community: vijitail

Let’s code a client side router for your frameworkless SPA

vijitail — Fri, 24 May 2019 19:12:40 +0000

Yes, you read the title right, Client side router for a frameworkless SPA, that’s exactly what we are going to build in this story.

Before we dive into the code, let’s first understand what is client side routing.

A client side router runs on the user’s browser. The browser does not make a request to the server for the page, rather it looks into the JavaScript code that is loaded onto the browser to render the page for the matched route.

This is how our router would render the page —

Listen on hashchange event.
When the url changes, match and parse the url to the route predefined in the code.
Look for the view to be rendered for that route, if no match is found render a 404 message.

Enough theory, show me the code already!

Below is the folder structure that we’d be working with

Let’s define a class to represent the Route in the router folder.

The Route class would take in 3 parameters while instantiating; name, path and the view associated to the route.

The setProps() method will set the props or properties that would be passed on to the route from the url and the renderView() method would return the view of the route.

The Router class will be the heart of our routing system. It will take an array of route objects as the first parameter and the renderNode where the view will be injected as the second.

Our Router class will have methods like match() and navigate() to match the routes and navigate respectively. Lets look at their definitions.

The navigate() method will filter through each route and check if it matches with any of the predefined routes. If no route is matched the renderNode will render a 404 message, else it would render the matched route’s view;
In the match(), we are creating regular expression of the route path and matching it with the requested path. If it matches we are also finding out if the requested route has any route parameters.

Well you might have already noticed the problem in the navigation(), we are literally injecting the view using innerHTML, which btw must be avoided at all cost. Mainly because of security reasons regarding XSS and also another problem that I encountered while coding, that any element in the injected view does not have an event listener attached to it. So that means you cannot have a button in a view to navigate to another route, it simply won’t work. To get around this we need to build the view using document.createElement(). To keeps this post concise, I’m leaving it upto you to figure it out(I may explore it later).

I like to add utility functionalities so lets define another method to add routes to the router.

Let’s take a look at the index.js of router.

Here we are exporting a function which takes routes as the parameter and creates an instance of the Router Class. The renderNode is a div with an id of app. We are adding the click event listener to the buttons that have a route attribute (inspired from other libraries), and listening for the hashchange event on the url to call the navigate() method.

Now, lets take a look at all the views in the application (look at the captions if you get lost keeping tracks of files)

You can install html pragmas in your code editor for syntax highlighting the html in template literals.

And finally in our app.js file lets define all our routes and pass it to our router.

The following code would go in the body of the index.html file

Make sure to add the type=”module” in the script tag in order to use the import/export es6 feature, because of this we don’t have to setup any extra configuration.

To wrap this up lets add a few lines of CSS.

To conclude this post, I’d say that you don’t need to bring in other libraries for small and simple Single Page Application, you can spin up you own custom solution, I just happen to show you one of the many ways, probably you can do more and much better. If you do, do let me know, I’d be happy to see your work.

I referred to this video on YouTube for writing the story — https://www.youtube.com/watch?v=D1fLaNxd-ZM

You can take a look at the final repo in my github, if you get stuck while following along. You can DM me on instagram @vijit__ail if you come across any problem.

Cheers and happy coding 🍻😉

This post was originally shared on medium. Check out my medium profile @vijit2ail

Build a simple CSS grid layout system

vijitail — Wed, 15 May 2019 18:48:52 +0000

You must be very familiar with the layout system of popular CSS frameworks like Bootstrap, Bulma, etc. But have you ever wondered how these are built and work behind the scenes. 🤔

In this story, lets try to build our own grid layout system and understand the basics. 😃

I’ll be using Sass for this project so that less code can be written. Sass is really simple, and it won’t be difficult for you to follow along if you are a pure CSS person.
Official Sass guide is a great place to start learning Sass.

Lets begin by defining the responsive breakpoints

These will declare the various screen sizes our grid would support.

Next lets style the rows and columns

The next few lines will be the core of our layout, basically we’ll loop through the breakpoints map and add media queries and create 12 columns for each breakpoint. We’ll also include containers for each breakpoints.

Just imagine the amount of code that we would have had to write for the same thing in CSS. 🤦‍♂️ Anyways moving forward.

To calculate the width of the column we need to divide the columns into 12 groups based on their size in terms of percentage.
So to do that lets write a function in Sass that takes the column size as an argument and returns the width in percentage.

And then call the function inside the for loop

That’s it we are done with the12 column layout system 🍻.

As a bonus feature lets write a class that will remove the column margin and update our calcWidth() function accordingly.

Have a look at the layout in action. Resize your browser and see how the columns behave.

Thanks for reading the post. If you would like to add any other feature let me know below or you can DM me on Instagram @vijit__ail

This post was originally posted on Medium

Pull to refresh animation with Vanilla JavaScript

vijitail — Sun, 12 May 2019 11:35:57 +0000

Pull-to-refresh is a very popular swipe gesture on smartphones that allow users to load new content on top of listed data. Its used in all popular apps for smartphones and as well as in web apps these days and has become a major part of UX.

A few days ago I came across this kind of animation on dribbble, so I thought why not come up with my version of it.

Guess what, I managed to build this with no libraries or JQuery plugin, just plain Vanilla JavaScript. 😎

A very simple markup , a top loading container that will contain the loader and a bunch of cards.

Let’s get to the fun stuff now 😁.

The idea is to hide the loading container by default and slide it down when the user swipes down.
transform-style : preserve-3d will enable the cards to be positioned in 3D space and the perspective property on the card wrapper will determine how the user will see from their perspective; lower values will produce more intense 3D effects. Note that perspective is not set on the child elements.
More about CSS 3D animations and transforms.

That was it for the CSS, now let’s begin adding the swipe gesture.

Touch events in JS are handled by the touch event listeners. These are similar to mouse events except they allow multiple touch on the touch surface.

pStart and pCurrent objects will store the touch positions of the start and current touch. We’ll require these to find the change in the Y coordinate to calculate the rotation of the cards.

In the swipeStart() function, we’ll capture the touch coordinates and assign it to the pStart object.

In the swipe() function, we are setting the pCurrent object with current touch coordinates. Next step is to find the difference between the start and current Y position to calculate the distance of swipe and make a rotation based on the 30th percent of the distance. The loading container will only appear if the distance is greater than 100.

The swipeEnd() function will undo the rotation if the touch has begun but has not enabled the loading.

While loading, the loading container will slide down for 2 seconds for the purposes of demonstration but in a real world example it can take longer or less time based on the response from the server. The loading container and cards will get back to original state once the loading has finished.

I took reference for JavaScript from this stackoverflow question.

Complete source code in my codepen. Open the devtools to see the animation in action.

I hope you got to learn something new today 😄. If you have any questions or have any suggestions for improving the code, feel free to write your response.

Cheers and happy coding 🍻 ✌

This post was originally shared on medium. Check out my medium profile @vijit2ail