DEV Community: Nurofsun

CSS Tips: Apply/Unapply Rules With CSS Negation Pseduo-Class

Nurofsun — Sun, 25 Apr 2021 06:32:47 +0000

Well, this is another part of CSS tips series. Now we will learn how to utilize :not() also known as CSS pseduo-class.

The Power of CSS Negation Pseduo-Class

Result

Just look at example below, how I use it for navigation links.

Let me explain this code below.

.navbar-link {
  color: #0d4ee5;
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
  padding: 15px 10px;
}

So, I have an element with class .navbar-link and it has default style as above, having blue color, bold text, and so on.

and How I unapply the default color except for the last element that has class .navbar-link?

I would write a code like this.

.navbar-link:not(:last-child) {
  color: #555555;
}

and you can see the result on embedded codepen.

Conclusion

My time saved a lot when I use this thing and my code looks more clean and neat.

So I start include this tips/trick of CSS to my list of topics that I want to share to you guys.

CSS Tips: Reset Element With all: unset [Simple]

Nurofsun — Tue, 20 Apr 2021 22:43:15 +0000

You will always facing this problem if you write the CSS code by yourself, no CSS framework, and any CSS/SASS/SCSS library.

Yeah, some elements has their default behavior/appearance thus we can decide by ourself

No Default Style, Please Reset it!

Reset this element then make new style or remain the default.

But, probably I would like to resetting this element, and make my own style.

Button Element

for example, we have button element and the default style looks like quite ugly.

so I have to restyling this element, but before I do that.

I must reset the default appearance.

button {
  background: none;
  padding: 0px;
  margin: 0px;
  border: none;
  outline: none;
}

You know? There's more simple way to reach out something as above with only one declaration, yeah with all: unset;

Use all: unset to Reset Elements

Look at this code below, you might be surprised with this magic.

button {
  all: unset;
}

The Result

You can compare both the result, button with class old is with old way to reset element, and button with class simple is with new/simple way to reset element.

I think, the result is the same, but for more information which browsers supported all: unset; declaration you can take a look on canise

Thanks.

CSS Tips: Box Model #1

Nurofsun — Tue, 20 Apr 2021 03:40:02 +0000

Hello, long time no see. This is the first series of CSS Tips that I want to share with you guys.

For now, we'll talk about CSS BOX Model. Okay, you might say that

Hmm, I think there are a lot articles talk about this, so what's the difference?

Wait, imagine if you have a flexible box model to some element, I means that you don't have to put !important to property value of box-sizing.

yeah, it will break the standard of better css writing style. and you will lose your time.

Now, let's get started.

First I will answer your question, what's the difference?

Applying Box Model The Right Way

Old Method

Simple, just need 3 lines of code. you can reduce it only 1 line actually. But it's not flexible as I said above.

*,*::before,*::after {
  box-sizing: border-box;
}

New Method

This is new method, and I prefer to put the box-sizing: border-box on root element (html tag) and use global values inherit if I want to use the same box sizing behavior as the root element.

html {
  box-sizing: border-box;
}
*,*::before,*::after {
  box-sizing: inherit;
}
// for example i have card component with different box-sizing value
.card {
  box-sizing: content-box;
}

That's all, and Thank you. I will write another cool CSS Tips for you guys. I'm also learn about CSS actually.

Bye.

Building Your First CLI Tool With Nodejs

Nurofsun — Tue, 02 Feb 2021 02:11:32 +0000

I thought that JavaScript just works in browser, I've wrong opinion of this amazing programming language, it's actually can run on your command line paired with popular platform called nodejs.

In this article, I'll show you how to make simple CLI tool with javascript, let's get started.

Initialize The Project

First of all, we’ll create new folder for example hello-cli and run the initialization with npm or yarn.

$ npm init
# or maybe you wanna use yarn
$ yarn init

Inside that directory create file called index.js and fill this with a simple code shown below.

console.log('Hello World');

And run it, with this command.

