Forem: Ega Prasetya

Useful Cheat Sheets For Web Developers And Designers

Ega Prasetya — Thu, 01 Oct 2020 20:47:33 +0000

Shortcuts Design

is a small website that lists every shortcut a designer ever wants to know, all designapps in one place and in a simple and clear way.

https://shortcuts.design/

Ultimate Flexbox Cheat Sheet

Flexbox is a brand, spankin'new CSS Layout module with suprisingly good browser support.

https://sketchingwithcss.com/

Web Developers SEO Cheat Sheet

this free and downloadable document covers all of the important SEO Code and best practices that are needed by online marketers and developers.

https://moz.com/learn/seo/seo-cheat-sheet

CSS Grid Cheat Sheet

Another helpful tool for using CSS Grid properties.

https://alialaa.github.io/css-grid-cheat-sheet/

ReactJS Cheat Sheet

a very useful filterable cheat sheet for react made by michael chan.

https://reactcheatsheet.com/

Type Terms

is the perfect tool for designers to learn the basics of typographic terminology.

https://www.supremo.co.uk/typeterms/

Tips And Tricks Write Less CSS

Ega Prasetya — Thu, 01 Oct 2020 10:08:03 +0000

Background

Font

Border

Outline

Margin

Padding

So how many do you use?

Shorthand Javascript Techniques

Ega Prasetya — Wed, 30 Sep 2020 10:00:57 +0000

Declaring Variables

Ternary Operators

Assignment Operators

Switch Case

If Presence

Arrow Functions

Object Array Notation

Happy Coding!

React Component Libraries

Ega Prasetya — Tue, 29 Sep 2020 19:47:03 +0000

Material UI

React components for faster and easier web development, based on material design.

https://material-ui.com/

Ant Design

Open source design react ui library.

https://ant.design/

React Bootstrap

bootstrap is rebuilt for React, include Bootstrap components.

https://react-bootstrap.github.io/

Blueprint JS

React-based UI toolkit for the web.

https://blueprintjs.com/

Semantic UI React

UI components based off of the Semantic UI Framework.

https://react.semantic-ui.com/

Rebass

React primitive UI components built with styled system.

https://rebassjs.org/

So, which one you use?

Top React Static Site Generators

Ega Prasetya — Tue, 29 Sep 2020 10:28:31 +0000

Because they are faster and flexible, static site generators are becoming increasingly popular. Have a look at some amazing React Static Site Generators.

Gatsby

is one of the most popular static site generators for React. It is a free and open source framework that helps developers build blazing-fast websites and apps.

https://www.gatsbyjs.com/

Next JS

if you want a static site generator for you next React Project, next.js is definitely worth a look.

https://nextjs.org/

Jekyll With React

is another great static site generator for React which is built on top of Ruby.

https://jekyllrb.com/

React Static

is a progressive static site generator based on React and its ecosystem. Because it is powerful, lightweight, and fast, it will be a great option for your next React app.

https://www.staticgen.com/react-static

UmiJS

is a scalable enterprise-class React Framework that provides out-of-the-box tools and plugins to aid the rapid development of scalable applications.

https://umijs.org/

So, which one you use?

7 Javascript Tips and Tricks

Ega Prasetya — Sat, 26 Sep 2020 09:27:16 +0000

Filter Unique Values

The Set object type was introduced in ES6, and along with (...), the spread operator, we can use it to create a new array with only the unique values.

Every and Some

The every function returns a boolean. If all elements in the array pass the test, true will be returned. The some function tests whether at least one element in the array passes the test implemented.

Convert to Boolean

Besides the regular boolean values true and false, Javascript also treats all other values as either 'truthy' or 'falsy'.

Convert to String

The quickly convert a number to a string, we can use the concatenation operator + followed by an empty set of quatation marks.

Convert to Number

The opposite can be quickly achieved using the addition operator +

Quick Float to Integer

if you want to convert a float to an integer, you can use Math.floor(), Math.ceil(), or Math.round(). But there is also faster way to truncate a float to an integer using |, the bitwise OR operator.

Format JSON Code

the stringify() method takes two optional parameters: a replacer function, which you can use to filter the JSON that is displayed, and a space value.
The space value takes an interger for the number of spaces you want or a string (such as '\t' to insert tabs), and it can make it a lot easier to read fetched JSON data.

Happy Coding!

Build Instagram Clone with MERN Stack Free Source Code

Ega Prasetya — Fri, 25 Sep 2020 18:12:22 +0000

This is full source code how to build instagram clone with MERN Stack, just to download or clone on my github.

https://github.com/lheartz/lheartz-insta

Happy Coding!

Fullstack Javascript Ebook Free

Ega Prasetya — Fri, 25 Sep 2020 10:28:08 +0000

So i have fullstack Javascript Ebook free for you, just to download or clone on my github.

https://github.com/lheartz/FullstackJs-Ebook

Happy Coding!

Realtime Chat App - Golang

Ega Prasetya — Wed, 23 Sep 2020 21:06:50 +0000

So in this chapter, we will to learn how to create chat app with Gorilla web socket, u should to download library with go get -u github.com/gorilla/websocket. So let`s do it.

BACKEND

Create file main.go, we will to create Socket Server first.

Next create 3 struct like this.

Next, create function main() its contents display template view index.html.

Next, create function handleIO()

Last, create function ejectConnection() & broadcastMessage().

FRONTEND

Create file index.html and follow this code

Next, we also to add style css.

And then last add also javascript.

TESTING

Full Source Code in here

Echo Go - Middleware

Ega Prasetya — Thu, 17 Sep 2020 17:39:06 +0000

Middleware is a block code when we call it before or after http request in proccess. Middleware usually made per functions, example: Middleware authentication, logging, and gzip compression, etc.

Custom Middleware

Middleware making in go is very simple, just used method .Use() belong object echo for middleware registrations.

Ok so create new folder project main.go, and follow this code

Next, create two middleware, middlewareOne & middlewareTwo, it displays log.

Registration two middlewares in above, this is example code.

Testing

Finally! Grats.

Echo Go - Template Rendering

Ega Prasetya — Sun, 13 Sep 2020 01:41:44 +0000

Essentially parsing and rendering template proccess is not to handle with echo but handle with API from package html/template. So way render template in echo is same like a real applications used go.

PRACTICE

Ok so to make it easier to understand go to practice right now and create file main.go on your text editor.

First step, we need import package html/template, io, and echo.

Create struct Renderer, this struct have a 3 property and 2 method.

Here`s the assignment and explanation of the third property above.

Property .template accountable for parsing and rendering template.
Property .location direct to path folder when file template stand.
Property .debug relocate type a bool.

Next, create function NewRenderer() for easier inisialitation objek renderer.

Create 2 method for struct Renderer is .ReloadTemplates() and .Render()

Next, create echo router, override property and create a route.

When we call newRenderer() used ./*.html to lead for all html file in current folder. Create index.html

Testing

Finally! Try at home.

Echo Go - Parsing HTTP Request Payload

Ega Prasetya — Fri, 11 Sep 2020 20:36:14 +0000

So in this chapter we will to learn how to parsing variation request payload in echo go, so let`s do it.

In payload HTTP Request can to send various forms. We will to learn how to handle 3 this payload.

Form Data
JSON Payload
XML Payload

Parsing Request Payload

Way parsing request payload in echo is very simple, whatever the type of payload, API used for parsing is same.

So create main.go and follow this code.

TESTING

i use POSTMAN for the testing, u can use CURL or anything.

Form Data

JSON Payload

XML Payload

Finally! Try at home.