#javascript

Inspect this snake
▻https://matthewrayfield.com/goodies/inspect-this-snake
( you know.. with right click )

#javascript

Tina is Not a CMS · TinaCMS
▻https://tinacms.org/docs/getting-started/introduction

https://res.cloudinary.com/forestry-demo/video/upload/du_16,w_700,e_loop/v1571159974/tina-hero-demo.gif

Tina is optimized for next-gen JAMstack tools. It is written in JavaScript and easily adapted to multiple different frameworks.

Tina currently supports React-based frameworks, including:

Create-React-App
Gatsby
NextJS

#CMS

Apprendre à coder en JavaScript | Cours complet (2019) - Pierre Giraud
▻https://www.pierre-giraud.com/javascript-apprendre-coder-cours

un cours complet pour commencer avec Javascript

#tutoriel #javascript #cours_en_ligne

▻https://github.com/jwilber/roughViz

roughViz.js is a reusable #JavaScript library for creating sketchy/hand-drawn styled #charts in the browser, based on D3v5, roughjs, and handy.

https://raw.githubusercontent.com/jwilber/random_data/master/roughViz.gif

#d3.js

The “One HTML Page Challenge”, a great example of view-source culture / Boing Boing
►https://boingboing.net/2019/08/23/the-one-html-page-challenge.html

When I was interviewing developers for my latest book Coders, all the ones who grew up during the late 90s and early 00s web talked about how powerful view-source was in teaching themselves to code and make stuff online.

But web development these days has grown byzantine in its complexity; if newbie is trying to learn, view-source is liable to just cough up a slurry of incomprehensible, minified javascript. It closes off the easy onramps that existed back in the earlier days of the web.

So, projects like this one-page challenge are awesome, because the whole goal is to encourage the writing of web-site code that’s more legible and tractable.

#programmation #développement #HTML #Javascript #CSS #éducation

▻https://azlejs.com

Azle is a Javascript library for rapidly prototyping the front-end of an application. Azle uses layouts to arrange UI elements on the screen, where styling and events can be added to create full-featured applications.

#JavaScript #prototype #ui

« A personal checklist for publishing web components to npm » par Justin Fagnani, auteur de LitElement
▻https://twitter.com/justinfagnani/status/1156603227854405632?s=21 #javascript #modules #npm

Point de vue particulièrement intéressant, lorsque l’on publie des librairies sous forme de modules JS (au sens ES6+), plutôt que des bundles avec loaders universels.

The vector heat method - Nicholas Sharp, Yousuf Soliman, Keenan Crane
Carnegie Mellon University
▻http://www.cs.cmu.edu/~kmcrane/Projects/VectorHeatMethod/index.html

en 30s
▻https://www.youtube.com/watch?v=UwPkWXQ6ORY

ou en 50 min
▻https://www.youtube.com/watch?v=4IZ-ykGnIRc

c’est des #maths un peu trop dures pour moi, mais les démos en #JavaScript sont super et le code est libre
▻https://geometrycollective.github.io/geometry-processing-js

#voronoi #surfaces #géométrie #algorithmes #distance #diffusion #poisson #chaleur #pde

application à des nuages de points :
▻https://vimeo.com/348288232

Projects | Knight Lab
►https://knightlab.northwestern.edu/projects

https://cdn.knightlab.com/libs/orangeline/latest/assets/screenshot-storymap.png

The Lab develops prototypes, projects and services that help make information meaningful and promote quality journalism, storytelling and content on the internet

Storytelling, Beta, Prototypes, Experiments and Past Projects

Learn.KnightLab.com
▻https://learn.knightlab.com

https://learn.knightlab.com/imagelib/uploads/banners/learn-illustration-01.png

The web is a journalist’s medium. It influences every part of the journalistic process, from how we find and gather information, to how we craft our stories, to how we track the far reaches of our content. Understanding how it works can only make us better journalists. The best way to know the web is to take charge of it. We’re using open web technologies to build stories, apps, tools, and sites. You can too. If there’s one thing we understand, it’s that learning is a messy process. Come roll around in the mud with us.

Leaflet - a JavaScript library for interactive maps
▻https://leafletjs.com

https://leafletjs.com/docs/images/logo.png

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.

Scrollame
▻https://github.com/russellgoldenberg/scrollama

https://camo.githubusercontent.com/dd3cf52f5dee986437b0ef5b16c24c44364c2a38/68747470733a2f2f72757373656c6c676f6c64656e626572672e6769746875622e696f2f7363726f6c6c616d612f6c6f676f2e706e67?.jpg

Scrollama is a modern & lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
Important Changes