$ node .
# output
Hello World

As you can see above we receive an output Hello World.

How ashamed is it? Says Patrick

Well, okay if you can create it why don’t you tell me about the guide to making such thing, so I would never go to search engine and looking for it on the internet.

Arrgghh, Let’s forget about patrick! and continue the project, everything will be fine.

Make The File as Regular Shell Command

To achieve this thing, we must to add #!/usr/bin/env node at the top of our index.js.

And make it possible to executable even without node command.

#!/usr/bin/env node
console.log('Hello World');

Update our package.json

Next we need to updating our package.json by adding new property called bin.

bin property basically specify command name for node project, but in this case we only have a single file in our project, so the name property will be used as shell command name.

{
  "name": "hello-cli",
  "bin": "./index.js",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Make Package Globally Available

For now, our app not globally available yet, that means we cannot run it with hello-cli command.

But, in this case also we don’t want to run our application as hello-cli.

Instead, we want to run this application by typing only hello, so to do this we also update the name property.

Updated package.json as shown below.

{
  "name": "hello",
  "bin": "./index.js",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

Now we change the index.js file permission by doing chmod +x index.js otherwise , you will received permission denied message when trying to run it.

Then, after that we run command npm link or yarn link on the project directory. Since you run the command above you make symbolic link, and now hello package available as global package.

Let’s start to run our application, by running hello command in our shell/cmd.

$ hello
# output
Hello World

Wow ! it is work! Thanks for reading.

Original Post

Create Simple Chart With D3js

Nurofsun — Tue, 10 Nov 2020 03:46:56 +0000

So, today I have learned about D3 the most flexible javascript for data visualization, when I tried this library it just a little bit overwhelming and, do not know the most effective way how to learn it, because the documentation was quite poor. I mean the order of the tutorial was not structured well.

Why I Must Learn it?

Currently, I work on a project that needs data visualization, of course, it’s related to a dashboard web app. I have had intention to mastering this library when I was worked on a similar project.

This article intended to make a quick guide how to visualize your data with D3.js

Preparation

Environment Setup

Before we start to make a deal with this library and write some lines of code, you need to install this library, for now, I will teach to you the easy way how to do it.

Visit and download D3.js from official website, because the downloaded file is .zip format, you also need to extract it.
Create a directory to put your files that you used for learning. e.g d3-playground inside my directory (see below).

  .
  ├── index.html
  └── public
  ├── css
  │   └── app.css
  └── js
      ├── API.md
      ├── app.js
      ├── CHANGES.md
      ├── d3.js
      ├── d3.min.js
      ├── LICENSE
      └── README.md

  3 directories, 9 files

Load d3.min.js and app.js file to your index.html
Additionally, you can install live-server globally with command below.

$ npm install -g live-server

Open your favorite code editor, personally I used vim. And we are ready to coding !.

I'll give you very simple example rather than an example basic command how to do it and that.

Create Chart With D3.js

Goal (Create a Chart with structure HTML code as below)

Here it is the structure HTML code, and the example chart. I write this chart manually, but I want to make it automatically with D3.js

<div id="chart">
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 40px;">4</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 80px;">8</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 150px;">15</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 160px;">16</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 230px;">23</span>
  <span style="background-color: rgb(35, 35, 35); color: white; font-weight: bold; display: block; text-align: right; height: 20px; margin: 1px; padding: 10px; width: 460px;">46</span>
</div>

Example Chart

Implement D3.js to make the Example Chart

Inside index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D3 Playground - Chart</title>
</head>
<body>
 <div id="app">
   <div id="chart"></div>
 </div> 
 <script src="public/js/d3.min.js"></script>
 <script src="public/js/app.js"></script>
</body>
</html>

I created fake array data as below. Write it on your file app.js

// Data to visualize
const data = [ 4, 8, 15, 16, 23, 46 ];

Selecting Element

Then I make <div id="chart"> as the container, what I need to do is select the element.

const chart = d3.select('#chart')

Create Empty Span

Create empty span element, I called it init elements.

// create empty span element.
const bar = d3.selectAll('span')

Binding Data and Styling Element

Here, we start to binding the data with our init elements. and join it our span element. .join() method is new here for more convention to joining the data.

// binding data to <span>
bar.data(data)
   .join('span')
      // styling span element.
      .style('background-color', '#232323')
      .style('color', 'white')
      .style('font-weight', 'bold')
      .style('display', 'block')
      .style('text-align', 'right')
      .style('height', '20px')
      .style('margin', '1px')
      .style('padding', '10px')
      // computed the width of each element depends on the data value, to do it see below.
      .style('width', d => `${d * 10}px`)
      // append text inside element
      .text(d => d);

Styling Element (Basic Syntax)

I know, maybe you already understand how to styling element, but still, I will give you the basic syntax example.

// first argument = key
// second argument = value
element.style('background-color', '#232323');

Chaining style method. If you want to styling the element more than one css rules once, you might need chaining the style method.

element.style('background-color', '#232323')
    .style('font-weight', 'bold')
    .style('padding', '10px')
    .style('color', 'white');

Thanks, see ya on the next article.

Original Post: Nurofsun's Blog

Get to Know Event Bubbling and Capturing in JavaScript

Nurofsun — Tue, 22 Sep 2020 02:14:18 +0000

For you who has learned about event,you may want to have deep understanding about it, have you learn about event bubbling and capturing? if not, this is the right article for you.

<div id="parent">
  <button id="children">Click me</button>
</div>

Event Bubbling

let parent = document.querySelector('#parent'),
    children = document.querySelector('#children');

parent.addEventListener('click', function() { 
    alert('Parent clicked')
});

children.addEventListener('click', function() { 
    alert('Children clicked')
})

Consider to simple HTML markup and few lines of JS code above, once you click button with id children two alert will show up. First alert with text Children clicked followed by another alert with text Parent clicked.

Wait a minute? Who are you? said a parent element.
I'm your children. said the children element.

What does it mean? The concept of bubbling The way of events are up.

Event Capturing

let parent = document.querySelector('#parent'),
    children = document.querySelector('#children');

parent.addEventListener('click', function() { 
    alert('Parent clicked')
}, { capture: true });
// you can also just put `true` as third argument.

children.addEventListener('click', function() { 
    alert('Children clicked')
})

Keep take attention on HTML markup and JavaScript code above, to make the behavior of event become capturing, you need to set option object capture: true on parent event or you can just put true as third argument.

When you click button with id children the first alert will appear is an alert that attached on parent element (event) which has text Parent clicked and after that alert with text Children clicked will appear.

So, do you get it? Yes, the way of events down.

The Difference Event Bubbling and Capturing

After you test that code I've provide you may get the conclusion of differences of these kind of events, the way of events of both are different.

Event Bubbling is up, and Event capturing is down.

Building Simple REST API with Express.js and MySQL

Nurofsun — Thu, 16 Apr 2020 01:45:02 +0000

Express.js is node.js web application which working as backend, operate some database, and so on. In this article we will learn how to make REST API.

REST API Express and MySQL

Requirements to keep following this tutorial, assume that you already know the basic level working with express.js and also SQL Language.

Creating project directory

mkdir simple-api
cd simple-api

Pro Tip !
Actually, you can scaffold or initialize express' project with express-generator npm package.

Generate package.json

npm init

Installing Express.js and its Dependencies

npm install express --save

npm install cors body-parser mysql --save

Creating `index.js`

Now what we should do is to create file index.js in our project's root directory. and write/paste the following code below in this file.

const express = require('express'),
  app = express(),
  cors = require('cors'),
  bodyParser = require('body-parser');

// make server object that contain port property and the value for our server.
var server = {
  port: 4040
};

// use the modules
app.use(cors())
app.use(bodyParser.json());

// starting the server
app.listen( server.port , () => console.log(`Server started, listening port: ${server.port}`));

to ensure, that the code work properly. you can test it.

node index.js

output:

Server started, listening on port: 4040

Preparing The Database

CREATE DATABASE simpleapi;
USE simpleapi;

and then, make new table called users.

CREATE TABLE users(
id INT AUTO_INCREMENT PRIMARY KEY DEFAULT NULL,
name VARCHAR(125),
gender VARCHAR(25)
);

after that, connect your database.

const express = require('express'),
  app = express(),
  mysql = require('mysql'), // import mysql module
  cors = require('cors'),
  bodyParser = require('body-parser');

// setup database
db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'simpleapi'
})

