2018년 10월 18일 목요일

JavaScript - Library (라이브러리 모음) #6



11 Javascript Utility Libraries you Should Know in 2018

11 Useful Javascript utility libraries to speed your development.

As Javascript remains the most popular and widely used programming language in 2018, so grows the ecosystem around it.
Still, Javascript’s small “standard library” is expected to stay this way. To fill the gap, many popular utility libraries have grown on GitHub in the past few years. Here is a short list of useful and highly maintained libraries.
Tip: We use Bit (released to GitHub) to quickly choose and share functions and components from these libraries across our projects, instead of installing entire libraries. It gives us faster development and less code to maintain.
Feel free to give it a try :)

1. Underscore & Lodash (dah)

Most of you probably already know them. Underscore was built to provide utility functions for common tasks in Javascript. Lodash, NPM’s most downloaded and most dependent-upon package, was built to provide more consistent cross-environment iteration support for arrays, strings, objects, and arguments objects. It has since became a superset of Underscore, and both are maintained by the same core contributors. Should definitely be in your stack.
Lodash components made individually available using Bit

2. Ramda

At over 12K stars, this JS utility library is designed for functional programming, making it easy to create functional pipelines that don’t mutate user data. Immutability and side-effect free functions are at the heart of its design philosophy. All functions are automatically curried, and passed parameters are arranged accordingly for ease of use.

3. MathJS

At 6K stars, Math.js is an extensive math library for JavaScript and Node.js, which is compatible with JavaScript’s built-in Math library. The library contains a flexible expression parser, is able to perform symbolic computation, and comes with a large set of built-in functions and constants. You can even extend it yourself.

4. Moment/date-fns

At nearly 40K stars, moment.js is a JavaScript date and time manipulation library for parsing, validating, manipulating, and formatting dates. Moment was designed to work both in the browser and in Node.js. As of v 2.10.0 the code is written in ECMAScript 6 modules.
Date-fns is a growingly popular (11K stars, over half a million weekly NPM installs) time manipulation library for Javascript, chosen by many developers to replace moment.js (see comparison) providing over 130 functions to manipulate dates in the browser and Node.js. Date-fns is built using pure functions and keeps things immutable while not changing passed date instances. It works well with bundlers such as webpack, Browserify, or Rollup and also supports tree-shaking.

5. Sugar

At 3.5K stars, Sugar is a Javascript utility library for working with native objects. Custom builds and modularized npm packages let you use only what you need (can also be combined with Bit), and users can define methods or use plugins to handle specialized use cases. Worth checking out.
sugar.js in action

6. Lazy

At 5K stars, lazy.js is a functional utility library for JavaScript with a lazy engine that “strives to do as little work as possible” while still being flexible enough. The library has no external dependencies, and here’s a live demo of testing DOM events as a sequence. Here are the API docs to get started.

7. CollectJS

At 3.5K stars, collect.js is a very promising and dependency free wrapper for working with arrays and objects in Javascript with dozens of useful functionalities in and API which is (almost) identical to Laravel Collections5.5. The library is actively maintained, and is worth keeping an eye on.

8. ChanceJS

Chance is a minimalist generator of random strings, numbers, etc. to help reduce some monotony, while writing automated tests or anywhere else you need anything random. At only 3K stars, this library is surprisingly useful as we tend to repeat our patterns when asked to generate random things.

9. ChartJS

At nearly 40k stars, chart.js is a great example of how sometimes less is more with 8 different data visualization types, each of them animated and customizable. Chart.js lets you create simple HTML5 Charts using the <canvas> tag, with great rendering performance across all modern browsers. Definitely one of the most useful and elegant libraries on the list.
Polar Area visualization with chart.js

10. Polished

At 3.5K stars, authored by the styled-components team, Polished is a great lightweight toolset for writing styles in JavaScript with Sass-style helper functions and mixins. The library is compatible with styled-components, Aphrodite, Radium, or plain inline styles. This personal favorite is available on GitHub, and all single functionalities were made available in Bit’s community (non-official) so they can be individually installed/imported and used.

11. Mout

Mout.js is a collection of modular JavaScript utilities that can be used in the browser as AMD modules or on node.js, providing helper methods similar to those found on other languages standart libraries (Python, Ruby, PHP etc). mout.js lets you load only the modules/functions you need, and provides a consistent API and normalizes behavior across multiple browsers.

Honorable mentions:

* Bit utils

