Antichesse (o ^ω^ o)
Convertir un div HTML en PDF.
Pour Lenny
The magical disappearing UI framework.
Le principe de Svelte me plaît beaucoup : vous codez votre GUI et il n'y a pas de framework, juste du code transpilé par Svelte.
Dit autrement, avec Aurelia ou Angular, nous avons besoin, au moment du run, de télécharger 250Ko à 950Ko de sources qui appartiennent au framework, ensuite seulement nous pouvons afficher notre SPA.
Svelte n'est pas un framework mais un transpiler qui va modifier votre code pour qu'il s'exécute directement, sans lib en pré-requis.
C'est plus léger à télécharger et cela évite l'overhead au run. En tant que DevOps, j'ajouterais que cela doit rendre la regénération de la SPA plus rapide avec un Gulp watcher + BrowserSync puisque moins d'étapes et moins de code à traiter.
Pour Lenny
Pour Chlouchloutte et Lenny... Votre avis ?
Les sources JavaScript exécutées par le navigateur sont souvent différentes des sources originales crées par un développeur. Les source map servent au debugger
Pour Animal
Je suis en train de passer en revu les différents systèmes de chargement de composants en JS. En résumé (et avec quelques imprécisions) :
- CommonJS permet de charger les libs JS de manière statique.
- AMD (pour Asynchronous Module Definition) permet de chargement des libs JS de manière dynamique et asynchrone.
- SystemJS permet de faire les deux mais également d'assurer la transpilation à la volée des libs chargées.
Il faudrait donc utiliser SystemJS pour être bien.
Créer une boite modal pour un petit site.
Un super menu en JS. Le second effet et top-moumoutte !
Fabriquer des charts jolis en JS pure sans dépendance et qui tiennent la charge.
Le morceau de code JS de la page :
La partie HTML :
<body onscroll="OnScrollDiv()" onload="OnScrollDiv()">
<div class="lazy"></div><div class="lazy"></div><div class="lazy"></div><div class="lazy"></div><div class="lazy"></div><div class="lazy"></div>
... (la ligne du dessus est répétée n-fois
<script>...</script>
</body>La partie JS :
function OnScrollDiv() {
var elems = document.getElementsByClassName('lazy');
var el = elems[0];
for (var i = 0, nb=elems.length ; i < nb ; i++, el = elems[i]) {
var rect = el.getBoundingClientRect();
// $isVisible contains "true" or "false" weither the element is visible or not
var isVisible = ((rect.top - window.innerHeight) < (0 - 200) && (200 < rect.bottom));
if (isVisible) {
el.classList.add('blue-block');
}
else {
el.classList.remove('blue-block');
}
}
}Une explication montrant l'évolution de la stack JS depuis 2010 et pourquoi autant d'outils ont fait leur apparition depuis.
Comment mixer AureliaJS et ThreeJS dans un même projet. Pour toi Lenny, je sais que tu vas en avoir besoin.
Une lib pour faire de la modélisation 3D (des cubes, des boites toussa).
Plein d'exemple de code (de convertisseurs notamment) écrit en Aurelia. Parfait pour se construire une codebase autour de ce framework.
Comment utiliser simplement le GPU à la place de CPU dans un navigateur pour exécuter plus rapidement vos calculs parallèles (facteur 5 à 15 quand même).
Bon, je dois refaire du Webpack pour mettre à jour le build d'un tool de la boite. Comme j'ai eu beaucoup de peine à retrouver comment et quoi faire, voici un bref résumé des trucs et astuces à connaître sur Webpack.
Comment concaténer des fichiers JS inter-dépendants ?
Principe : mon fichier JS (Main.js) importe d'autres fichiers JS (cf. le mot-clef require de TypeScript / ES6). Et ces fichiers JS importent également d'autres fichiers. L'idée ici est d'avoir un Webpack qui parcours le graphe des dépendances en analysant le code afin de produire un et un seul fichier JS qui n'inclut que ce dont mon application se sert.
Contenu du fichier webpack.conf.js :
module.exports = {
entry: {
Car : './src/Main.js' // Charge ce fichier ainsi que tous ceux dont il dépend via le mot-clef 'require'.
},
output: {
path: './target',
filename: 'merged-file.js'
}
};Comment créer un bundle de fichiers JS qui n'ont aucune dépendance entre-eux ?
Principe : j'ai plein de libs écrites en JavaScript avec mes petites mimines (ou pas), ces librairies n'ont aucune dépendance entre-elles, cependant je souhaiterais les concaténer dans un gros bundle de sorte à minimiser le nombre de requêtes réseau.
Contenu du fichier webpack.conf.js :
module.exports = {
entry: [
'./src/Car.js', // La liste des fichiers à concaténer
'./src/Vehicule.js'
],
output: {
path: './target',
filename: 'merged-file.js'
}
};Comment créer plusieurs bundles de fichiers JS qui n'ont aucune dépendance entre-eux ?
Principe : je reprends les fichiers JS du point précédent à ceci près que je souhaite créer plusieurs bundles, un pour chaque types de véhicules par exemple.
Contenu du fichier webpack.conf.js :
module.exports = {
entry: {
four-wheels : [
'./src/Car.js',
'./src/Vehicule.js'
],
two-wheels : [
'./src/Bike.js',
'./src/Vehicule.js'
]
},
output: {
path: './target',
filename: '[name].bundle.js',
chunkFilename : '[id].bundle.js'
}
};Comment minifier mes bundles JS ?
Principe : mes fichiers JS sont gros et je souhaite supprimer le maximum d'espace, les commentaires, réduire le nom des fonctions, variables & Co de sorte à fournir le plus petit fichier possible.
Contenu du fichier webpack.conf.js :
var webpack = require("webpack");
module.exports = {
entry: [
'./src/Car.js',
'./src/Vehicule.js'
],
output: {
path: './target',
filename: 'app.minified.js'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({minimize: true})
]
};Un éditeur de text "next gen" dans votre navigateur.
Outch ! Je peux vous assurer qu'entre la programmation asynchrone, les générateurs, les itérateurs, les call-backs imbriqué et le mot-clef yield (qui à mon sens est un goto déguisé), cela va être de plus en plus compliqué d'appréhender JS pour le chaland.
Il faut vraiment s'y mettre maintenant, dans deux ans il sera trop tard.