Me, just doing silly stuff with CSS
Me, just doing silly stuff with CSS. https://codepen.io/dyarfi/pen/Vwvrmxy

Making Layouts, Cards, Buttons, and Hover Effects has never been this playful


Nuxt.js is a very powerful VueJS framework with great support from the community.

Nuxt.js Community Modules
Photo by Guillaume Jaillet on Unsplash

With modules made by the community for the community, building Nuxt.js web applications has become more time-efficient and faster development.

Some modules already reserved options in the Nuxt.js command-line interface npx create-nuxt-app in the terminal. Other community modules are required to manually install in the project terminal.

1. Nuxt Axios Module

Axios bring Ajax request methods for HTTP Server requests (XMLHttpRequest) in JavaScript interface. It’s a very helpful plugin that is heavily used in production in every modern JavaScript stack. GET, PUT, POST, DELETE, and OPTIONS are already reserved functions in the Axios module. Add Axios module to the Nuxt.js project in the terminal…


A utility from Nuxt.js out of the box that really useful for browser prefixes

Nuxt.js Post CSS autoprefixes for support of older browsers
Photo by Chris Yang on Unsplash

Autoprefixer is a PostCSS plugin for adding browser prefixes to your CSS so you don’t have to add a prefix every time you update CSS properties that have prefixes, especially for browser compatibility. There are some CSS properties that in other browser needs to have prefixes on them.

.col {
display: flex;
}

Into:

.col {
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

PostCSS autoprefixer plugins already reserved in Nuxt.js project, this is how to add PostCSS autoprefixer to your Nuxt.js projects. Open up your package.json file in the text editor, and add a browserslist objects to the…


A Practical Guide for JWT (JSON Web Tokens) Authentication in Next.js Application.

Some random feature image for this post: JWT (JSON Web Tokens) User Authentication in Next.js Web Application
Photo by Moritz Schmidt on Unsplash

JWT (JSON Web Tokens) implement information with encoded token between client and server. JWT can be use in any programming language platform for many developers in their projects. Visit this website to view a better understanding of JWT tokens.


Next.js has become more advance and cutting edge to developers for use as a Full-Stack web Application. The community and people behind Vercel has done a great job on Next.js future.

Sequelize and Next.JS Logos
Sequelize and Next.JS screenshot logos

The help and supports from Next.js community has made a tremendous impact on how it grows to become one of the most popular React Framework right now. There are many good examples from Next.js and the community that are worth to see in this link.

There are several of ORM engines in Node.js ecosystem such as Sequelize, TypeORM and Objection. I had working with Sequelize before and I want to share to you about how I have managed to combine it with Next.js.

Request and Response can be used in the API pages in your project without any addition of…


Manage multiple projects with different versions of Node on your machine

Photo by Daniel Kuruvilla on Unsplash

Node v14.0.0 is out and this time I want to show I managed to change Node to different versions. Changing the Node.js version between projects using NVM really help me to handle and switch between multiple project versions. It really increases the power of the Node.js ecosystem. This is essential for me because some of my projects run in different versions.

Many of my projects have been based on the Node.js ecosystem — Gulp.js, Express.js, and other libraries like React.js developed in the Next.js framework. For quite some time they updated and released new versions and several of them required…


Handling CSS properties that you can combine and reuse in project libraries that you don’t need to rewrite again.

Placeholder
Photo by Kelly Sikkema on Unsplash

Placeholder in web development is very useful for your front end web development workflow. Placeholder help you to be more productive without rewriting properties all over again that you need in your CSS library.

SASS / SCSS has a placeholder function that you can use in your projects. You can customise your needs and made a small library out of it. Include placeholders in your SCSS and use them every time you want it in your project. If you unfamiliar with SASS / SCSS, you can read my post about it in here and here.


Components from Bootstrap in your React application

React Router
Photo by Ferenc Almasi on Unsplash

React, SSR (Server Side Rendering) and static exporting are several of many advantage of Next.JS framework features. Already packed with handy tools and of course the ultimate React built-in.

NextJS recommended that starting the project could use any methods such as styled-jsx, CSS-in-JS, CSS module based or with tools like styled-components, material-ui, foundation or custom made components and many others.

Although the methods above is recommended for NextJS or React based project, it’s okay for using the old school method in Traditional CSS-file-based styling (including CSS, SCSS, PostCSS etc). And this is my walkthrough with using the traditional way in…


Transition animation in cascading style sheet to fuel your HTML components

This is where the fun begin when playing with some CSS properties. Any website front end development project that you have, you always had that parts that you want to have a nice any good looking animation effects.

Animation Image
Photo by Tyler Lastovich on Unsplash

CSS Transition has always been fun for used in the making of web pages look cool and attractive. Any components in your website such as buttons, links or cards can have any animation effects.

There are several CSS transition property that can makes your website looks cool. Transition can take almost other CSS properties that you want to animate such as opacity…


There is a time you need to load content from JSON data into table in your project. Probably here is the quick jQuery $.ajax solution for you to look up for a sample.

Triggering button in jQuery $.ajax to load json data into table HTML
Photo by Artem Sapegin on Unsplash

In my previous writing on attempt to Load Dynamic HTML Tabs from JSON Data using jQuery, well this time I want to load JSON data into HTML table.

HTML

<div class="tables">
<!-- button trigger -->
<button class="btn btn-primary" id="view-doctors">
View Doctor
</button>
<div>
<!-- table result -->
<div class="tables-doctor">
</div>
</div>
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');body {
font-family:'Open Sans', Arial, Verdana;
background-color:yellow;
padding:2rem;
}
p, h3 {
margin:0;
padding: 0;
}
.tables-doctor {
&-content {
margin:0 0 2rem 0;
}
&-name {
font-weight:bold;
}
&-title {
color:#777;
}
}
.table {
margin:1rem 0 1rem 0;
width:100%…

Code Road

A Coder Road

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store