flatpickr - lightweight datetimepicker & calendar
▻https://chmln.github.io/flatpickr
“Lightweight, with no dependencies (like jQuery); Native Android+iOS datetime widget support; Works with IE9 and up; Range calendar; Smart, sensible defaults; Comes with 8 themes, 37 locales, and SVG icons”
What If Facebook And Twitter Made You Read An Article Before You Could Share It?
▻http://www.forbes.com/sites/kalevleetaru/2017/01/15/what-if-facebook-and-twitter-made-you-read-an-article-before-you-could-share
One of the most fascinating statistics about how we consume and share news online revolves around how few of us actually read the news articles we share – we see an interesting headline and click the “share” button to blast it out to all our friends and followers without ever reading further. In fact, upwards of 60% of links shared on social media were posted without the sharer reading the article first.
[...]
Many news outlets today use JavaScript-powered beacons embedded in their articles to track how far readers scroll through each article, the time they spend on each section of the article and other micro-level assessments of engagement.
Today all of that data is typically just fed back into a statistics portal and used for ad marketing, but the same tools could easily be turned around to assess whether a reader
A) never read the article at all,
B) skimmed just the lead paragraph quickly,
C) skimmed the first half of the article quickly,
D) scrolled quickly down the full length of the article, but scrolled too fast to really take in any of the details,
E) scrolled quickly, but paused several times to read sections in more detail,
F) read the entire article in detail or
G) some combination of the above.
[...]
In fact, in its proposal to combat “fake news” Facebook has proposed offering precisely such public indicators on news and other shared links to reflect that one of its fact checking organisations has disputed the contents of the article.
Thus, Facebook is tracking how much time users spend reading each post/link and the technology is or shortly will be in place to assign and display “truth” scores for each post/article, meaning Facebook has all of the pieces in place to assign a public “engagement”
[...]
Perhaps, then, the biggest benefit would be forcing the world’s online citizenry to become more information literate, to read and think about the information they consume before blindly sharing it with the planet and force us all to spend a bit more time thinking about what we read online and a bit less time acting as illiterate carrier pigeons.
#meta
Also mentioned in the above article:
You Won’t Finish This Article
Slate, June 2013
A Prettier JavaScript Formatter
▻http://jlongster.com/A-Prettier-Formatter
oday I am announcing prettier, a JavaScript formatter inspired by refmt with advanced support for language features from ES2017, JSX, and Flow. Prettier gets rid of all original styling and guarantees consistency by parsing JavaScript into an AST and pretty-printing the AST. Unlike eslint, there aren’t a million configuration options and rules. But more importantly: everything is fixable.
Gothdo/range: A JavaScript implementation of the Python’s range() function.
▻https://github.com/Gothdo/range
A JavaScript implementation of the Python’s range() function.
#eqcss • Element Query #css | Scoped CSS, Meta-Selectors, Element Queries
►http://elementqueries.com
Element queries are a new way of thinking about #responsive web design where the responsive conditions apply to elements on the page instead of the width or height of the browser. Unlike CSS @media queries, #@element Queries are aware of more than just the width and height of the browser, you can write responsive conditions for a number of different situations like how many characters of text or child elements an element contains. Another concept that element queries brings to CSS is the idea of ‘scoping’ your styles to one element in the same way that JavaScript functions define a new scope for the variables they (...)
Does Google execute JavaScript ?
▻https://www.stephanboyer.com/post/122/does-google-execute-javascript
“Google may or may not decide to run your JavaScript, and you don’t want your business to depend on its particular inclination of the day. Do server-side/universal/isomorphic rendering just to be safe.”
How to explain recursion and recursive functions to people by using paper & boxes
▻https://www.youtube.com/watch?v=vLhHyGTkjCs
What is recursion and how to wrap your head around it? Learn about this powerful and very important concept in few minutes.Free exercises, quizzes, videos and lots of additional materials, illustrations, references, etc. Learn JavaScript and the most important fundamentals of computer programming for free!Learn more at ▻https://en.hexlet.io/courses/intro_to...
RequireJS
▻http://requirejs.org
RequireJS is a #JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the #speed and quality of your code.
Loading Polyfills Only When Needed
▻https://philipwalton.com/articles/loading-polyfills-only-when-needed
“My strategy optimizes for browsers with full support, and treats all other browsers equally. That means for users on fully-supporting browsers I don’t load any polyfills, and for users on partially-supporting browsers, I load the same set of polyfills, regardless of how many of those polyfills that particular browser actually needs.”
#polyfill_browser_JavaScript_clevermarks_progressive_enhancement
Genetic.js - Sub Protocol
▻http://subprotocol.com/system/genetic-js.html
The existing Javascript GA/EP library landscape could collectively be summed up as, meh. All that I required to take over the world was a lightweight, performant, feature-rich, nodejs + browser compatible, unit tested, and easily hackable GA/EP library. Seamless Web Worker support would be the icing on my cake.
Until now, no such thing existed. Now you can have my cake, and optimize it too. Is it perfect? Probably. Regardless, this library is my gift to you.
Have fun optimizing all your optimizations!
Read Me · Jumpsuit
▻https://jumpsuit.io
Jumpsuit is a powerful and efficient Javascript framework that helps you build great apps. It is the fastest way to write scalable React applications with the least overhead.
▻https://medium.com/@tannerlinsley/jumpsuit-react-redux-made-simple-e3186ba1b077
There are countless reasons that people love #React + #Redux, but we’ve found that learning how to put two and two together is not an easy task for most, and becoming productive with the combo is just as difficult. Every tutorial and starter-template that we could find seemed to be stuffed full of quick-start-boilerplate that often ends up being more confusing than helpful, and redux implementations that felt way too verbose for what they were accomplishing. So we set out to build a #tool that would make all of this easier…
mona
▻https://www.npmjs.com/package/mona
mona is a Javascript library for easily writing reusable, composable parsers. It makes parsing complex grammars easy and fun!
Frameworks without the framework: why didn’t we think of this sooner? • Svelte
▻https://svelte.technology/blog/frameworks-without-the-framework
Une nouvelle approche de #framework #javascript.
A suivre...
▻https://svelte.technology/guide
If you’ve ever built a JavaScript application, the chances are you’ve encountered – or at least heard of – frameworks like React, Angular, Vue and Ractive. Like Svelte, these tools all share a goal of making it easy to build slick interactive user interfaces.
But Svelte has a crucial difference: rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time. That means you don’t pay the performance cost of the framework’s abstractions, or incur a penalty when your app first loads.
The Svelte implementation of TodoMVC weighs 3.6kb zipped. For comparison, React plus ReactDOM without any app code weighs about 45kb zipped. It takes about 10x as long for the browser just to evaluate React as it does for Svelte to be up and running with an interactive TodoMVC.
And once your app is up and running, according to js-framework-benchmark Svelte is fast as heck. It’s faster than React. It’s faster than Vue. It’s faster than Angular, or Ember, or Ractive, or Preact, or Riot, or Mithril. It’s competitive with Inferno, which is probably the fastest UI framework in the world, for now, because Dominic Gannaway is a wizard. (Svelte is slower at removing elements. We’re working on it.)
It’s basically as fast as vanilla JS, which makes sense because it is vanilla JS – just vanilla JS that you didn’t have to write.
JSCommunicator: Flexible SIP-based WebRTC
▻http://jscommunicator.org
Ready-to-use high-level API for SIP-based #WebRTC voice, video and web chat.
JSCommunicator is a WebRTC communication tool developed in HTML, CSS and JavaScript. It supports voice, video and chat messaging using the SIP protocol over WebSockets.
ZEIT – Next.js
▻https://zeit.co/blog/next
We’re very proud to open-source Next.js, a small framework for server-rendered universal JavaScript webapps, built on top of React, Webpack and Babel, which powers this very site!
Extremely impressive. Some parts still missing but I’ve seen the future and this is it.
State Of JavaScript 2016
▻http://stateofjs.com
“Over nine thousand developers took part in the first edition of the State Of JavaScript survey. They answered questions on topics ranging from front-end frameworks and state management, to build tools and testing libraries.”
The „Same Origin” security policy | JavaScript Tutorial
▻http://javascript.info/tutorial/same-origin-security-policy
The “Same Origin” policy limits the access of one window to another.
The reason behind that is security. If you have blabla.com in one window and gmail.com in another one, then you’d not want a script from blabla.com to access or modify your mail or run actions in context of gmail on your behalf.
The essence of the Same Origin policy can be formulated as: windows can work in contexts of each other only if they are from same protocol://domain:port, or, shortly, from same origin.
Meet Leaflet 1.0. - Leaflet - a JavaScript library for interactive maps
▻http://leafletjs.com/2016/09/27/leaflet-1.0-final.html
Today marks the final release of #Leaflet 1.0. It’s a culmination of several years of work by dozens of contributors from all over the world. This is the fastest, most stable and polished Leaflet release ever.
The changelog contains over 400 changes compared to the previous stable, v0.7.7. The highlights include:
– Huge performance improvements in all aspects of the library and vector layers in particular.
– New L.Tooltip class for all your dynamic labeling needs.
– Flyover animations (zooming and panning in a curve with map.flyTo).
– Fractional zoom level support (map.setZoom(12.34)).
– Much better tile loading algorithm with less flickering.
– Custom pane management (including multiple vector layer panes and interleaving vectors and tile layers).
– Better support for non-standard projections.
– More accessibility features.
– Vastly improved documentation.
– Tons of bugfixes and stability improvements.
...
Starting with 1.0, we’re switching to a fast release cycle, where a new version will come out every 2–4 weeks. We’ll also prefer many small, incremental changes (with releases in between) over ambitious rewriting quests.
Super, mais pour le moment je ne peux pas l’utiliser chez @mad_meg à cause de ce petit bug : ▻https://github.com/Leaflet/Leaflet/issues/4912
Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
▻https://www.smashingmagazine.com/2016/06/inclusive-design-patterns
The Inclusive Design Patterns book covers all the techniques, gotchas and strategies you need to be aware of when building accessible, inclusive interfaces. We’ll explore the document outline, external links and “skip” links, navigation regions and landmarks, labelling and alternative text for illustrations, buttons, tables of contents, JavaScript patterns, touch targets, filter widgets and infinite scrolling and “load more” button and grid display and dynamic content and tab interfaces and password validation and web forms and error messages — and pretty much anything else you need to know about accessibility, including how to prototype with inclusivity in mind, how to deal with legacy browsers and dozens of practical snippets to use when building inclusive (...)
BuckleScript is an optimizing compiler which compiles OCaml into JavaScript module by module without name mangling. The generated code is highly readable and super small.
▻http://bloomberg.github.io/bucklescript/blog/index.html
font-display for the Masses | CSS-Tricks
▻https://css-tricks.com/font-display-masses
#font-display is a new #CSS property that is available as an experimental feature that first shipped in Chrome 49 and is now also in Opera and Opera for Android. Using it, we can control how fonts display in much the same way that we can with JavaScript-based solutions, only now through a convenient CSS one-liner!
font-display is used inside of a @font-face declaration for your custom fonts. This property accepts a number of values:
auto: The default value. The typical browser font loading behavior will take place, which is to hide typefaces that use custom fonts, and then display the affected text when fonts finish loading.
swap: The fallback text is shown immediately until the custom font loads. In most cases, this is what we’re after. JavaScript-driven font loading solutions almost always aim to emulate this setting.
fallback: This is sort of a compromise between auto and swap. There will be a short period of time (100ms according to Google) that text styled with custom fonts will be invisible. The unstyled text will then appear (if the custom font hasn’t already loaded by this point.) Once the font loads, the text is styled appropriately.
optional: Operates exactly like fallback in that the affected text will initially be invisible for a short period of time, and then transition to a fallback font. The similarities end there, though. The optional setting gives the browser freedom to decide whether or not a font should even be used, and this behavior hinges on the user’s connection speed. On slow connections, you can expect that custom fonts may not load at all if this setting is used.
CoverageJSON - CoverageJSON is a geospatial #coverage interchange format based on JavaScript Object Notation (#JSON).
A format for publishing #geotemporal data to the web.
Un plugin #leaflet est déjà dispo : ▻https://github.com/Reading-eScience-Centre/leaflet-coverage
#map
A new #algorithm for finding a visual center of a #polygon
▻https://www.mapbox.com/blog/polygon-center
▻https://github.com/mapbox/polylabel
http://c1.staticflickr.com/9/8801/28714168970_e93fe37013.jpg 
https://c1.staticflickr.com/9/8824/29000043555_6487a7ab36_h.jpg The best place to put a text label or a tooltip on a polygon is usually located somewhere in its “visual center,” a point inside a polygon with as much space as possible around it.
The first thing that comes to mind for calculating such a center is the polygon centroid. You can calculate polygon centroids with a simple and fast formula, but if the shape is concave or has a hole, the point can fall outside of the shape.
The result is Polylabel, a fast and precise #JavaScript module for finding good points to place a label on a polygon. It is up to 40 times faster than the algorithm we started with, while also guaranteeing the correct result in all cases.
It’s now being ported to C++ and incorporated into both Mapbox GL JS and Native. The module is just 100 lines of code, so check it out!
#map
J’ai commencé à jouer avec cet algo pour comparer avec le centroide etc.
▻http://bl.ocks.org/Fil/da021023d58b8ddefd165c65e37f796b
Et au passage :
Distance à la côte
self-made using the technique described in Garcia-Castellanos, D., & U. Lombardo, 2007. Poles of Inaccessibility: a calculation algorithm for the remotest places on Earth. Scott. Geogr. J., 123, 227-233. Based on the coastline database of Wessel, P. & Smith, W. H. F. (1996) A global self-consistent, hierarchical, high-resolution shoreline database, Journal of Geophysical Research, 101, B4, 8741 – 8743. Lake shores are excluded.
il y a un #seenthis_bug ci-dessus, le lien vers la page de wikicommons est pris comme un lien vers une image, or c’est une page.
Je viens de tomber dessus depuis un mail de leaflet.
L’article d’explication sur Medium est ici : ▻https://blog.mapbox.com/a-new-algorithm-for-finding-a-visual-center-of-a-polygon-7c77e6492fbc
Using the Web Animations API - Web APIs | MDN
▻https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API
The Web Animations API lets us construct animations and control their playback with JavaScript. This article will start you off in the right direction with fun demos and tutorials featuring Alice in Wonderland.
The Web Animations API opens the browser’s animation engine to developers and manipulation by JavaScript. This API was designed to underlie implementations of both CSS Animations and CSS Transitions, and leaves the door open to future animation effects. It is one of the most performant ways to animate on the Web where supported, letting the browser make its own internal optimizations without hacks, coercion, or Window.requestAnimationFrame().
With the Web Animations API, we can move interactive animations from stylesheets to JavaScript, separating presentation from behavior. We no longer need to rely on DOM-heavy techniques like writing CSS properties and scoping classes onto elements to control playback direction. And unlike pure, declarative CSS, JavaScript also lets us dynamically set values from properties to durations. For building custom animation libraries and creating interactive animations, the Web Animations API might be the perfect tool for the job.
Pour la mise au point/débogage de ces animations, la version de firebug fusionnée avec Firefox DevTools (à partir de Firefox 49, cf ▻https://blog.getfirebug.com/2016/06/07/unifying-firebug-firefox-devtools) propose « Animation Inspector », une console spécifique : cf ▻https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations
Pour aller plus loin : ▻https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate
Pour la compatibilité avec les navigateurs ne supportant pas l’API Web Animations (Internet Explorer et Safari actuellement) : ▻https://github.com/web-animations/web-animations-js
Brave Software | Building a Better Web
▻https://brave.com
Browse faster and safer with Brave.
The new Brave browser automatically blocks ads and trackers, making it faster and safer than your current browser.
Soon, micropayments and better ads will give users and publishers a better deal.
Brave Software | What is Ad Replacement?
▻https://brave.com/about_ad_replacement.html
What is Brave Ad Replacement?
Brave’s goal is to speed up the web, stop bad ads and pay publishers. One of the ways we plan to accomplish this is with ad replacements. We will also invite users to fund their wallets and to use those funds to pay the publishers of their favorite websites.
Blockchain-Powered Micropayment Browser Brave Raises $4.5m - Forbes
▻http://www.forbes.stfi.re/sites/jonathanchester/2016/08/01/blockchain-powered-micropayment-browser-brave-raises-4-5m/?sf=gdgxono#43e047fc5bec
Brave, a blockchain enabled browser with advanced security, enhanced speed and micropayment capabilities, has just received $4.5m in new funding from Founders Fund’s FF Angel, Propel Venture Partners, Pantera Capital, Foundation Capital, and Digital Currency Group. This nearly doubles the prior round of $2.5m in funding received in November of 2015, while the company was still in stealth mode.
Led by Brendan Eich, creator of the JavaScript language as well as co-founder of Firefox maker Mozilla, the Brave browser features are going to seem obvious to everyone in retrospect, and they are going to change the way everyone experiences the internet as they fix the current mess in the ad-tech ecosystem.
▻https://brave.com/about.html#team : encore une équipe qui fait la part belle aux développeuses...