A collection of JS utility “components” created by the Bit communtiy. Although not highly maintained, it’s still a valuable resource to instantly install/import isolated common functionalities. You can also create your own collection to get rid of duplicates across your own codebase. Take a look.
Bit utils

* Voca

A Javascript library for string manipulations. It includes helpful functions such as change case, trim, pad, slugify, latinise, sprintf’y, truncate, escape and more. You can load individual functions to minimize the application builds. The library comes with a high-test coverage and has no dependancies.

* Licia

Only at 400 stars, this interesting project is basically a simple collection of useful JavaScript snippets with high docs and test coverage. v 2.0 pre-release in on master, and is actively maintained and developed.





출처 : https://blog.bitsrc.io/11-javascript-utility-libraries-you-should-know-in-2018-3646fb31ade






JavaScript - Library (라이브러리 모음) #5




33 JavaScript libraries and frameworks to check out in 2018

JavaScript frameworks and libraries are incredibly useful tools for any designer or developer to be familiar with. They can add some super powerful functionality to your site or spruce up the design, resulting in a better experience for your users. And we all know how important that is! So shout out to the designers and developers who created all these tools to help others do their best work, too.
While there are an endless number of resources out there, I think these 33 JavaScript libraries and frameworks are sure to take your site to the next level in 2018. Use these links to jump each category:

THE BEST JAVASCRIPT FRAMEWORKS IN 2018:

AURELIA

layout by flywheel javascript frameworks libraries 2018 aurelia
If you’re interested in front-end app development, you’re going to love this framework. Aurelia was designed for web, mobile, and desktop development. It’s built from various JavaScript modules that can help you design and build beautiful apps with ease. Learn all about Aurelia here.

ANGULAR

layout by flywheel javascript frameworks libraries 2018 angular
Yet another application-developer favorite, Angular is built to streamline your workflow. Especially if you’re working for cross-platform purposes (and who isn’t nowadays?) you’ll love how fast and scalable this JavaScript framework is. Get started with Angular for your next project.

EMBER

layout by flywheel javascript frameworks libraries 2018 ember
Ember is “a framework for creating ambitious web applications.” You’ll be amazed at the extensive list of users, and if that alone doesn’t convince you, maybe their adorable mascot will. Either way, it’s a brilliant framework built with developers in mind.
Make your WordPress site even more dynamic by adding jQuery. Here’s the quick tutorial to get you started!

MOCHA

layout by flywheel best javascript libraries frameworks 2018 mocha
This JavaScript framework runs on Node.js and the browser to bring you the ability for fun and simple testing. Mocha runs tests serially, allowing you to easily track and report what’s going on. It’s sure to be a great addition to any developer’s process. Check it out.

VUE.JS

layout by flywheel best javascript libraries frameworks 2018 vue
This progressive JavaScript framework is key for building excellent user interfaces, and if you’re already familiar with HTML, CSS, and JavaScript, you’ll be able to start building things in no time! The core library is focused on the view layer, so it’s great for pairing with other libraries and projects, or simply powering single-page applications. Check it out.

WEBIX

layout by flywheel best javascript libraries frameworks 2018 webix
Thanks to Webix, an easy-to-use JavaScript framework, you can build a rich UI with just a few lines of code. It’s got great documentation (making it easy to learn) and thanks to a lightweight size, it’s always fast and won’t slow things down. Check it out.

THE BEST JAVASCRIPT LIBRARIES IN 2018:

ALGOLIA PLACES

layout by flywheel best javascript libraries frameworks 2018 angolia places
Algolia Places is a JavaScript library that will help you autocomplete forms, and it specializes in addresses. You can even add a map to the search and display the location, which is incredibly useful. It’s wonderfully accurate and super fast, which will definitely increase the user experience on your site. Check it out.

ANIME.JS

layout by flywheel best javascript libraries frameworks 2018 anime
Animation and microinteractions are all the rage these days, and anime.js is a flexible JavaScript library that can help you add some dashes of motion to your site. It works with CSS, Individual Transforms, SVG, DOM attributes, and JavaScript Objects, making it super versatile and perfect for almost any project. Check it out.

AOS – ANIMATE ON SCROLL

layout by flywheel best javascript libraries frameworks 2018 AOS animate on scroll
Working on a one-page parallax site? The Animate on Scroll JavaScript library can help you add some sweet animations as a user scrolls down the page. From fade effects to static anchor placements, this library will help you create a delightful site design that keeps users engaged. Check it out.

