Forem: HyunSun

Top JavaScript Libraries and Frameworks: A Comprehensive Guide 🌈

HyunSun — Thu, 30 Mar 2023 02:14:54 +0000

JavaScript is a versatile and powerful language for web development. Many libraries and frameworks have been created to enhance web development.

In this post, we'll explore popular JavaScript tools for various purposes. This comprehensive list will help you find the right tools for your next project, whether you're a beginner or an experienced developer.

Date and Time

Name	Description	Install
Day.js	A lightweight and easy-to-use library for parsing, formatting, and manipulating dates and times in JavaScript. It's similar to Moment.js but has a smaller footprint.	npm install dayjs
Date FNS	A modern JavaScript date utility library with a simple and functional API for manipulating, formatting, and parsing dates.	npm install date-fns
Luxon	A powerful library for working with dates and times, built by the team behind Moment.js. It offers a modern API and support for time zones and internationalization.	npm install luxon

Sorting and Filtering

Name	Description	Install
Sortable.js	A lightweight and dependency-free library for creating sortable, draggable lists with a native HTML5 drag-and-drop API.	npm install sortablejs
Isotope	A library for creating dynamic, filterable, and sortable layouts for elements in a grid. It's particularly useful for creating responsive and interactive galleries or portfolios.	npm install isotope-layout

Calendars and Scheduling

Name	Description	Install
FullCalendar	A powerful and flexible library for creating interactive calendars with event handling, drag-and-drop support, and various view modes.	npm install fullcalendar
Tui Calendar	A full-featured calendar library that provides various view modes, custom events, and drag-and-drop support.	npm install tui-calendar

Animation

Name	Description	Install
Three.js	A library for creating and displaying 3D graphics in the browser using WebGL. It simplifies the WebGL API, making it easier to create 3D scenes.	npm install three
GSAP	The GreenSock Animation Platform is a powerful and high-performance library for creating animations in JavaScript. It offers a simple API for animating CSS properties, SVG, and more.	npm install gsap
Anime.js	A lightweight JavaScript animation library with a simple and flexible API, allowing you to create complex animations for various use cases, including CSS, SVG, and DOM attributes.	npm install animejs
PixiJS	A fast and lightweight 2D rendering engine for creating interactive graphics and animations on the web.	npm install pixi.js

Carousel

Name	Description	Install
Swiper	Swiper is a popular and powerful JavaScript library for creating mobile-friendly touch slider and carousel components.	npm install swiper
Owl Carousel 2	Owl Carousel 2 is a feature-rich, touch-enabled jQuery plugin that lets you create responsive, customizable carousels with a variety of options and effects. It offers various built-in features, such as autoplay, loop, lazy load, navigation, and more.	npm install owl.carousel
Slick Carousel	Slick is a fully responsive, touch-enabled, and highly customizable jQuery carousel plugin. It provides features like infinite looping, autoplay, lazy loading, swipe-to-slide, and more. With its extensive list of options and methods, Slick Carousel is a versatile choice for creating modern and interactive carousels on your website.	npm install slick-carousel

Charts and Data Visualization

Name	Description	Install
D3.js	A powerful and flexible library for creating data visualizations in the browser. It provides a wide range of chart types, including bar, line, pie, and more, as well as tools for working with data and creating custom visualizations.	npm install d3
Chart.js	A simple yet flexible library for creating responsive and interactive charts in JavaScript. It supports various chart types, including bar, line, pie, and more.	npm install chart.js
Highcharts	A feature-rich charting library for creating interactive charts with a wide range of chart types, including line, spline, area, column, pie, and more.	npm install highcharts

Drag-and-Drop

Name	Description	Install
Draggable	A lightweight and accessible drag-and-drop library developed by Shopify that provides a simple API for creating draggable interfaces, including support for touch devices and keyboard interactions.	npm install @shopify/draggable
interact.js	A powerful library for handling drag-and-drop, resizing, and multi-touch gestures in the browser. It's highly configurable and works with various input types, including touch, mouse, and pen.	npm install interactjs
Sortable.js	is a lightweight and dependency-free library for creating sortable, draggable lists with a native HTML5 drag-and-drop API.	npm install sortablejs

User Interface

Name	Description	Install
SweetAlert2	A beautiful, responsive, customizable, and accessible replacement for JavaScript's popup boxes, including alerts, prompts, and confirmations.	npm install sweetalert2
Select2	A library that enhances the functionality of native HTML select elements, adding features like search, pagination, and customization.	npm install select2

Form Validation

