반응형

15 Interesting JavaScript and CSS Libraries for February 2017

http://tutorialzine.com/2017/02/15-interesting-javascript-and-css-libraries-for-february-2017/


LocalForage

LocalForage

Wrapper for indexedDB and WebSQL that improves the ability of web apps to store data locally for offline use. Writing and reading is done in a similar fashion to localStorage but many types of data can be saved instead of only strings. The library also provides a dual API, giving developers the choice to use either callbacks or promises.

MJML

MJML

Building responsive emails is still considered the most annoying of web tasks. The MJML framework is aiming to change that by providing simple markup syntax with various stylized components that can be compiled to email-friendly HTML. This way developers don’t have to deal with table layouts, legacy CSS, and in-line styling.

Nachos UI

Nachos UI

Components kit for React Native containing over 30 customizable UI elements. You can find form inputs, loading indicators, a gravatar interface, and much more. The project’s documentation makes it really easy to understand how to implement each component and all the options that come with it.

FitVids

FitVids

A jQuery solution for responsive embedded videos that stick to their original aspect ratio. The plugin is mainly targeted at Vimeo and YouTube videos but allows any custom player to be adapted as well. Really useful and easy to work with.

Bttn.css

Monaco Editor

The editor engine behind Microsoft’s Electron based Visual Studio Code. It has everything you’d expect out of a modern code editor – syntax highlighting for many languages, multiple cursors, keyboard shortcuts, code completion, etc. Just like VSCode, Monaco is open-sourced so it can be used to power any editor project you have in mind.

Rellax

Rellax

Rellax is a mobile-friendly, zero-dependencies parallax library. It is only 1kb in size (gzipped), and in those 1000 bytes contains all that is needed to set up a parallax background effect. The API is based on HTML attributes, so all you have to do is define different speeds for the various elements on the page.

Keen UI

Keen UI

A collection of Material Design inspired Vue.js components. Keen UI is lightweight, Vue 2.1.4 compatible, and has lots of customization options. There are plenty of components and all of them look great.

In last month’s list we shared a similar framework called Vuetify. If you like developing with Vue.js, make sure to check that one out as well.

Muuri

Muuri

Muuri is a JavaScript library for creating awesome interactive grid layouts. It works by grabbing any number of rectangular tiles and placing them on a responsive grid, ordering them in the most space-economic way. These tiles can then be dragged around, sorted, and filtered, every action causing beautiful animated auto-reordering.

Tilt.js

Tilt.js

Tilt.js can take any DOM element and make it “float” in 3D space, allowing it to tilt in all directions when hovered. Options like amount of glare and additional effects can be set via HTML data-attributes or using the provided JavaScript methods. There are separate jQuery and vanilla JS versions.

Accesible Offcanvas

Offcanvas

Really easy to use jQuery plugin for creating off-canvas interfaces such as hamburger navigation menus. It has everything you expect out of a drawer: can be placed on any side of the screen, has smooth built-in CSS animation effects, and can be closed by pressing the Esc key or clicking on the page.

Notyf

Notyf

Super lightweight vanilla JavaScript library for displaying in-page notifications. Although there are many similar libraries, we wanted to share this one with you because of it’s super-clean API, stylish design, and subtle animations.

React Navigation

React Navigation

React Native components library containing different navigators suitable for iOS and Android apps. Right now it includes tabs, drawers, and stack (new screen opens on top of old one), and all three interfaces have different designs depending on which OS is used.

Ungrid

Ungrid

The worlds simplest responsive grid system, Ungrid is only 97 bytes and is composed of just 4 cleverly arranged CSS rules. Although it seems like an experimental project, Ungrid is actually quite flexible and can be used in live projects.

Multi.js

Multi.js

Multi.js offers a user-friendly alternative to the default browser-specific select inputs. The widget takes a select element with the multiple attribute and transforms it into a Bootstrap-inspired interface containing a search bar and scrollable picker. The library can be used with native JavaScript selectors or with jQuery.

Sugar

Sugar

Modular library for working with native JavaScript objects, extending their prototypes, and allowing developers to apply various utility functions directly onto JS variables. Sugar’s methods serve all kinds of purposes, ranging from basic maths to date formatting and type checking.




.

반응형
반응형

MUURIv0.2.0

Responsive, sortable, filterable and draggable grid layoutsMIT licenseBrowser support: IE9+Grab it and grid it!


Site     : https://haltu.github.io/muuri/

Github : https://github.com/haltu/muuri


Responsive, sortable, filterable and draggable grid layouts 



반응형
반응형

10 Tips for Writing JavaScript without jQuery

http://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery/


jQuery없이 JavaScript 작성을위한 10 가지 팁


jQuery는 훌륭한 라이브러리입니다. IE6이 최고의 브라우저였던시기가 다가 왔습니다. 당시에는 해결해야 할 지루한 단점과 차이점이 있었으며 jQuery는 크로스 브라우저 코드를 작성하기위한 완벽한 도구였습니다.

그러나 오늘날 웹 브라우저는 그 당시부터 많은 발전을 이루었습니다. 우리는 ES5 에서 제공하는 모든 기능을 편안하게 사용할 수 있으며, DOM과 함께 작업하는 데 도움이되는 멋진 HTML5 API 를 처리 할 수 있습니다. 개발자는 이제 일부 프로젝트에서 jQuery를 생략하고 생산성을 유지할 수있는 위치에 있습니다.

