#webpack

RFC 8752 : Report from the IAB Workshop on Exploring Synergy between Content Aggregation and the Publisher Ecosystem (ESCAPE)

Ce #RFC est le compte-rendu d’un atelier de l’IAB qui s’est tenu en juillet 2019 au sujet du #WebPackaging, une proposition technique permettant de regrouper un ensemble de pages Web en un seul fichier, pouvant être distribué par des moyens non-Web, tout en étant authentifié. Cela pose des questions nombreuses sur le copyright, l’authentification, la gouvernance, le rôle des intermédiaires (WebPackaging peut changer le rapport de force entre créateurs de contenu et GAFA) , etc. Un concentré d’enjeux et défis actuels.

https://www.bortzmeyer.org/8752.html

Bien que pas mal de gens ici font du Web, je n’ai pas trouvé d’article sur le WebPackaging sur SeenThis, qui, en tant qu’intermédiaire, pourrait être intéressé. Alors je mets d’autres liens :

La page de l’atelier, avec les textes soumis : https://www.iab.org/activities/workshops/escape-workshop

La page du projet WebPackaging : https://github.com/WICG/webpackage

Le groupe de travail IETF : https://datatracker.ietf.org/wg/wpack/documents

#WebPackage

Let’s Make Our Bundle Size Even Smaller
▻https://hackernoon.com/lets-make-our-bundle-size-even-smaller-7a5727bb110?source=rss----3a8144e

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

If you ever developed a SPA (Single-Page-Application), where ever it was on Angular, #react, Vue or something else, You probably noticed that all the hard work you’ve put into your app goes to one minified .js file and one .css file. Those files contain all your dependencies and functionalities of the app.sometimes, those files could become quite big and increase the loading time of your app this something I stumbled upon during my work.With #webpack for example, the files are made after “Tree-shaking “ and Uglify.Tree-shaking is the process of removing all the unused function and variables from the code, which makes our app a lot smaller (basically we only use a small part of our dependencies and a large part of the code isn’t even being called).Uglify (as it sounds like) is the process of (...)

#javascript #npm #coding

Deploying a Node.js #twitter Bot on AWS Lambda using #webpack
▻https://hackernoon.com/deploying-a-node-js-twitter-bot-on-aws-lambda-using-webpack-df6e2e187a78

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

I recently had an idea for a Twitter bot for the #LearnInPublic community, which I thought would be a fun project with half a day worth of work. Moreover, I wanted to use AWS Lambda function for the sake of learning. Why AWS Lambda? Because it’s practically free for maintaining a twitter bot and I got hands on experience with a seemingly complex tool used widely in the industry. You get 1,000,000 free requests and 400,000 seconds of compute time per month for AWS Lambda. My bot uses 0.02% of the above numbers.In the process I found a cool use-case Webpack. I had fun reading the webpack docs and figuring learning about the gotchas. Even though it was a very primitive use-case, felt like a true Sean Larkinn for a day. Here is a detailed article on how you could do the same.A little about (...)

#aws-lambda #nodejs #javascript

#carlo development on a Web server
▻https://hackernoon.com/carlo-development-on-a-web-server-626ee0aeae1c?source=rss----3a8144eabfe

Originally posted on blog.agney.inCarlo is a headful Node app framework for building desktop applications.How is it different from Electron, Proton Native?While these other frameworks, bring their own runtime into the equation, Carlo uses the Chrome instance already installed on a users computer.Why would you want it on a web server?Using #webpack to bundle all your files makes it easier to use the developer ecosystem that the javascript community already provides. Like Babel, SCSS or ESLint.What is about to be assumed?You already know how to setup a normal webpack server.Is there a shortcut?Yes, Electrojet CLI provides a single command to setup a carlo project using webpack:npm init electrojet <project-name> —template=carloHow do I set Carlo to listen to the webpack dev server?Carlo (...)

#blocked-by-client #dev-server #carlo-development

#webpack, #babel, and #react from Scratch — BUT WHY ?
▻https://hackernoon.com/webpack-babel-and-react-from-scratch-but-why-889a385ff32f?source=rss----

https://cdn-images-1.medium.com/max/640/1*KpImd6VctvHpmNeyeZKeWQ.png