Version 2.0.0+: .onContainerEnter and .onContainerExit have been deprecated in favor of CSS property position: sticky;. How to use position sticky.
Version 1.4.0+: you must manually add the IntersectionObserver polyfill for cross-browser support. See installation for details.

Jump to examples.
Why?

Scrollytelling can be complicated to implement and difficult to make performant. The goal of this library is to provide a simple interface for creating scroll-driven interactives. Scrollama is focused on performance by using IntersectionObserver to handle element position detection.

Export Google Maps Route to KML/GPX - Geographic Information Systems Stack Exchange
▻https://gis.stackexchange.com/questions/152571/export-google-maps-route-to-kml-gpx

Since Google pulled the plug on Google Maps Classic, I’m reluctantly moving to its Google Maps New application.

However, I didn’t find how to export a route to a GPX or KML file so it can be copied onto my smartphone.

Can it do this? If not, is there a third-party solution?

#www #journalisme #javascript #cartographie @nepthys

« How to not break the internet with this one weird trick — If you write JavaScript tools or libraries, you should bundle your code before publishing » by Rich Harris
►https://link.medium.com/J89QIlT8RX #javascript #build

About JSHint
▻https://jshint.com/about

JSHint is a community-driven tool that detects errors and potential problems in JavaScript code. Since JSHint is so flexible, you can easily adjust it in the environment you expect your code to execute. JSHint is open source and will always stay this way.

La documentation : ▻https://jshint.com/docs
Toutes les options : ▻https://jshint.com/docs/options

#javascript #jshint #web_dev #outil #erreur #linter

Iván Sánchez Ortega / Leaflet.TileLayer.GL · GitLab
▻https://gitlab.com/IvanSanchez/Leaflet.TileLayer.GL

With this plugin, you can apply colour transforms to your tiles, merge two or more tiles with a custom function, perform on-the-fly hillshading, or create synthetic tile layers based only on the map coordinates.

See several examples and edit them :
▻http://ivansanchez.gitlab.io/Leaflet.TileLayer.GL/demo/repl.html

Why?

#Leaflet has been lagging behind when it comes to #WebGL technology. Other map libraries (such as OpenLayers 3 and most notably Tangram) can already use WebGL shaders to apply transformations to map tiles and do fancy stuff.

The inflexion point are MapBox’s “Terrain-RGB” tiles. WebGL manipulation of these tiles can provide real-time terrain relief and hill shading.

This takes some inspiration from shadertoy.com, in the sense that the shaders work on two triangles with some predefined attributes and uniforms.

#map

mermaid · GitBook
▻https://mermaidjs.github.io

Generation of diagrams and flowcharts from text in a similar manner as markdown.
Ever wanted to simplify documentation and avoid heavy tools like Visio when explaining your code?
This is why mermaid was born, a simple markdown-like script language for generating charts from text via javascript.

Un générateur (javascript) de diagrammes à partir de sources en markdown.
Basé sur le moteur de rendu de #3djs, utilise la syntaxe de js-sequence-diagram (▻https://bramp.github.io/js-sequence-diagrams)

A tester : l’éditeur en ligne ▻https://mermaidjs.github.io/mermaid-live-editor

Plusieurs éditeurs de code supportant le markdown proposent des plugins pour la prévisualisation (VS Code, Sublime text, VIm...).
Un plugin Gitlab permet d’afficher les schémas intégrés dans les fichiers .md (en particulier le Readme.md) : idéal pour des schémas intégrés à la documentation
(à intégrer dans le plugin markdown de SPIP ?)

#diagramme #javascript #markdown #gitlab #js-sequence-diagram #documentation

Serving #react and Koa together
▻https://hackernoon.com/serving-react-and-koa-together-720ba6668298?source=rss----3a8144eabfe3--

https://cdn-images-1.medium.com/max/1024/1*VtBDZQkGUYLdahqiNsGGLA.png

Reactjs and #koajs are two great frameworks of #javascript. I wonder how to serve React and Koa projects in the same server and same port! Finally, I’ve reached a solution and today I’ll discuss it.In this article, we’ll create an API using koa and a React project (frontend) which will consume the API. The idea is very simple, React will fetch some book names from the backend (koa) and render them.Backend (Koa) projectKoa uses async functions, this gives an advantage over callback functions. By default, Koa does not come with any middlewares. That makes Koa very minimal and elegant.At first, we need to install node (koa requires node v7.6.0 or higher). Then install koa using : npm i koaCreate a project directory named “book” and run npm init -y.As koa doesn’t come with any middlewares and we need (...)

#single-page-applications #nodejs