BIDEO.JS

layout by flywheel best javascript libraries frameworks 2018 bideo.js
Full-screen videos make for excellent site backgrounds, and that’s exactly what Bideo.js is for. This JavaScript library makes it super easy to add a video background that looks good on every screen size and scales super smoothly. Check out their site to see a great example of how it works and to test how it scales with your window size.
Get ready to visualize your data. Make your data perfect and pretty Learn how to use the WordPress Visualizer Charts and Graphs plugin.

CHART.JS

layout by flywheel best javascript libraries frameworks 2018 chart.js
Chart.js is a delightful JavaScript library for designers and developers to add beautiful charts to a site. It offers lots of different types of charts, plus the ability to mix them in a single space to provide a really interesting data set. It also has some animation capabilities, which instantly makes data a lot more fun to consume.

CHOREOGRAPHER-JS

layout by flywheel best javascript libraries frameworks 2018 choreographer.js
Choreographer-js is a simple JavaScript library for animating CSS. It’s easy to use, but it can really help you achieve some cool and complex CSS animations on your site. Check out the site for a colorful example and to learn how to get started.

CLEAVE.JS

layout by flywheel best javascript libraries frameworks 2018 cleave.js
Have you ever used a form field that formatted your content while you were typing? Think of a phone number field, transforming your 1234567890 into (123) 456-7890. Cleave.js is a JavaScript library that can add that same functionality to your site. It a super simple concept, but it makes for a wonderful user experience, and consistent data when you receive form submissions. Check it out.

D3.JS

layout by flywheel best javascript libraries frameworks 2018 d3.js
If you’re the type of person who just loves data, this JavaScript library was made for you. D3.js manipulates documents based on their content, and then will help you bring that data to life by using HTML, SVG, and CSS. For example, you can generate HTML tables or create interactive SVG charts. If you’re looking to display some data on your site, this is the way to do it. Learn how to use it with our tutorial here.

GLIMMER

layout by flywheel best javascript libraries frameworks 2018 glimmer
Glimmer is a great library that helps with UI components and DOM rendering. It’s built using Ember CLI and uses Git, Node.js, npm, and Yarn. So if you’re looking for a tool to generate components and helpers, help with project layouts, and streamline your process, check out Glimmer.

GRANIM.JS

layout by flywheel best javascript libraries frameworks 2018 granim.js
Brighten up your site with a colorful background gradient with the help of Granim.js. This small JavaScript library is perfect for adding fluid and interactive gradients. They can stand alone, cover an image, live under an image mask, basically anything you can dream up! Check it out.

MULTIPLE.JS

layout by flywheel best javascript libraries frameworks 2018 multiple.js
If you’re playing around with creating interesting background visuals, you should definitely check out Multiple.js. It allows you to share a background image across multiple elements using CSS, which creates a really interesting visual effect. There’s a great example on the site that gives you a glimpse of some possibilities and how it works. Check it out!

OMNISCIENT

layout by flywheel best javascript libraries frameworks 2018 omniscient
Omniscient is another super practical plugin that will make your developer life much, much easier. It’s a JavaScript library, but it’s also a way to think about building projects. Think of an Omniscient component as a stateless React component, but a little more optimized and with a few more options. Check it out.

PARSLEY

layout by flywheel best javascript libraries frameworks 2018 parsley
If your next project incorporates forms, Parsley is here to help. This JavaScript library focuses on form validation and your users will love it! It also works wonderfully with Garlic, the JavaScript library that keeps form fields’ data until submitted. Parsley might just be the perfect garnish for creating your next website!

POPPER.JS

layout by flywheel best javascript libraries frameworks 2018 popper.js
This JavaScript library will help you create delightful poppers on your site. If you’re wondering what a popper is, think of it like a little thought bubble bursting from an element. Popper.js gives you some fantastic ways to arrange them, make them stick to elements, and keep them operating smoothly on any screen size. Check it out.

PREMONISH

layout by flywheel best javascript libraries frameworks 2018 premonish
Last but not least, Premonish is a JavaScript library that predicts what element a user will interact with next, based on mouse movement. This allows for some really interesting animation triggers, and can definitely help your CTAs stand out. Check it out.
Now that you’ve discovered the best JavaScript libraries and frameworks, it’s time to learn how to load Javascript in WordPress!

REACTJS

