▻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.
#javascript
-
-
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.htmlWhen 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
-
le site du challenge : ▻https://onehtmlpagechallenge.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.
-
« 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 #npmPoint 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.htmlen 30s
▻https://www.youtube.com/watch?v=UwPkWXQ6ORYou en 50 min
▻https://www.youtube.com/watch?v=4IZ-ykGnIRcc’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 #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/projectsThe 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.comThe 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.comLeaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.
Scrollame
▻https://github.com/russellgoldenberg/scrollamaScrollama is a modern & lightweight JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
Important ChangesVersion 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-gpxSince 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?
-
« 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/aboutJSHint 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-
Testé un peu, j’ai tenté de basculer ma conf #eslint ▻https://github.com/brunob/leaflet.fullscreen/blob/master/.eslintrc vers #jshint sans succès pour l’insntant, donc je reste sur eslint...
-
-
Iván Sánchez Ortega / Leaflet.TileLayer.GL · GitLab
▻https://gitlab.com/IvanSanchez/Leaflet.TileLayer.GLWith 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.htmlWhy?
#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
-
#cartographie #développement #web #leaflet #javascript et surtout : #glitter, le plus important
-
-
mermaid · GitBook
▻https://mermaidjs.github.ioGeneration 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--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 (...)
-
How I configure VSCode for Everything
▻https://hackernoon.com/how-i-configure-vscode-for-everything-7df65a316a52?source=rss----3a8144eCredits: 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---4How 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 (...)
-
#es6 and Beyond >
▻https://hackernoon.com/es6-and-beyond-28aed8574e00?source=rss----3a8144eabfe3---4Hello 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
ECMAScriptandJavaScriptthen?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?sHello 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 (...)
-
#angular Universal On Firebase Hosting: A Tutorial
▻https://hackernoon.com/angular-universal-on-firebase-hosting-a-tutorial-721f25eb13be?source=rssIn 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 (...)
-
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-5ab683Nowadays 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----3aPhoto 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---4Semantic 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-220d6fd0f66Man 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
-
Guide to recover from accidental commits and rebase in #git
▻https://hackernoon.com/guide-to-recover-from-accidental-commits-and-rebase-in-git-d46cc0b54046?REBASE can be HelpfulTraditional working of Git RebaseIn Git, the rebase command integrates changes from one branch into another. It is an alternative to the better known “merge” command.You heard it’s scary right? You can create or recreate HISTORY! ?People ask you to stay away from git rebase but, it can be very useful at times. This articles covers a good use of REBASE command contrary to the definition that is taken from the official git documentation.A good use of git REBASELet’s talk about a very common scenario which I think all developers may have encountered or will encounter one day.Suppose you are using the same machine for the company as well as for your personal projects and when you use two different accounts for your #github, you configure your local git like this:git config (...)
-
The 2019 Web Developer RoadMap
▻https://hackernoon.com/the-2019-web-developer-roadmap-ab89ac3c380e?source=rss----3a8144eabfe3--An illustrated guide to becoming a Web Developer with links to relevant coursesHello Guys, I hope you are doing great in 2019. I am sure you all have already made your goals by now and thinking about how to achieve those goals. If one of your goals is to learn to code or to become a Web Developer in 2019 then I have something great to share with you today, the 2019 Web Developer RoadMap.This is an excellent illustration on how to become a web developer in 2019 and guide you on how you can learn and master Web Development in 2019.It’s a collection of different paths to learning front-end, back-end, and all other things a Web developer should know. You will not just know about web development but about essential #programming stuff which is important for all kind of programmers. The RoadMap (...)
#web-developer-roadmap #software-development #web-development #javascript
-
Start Using Superior Image #compression Today
▻https://hackernoon.com/start-using-superior-image-compression-today-932e8e086b72?source=rss----This article proposes use cases for new image codec and presents libraries to work with it on both front-end and back-end.Compression overviewFirst of all, why use better compression, doesn’t network bandwidth increase every year? Why media industry continues to push requirements for codec standards with even higher compression ratio?There are three major reasons for that:Network coverage. While you’re achieving 20 Gbps near the 5G cell, there are many places in town where speed isn’t that great at all.Traffic cost. Even if you download fast, most telcos charge you for every byte of data.Higher resolution and quality. Need at least 8K for 12.9” tablet for human-eye resolution, ideally lossless. We are not there yet.For example I browse web in underground a lot and inside tunnel fantastic LTE (...)