How I configure VSCode for Everything
▻https://hackernoon.com/how-i-configure-vscode-for-everything-7df65a316a52?source=rss----3a8144e

https://cdn-images-1.medium.com/max/1024/1*j-b1dZsAJGfhUEQVHu2Wpw.jpeg

Credits: Unsplash/Joshua AragonRecently, I was at the Boryspil Airport, Ukraine, working on a blog article when suddenly my VSCode stops working. It actually got crashed! Not once, but twice under 30 minutes. Some of the content was autosaved, some of it was gone forever…I was frustrated at first as to why it had to crash at that moment! Next, after re-opening the editor, I was angry with myself for I had to write some of the stuff again that didn’t get saved.Also, at times, previous this experience, it did feel that I have bloat of extensions that I am not using since I have stopped working with some of the frameworks in recent months (example, Angular).What did I do? After none of the emotions helped, I had to find a way to cope better. On a network that was not so crappy, but did have (...)

#react #programming #javascript #hackernoon-top-story #productivity

#javascript Array.reduce()
▻https://hackernoon.com/javascript-array-reduce-50403c421968?source=rss----3a8144eabfe3---4

https://cdn-images-1.medium.com/max/800/1*0Dqvmi5ib4OtO8gA24MTxQ.jpeg

How do I loathe thee? Let me count the ways…The Array.reduce() method has been around awhile. Like map(), filter() and find(), it operates upon an array of values by invoking a callback function.Here’s an example from the developer.mozilla.org site:const array1 = [1, 2, 3, 4];const reducer = (accumulator, currentValue) => accumulator + currentValue;// 1 + 2 + 3 + 4console.log(array1.reduce(reducer));// expected output: 10// 5 + 1 + 2 + 3 + 4console.log(array1.reduce(reducer, 5));// expected output: 15Seems straightforward, right? On with the grievances:0. It doesn’t do what you expectLet’s look at this again:const array1 = [1, 2, 3, 4];const reducer = (accumulator, currentValue) => accumulator + currentValue;// expected: 1 + 2 + 3 + 4 === 10Now I’ll modify the reducer function to add 1 (...)

#reduce

#es6 and Beyond >
▻https://hackernoon.com/es6-and-beyond-28aed8574e00?source=rss----3a8144eabfe3---4

https://cdn-images-1.medium.com/max/1024/1*YnFCu3IeIhmvPg3GCk769A.jpeg

Hello folks,ES6, pretty much hyped topic these days in front-end world.So, how about learning some cool features of ES6 and Beyond (like, #es7, ES8).First thing first.What ES means?ES stands for #ecmascript.What is the different between ECMAScript and JavaScript then?ECMAScript is the standard whereas #javascript is also the standard. But,ECMAScript is specification whereas JavaScript is the implementation of ECMAScript specifications.So, let’s get started.What we are going to learn?letconstObject Rest/Spread propertiesArrow FunctionString interpolationExponential **Array.prototype.includesString.prototype.padStartString.prototype.padEndObject.valuesObject.entriesLetlet is the new var but the advantage is that it is accessible & available within the scope only. Let’s see an (...)

#es8

Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!
▻https://frontendmasters.com/books/front-end-handbook/2019

Building a Progressive Blog App with #apollo and Cosmic JS
▻https://hackernoon.com/building-a-progressive-blog-app-with-apollo-and-cosmic-js-aaaccd24966f?s

https://cdn-images-1.medium.com/max/527/1*IRdI9l980gmFfdkx7ai2hw.png

Hello stranger.Come with me on a short adventure as we build a fast, simple interface for publishing blog style articles. Something sensible. It should look clean and simple yet have the ability to perform powerful resource fetching with some query magic. I’m talking about #graphql, the query language built with web APIs in mind. And speaking of web APIs, we will also be using our handy Content Management Service: Cosmic JS, to Create and Store our Blog Data.TLDR:Progressive Apollo BlogProgressive Apollo Blog Codebase0.0 Before You StartBefore you go any further make sure you have the required developer tools installed on your machine. Mainly you will need Node JS, its accompanying package manager: npm, and git. Git is semi optional and will only be used to code storage and deployment if (...)

#react #cosmic-js #javascript

#angular Universal On Firebase Hosting: A Tutorial
▻https://hackernoon.com/angular-universal-on-firebase-hosting-a-tutorial-721f25eb13be?source=rss

https://cdn-images-1.medium.com/proxy/1*BZ1IMWrjdIGuQzcRXA5cDg.png

In this Angular Tutorial, I’ll tell you how you can make you a normal Angular app to support Server-side rendering using angular universal and deploy it on firebase hosting with firebase functionsI am assuming you already have an angular projectFirst, you have to Add angular universal support to your Angular application for that we will run one cmd Note you can find your project name in angular.json in your root folderOnce it is done you will see numerous changes in your project to know more about this transition visit Angular universal officialng add @nguniversal/express-engine —clientProject <project name>Next step is to make some changes in your server.ts 1. ) you need to add export in front of app variable2. ) You need to comment the listening of your app which is typically at (...)