나쁘게 생각하지 마라. jQuery는 여전히 훌륭한 라이브러리이며, 자주 사용하지 않는 것이 더 좋다. 그러나 제한된 JS 상호 작용, 브라우저 확장 및 모바일 사이트가있는 단순한 페이지와 같은 작은 항목의 경우 vanilla JS를 사용할 수 있습니다. 당신의 노력에 도움이 될 10 가지 요령이 있습니다.




반응형
반응형

상대적이면서도 절대적인 개인취향이 반영된 어떤 개발자의 맥 환경

https://github.com/doortts/env-of-mac






.

반응형
반응형

Tutorial - How to Unhide the AppData Folder (Windows 7 and Vista)

사용자 설정 폴더 appdata 안보이는거 보이게 할 때.



반응형
반응형



cordova 한글 문서 : https://cordova.apache.org/docs/ko/5.4.0/guide/overview/index.html



아파치 코르도바는 오픈 소스 모바일 개발 프레임 워크입니다. 각 모바일 플랫폼의 네이티브 개발 언어를 피하고 크로스 플랫폼 개발을 위한 HTML5, CSS3, 자바 스크립트 등 표준 웹 기술을 사용할 수 있습니다. 응용 프로그램 각 플랫폼을 타겟으로 래퍼 내에서 실행 하 고 표준 API 바인딩을 액세스할 각 장치 센서, 데이터 및 네트워크 상태에 의존.

아파치 코르도바 최상위 프로젝트 아파치 소프트웨어 재단 (ASF) 내에서 2012 년 10 월에에서 졸업 했다. ASF를 통해 미래의 코르도바 개발 프로젝트의 열려 지기를 지킬 것 이다. 그것은 항상 무료 및 오픈 소스 아파치 라이센스 버전 2.0 아래 유지 됩니다. 자세한 내용은 cordova.apache.org 를 방문 하십시오.

만약 당신이 아파치 코르도바를 사용:

  • 모바일 개발자 및 다시 각 플랫폼의 언어와 도구를 구현 하지 않고 하나 이상의 플랫폼에서 응용 프로그램을 확장 하려면 원하는 설정 합니다.

  • 웹 애플 리 케이 션은 다양 한 애플 리 케이 션에 배포 패키지를 배포 하 고 웹 개발자 포털을 저장 합니다.

  • 모바일 개발자는 WebView (특별 한 브라우저 창) 장치 레벨 Api에 액세스할 수 있는 기본 응용 프로그램 구성 요소를 혼합에 관심된 또는 네이티브 및 WebView 구성 요소 간의 인터페이스를 플러그인을 개발 하려는 경우.


********** [APP] Cordova 개발 환경 구축 : http://jchlee.tistory.com/37  *******


.

반응형
반응형

Everything You Should Know About Progressive Web Apps

What is a Progressive Web App

In its core a progressive web app isn’t any different from a normal website – it’s made of HTML, CSS and JavaScript, and lives in the browser. What separates PWAs from regular websites is a list of 10 key concepts that need to be fulfilled. Here they are, taken directly from the Google Developers website.

  1. Safe – Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
  2. Progressive – Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
  3. Responsive – Fit any form factor: desktop, mobile, tablet, or whatever is next.
  4. Connectivity-independent – Enhanced with service workers to work offline or on low quality networks.
  5. App-like – Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.
  6. Fresh – Always up-to-date thanks to the service worker update process.
  7. Discoverable – Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
  8. Re-engageable – Make re-engagement easy through features like push notifications.
  9. Installable – Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
  10. Linkable – Easily share via URL and not require complex installation.


What a Progressive Web App is NOT

The concept of PWAs shouldn’t be confused with:




앞서 언급 한 모든 기술은 HTML 앱을 포장하여 .apk , .exe 또는 기타 다른 앱 파일처럼 실행 파일로 패키지화합니다.이 파일 은 각 앱 스토어에서 다운로드 받아 사용자 기기에 설치해야합니다.

 

PWA는 설치가 필요하지 않으며 Google Play 또는 iTunes App Store에서 사용할 수 없습니다. PWA를 다운로드하려면 웹 사이트를 방문한 다음 홈 화면에 바로 가기로 저장해야합니다. 별도의 iOS 및 Android 버전을 개발하고 유지 관리하는 것은 더 이상 문제가되지 않지만 브라우저 지원을 고려해야합니다.



반응형
반응형

[NodeJS] Realtime Chat with Node.js


http://tutorialzine.com/2014/03/nodejs-private-webchat/


In this tutorial, we are going to build a realtime chat system with Node.js and the socket.io library. The chat permits users to create private chat rooms that they can share with a friend. For avatars, we will use gravatar. You can run the chat locally with node, or push it to heroku or a different cloud service provider.

The code

You can grab the source code from the download button above. It has plenty of comments and is easy to follow. Start with the app.js file and read from there. Here are a few things to look for:

  • All dependencies are declared in the package.json file. They are not included in the zip and you will have to run npm install to get them.
  • We are using separate JavaScript files for the configuration and routes, to make the code more manageable.
  • In the routes file, socket.io stores the username, avatar and room of the person as properties of the socket object itself. This saves us a lot of code and makes managing rooms easy.
  • We use socket.io‘s rooms feature to isolate one chat from another, which is exactly what that feature was developed for.
Enter your name to chat

Enter your name to chat


반응형

+ Recent posts