The “One HTML Page Challenge”, a great example of view-source culture / Boing Boing
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.
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.
« A personal checklist for publishing web components to npm » par Justin Fagnani, auteur de LitElement
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
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
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.
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.
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
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?
Iván Sánchez Ortega / Leaflet.TileLayer.GL · GitLab
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 :
#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.
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?
Basé sur le moteur de rendu de #3djs, utilise la syntaxe de js-sequence-diagram (▻https://bramp.github.io/js-sequence-diagrams)
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 ?)
Serving #react and Koa together
How I configure VSCode for Everything
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 (...)
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 (...)
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
Building a Progressive Blog App with #apollo and Cosmic JS
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 (...)
#angular Universal On Firebase Hosting: A Tutorial
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 (...)
Learn to code in 5 months, get hired, and thrive as a web developer
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 (...)
Playing Space Invaders With Your Own Voice
Semantic Versioning 101
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 (...)
Avoiding Race Conditions when Fetching Data with React Hooks
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 (...)
Guide to recover from accidental commits and rebase in #git
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
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 (...)
Start Using Superior Image #compression Today
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 (...)