layout by flywheel best javascript libraries frameworks 2018 reactjs
You’ve probably heard of this JavaScript library, but it’s just too good not to mention! React is meant to help build user interfaces. We all know what a big impact an interface is with customer experience, so there’s no better time to get started with React than now!

SLICK

layout by flywheel best javascript libraries frameworks 2018 slick
Slick is here to solve all of your carousel needs. It’s fully responsive, has tons of options, works with swipe gestures for mobile devices, and so much more. You can even sync two different carousels if you want, to create a stacked effect. Check out the site for some examples.

TAFFYDB

layout by flywheel best javascript libraries frameworks 2018 taffyDB
If you’re working with data within JavaScript, you’ll love the feel of TaffyDB. This library bring database-like functionality to your JavaScript. Especially on data-heavy sites, TaffyDB will be your new lifesaver, so give it a try here.

TWEENJS

layout by flywheel best javascript libraries frameworks 2018 tween.js
This simple JavaScript library is incredibly powerful for tweening and animating HTML5 and JavaScript, and can help you add some really fun interactions to your site. (Seriously, go click around the demos page – it’s addicting.) It’s part of the CreateJS suite, which offers even more nifty JavaScript tools that you can use on your site. Check it out.

THREE.JS

layout by flywheel best javascript libraries frameworks 2018 three
For anyone interested in 3D design, Three.js is a really fun JavaScript library to play around with. It can help you create some really incredible projects and bring your designs to life. Remember that awesome Paper Planes site where you could throw paper airplanes with your phone? Three.js helped bring that to life. To see more awesome projects (or start creating some yourself) go here!

VOCA

layout by flywheel best javascript libraries frameworks 2018 voca
Working with strings in JavaScript can really be a pain sometimes, but the Voca JavaScript library can help you easily manipulate them to simplify things. It offers helpful functions like change case, trim, truncate, and so much more. Plus it was built with a modular design, giving you the freedom to load the entire library or just individual functions. Check it out.

OTHER JAVASCRIPT TOOLS AND PLUGINS FOR 2018:

BABEL

layout by flywheel best javascript libraries frameworks 2018 babel
Ready to start using the next generation of JavaScript? Look no further than Babel, a simple JavaScript compiler. It has support for the latest version of JavaScript thanks to syntax transformers, which allows you to use it without waiting for browser support to catch up. Nifty, right? Go check it out.

ESLINT

layout by flywheel best javascript libraries frameworks 2018 eslint
Catch bugs in your code with this pluggable linting utility specifically built for JavaScript and JSX. This is a great resource for catching syntax errors and style issues in the command line, so save yourself some time and trouble. You can learn more and try it for yourself here.

IZIMODAL

layout by flywheel best javascript libraries frameworks 2018 izimodal
When you need to notify your users of something or ask for some information, sometimes the best solution is with a pop-up modal. And thanks to iziModal, a lightweight jQuery plugin, it’s super easy to throw one up on your site. With several different modal types and lots of customizations, this flexible plugin is a great solution. Check it out.

METEOR

layout by flywheel best javascript libraries frameworks 2018 meteor
When you’re working with JavaScript, Meteor is that fastest way to build out projects. Thanks to an integrated JavaScript stack, you can do more with less code, saving you lots of time and coding energy. It integrates well with other JavaScript frameworks and tools, plus it works great for desktop and mobile devices. Check it out.

SHAVE

layout by flywheel best javascript libraries frameworks 2018 shave
This JavaScript plugin will help you truncate text right inside an HTML element. Using a set max-height, Shave truncates the remaining text to make it fit within the element. The best part, however, is that it stores the extra text in a hidden <span> element, meaning you don’t lose the original text. It’s a game-changer. Go check it out.

WEBPACK

layout by flywheel best javascript libraries frameworks 2018 webpack
If you’re looking for a super slick way to bundle up your application’s dependencies, look no further than Webpack. This module bundler for modern JavaScript applications will take your assets and bundle them up in a simplified way, keeping your code clean and load on your browser minimal. Check it out!
Now that you’ve discovered some of my favorite JavaScript tools for 2018, which are you going to start using?  What are some of your favorite JavaScript libraries and frameworks? Let me know in the comments below!


출처 : https://getflywheel.com/layout/javascript-libraries-frameworks-2018/




javascript - SQL 예약어 제거

  <script language="javascript"> //특수문자, 특정문자열(sql예약어) 제거 function checkSearchedWord(obj){ obj.value = obj.value+&quo...