Name	Description	Install
Parsley.js	A lightweight and easy-to-use library for form validation, offering a wide range of built-in validators, as well as support for custom validation functions.	npm install parsleyjs
VeeValidate	A template-based validation library for Vue.js that simplifies form validation by offering a set of built-in rules and an easy way to create custom validation rules.	npm install vee-validate

Utility Libraries

Name	Description	Install
Lodash	A popular and widely used utility library for working with arrays, objects, and other data types in JavaScript.	npm install lodash
Underscore.js	A utility library that provides a wide range of functional programming helpers, as well as utility functions for working with arrays, objects, and strings.	npm install underscore
Ramda	A functional programming library for JavaScript that emphasizes immutability and data transformations. It provides a wide range of functions for working with arrays, objects, and functions.	npm install ramda

UI Frameworks

Name	Description	Install
Sass	Sass is a powerful and popular preprocessor for CSS that extends the capabilities of traditional CSS by adding features like variables, nesting, functions, and more. It makes it easier to write and manage complex stylesheets, improving productivity and maintainability.	You need to install a Sass compiler like node-sass or sass using npm install node-sass or npm install sass.
Bootstrap	A popular and widely used CSS framework for building responsive, mobile-first websites and web applications. It provides a wide range of pre-built components and utilities for rapid development.	npm install bootstrap
Materialize	A modern responsive front-end framework based on Material Design principles, providing a wide range of UI components and features for building beautiful and functional web apps.	npm install materialize-css
Tailwind CSS	A utility-first CSS framework that provides a set of pre-defined CSS classes for quickly building custom user interfaces. It's highly customizable and optimized for rapid prototyping and development.	npm install tailwindcss

Form Validation Libraries

Name	Description	Install
Validate.js	A lightweight JavaScript form validation library that provides a simple way to validate form fields. It supports a wide range of validation rules and is easy to set up and customize.	npm install validate.js
Parsley.js	A powerful and user-friendly form validation library that provides real-time validation and error messages. It supports a wide range of validation rules and has a flexible API for custom validations.	npm install parsleyjs
FormValidation	A comprehensive form validation library that provides a simple way to validate form fields and integrates with popular front-end frameworks. It supports a wide range of validation rules and provides a user-friendly interface for custom validations.	npm install formvalidation

State Management

Name	Description	Install
Redux	A predictable state container for JavaScript apps, providing a centralized store and a set of rules for managing state changes. It's widely used in complex web applications and provides various integrations with popular front-end frameworks.	npm install redux
MobX	A reactive state management library that makes it simple to manage complex state in your application. It uses reactive programming to automatically update the state based on changes to the data.	npm install mobx

Testing Frameworks

Name	Description	Install
Jest	A popular and widely used JavaScript testing framework developed by Facebook, providing a simple and intuitive API for testing various aspects of your application, including unit tests, snapshot testing, and more.	npm install jest
Mocha	A flexible and feature-rich testing framework for JavaScript, providing support for various testing styles, such as BDD, TDD, and more. It's highly customizable and provides a wide range of plugins and integrations for testing various aspects of your application.	npm install mocha
Cypress	A next-generation end-to-end testing framework for the web, providing an all-in-one solution for testing web applications. It allows you to write and run tests in the browser, providing a real-time view of your application's behavior.	npm install cypress

Must-Have Websites for Every Frontend Web Developer

HyunSun — Sun, 05 Feb 2023 07:23:16 +0000

12 Essential Websites for Frontend Web Development

Frontend web development can be a challenging task, but it doesn't have to be. In this article, we'll introduce you to 12 essential websites that will make your frontend web development journey easier, faster, and more fun.

1. Codepen

Codepen is a social development environment for frontend developers that allows them to experiment with HTML, CSS, and JavaScript. This platform enables developers to collaborate with one another and share their work with the world. The website provides a unique way for developers to test their code snippets in real-time and see the results instantly.

2. CSS Background Patterns

CSS Background Patterns is a website that allows you to generate beautiful Pure CSS background patterns for your websites. Add a touch of creativity to your website's background with this easy-to-use tool.

3. CSS Gradient

CSS Gradient is a free tool that lets you generate gradient backgrounds for your websites. In addition to being a CSS gradient generator, the site is also full of colorful content about gradients.

4. CSS Layout Generator

CSS Layout Generator allows you to create beautiful layouts for your websites within seconds. Say goodbye to complicated CSS grid and flexbox issues and start creating stunning layouts today.

5. Unsplash