Webpack, Babel, and React from Scratch — BUT WHY?Webpack, Babel, and ReactIn between graduate school and other things, I have been me digging deeper into the #javascript ecosystem. As a person who loves React, I got curious with create-react-app. With a simple npm install -g create-react-app on your command line, you will be able to install the most popular React starter pack. However, have you ever wondered how create-react-app works? Or how they make these apps run fast on the browser with relatively smaller network requests? Maybe perhaps how bundling and generating static files happens after running npm run build? These things are intriguing. Under the veil of magic these open source projects carry are simple lines of code that you and I can learn and understand.I decided to build a (...)

#node

Improving the #performance of #javascript Applications
▻https://hackernoon.com/improving-the-performance-of-javascript-applications-c05385185f9f?source

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

As developers we all tend to have our own views regarding technologies, languages and frameworks. We argue a lot about code style, indentation and best practices. However, If there is one thing that we can all agree on, it is that performance is of the upmost importance.As we know the average timespan of a person tends to get lower and lower. We focus on sending a loader or something as soon as we can so we can grab the user’s attention and prevent him from bouncing from our page. It doesn’t matter how good our code is if the user doesn’t get the chance to even load the app in the first place.Front-end development is incredibly dynamic. Thanks to that, we now have an abundance of incredible tools that can help us improve the performance of our web applications.While some of the concepts (...)

#webpack #optimization #react

The status of #javascript outside of the browser: 2018 & beyond.
▻https://hackernoon.com/the-status-of-javascript-outside-of-the-browser-2018-beyond-ee0b79ee059f

https://cdn-images-1.medium.com/max/357/1*0qz-rzy_5gcf9wjdBP99pw.png

The JavaScript doesn’t stay just only in inside of browser as many could think. It’s showing a great power in various area and sometimes it’s more potential from outside of the browser.Bear in mind: The content of this article is by May of 2018 and will not likely reflecting newest updates as well and may contain some personal perspectives.Node.jsAs the year of 2017, continuously demonstrated a shiny progress as it was. 250 million downloads happened on last year, and this is equivalent of 700K downloads per day!It’s growing tremendously every year, the monthly downloads of the year 2017 was increased as 70~80K more compared with the monthly downloads from 2016.node by numbersMany companies adopted Node.js last year. For those who needed to provide new digital experiences to customers in (...)

#nodejs #webpack #react-native #pwa

#react with #typescript and #webpack
▻https://hackernoon.com/react-with-typescript-and-webpack-654f93f34db6?source=rss----3a8144eabfe

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

The feeling, when you react, script and pack.Why am I writing thisAt the time of writing this article, the popularity of React has already shot off the roof, that of Typescript is on the rise and it is safe to say that Webpack is the most preferred modern module bundler for an application. However, there is still an underlying dearth of a good example of the best possible way to start a project in React with Typescript and Webpack. Having said that, there are good resources out there if you want to use create-react-app cli or any other react starter kit out there. But there are very few ones if you want to have control over the configurations of your application.The downside of using a cli like create-react-app are that you have to rely on the following tools the same way (...)

#web-development #javascript

Full Stack Web Application using #react, Node.js, Express and #webpack
▻https://hackernoon.com/full-stack-web-application-using-react-node-js-express-and-webpack-97dbd

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

Create React App is a quick way to get started with React development and it requires no build configuration. But it completely hides the build config which makes it difficult to extend. It also requires some additional work to integrate it with an existing Node.js/Express backend application.In this guide, we will walk through the set up of a simple full stack React application with a Node.js and Express backend. Client side code is written in React and the backend API is written using Express. This application is configured with Airbnb’s ESLint rules and formatted through prettier.Source code for this application can be found here.Quick Start# Clone the repositorygit clone ▻https://github.com/crsandeep/simple-react-full-stack# Go inside the directorycd simple-react-full-stack# Install (...)

#javascript #expressjs #full-stack

A tale of #webpack 4 and how to finally configure it in the right way
▻https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e9

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

Spoiler: there is no right way. #justwebpackthingsOriginal photo: ▻https://www.instagram.com/p/BhPo4pqBytk/?taken-by=riittagirlThanks for giving my tutorial so much feedback. I am proud to say that Webpack has twitted about it the other day and it was officially approved my a couple of contributors!thanks!There are a million tutorials online, so you probably have seen a thousand different ways to configure Webpack file. And all of them will be working examples. Why is it so? Webpack itself has been evolving really fast and a lot of loaders and plugins have to keep up. This is a major reason why the #configuration files are so different: with a different version combination of the same tools things might work, or break.Let me just say one thing, and this is my sincere opinion: a lot of (...)

#javascript #css #postcss