Improving developer experience as well as front-end performance with webpack.

• a_web

  2 0 0.0 HTML

  A web is a blog repo to demo how on could improve developer experience as well as front-end performance with webpack.

  

Our blog is about improvement, so it's better if we start with something to improve upon.I went ahead and made an app and hosted it on heroku, also pushed its code to github (branch name: unoptimized). The final code is also available on github (branch name: optimized).

• PostCSS

  86 28,192 8.8 TypeScript

  Transforming styles with JS plugins

  

PostCSS

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• cross-env

  22 5,156 5.6 JavaScript

build; sets and enviroment valiable of NODE_ENV=production using cross-env lib and builds the production bundle, minified and without source-maps as set in the webpack.config.js file.

• Chart.js

  183 63,425 7.8 JavaScript

  Simple HTML5 Charts using the <canvas> tag

  

// charts.js const chart01 = document.getElementById('chart01').getContext('2d'); const chart02 = document.getElementById('chart02').getContext('2d'); const todoListDiv = document.querySelector('#todo-list') const todoList = { value: ["Walk Dog", "Publish Blog", "Renew expired subscriptions"] } todoList.value = [...todoList.value, "Buy groceries"] todoList.value = [...todoList.value, "Fix reactivity Bug"] for (const todo of todoList.value) { // Creates a "todo" document const todoDiv = document.createElement("div") todoDiv.classList.add("todo") const newItem = document.createElement("li") newItem.innerText = todo newItem.classList.add("item") todoDiv.appendChild(newItem) // Add item to list todoListDiv.appendChild(todoDiv) } // Just the same examples on chart.js documentation // @ https://www.chartjs.org/ const myChart = new Chart(chart01, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); const myChart02 = new Chart(chart02, { type: 'bar', data: { labels: ['Houses', 'Hotels', 'Lofts', 'Parks', 'Cottage', 'Cruise-Ships'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); // end of charts.js

• caniuse

  388 5,499 9.5 JavaScript

  Raw browser/feature support data from caniuse.com

Ensure our code is compatible across browsers by introducing loaders like post-css and babel to add vendor prefixes and transpile newer ECMAScript syntax into older javascript and adding pollyfils for newer web apis/ES implements respectively.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project