// make server object that contain port property and the value for our server.
var server = {
  port: 4040
};
......

Next, create new directory called in your project's root directory routes and put new file named users.js.

$ mkdir routes
$ tree -I node_modules
.
├── index.js
├── package.json
├── package-lock.json
└── routes

1 directory, 3 files
$ touch routes/users.js

Paste this code in users.js

const express = require('express'),
  router = express.Router();

// get user lists
router.get('/list', function(req, res) {
  let sql = `SELECT * FROM users`;
  db.query(sql, function(err, data, fields) {
    if (err) throw err;
    res.json({
      status: 200,
      data,
      message: "User lists retrieved successfully"
    })
  })
});

// create new user
router.post('/new', function(req, res) {
  let sql = `INSERT INTO users(name, gender) VALUES (?)`;
  let values = [
    req.body.name,
    req.body.gender
  ];
  db.query(sql, [values], function(err, data, fields) {
    if (err) throw err;
    res.json({
      status: 200,
      message: "New user added successfully"
    })
  })
});

module.exports = router;

and edit file index.js as below.

....
// routers
const usersRouter = require('./routes/users');
// use the modules
app.use(cors())
app.use(bodyParser.json());
// use router
app.use('/users', usersRouter);

app.listen( server.port , () => console.log(`Server started, listening on port: ${server.port}`));

