hakimel / ladda Goto Github PK
View Code? Open in Web Editor NEWButtons with built-in loading indicators.
Home Page: http://lab.hakim.se/ladda/
License: MIT License
Buttons with built-in loading indicators.
Home Page: http://lab.hakim.se/ladda/
License: MIT License
I am wondering whether Ladda v2.0+ only support Typescript?
Or javascript and jquery are also supported?
Ladda is awesome, thanks for this tool. You should add to the README that if we bind Ladda to submit button it has no effect until the form is valid.
Something like this:
"dependencies": {
"spin": "~1.3.0"
},
"volo": {
"url": "https://raw.github.com/hakimel/Ladda/{version}/js/ladda.js",
"dependencies": {
"spin": "fgnass/spin.js/~1.3"
}
},
The readme should specify the order of inclusion to avoid this error.
going to do a pull request.
I've tryed this on latest chrome, firefox and safari.
Didn't try IE
Would be nice to see a small section that says where it works.
I'm tyring to download Ladda for inclusing in my .NET Core project. Where actually is the "Dist" folder the docs refer to? I can't seem to find the CSS file.
EDIT: It seems ladda only works if you're using Node. Is there any way to use it without the Node.js requirement?
Very interesting and amazing concept. Would be perfect if add a method of success (at the end of progress show successful label or icon) before back for the initial button label.
I want to use Ladda in my project but I can not get it running. When using npm package and importing with webpack, there is no global namespace Ladda after running webpack. Tried to transpile it in own package with OutputLibrary option, but still no success.
I would be very happy if there was a pre-transpiled and minimize ladda.min.js with all needed dependencies and an ladda.min.css which can be used out-of-the-box.
Not everyone is using webpack or similiar and even when using webpack it is not straight forward to use :-(
I've noticed you didn't create a tag for 0.3.0 and 0.4.0 😉
How can I install on .Net core? I see ladda in Nuget but when I install it, I cant find /dist or spin.js anywhere.
Thanks
By relying on spin.js, ladda is also not compliant with strict CSP (Content Security Policy). See: fgnass/spin.js#115
inst.
// Create a new instance of ladda for the specified button var l = Ladda.create(document.querySelector('.my-button')); // Start loading l.start(); // Will display a progress bar for 50% of the button width l.setProgress(0.5); // Stop loading l.stop(); // Toggle between loading/not loading states l.toggle(); // Check the current state l.isLoading(); // Delete the button's ladda instance l.remove();
The issue is that I can see the spinner when I do this:
var l = Ladda.create(document.querySelector('.ladda-button')); l.start();
but it doesn't spin at all. Tried to remove all CSS to rule out CSS conflicts.
Using Laravel.
Doh
Very cool idea. I do very like it.
Hope class ladda-button can be removed, then it will be more generic. And can be easily used in other UI framework.
StopAll should only stop buttons that are loading.
Otherwise, buttons disabled for other reasons become enabled.
I see messages like the below when using ladda in an Angular 12 application with Dart Sass:
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($spinnerSize, -2)
More info and automated migrator: https://sass-lang.com/d/slash-div
╷
116 │ right: $spinnerSize/-2 + 10;
│ ^^^^^^^^^^^^^^^
╵
node_modules\ladda\css\ladda.scss
Could we follow their recommendation and use math.div() instead?
Hello,
I'm using Ladda 1.0.6 inside forms, but it seems that form validation is not taken into account.
If there are only input text, it's ok, Ladda won't launch until the form is valid, but if there's selects, radio button or anything else Ladda will trigger even if the form is not valid.
Note : I can have multiple forms on the page. I bind the buttons with :
Ladda.bind( 'button[type=submit]' );
My forms do not have the novalidate attribute.
Thanks.
<html>
<body>
<form method="post" action="index.php" novalidate>
<input required data-parsley-length="[11,11]" data-parsley-type="number" type="text" id="cacel" name="cacel" class="form-control" placeholder="please cacel entery" value="">
<button type="submit" class="ladda-button btn btn-sm btn-blue" data-style="zoom-in"><i class="mdi mdi-content-save"></i> Save</button>
</form>
<script src="jquery.js"></script>
<script src="parsley.min.js"></script>
<!-- Loading buttons js -->
<script src="assets/libs/ladda-buttons/js/spin.min.js"></script>
<script src="assets/libs/ladda-buttons/js/ladda.min.js"></script>
<script src="assets/libs/ladda-buttons/js/ladda.jquery.min.js"></script>
</body>
</html>
parsley chopping does not occur.
But he's still running on the ladda.
ladda should not work.
When using the jquery version of your script, isLoading
returns the button object instead of a boolean loading state value. The normal javascript version works just fine.
Reproduce with:
// Create a new instance of ladda for the specified button
var l = $( '.my-button' ).ladda();
// Check the current state
l.ladda( 'isLoading' );
So, I'm using https://github.com/sachinchoolur/ladda-angular on my project, for button directive with ladda, I'm opening this issue here, because this repo doesn't has a commit for some time.
My problem is that when I use Ladda in a button within a modal, the modal blinks in a strange way.
And without Ladda it just don't blink.
So my question is, can I resolve this by updating Ladda in the ladda-angular project ?
Amazing library. Silly question, can style be defined during bind? I have a ton of buttons and I want them all styled the same way. So I am trying to define style during bind and it doesn't seem to work, it seems to default still to expand-right.
Ladda.bind('button.ladda-button', {timeout: 2000, style: "zoom-in"});
If style during bind doesn't work, then this is an enhancement request.
Thanks!
I moved minified spin.js section its own file along with ladda.js in a same directory. Used RequireJS, backbone and bootstrap with ladda, however encounter above error.
RequireJS and shim'ed ladda:
require.config ({
paths: {
//jquery, underscore, backbone here
spin : 'libs/ladda/spin',
ladda: 'libs/ladda/ladda'
},
shim: {
ladda: {
deps: ['spin'],
exports: 'Ladda'
}
}
});
In backbone view:
define([
'jquery',
'underscore',
'backbone',
'bootstrap',
'spin',
'ladda',
], function($, _, Backbone, Bootstrap, Spinner, ladda){
render: function () {
//templating
console.log ('Spinner: ' + typeof Spinner);
Ladda.create ($('button'));
}
});
I could see typeof Spinner
has got function being loaded.
How do I make Spinner visible to Ladda.create ()? Appreciate any advice render. Thank you.
Version - 1.0.4 from npm
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="node_modules/ladda/dist/ladda.min.js"></script>
<script src="node_modules/ladda/dist/spin.min.js"></script>
<link rel="stylesheet" href="node_modules/ladda/dist/ladda-themeless.min.css">
</head>
<body>
<button class="ladda-button" data-style="expand-right"><span class="ladda-label">Submit</span></button>
</body>
</html>
All assets are loaded, I see button and it does not display any spinner on click:
What am I doing wrong?
You can check and in your examples. If you set for the example padding: 14px 18px;
to the expand-right
it will be broken.
Greets team Ladda. It's mentioned in the README.md that it’s "recommended to use a bundler such as Rollup, Parcel, or Webpack to create a production-ready code bundle."
For someone that's:
... hitting a dead end like that stunk — just not as much as the thought of diving back down the webpack docs hole.
To help future Ladda users that find themselves in a similar situation — wanting to use the latest version instead of an outdated fork, and being stuck (for now) under an aging LAMP — I dropped in (thread jacked ... long story) a HOWTO over here.
The important bits are:
rollup --name Ladda --globals spin.js:Spin --input ladda.js --format iife --file ladda.iife.js
rollup --silent --name Spin --input spin.js --format umd --file spin.umd.js
... And you're done! The rest of the documented Ladda magic works great!
Would you guys be willing to drop a bundler example, like the two rollup cli lines above, into the README.md? ... Or would you accept a PR?
Look on the bright side, with any luck we won’t need bundlers soon!?
Thanks for considering this guys.
-Dan
I have tried to import Ladda into Electron app with Vue and webpack. I have got this error message.
Uncaught SyntaxError: Unexpected token import
at createScript (vm.js:80)
at Object.runInThisContext (vm.js:139)
at Module._compile (module.js:606)
at Object.Module._extensions..js (module.js:653)
at Module.load (module.js:561)
at tryModuleLoad (module.js:504)
at Function.Module._load (module.js:496)
at Module.require (module.js:586)
at require (internal/module.js:11)
at eval (external "ladda"?71f1:1)
How to fix this bug
Using Safari 11.0.1 / macOS High Sierra
I've been having issues with Ladda lately in Safari, so I created the following page to test, keeping it as simple as possible. Ladda does not work; no spinner...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.5/ladda.min.css" rel="stylesheet">
</head>
<body>
<form method="POST">
<button type="submit" class="ladda-button" data-style="zoom-in">
Submit
</button>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.5/spin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.5/ladda.min.js"></script>
<script>
Ladda.bind( 'button[type=submit]', { timeout: 2000 } );
</script>
</body>
</html>
I tried the following Javascript too with the same result: no spinner
$('form').submit(function (e) {
var l = Ladda.create(document.querySelector('.ladda-button'));
l.start();
});
import * as Ladda from 'ladda';
how can i import ladda in electron app ?
See headline :)
ladda.min.js
has
require("spin.js")
but dist/
includes spin.min.js
, not spin.js
. For use with Webpacker, this requires adding an alias:
alias: {
spin: resolve('node_modules/ladda/dist/spin.min.js'
}
Can't find the dist folder in the zip downloaded from releases
Bower install angular-ladda is listing ladda as a dependency, but after downloading it it's not given the dist folder for ladda. Any ideas?
FYI ...
If I have the following code in button click handler the button "disabled" property will be set to true. In that case Chrome will no longer submit the form.
ButtonClickHandler(evt){
this.$ladda = Ladda.create(evt.target);
this.$ladda.start();
}
In my case re-enabling the button, and then putting code for disabling the button into the form.submit handler worked the best.
I use the bind method :
Ladda.bind('button[type=submit]');
and the ladda button is not working if the form has the novalidate attribute, even if the form is actually validated.
Is it a bug ? or am I missing somehting ?
Why in dist css file you have?
.ladda-button {
background: #666;
border: 0;
padding: 14px 18px;
font-size: 18px;
cursor: pointer;
color: #fff;
border-radius: 2px;
border: 1px solid transparent;
-webkit-appearance: none;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent
}
Upgrade dependency to spin.js 3.1.0 and support it
Hello, I'm working with Ladda buttons for my ASP.Net webforms application. So far they are working perfectly with one only detail.
Suppose that I have a textbox with one validator. I also have a button which will implement the Ladda appearance when clicked. Suppose that I click the button and the validator triggers responding that the textbox is invalid. In this case the the button continues to display the spinner.
Any Idea on how to approach that scenario specifically for ASP.Net webforms will be appreciated.
thank you in advance
Adrian
Hi,
I am using this library with bootstrap v4.0.0-beta.2 and I notice collision in CSS transition style.
B4:
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
Ladda:
.ladda-button,
.ladda-button .ladda-spinner,
.ladda-button .ladda-label {
-webkit-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-moz-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-ms-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
-o-transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) all !important;
}
This collision cause very ugly behavior of background-color/color
style on hover. Is it possible to remove !important
or set transition
only for width, height etc. styles for .ladda-button
? Or something similar which solve this issue.
Thanks,
Dan
I'm posting a new issue as I did not receive any feedback on the comment I made in this closed issue: #109
Is there a way to support both node.js and Dart Sass? When building our application we get the following error after the above change was made in v2.0.3:
Module build failed: ModuleBuildError: Module build failed:
right: math.div($spinnerSize, -2) + 10;
^
Invalid CSS after "... right: math": expected expression (e.g. 1px, bold), was ".div($spinnerSize, "
in <redacted>node_modules/ladda/css/ladda.scss (line 118, column 20)
As @theodorejb wrote in #77:
Spin.js 3.0 was rewritten as an ES6 module, so Ladda also has to be rewritten as an ES6 module to use it (which is a breaking change). The bulk of this work has already been completed in the 2.x branch (https://github.com/hakimel/Ladda/commits/2.x). However, I've been hesitant to publish a new version based on spin.js 3.0 since it can cause performance issues for certain usage scenarios (e.g. showing a spinner while other code is running). fgnass/spin.js#347 should fix this, but it doesn't work properly in Microsoft Edge, and I'd like to wait until it does.
Maybe we can release an alpha version with the bug indicated as unresolved?
For example, we could use next
tag for npm.
Hi,
From where can I get dist directory with compiled version of ladda? I want use it in my PHP application but I can't /dist directory with newest version.
Newer releases (from v2.0.0) don't have dist
folder. Demo doesn't work because of this.
1:18:03 AM [vite] Error when evaluating SSR module /@fs/home/user/work/web/src/ladda.js:
/home/home/work/web/node_modules/.pnpm/[email protected]/node_modules/ladda/js/ladda.js:9
import {Spinner} from 'spin.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:353:18)
at wrapSafe (node:internal/modules/cjs/loader:1039:15)
at Module._compile (node:internal/modules/cjs/loader:1073:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:10)
at Module.load (node:internal/modules/cjs/loader:989:32)
at Function.Module._load (node:internal/modules/cjs/loader:829:14)
at Module.require (node:internal/modules/cjs/loader:1013:19)
at require (node:internal/modules/cjs/helpers:93:18)
at nodeRequire (/home/brian/work/menus/menus-angular-2-app/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-11db14da.js:73337:17)
at ssrImport (/home/brian/work/menus/menus-angular-2-app/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-11db14da.js:73290:20)
demo of Ladda works on https://lab.hakim.se/ladda/ but the copy I downloaded (the zip file) but I'm having trouble getting it to work - I'm using the same browser in each case.
On the downloaded copy of the demo the spinner does not appear, the submit button takes me immediately to example.com.
I noticed that the css filenames mentioned in README.md do not match those in the css directory and 'dist' does not exist, so I created it and downloaded ladda.min.css, ladda.min.js and spin.min.js into it. Looks like I'm not supposed to down load form-bundle.js though.
Love this script! This is just a suggestion to make things more compatible with other css frameworks. I actually tweaked the css to change the style names from .label and .spinner to .ladda-label and .ladda-spinner.
The main issue for me is that "label" style conflicts with Bootstrap and so it made the button text kinda weird.
I love these buttons and I'm trying to drop them into my project but they're only partly working. Some guidance on what I need to do in terms of markup and css classes would be really helpful.
Hi, I'm unable to get webpack to generate appropriate .js files.
I've added to package.json
the following:
"dependencies": {
"grunt-webpack": "^3.1.3",
"webpack": "^4.23.1"
}
I've added to Gruntfile.js
the following:
const path = require('path');
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
webpack: {
dist: {
entry: {
'spin': path.resolve(__dirname, 'src/spin.js'),
'ladda': path.resolve(__dirname, 'src/ladda.js')
},
output: {
filename: '[name].min.js',
path: path.resolve(__dirname, 'dist'),
publicPath: "/static/"
}
}
}
});
grunt.loadNpmTasks('grunt-webpack');
grunt.registerTask('default',['webpack']);
}
File src/spin.js
contains import {Spinner} from 'spin.js';
File src/ladda.js
contains import * as Ladda from 'ladda';
I then run the grunt
command.
My browser is successfully loading both /static/spin.min.js
and /static/ladda.min.js
.
If I try to reference Ladda
from in-page JS, I get a JS error Ladda is not defined
.
The only reference to Ladda
in the generated dist/
files is in the copyright comment.
The contents of dist/ladda.min.js
are:
!function(t){var e={};function n(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return t[r].call(i.exports,i,i.exports,n),i.l=!0,i.exports}n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(r,i,function(e){return t[e]}.bind(null,i));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/static/",n(n.s=2)}([function(t,e,n){"use strict";n.d(e,"a",function(){return o});var r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t},i={lines:12,length:7,width:5,radius:10,scale:1,corners:1,color:"#000",fadeColor:"transparent",animation:"spinner-line-fade-default",rotate:0,direction:1,speed:1,zIndex:2e9,className:"spinner",top:"50%",left:"50%",shadow:"0 0 1px transparent",position:"absolute"},o=function(){function t(t){void 0===t&&(t={}),this.opts=r({},i,t)}return t.prototype.spin=function(t){return this.stop(),this.el=document.createElement("div"),this.el.className=this.opts.className,this.el.setAttribute("role","progressbar"),s(this.el,{position:this.opts.position,width:0,zIndex:this.opts.zIndex,left:this.opts.left,top:this.opts.top,transform:"scale("+this.opts.scale+")"}),t&&t.insertBefore(this.el,t.firstChild||null),function(t,e){var n=Math.round(e.corners*e.width*500)/1e3+"px",r="none";!0===e.shadow?r="0 2px 4px #000":"string"==typeof e.shadow&&(r=e.shadow);for(var i=function(t){for(var e=/^\s*([a-zA-Z]+\s+)?(-?\d+(\.\d+)?)([a-zA-Z]*)\s+(-?\d+(\.\d+)?)([a-zA-Z]*)(.*)$/,n=[],r=0,i=t.split(",");r<i.length;r++){var o=i[r],s=o.match(e);if(null!==s){var a=+s[2],l=+s[5],u=s[4],d=s[7];0!==a||u||(u=d),0!==l||d||(d=u),u===d&&n.push({prefix:s[1]||"",x:a,y:l,xUnits:u,yUnits:d,end:s[8]})}}return n}(r),o=0;o<e.lines;o++){var u=~~(360/e.lines*o+e.rotate),d=s(document.createElement("div"),{position:"absolute",top:-e.width/2+"px",width:e.length+e.width+"px",height:e.width+"px",background:a(e.fadeColor,o),borderRadius:n,transformOrigin:"left",transform:"rotate("+u+"deg) translateX("+e.radius+"px)"}),p=o*e.direction/e.lines/e.speed;p-=1/e.speed;var c=s(document.createElement("div"),{width:"100%",height:"100%",background:a(e.color,o),borderRadius:n,boxShadow:l(i,u),animation:1/e.speed+"s linear "+p+"s infinite "+e.animation});d.appendChild(c),t.appendChild(d)}}(this.el,this.opts),this},t.prototype.stop=function(){return this.el&&("undefined"!=typeof requestAnimationFrame?cancelAnimationFrame(this.animateId):clearTimeout(this.animateId),this.el.parentNode&&this.el.parentNode.removeChild(this.el),this.el=void 0),this},t}();function s(t,e){for(var n in e)t.style[n]=e[n];return t}function a(t,e){return"string"==typeof t?t:t[e%t.length]}function l(t,e){for(var n=[],r=0,i=t;r<i.length;r++){var o=i[r],s=u(o.x,o.y,e);n.push(o.prefix+s[0]+o.xUnits+" "+s[1]+o.yUnits+o.end)}return n.join(", ")}function u(t,e,n){var r=n*Math.PI/180,i=Math.sin(r),o=Math.cos(r);return[Math.round(1e3*(t*o+e*i))/1e3,Math.round(1e3*(-t*i+e*o))/1e3]}},,function(t,e,n){"use strict";n.r(e);n(0);
/*!
* Ladda
* http://lab.hakim.se/ladda
* MIT licensed
*
* Copyright (C) 2018 Hakim El Hattab, http://hakim.se
*/}]);
I am getting this error on 1.0.0 building in production my app:
cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
10% building modules 8/14 modules 6 active …eb/node_modules/ladda/dist/ladda.min.jsTypeError: dep.getResourceIdentifier is not a function
at addDependency (/var/www/web/node_modules/webpack/lib/Compilation.js:394:30)
at iterationOfArrayCallback (/var/www/web/node_modules/webpack/lib/Compilation.js:80:3)
at addDependenciesBlock (/var/www/web/node_modules/webpack/lib/Compilation.js:414:5)
at Compilation.processModuleDependencies (/var/www/web/node_modules/webpack/lib/Compilation.js:425:4)
at afterBuild (/var/www/web/node_modules/webpack/lib/Compilation.js:552:16)
at _this.buildModule.err (/var/www/web/node_modules/webpack/lib/Compilation.js:598:11)
at callback (/var/www/web/node_modules/webpack/lib/Compilation.js:349:35)
at module.build.error (/var/www/web/node_modules/webpack/lib/Compilation.js:385:12)
at handleParseResult (/var/www/web/node_modules/webpack/lib/NormalModule.js:371:12)
at doBuild.e (/var/www/web/node_modules/webpack/lib/NormalModule.js:393:6)
at runLoaders (/var/www/web/node_modules/webpack/lib/NormalModule.js:272:12)
at /var/www/web/node_modules/loader-runner/lib/LoaderRunner.js:370:3
at iterateNormalLoaders (/var/www/web/node_modules/loader-runner/lib/LoaderRunner.js:211:10)
at Array.<anonymous> (/var/www/web/node_modules/loader-runner/lib/LoaderRunner.js:202:4)
at Storage.finished (/var/www/web/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
at provider (/var/www/web/node_modules/webpack/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9)
at /var/www/web/node_modules/webpack/node_modules/graceful-fs/graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:447:3)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.