master-co / css Goto Github PK
View Code? Open in Web Editor NEWThe CSS Language and Framework
Home Page: https://css.master.co
License: MIT License
The CSS Language and Framework
Home Page: https://css.master.co
License: MIT License
There are grid-column-gap
and grid-row-gap
for grid layout. But currently, we only can use the general gap
property.
We often only need the gap for either column or row instead of both of them together.
Automatic initialization should be disabled by default when we use @master/css package from npm. Its ok to enable Automatic initialization by default when we use CDN.
How should I make this vscode plugin support .res files?
ReScript is an alternative to TypeScript.
Currently there is no type support for element's properties.
For example:
// Props has no type hinting
const Button = el.button`
inline-flex
font:14
${(props) => (props.color ? 'font:white bg:' + props.color : '')}
`
What I'd like to have:
interface Props {
color?: string;
}
const Button = el.button<Props>`
inline-flex
font:14
${(props) => (props.color ? 'font:white bg:' + props.color : '')}
`
The syntax isn't necessarily accurate, but the idea being is that you should get type hints from the props interface passed.
https://cdn.master.co/css is currently redirected to https://cdn.jsdelivr.net/npm/@master/css.
cdnjs offers a better compression (brotli) than jsDelivr (gzip).
Comparison of the usage statistics of cdnjs vs. jsDelivr
https://w3techs.com/technologies/comparison/cd-cdnjs,cd-jsdelivr
incorrect: 3xl | @media (min-width: 1600px) { }
correct: 3xl | @media (min-width: 1920px) { }
as indicated in breakpoints.js
https://github.com/master-co/css/blob/main/src/breakpoints.js
Given that the support for :has pseudo class and container queries is becoming main stream with the release of chrome 105 (safari 15.4 already has support for :has and Safari 16 will have support for container queries).
Is there any plan to support them?
The hide
isn't adding the class display: none;
on ::before
, instead the content won't be generated at all with class hide
.
This makes me to unable to use JavaScript to select the element::before
. My use case is to remove the hide
after the button is clicked but now the element::before
isn't generated so this is impossible,
No response
Browser: Firefox Developer
It would be great If we can use color tokens in Style/Styles.extend.
Master CSS is expected to be the best design system tool for some developers (at least me). And CSS variables play an important role to build tokens and switch themes. It would be nice if you provide js-functions to add/modify css variables. It can also combine language service to get autocompletion when coding class="$var:value"
. With typescript's help, provide an generic interface to define css tokens like
interface CssVarScheme {
primary: string;
secondary?: string;
}
Style.defineCssVars<CssVarScheme>({
light: {
primary: '...',
secondary: '...',
},
dark: {
secondary: '...',
}, // property 'primary' is missing
anotherTheme: {
primary: '...',
warning: '...' // 'warning' doesn't exist in type 'CssVarScheme'
},
})
And speaking of Style.extend
api, It is not so distinct. Maybe use Style.defineSomething
like above can be more straightforward and provide better DX with typescript.
Style.defineValues({
width: { ... },
heiight: { ... } // property 'heiight' doesnt exist
})
Style.defineColorSchemes(['light', 'dark', 'anotherTheme', 123 // type '123' is not assignable to parameter of type 'String' ])
Originally posted by guillaume-net March 24, 2022
Would it be possible to add a svelte guide?
Originally posted by gammx August 20, 2022
Hey, my app has a different px:rem ratio applied, like:
html {
font-size: 62.5%;
}
So when I'm using Master applying a class like f:15
results in something completely different from what I wanted, is there any option to configure how the px -> rem conversion works so I can stop writing the "rem"
suffix for numeric values? π€
Reference: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
.h\:xs {
height: 37.5rem;
}
Thanks @mockingjet
No response
MacOS, M2 Air, Chrome
This won't work: w:50%@sm>div
Edited: w:50%>div@sm
This is working...The order is so confusing, there is no official documentation about how we should order them...
No response
Browser: Firefox Developer
Add support for "Can I Use" (https://caniuse.com/) with inline documentation for classes highlighting the following:
This issue takes into account issues raised on:
Theming is a crucial part of web applications, it has been around for decades now and only expected to grow as apps become more complex, increase in scopes and the types of devices increase.
It is important that we address themes and provide flexibility for users so that they can build powerful, accessible and immersive UI and UX for it's users.
There are multiple types of themes:
A (fairly) new standard has emerged from the Design Tokens Community Group (DTCG) that introduces a new specification for design tokens to unify and standardize how they are consumed. This isolates design tokens from a "theme", where these work separately from each other and a theme becomes a semantic feature.
Currently Master does provide a lot of configuration for styling, while this is starting point, it can be expanded upon greatly. I propose that we incorporate design tokens directly into Master (please refer to design token specification for further documentation / information about it).
design.tokens
{
"majestic magenta": {
"$type": "color",
"$value": "#ff00ff",
"$description": "The background color for buttons in their normal state."
},
"brand": {
"color": {
"$type": "color",
"acid green": {
"$value": "#00ff66"
},
"hot pink": {
"$value": "#dd22cc"
}
},
"typeface": {
"$type": "fontFamily",
"primary": {
"$value": "Comic Sans MS"
},
"secondary": {
"$value": "Times New Roman"
}
}
},
"shadow-token": {
"$type": "shadow",
"$value": {
"color": "#00000088",
"offsetX": "0.5rem",
"offsetY": "0.5rem",
"blur": "1.5rem",
"spread": "0rem"
}
}
}
master.css.js
or master.css.ts
import { transformDesignTokens } from '@master/css';
import tokens from './design.tokens';
const config = {
tokens: transformDesignTokens(tokens),
// Other config
};
export default config;
The transformed JSON would look similar to:
const tokens = {
"majestic-magenta": "#ff00ff",
brand: {
color: {
"acid-green": "#00ff66",
"hot-pink": "#dd22cc",
},
typeface: {
primary: "Comic Sans MS",
secondary: "Times New Roman",
},
},
// Semantic Class in Master
"shadow-token": "0.5rem|0.5rem|1.5rem|0|#00000088",
};
Usage without Themes
<div class='bg:majestic-magenta'>Block 1</div>
<div class='bg:brand-color-acid-green'>Block 2</div>
This issue is open for comments should anyone have any concerns or ideas on how this maybe improved.
Currently, I'm working with @1aron to create a suitable API to bring βthemingβ into scope with the design tokens, as more thought needs to go into that.
Currently there are several approaches to conditionally rendering the CSS classes with:
While this allows for a lot of flexibility, this is still limited to the device type and screen size. This doesn't cover all use cases for example wearables, more specifically AR / VR devices like Oculus or the Hololens; where for instance a AR/VR experience is possible but the user is on a desktop based browser, thus one cannot conditionally render CSS without involving their UI library.
Style.extend('conditionals', {
'xr': navigator.xr.isSessionSupported('immersive-ar').then(v => v);
});
Which then allows you to write classes conditionally i.e.
f:bold bg:white {f:medium bg:transparent}@xr
AOT can be a bit of a hindrance, while I'm not exactly sure on the specifics of the AOT approach, if the objective is to generate a bundled CSS then perhaps multiple bundles can be generated with variations on the conditions i.e. default.css
with no conditionals, and xr.css
for XR mode, of course where there are multiple conditionals, a combination have to be generated - while this is not ideal I cannot think of a better approach currently. (Open to ideas).
For better configuration experience, breakpoints
, colors
, selectors
, semantics
, and values
are expected to enable limitless nested configurations.
master.css.js
draft about those:
export default {
colors: {
// layer 1
primary: '#ebbb40',
code: {
// layer 2
silence: 'slate-70', // β
supported: fg:code-silence
gold: 'gold-70', // β
supported: bg:code-gold
js: {
// layer 3
pink: 'pink-70' // π§ unsupported: fg:code-js-pinkt
}
}
},
values: {
Height: {
// layer 1
'btn-xs': '3rem', // β
supported: h:btn-xs
'btn-sm': '4rem', // β
supported: h:btn-sm
btn: {
// layer 2
xs: '3rem', // π§ unsupported: h:btn-xs
sm: '4rem' // π§ unsupported: h:btn-sm
}
},
// global token values
xs: '1rem'
}
}
Thanks @mockingjet, @itsezc
As you all know, Master CSS has different unit conversion behavior for each CSS property like w:48
generates CSS rule as width: 3rem
.
To make your DX more consistent, we'll enable the same behavior in master.css.js
.
export default {
values: {
Height: {
- xs: '2rem',
+ xs: 32,
- sm: '3rem',
+ sm: 48
},
- '1x': '1rem',
+ '1x': 16,
- '2x': '2rem',
+ '2x': 32
}
}
Because unset unit global values are converted to rem
, it cannot be applied to unitless CSS properties such as line-height: 1.5
and font-weight: 600
.
Yes, this is the only constraint of the feature, however in most circumstances, you will need to adjust values.LineHeight
and values.FontWeight
independently, rather than globally.
Unexpected result when parsing \'
in content
<div class="content:'foo\'s'"></div>
Expected
.content\:\'foo\\\'s\' {
content:"foo's";
}
Current Result
.content\:\'foo\\\'s\' {
content: "foo' s";
}
<div class="content:'foo\'s':after"></div>
Expected
.content\:\'foo\\\'s\'\:after {
content:"foo's";
}
Current Result
.content\:\'foo\\\'s\'\:after {
}
All platforms
e.g.:
https://docs.master.co/styles/setup/react
says:
pnpm install @master/styles @master/style @master/normal.css
output:
dependencies:
+ @master/normal.css 1.9.3
+ @master/style 1.6.0 deprecated
+ @master/styles 1.14.0 deprecated
deprecated???
Oh, it seems I should try pnpm install @master/css
And can we link the doc src to to bottom of the doc page? Then we can easily address and fix it while reading.
No response
irrelevant
A feature like Transient props in styled-components, to avoid the error Warning: Received `false` for a non-boolean attribute
when we pass boolean value props to a style element.
I'm making configurations directly in the HTML as described here: https://docs.master.co/css/customization#other-directly-in-index-html
It's working for Style.extend('classes',{})
but Style.extend('semantics',{})
wont work.
Below is the full code:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/@master/normal.css" rel="stylesheet">
<script>
/* 1. Prevent @master/css from initializing automatically */
window.MasterCSSManual = true;
</script>
<script src="https://cdn.master.co/css"></script>
<script >
/* 2. Configure your initial options here ... */
const Style = window.MasterStyle;
Style.extend('semantics', {
fontFamily: {
customFont: 'Roboto Slab', serif
}
});
/* 3. Manually initialize */
window.initMasterCSS();
</script>
</head>
<body>
<button class="btn">Ok</button>
</body>
</html>
No response
Browser: Firefox Developer
It has an type error on ref
Type 'ForwardedRef<HTMLDivElement>' is not assignable to type 'Ref<"div"> | undefined'.
Type '(instance: HTMLDivElement | null) => void' is not assignable to type 'Ref<"div"> | undefined'.
Type '(instance: HTMLDivElement | null) => void' is not assignable to type '(instance: "div" | null) => void'.
Types of parameters 'instance' and 'instance' are incompatible.
Type '"div" | null' is not assignable to type 'HTMLDivElement | null'.
Type 'string' is not assignable to type 'HTMLDivElement'.ts(2322)
index.d.ts(134, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & Omit<HTMLAttributes<HTMLDivElement> & Partial<{}>, "className" | "ref"> & extraType & RefAttributes<...>'
Did i missed some thing?
No response
@master/style-element.react: "^1.1.4
typescript: 4.5.5
Hi,
I hope you're doing well.
I've faced an issue, if I put a variable in :root and use it in class:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Some</title>
<link href="https://unpkg.com/@master/normal.css" rel="stylesheet" />
<script src="https://unpkg.com/@master/style"></script>
<script src="https://unpkg.com/@master/styles"></script>
<style>
html,
body {
height: 100%;
}
:root {
--light-grey: hsl(217, 12%, 63%);
}
</style>
</head>
<body>
<p class="font-color:$(light-grey)">Hey man!</p>
</body>
</html>
This would work perfect. However if I change p tag to:
<p class="f:$(light-grey)">Hey man!</p>
it will not work as expected.
Official doc here: https://docs.master.co/styles/font-color
says I can use f as a shorthand of font-color, Not sure if f:$(light-grey)
is illegal or this is a bug.
Hi!
I'm seeing a pretty big slowdown of JS Intellisense with this extension enabled.
Enable the extension.
Type fun.
Result: Intellisense is slow.
Disable the extension and reload the window.
Type fun.
Result: Intellisense is fast.
Expected result: Intellisense should be as fast with the extention enabled as it is disabled.
Win10 64
VSCode 1.72.2
beta
branch failed. π¨I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. Iβm sure you can fix this πͺ.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the beta
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here are some links that can help you:
If those donβt help, or if this issue is reporting something you think isnβt right, you can always ask the humans behind semantic-release.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
name
property in package.json
.The package.json
's name property is required in order to publish a package to the npm registry.
Please make sure to add a valid name
for your package in your package.json
.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
Good luck with your project β¨
Your semantic-release bot π¦π
I want to use a CSS variable defined outside :root
, eg:
:root {
--gyan-100: #00FF75;
}
.theme-dark {
--text-tertiary: #8B98AC;
}
It works if I use a global variable:
<p className="font-color:$(gyan-100)">...</p>
<p className="font-color:$(text-tertiary)">...</p> // Fail!
.theme-dark
is correctly applied btw, and changing the value through developer tools returns the expected color.
Any ideas of what is happening? (:
No response
Browser: Microsoft Edge (Chromium) 103.0.1264.51
OS: Zorin OS (x64)
Node.js: 18.5.0
Package Manager: npm 8.12.1
It will be very useful if master-css
can allow passing parameters to custom classes.
For example
Style.extend('classes',
{
btn: (size,blue) => `font:${size}rem text:center h:40 bg:${blue}`
},
);
<div class="btn(1,blue)">
Global token are important for building a design system but currently its not possible to define a global token using Styles.extend. We should be able to use Styles.extend for defining a global token.
Styles.extend('global', {
size: {10: '10px},
'border-sm': '1px'
})
Currently, Master can create very long classes so it'd be nice if the extension supporting inline folding and also expose a regex option for this to support non-mainstream frameworks and languages too.
It would be awesome if there was documentation about how to integrate with sveltekit
CVA (class authority variance) is a popular library for handling classes (with Master) as such it should be supported out of the box by the CSS language service.
The following regex (as listed on CVA's README for Tailwind) should be covered for Master:
"cva\\(([^)]*)\\)",
"[\"'`]([^\"'`]*).*?[\"'`]"
I'm using the descendant selector _
to select all the child elements. For example, if there is a div
containing three <a></a>
, and I wanna add full width to all the a
tags, I then add the CSS as such to the div
: w:full_a
, so I don't have to add w:full
to all of the three a
tag.
But if I wanna add empty content to the a
tag, it won't work: content:' '::before_a
. I don't want to use the 'Reusing Design' just for three elements with such a simple rule...Please help.
No response
Browser: Firefox Developer Edition
In Sveltekit at least there's a FOUC when loading the page so it would be nice if you could compile the results of master CSS when building since you're doing that with Svelte anyway.
Maybe there's a way to avoid this even now but I don't know how to.
Related: sveltejs/kit#6227
Thank you for this wonderful library. While experimenting with svelte, I have realised that the group syntax conflicts with svelte's dynamic attribute value syntax. Is there a way to override curly braces
to some other character such as []
or {{ }}
?
https://svelte.dev/repl/454c3434d7e1455da49e90813b16b4e0?version=3.49.0
Browser: Chrome (102)
OS: OSX 15
Originally posted by takamoso May 23, 2022
You can specify any property directly in TailwindCSS as follows. Can you do something similar?
<div class="[counter-increment: count]">
...
</div>
Pressing Command + S triggers save-as functionality on MacOS on chrome.
Expected SSR generates a rendered (styles included) HTML content.
But it seems that it only parses the html and outputs the generated CSS.
confusing returnings:
html
in the output is the same as the input one and useless.stylesCss
should contain color variables used in HTML.colorsCss
is always about 20 kb in size without any tree-shaking, no matter what the input is.colorsMetaContent
is useless, I don't know in which case it will be used.That is, developers need to inject the uncompleted (without color variables) or unused (too many color variables) CSS into HTML manually, which is not good for DX and performance.
BTW, the SSR example on the document is outdated.
import { render } from "@master/css/render";
import { StyleSheet, Style } from "@master/css";
const target: string[] = [
`<div class="p:12"></div>`,
`<div class="font:24 font:56@2xl font:48@lg font:32@md bg:blue-54:hover bg:blue-47 bg:blue-68:active color:orange"></div>`,
];
for (const html of target) {
test(html);
}
function test(html: string) {
const key = `render \x1b[93m${html}\x1b[m`;
console.time(key);
const result = render(html, { StyleSheet, Style });
console.timeEnd(key);
console.log("html:", `\x1b[92m${result.html}\x1b[m`);
console.log("stylesCss:", `\x1b[96m${result.stylesCss}\x1b[m`);
console.log("colorsMetaContent:", `\x1b[94m${result.colorsMetaContent}\x1b[m`);
console.log("length of colorsCss:", `\x1b[95m${result.colorsCss.length}\x1b[m`);
}
@master/css
: 1.17.2
Add inline MDN docs support for classes, highlighting browser support, issues and description of the feature
Some of the non-standard properties are supported by generating vendor prefixes, e.g., -webkit-font-smoothing, -moz-osx-font-smoothing
; while some others are not supported yet, e.g., -webkit-text-stroke
.
In order to support features like -webkit-text-stroke
, we may either enable keywords transpilation of vendor prefixes, or create corresponding classes for all available non-standard properties. The former may still be a fail-safe solution even if the latter approach is preferred.
From Tdyi:
Thanks for taking the time to answer and look into this!
Also, I tried the Group Feature, and got this error in Sveltekit, as curly braces are used to pass JS data, it expects no colon :
/src/routes/+layout.svelte:8:16 Expected }
8 | <ul class="{my:0;list-style:none}>li">
^
I've managed to get around it like so :
<script>
let liClasse = '{my:0;list-style:none}';
</script>
...
<ul class="{liClasse}>li my:0 pl:0 fg:white gap:15 flex">
but I'd rather not rely on this workaround, using script tags just to style seems not viable
Very excited for master, but for now there's only a vscode extension. If you can make a Language Server Protocol (LSP), then master can be supported across multiple IDEs like Neovim, etc.
First of all, thanks to you guys for creating this amazing on-demand CSS engine.
When I am browsing the document, the interactive style editors work great, but newlines will break the layout even if it has been deleted. I think that will be nice if we ignore it.
By the way, I cannot find the repository of the document, will it be open to everyone soon?
When I am using pnpm
to install @master/styles
, the warning shows up.
βWARNβ Issues with peer dependencies found
.
βββ¬ @master/styles
β βββ β missing peer @master/style@^1.0.0
After digging into the source code, I found that in package.json
, the package states @master/style
as its peer dependency:
"peerDependencies": {
"@master/style": "^1.0.0"
},
I don't know if it is necessary to do so? Is @master/style
bundled in @master/styles
?
I think the document of pnpm
setup instruction should be:
pnpm install @master/styles @master/style @master/normal.css
because pnpm
won't automatically install peer dependencies by default.
Node:
16.13.1
PNPM:6.32.3
@master/styles:1.3.1
In v1 I was using template string to use group styles like
<h1 class="{`{color:red;f:1rem}`}">Hi with grouped class</h1>
This used to work out fine.
However with latest 2.0.0-beta.54
, This is not working.
https://stackblitz.com/edit/sveltejs-kit-template-default-ae7aok?file=src%2Froutes%2F%2Bpage.svelte
No response
Remix actually suggests to check for document
instead of window
due to deno supporting window
see the official docs
I've noticed the window check in the docs, not sure whether its also an issue in the code itself. (Coincidentally the latest commit also mentions a typeof window check π)
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.