Trying to make a new user with `curl`.

first of all, you must have curl installed on your machine.

curl -X POST \
 http://localhost:4040/users/new \
 -H "Content-Type: application/json" \
 -d '{"name":"Nurahmat", "gender":"male"}'

the response will be.

{"status":200,"message":"New user added successfully"}

to confirm that this user available, we will access created router http://localhost:4040/users/list.

Gotcha ! a user with name Nurahmat available !.

Add New User Through Form Input

Previously, we have demonstrate adding new user through curl now , how about if we do the same thing graphically, I mean through your browser with form input? Let's get started !

Creating Form Input Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tambah User Baru</title>
</head>
<body>
 <form action="/users/new" method="POST">
  <input type="text" name="name" placeholder="Nama">
  <label>Gender:</label>
  <label for="male1">
  <input id="male1" type="checkbox" name="gender" value="male">
  Male
  </label>
  <label for="female1">
  <input id="female1" type="checkbox" name="gender" value="female">
  Female
  </label>
  <button type="submit">Add</button>
 </form>
</body>
</html>

Loading path node.js module.

const express = require('express'),
  path = require('path') // add path module,
  app = express(),
  cors = require('cors'),
  mysql = require('mysql'),
  bodyParser = require('body-parser');

Creating new route that provide form input page and activate urlencoded parser (index.js)

....
app.use(cors())
app.use(bodyParser.json());
app.use(express.json())
app.use(express.urlencoded({extended: true})) // parsing incoming requests with urlencoded based body-parser

// use router
app.use('/users', usersRouter);
// router user input
app.get('/', function(req, res) {
  res.sendFile(path.resolve(__dirname,'views') + '/input.html');
});
...

if we access the route, localhost:4040/

Now, let's try to add new user.

and then ! what was happened ?! can you tell me ! Hope you enjoying this article, and tell me there's more proper way for how to create Rest API with express.js and MySQL because I also a beginner, like you...

Thanks,
reference: Maxrooted