#angular-tutorial #javascript #programming #typescript

Learn to code in 5 months, get hired, and thrive as a web developer
▻https://hackernoon.com/learn-to-code-in-5-months-get-hired-and-thrive-as-a-web-developer-5ab683

https://cdn-images-1.medium.com/max/750/1*FRSrcbGuLEXvvuzaxdmMeg.jpeg

Nowadays we can’t imagine our lives without websites and apps — they changed everything. And as web development continues to grow exponentially, there remains an immense demand for web developers that is projected to grow over a 10-year period.With a wide range of possible ways to become a web developer, most learners are not sure how to begin.In this article, you will find a step-by-step plan on how to become a web developer in 5 months. This article answers three main questions:Part 1: WHY learn to code?Part 2: WHAT you will learn? (the 5-month plan)Part 3: WHEN to start looking for a job?Part 1: WHY learn to code?You can improve your yearly incomeAccording to Paysa, a salary comparison website, “A Web Developer earns an average of $91,587, ranging from $77,544 to $103,370, with top earners (...)

#front-end-development #learn-to-code-online #javascript #learning-to-code #web-development

Playing Space Invaders With Your Own Voice
▻https://hackernoon.com/playing-space-invaders-with-your-own-voice-f0bc7581e9bc?source=rss----3a

https://cdn-images-1.medium.com/max/1024/1*nsJrdH3vdEAW-2vjzFR_dg.jpeg

Photo by Andre HunterAfter some time testing voice #games in my Alexa device, one question came to my mind…Why not try to convert a classic game control system to a Voice User Inteface?So let’s do a simple experiment with a Space Invaders written in #javascript.Final result (Kind of)After some walkarounds I made a requirement list in order to reach my target:Speech RecognitionSpeech SynthesisAn NLU or set of hardcode rules to match my utterances to intentsImplementation of the web reactions to these intentsWell, once I had more or less clear what I was looking for, I use the second engineer lesson: don’t reinvent the wheel. So, once again I whispered something to Google and it led me to something called Woice.Once I went through the tutorial for creating a new application, I charged the SDK (...)

#ai #voice-assistant #ux

Semantic Versioning 101
▻https://hackernoon.com/semantic-versioning-101-d2623083714b?source=rss----3a8144eabfe3---4

https://cdn-images-1.medium.com/max/1024/1*hghixiKhRY9DV49-mZQGmg.png

Semantic Versioning 2.0.0 (semver.org) is a robust and elementary standard that encapsulates a wealth of information about the software you’re publishing or consuming.Open source veterans know and understand the importance of this standard. If you’ve run a project in long-term maintenance mode, you come to realize its power one way or another. Still, enthusiastic, fast-moving dev teams like to find ways around this standard. I’ve seen more than a few engineers decide to invent their own ideas around major, minor, and patch increments. Their rationale is rooted in aesthetics or their own release schedule.A key principleAside from the concise and complete information at semver.org, it is critical to understand:Semantic versioning is for your consumers. It’s not for your release schedule or (...)

#python #nodejs #open-source #software-development #javascript

You-Dont-Need-jQuery/README-fr.md
▻https://github.com/nefe/You-Dont-Need-jQuery/blob/master/README-fr.md

Avoiding Race Conditions when Fetching Data with React Hooks
▻https://hackernoon.com/avoiding-race-conditions-when-fetching-data-with-react-hooks-220d6fd0f66

https://cdn-images-1.medium.com/max/1024/1*okLGlm1oBbTkR9OIm--MYA.jpeg

Man jumping over clockAbout a month ago, I posted an example of fetching data using React Hooks to Twitter. While it was well-intended, Dan Abromov (of the React core team) let me know that my implementation contained a race condition. Consequently, I promised to write a blog post correcting my implementation. This is that post!Note: If this article helps you, please help spread the word by lending a clap (or 50)! ??SetupIn our example app, we are going to fake-load people’s profile data when their names are clicked. To help visualize the race condition, we’ll create a fakeFetchfunction that implements a random delay between 0 and 5 seconds.const fakeFetch = person => return new Promise(res => setTimeout(() => res($person's data), Math.random() * 5000); );;Initial (...)

#react-hook #reactjs #front-end-development #asynchronous #javascript