As easy as 1, 2, 3!
Updated:
- Aug, 08, 2022 update
config
docs for npm 8+ - Jul 27, 2021 add private scopes
- Jul 22, 2021 add dist tags
- Jun 20, 2021 update for
--access=public
- Sep 07, 2020 update docs for
npm version
class ParentComponent extends Component { | |
constructor() { | |
super(); | |
this.state = { | |
data : [ | |
{id : 1, date : "2014-04-18", total : 121.0, status : "Shipped", name : "A", points: 5, percent : 50}, | |
{id : 2, date : "2014-04-21", total : 121.0, status : "Not Shipped", name : "B", points: 10, percent: 60}, | |
{id : 3, date : "2014-08-09", total : 121.0, status : "Not Shipped", name : "C", points: 15, percent: 70}, | |
{id : 4, date : "2014-04-24", total : 121.0, status : "Shipped", name : "D", points: 20, percent : 80}, |
With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.
This document is a comparison of various ways the <script>
tags in HTML are processed depending on the attributes set.
If you ever wondered when to use inline <script async type="module">
and when <script nomodule defer src="...">
, you're in the good place!
Note that this article is about <script>
s inserted in the HTML; the behavior of <script>
s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)
// Setting variables like this wouldn't be possible because SASS would | |
// get through this file before Tailwind does (because it's PostCSS) | |
$--color-primary: theme('colors.blue'); | |
$--font-serif: theme('fontFamily.serif'); | |
body { | |
color: rgba($--color-primary, .5); | |
font-family: $font-serif; | |
} |
Steps to deploy a Node.js app to DigitalOcean using PM2, NGINX as a reverse proxy and an SSL from LetsEncrypt
If you use the referal link below, you get $10 free (1 or 2 months) https://m.do.co/c/5424d440c63a
I will be using the root user, but would suggest creating a new user
// example vite.config.js | |
import { cdn } from './vite-plugin-cdn' | |
export default { | |
plugins: [ | |
// also supported: esm.run, jspm | |
// loads the dep over the CDN during dev | |
// auto downloads and includes into the bundle during build | |
cdn('skypack', { | |
vue: '^3.0.5' |
// Due to the nature of svelte, implementing recaptcha inside a svelte component by following the official documentation | |
// can lead to DOM issue. | |
// The best way I find is to render the recaptcha inside onMount | |
<script> | |
import { onMount } from 'svelte'; | |
onMount(async () => { | |
window.grecaptcha.ready(() => { | |
grecaptcha.render('recaptcha-id', { sitekey: YOUR_SITE_KEY }) |