Unsplash A must-have for designers! Get access to a vast collection of high-quality, free stock photos to add creativity to your projects. With easy navigation and categorization, finding the perfect image for your website or logo is a breeze!

6. Font Awesome

Unleash your inner designer with Font Awesome, a library of scalable vector icons that you can customize to your heart's desire. Play around with the size, color, drop shadow and more to make your website truly stand out.

7. Google Fonts

Google Fonts is the ultimate tool for giving your website a unique and stylish font. With a library of free, open-source fonts, you can easily integrate CSS and add a touch of personality to your website. Say goodbye to boring fonts and hello to a world of endless possibilities!

8. Readme.so

Keep your project's readme organized and attractive with Readme.so. The simple editor allows you to quickly add and customize all the sections you need for your project's readme.

9. CanIUse

CanIUse is the easiest way to know which property to use or not. This website provides a simple and straightforward guide to HTML elements and helps you understand everything about links, meta, and other tags.

10. HTML Head

HTML Head is a simple guide to HTML elements. Know everything about how to use links, meta, and other tags within seconds with this comprehensive guide.

11. Responsively App

Responsively App is a website that allows you to develop responsive web apps 5x faster! With this website, you can create beautiful and responsive web apps in no time.

12. Browser Frames

Browser Frames is the easiest way to wrap screenshots in browser frames. Supports multiple browsers, operating systems, and themes, making it the perfect tool for frontend web developers.

These 12 essential websites will make your frontend web development journey smoother, faster, and more enjoyable. Whether you need a tool for creating stunning CSS gradients, organizing your project's readme, or wrapping screenshots in browser frames, these websites have got you covered. Happy coding!

Making Your First Open Source Contribution: A Beginner-Friendly Guide

HyunSun — Sun, 15 Jan 2023 03:59:35 +0000

First time Practice Contributions!

Visit This Link to get Started for this Contribution!

Introduction

Welcome to a beginner-friendly GitHub repository. A great place to start for a first practice contribution!

This repo is designed for first-time contributors to get familiar with the process of forking a repo, cloning it to their local machine, making changes, and submitting a pull request.

I've included some simple tasks for you to complete, along with step-by-step instructions on how to submit your changes.

Whether you're new to programming or just new to open source contributions, this is the perfect place to get started. So, fork the repo, clone it, and let's get started!

Objectives

Provide an introduction and overview of the repository for first-time contributors.
Explain the process of forking a repo, cloning it to a local machine, making changes and submitting a pull request.
Include simple tasks for contributors to complete with step-by-step instructions on how to submit changes.
Encourage contributors to fork and clone the repo and get started with making contributions.

Fork this repo

Step 1

Click on the "Fork" drop down button located in the top right corner of the page.
Click on the "+ Create a new fork*

Step 2

Click on "Create fork"
Once the repository has been forked, you will be taken to the forked repository's page.
This will be a copy of the original repository, but it will be under your account.

Clone this repo

First, lets click on the "Code" drop down button, click on "SSH" then click the "Copy Icon"
Then, let's go to our local machine, open the terminal, and create a new directory to put our newly cloned repo in and name it "contribute-practice"

mkdir contribute-practice

and cd into the directory

cd contribute-practice

Clone the forked repository to your local machine by typing git clone followed by the SSH link that you copied.

git clone copyoftheurlssh

Create a branch

Now let's create a new branch through the terminal using the git switch BranchName.

Replace BranchName with the name of the new branch you want to create.

For example:

git switch -c HyunCafe

Contribution time!

Open the contributing.md file, you can use a text editor of your choice, for example, nano contributing.md or vi contributing.md I personally use vs code, so I would type:

code .

Follow the directions under the contributing.md and now lets commit your changes!
Remember the order for git best practices!

git status >> git add (files changed) >> git commit -m "insert short description of changes made" >> git push

type:

git status

now you can see the files that were changed, now add them

git add (files changed)

now lets commit our changes with a short description

git commit -m "Add: Added my name to list, My first contribution!"

Push the changes to your forked repository on GitHub using the command git push origin BranchName, where BranchName is the name of the branch you are working on.

git push -u origin BranchName

Making a Pull Request

Step 1

Go to your forked repository on GitHub, click on "contribute" drop down, and click on "Open pull request"

Step 2

Fill in the title and description of the pull request to explain the changes you made!
After filling out the details, click the "Create pull request" button to submit your request for review.

Great job! All done! Wasn't so bad was it?

Congratulations on completing the typical fork, clone, make changes, and pull request workflow commonly used by contributors. Keep up the good work and continue contributing!
I will get around to merging the request when I can, I am usually good about it!