tutorialrepublic - html5, jquery, bootstrap4

www.tutorialrepublic.com/

 

Tutorial Republic - Online Web Development Tutorials

Learn How to Make a Website Learn the essentials of web development technologies and build your own website. Welcome to Tutorial Republic At tutorialrepublic.com you can learn the essentials of web development technologies from the basic to advanced topic

www.tutorialrepublic.com

HOME HTML5 CSS3 JAVASCRIPT JQUERY BOOTSTRAP4 PHP7 SQL REFERENCES EXAMPLES FAQ SNIPPETS

Posted by 홍반장水 홍반장水
TAG html5

댓글을 달아 주세요

Geolocation API 사용하기

developer.mozilla.org/ko/docs/WebAPI/Using_geolocation

 

Geolocation API 사용하기

Geolocation API는 navigator.geolocation 객체를 통해 사용할 수 있습니다.

developer.mozilla.org

Geolocation API는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있습니다. 이 안내서는 Geolocation API의 기초적 사용법을 설명합니다.

 

Geolocation API navigator.geolocation 객체를 통해 사용할 수 있습니다.

geolocation 객체가 존재하는 경우 위치 정보 서비스를 지원하는 것입니다. 존재 여부는 다음과 같이 알아낼 수 있습니다.

if('geolocation' in navigator) {
  /* 위치정보 사용 가능 */
} else {
  /* 위치정보 사용 불가능 */
}

 

 

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

FileSaver.js

An HTML5 saveAs() FileSaver implementation.

 

https://cdnjs.com/libraries/FileSaver.js

 

cdnjs - The #1 free and open source CDN built to make life easier for developers

Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 10% of websites, powered by Cloudflare. We make it faster and easier to load library files on your websites.

cdnjs.dev

Github : https://github.com/eligrey/FileSaver.js

 

eligrey/FileSaver.js

An HTML5 saveAs() FileSaver implementation. Contribute to eligrey/FileSaver.js development by creating an account on GitHub.

github.com

cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.js

https://github.com/cdnjs/tutorials

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

New @html5showcase Site of the Day: Mahaev Nikita
html5-showcase.com/2018/01/mahaev…
#html5 #css #design

http://html5-showcase.com/2018/01/mahaev-nikita/

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

Rikulo UI: Create cross-platform web and native mobile applications

Rikulo UI is a Dart framework for creating cross-platform web and native mobile applications with HTML5. It uses a structured UI model and offers a responsive UX across desktop & touch devices.

rikulo

Rikulo UI is a cross-platform framework for creating amazing Web and mobile applications in Dart and HTML 5. 

 

EXAMPLE : http://rikulo.org/resource/js/examples/index-angryhead.html

 

 

 

 

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

html5validator: Command line tool to validate HTML5

 

html5validator is a command line tool for validating your HTML5 files. It was written with static site generators in mind.

This package uses the validator.nu backend which is written in Java. Therefore, a Java Runtime Environment must be available on your system. Since version 0.2, Java 8 is required.

Command line tool to validate HTML5 files. Great for continuous integration.

 

 

 

 

 

 

.

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

Comic.js: Cartoon style drawing for HTML5 Canvas and more

 

Comic.js is a JavaScript library that lets you create cartoon-style drawings for HTML5 Canvas, Raphael.js, D3.js, and SVG.js. You can use it either for drawing comic style shapes or for cartoonizing an already existing SVG.

comic.js

Cartoon style drawing for HTML5 Canvas & Raphael.js & D3.js & SVG.js

 

Javascript library that acts as plugin for Raphael.js, D3.js, SVG.js or as lib for the HTML5 Canvas, providing functions for cartoon style drawing.

Provides either methods for drawing comic style shapes (cEllipse, cLine, cRect, ...) or the magic method for cartoonizing an already existing SVG. When using the magic method or drawing on a canvas no further libraries are required.

Examples

Cartoonized D3 examples: D3 Cartoonized!

Cartoon R widget built by Kent Russell using comic.js: R Cartoonized!

Raphael.js, D3.js, SVG.js, Canvas,

using "magic": on images, on drawings

 

 

 

 

 

 

 

.

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

Comic.js: Cartoon style drawing for HTML5 Canvas and more

 

 

Javascript library that acts as plugin for Raphael.js, D3.js, SVG.js or as lib for the HTML5 Canvas, providing functions for cartoon style drawing.

Provides either methods for drawing comic style shapes (cEllipse, cLine, cRect, ...) or the magic method for cartoonizing an already existing SVG. When using the magic method or drawing on a canvas no further libraries are required.

 

screenshot screenshot

 

Examples

 

Cartoonized D3 examples: D3 Cartoonized!

 

Cartoon R widget built by Kent Russell using comic.js: R Cartoonized!

Raphael.js, D3.js, SVG.js, Canvas,

 

using "magic": on images, on drawings

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

A simple HTML5 media player http://plyr.io

 

 

Plyr is a simple HTML5 media player that offers WebVTT captions. It’s lightweight, accessible, and customizable, and works with all modern browsers.

plyr

Checkout the demo.

 

Image of Plyr

Why?

We wanted a lightweight, accessible and customisable media player that just supports modern browsers. Sure, there are many other players out there but we wanted to keep things simple, using the right elements for the job.

Features

  • Accessible - full support for VTT captions and screen readers.
  • Lightweight - just 8KB minified and gzipped.
  • Customisable - make the player look how you want with the markup you want.
  • Semantic - uses the right elements. <input type="range"> for volume and <progress> for progress and well, <button>s for buttons. There's no <span> or <a href="#"> button hacks.
  • Responsive - as you'd expect these days.
  • Audio & Video - support for both formats.
  • Embedded Video - support for YouTube (Vimeo soon).
  • API - toggle playback, volume, seeking, and more.
  • Fullscreen - supports native fullscreen with fallback to "full window" modes.
  • i18n support - support for internationalization of controls.
  • No dependencies - written in vanilla JavaScript, no jQuery required.

Oh and yes, it works with Bootstrap.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.

Posted by 홍반장水 홍반장水

댓글을 달아 주세요

Stitches: HTML5 sprite sheet maker

Stitches is an easy to use HTML5 sprite sheet generator. Just drag and drop images onto the app and it will generate both the sprite sheet and necessary CSS.

stitches

 

HTML5 Sprite Sheet Generator 

 

Stitches

Stitches is an HTML5 sprite sheet generator. The current version is 1.3.5. Documentation is availablehere.

Implementation

After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done:

<link rel="stylesheet" href="css/stitches-1.3.5.min.css">

<script data-main="js/stitches.js" src="js/stitches-1.3.5.min.js"></script>

The sprite sheet generator is automatically created in elements that have the stitches class:

<div class="stitches"></div>

If you choose, any images that are a part of the initial markup will be loaded onto the canvas:

<div class="stitches">
    <img src="img/test/github.png" data-name="github"/>
    <img src="img/test/gmail.png" data-name="gmail"/>
    <img src="img/test/linkedin.png" data-name="linkedin"/>
    <img src="img/test/stackoverflow.png" data-name="stackoverflow"/>
    <img src="img/test/tumblr.png" data-name="tumblr"/>
    <img src="img/test/twitter.png" data-name="twitter"/>
</div>

 

 

 

 

 

 

 

 

 

 

 

 

 

Posted by 홍반장水 홍반장水
TAG html5, Sprite

댓글을 달아 주세요