Bundling your front-end with Webpack
Download as PPTX, PDF3 likes2,900 views
This document discusses how bundling front-end code with Webpack can help solve issues with large JavaScript files in single-page apps. It introduces Webpack as a module bundler that can handle dependencies across JavaScript, CSS, images and more. It supports loading modules on demand and pre-processing file types. The document provides a demo GitHub repo and references to learn more about Webpack's features and how companies like Instagram use it.
1 of 9
Downloaded 16 times
![About me
• Danillo Corvalan
• Full Stack Developer
– Nodejs, mongodb, mysql, docker
– Backbone, React
• TDC floripa 2014, sampa 2014
• Learning ReactJS (Packt pub)[In progress]
– Sergio Siqueira](https://image.slidesharecdn.com/bundling-frontend-webpack-150130174807-conversion-gate01/85/Bundling-your-front-end-with-Webpack-2-320.jpg)
Ad
Recommended
Production optimization with React and Webpack
Production optimization with React and Webpackk88hudson This document discusses optimizing React and Webpack applications for production. It recommends:
1. Not optimizing prematurely and ensuring engineering and product goals are aligned before optimizing.
2. Understanding available optimization options at build time like minification, code splitting, and using production builds of dependencies, and at runtime like server-side rendering and component lifecycle methods.
3. Instrumenting the application to measure performance metrics like bundle size, load time, and render time to identify optimization opportunities.
4. Setting meaningful benchmarks based on the actual user experience expected, rather than arbitrary metrics, to determine what constitutes acceptable performance.
Packing for the Web with Webpack
Packing for the Web with WebpackThiago Temple A presentation on how to use Webpack to bundle and build a web application using TypeScript and CSS. The presentation demonstrates how to use a few of Webpack's loaders and plugins.
Webpack and Web Performance Optimization
Webpack and Web Performance OptimizationChen-Tien Tsai Webpack and Web Performance Optimization discusses using Webpack and other tools to optimize web performance. It introduces Webpack as a module bundler and discusses its features like code splitting and optimizations. It covers setting up loaders and the Webpack build flow. The document also discusses various web optimization techniques including image optimization, reducing requests, minifying assets, critical rendering path, and caching. It provides examples of optimizing sites for mobile and comparisons of optimization approaches with different user and business impacts. The document discusses using tools like Gulp and integrating with Webpack for tasks like Sass compilation and testing. It also covers modularizing JavaScript with React and using Babel to transpile ES6 to ES5. Finally, it demonstrates collabor
Bundle your modules with Webpack
Bundle your modules with WebpackJake Peyser There are many build tools available to JavaScript developers, but Webpack is quickly emerging as the leader of the pack. To better understand its use cases and where it excels above the rest, Jake Peyser will walk you through how to use it as a task runner and module bundler, as well as a few other handy tips. Come learn why Webpack is the most popular build tool with React developers.
Webpack slides
Webpack slidesАндрей Вандакуров Webpack is a build tool that bundles assets and optimizes frontend projects. It supports bundling of CSS, images, and other file types alongside JavaScript code. Loaders allow preprocessing of files, and plugins enable functionality like code splitting, asset optimization, environment variable injection, and more. Webpack bundles modules together and outputs static assets to serve on a production server. Its flexibility, loaders, and plugins make it well-suited for large projects with complex asset workflows.
Improving build solutions dependency management with webpack
Improving build solutions dependency management with webpackNodeXperts Webpack is a build tool that bundles assets including JavaScript, images, fonts and CSS into packages called bundles that can be consumed in the browser. It analyzes dependencies between files and packages them accordingly. The webpack configuration file specifies the entry point, output, loaders and plugins. Loaders transform files and plugins add functionality to bundles. Webpack differs from other build tools like Grunt and Gulp in that it generates dependency graphs to bundle assets optimally rather than just running predefined tasks.
DotNet MVC and webpack + Babel + react
DotNet MVC and webpack + Babel + reactChen-Tien Tsai https://github.com/blackie1019/ReactNetDemo
This is a sample for demo how to use .Net MVC5 + Webpack + React + Babel to build Web Application
Webpack Introduction
Webpack IntroductionAnjali Chawla Understanding what is webpack, what features it provides and how to use it in your existing projects.
How to make your Webpack builds 10x faster
How to make your Webpack builds 10x fastertrueter Sharing my slides on a talk I held at the Berlin-based FullStack JS meetup. Tips and tricks how I reduced our build time (full / incremental) from 60s / 4s to 8s / 300ms.
Full config:
https://gist.github.com/trueter/0e861403e59a9e27a476f3ad7ada1a89
Give us a visit at http://www.pixsy.com
Webpack
WebpackAnjali Chawla Webpack is a module bundler that takes modules with dependencies and generates static assets by bundling them together. It manages dependencies, combines assets like JavaScript, CSS, images, and fonts, and allows for preprocessing with loaders and plugins. Webpack addresses pain points like module management, bundling assets together efficiently, and handling changes by allowing code splitting, extracting common dependencies, and enabling hot module replacement to avoid full page reloads on changes.
Lecture: Webpack 4
Lecture: Webpack 4Sergei Iastrebov This document provides an overview of materials for a webpack lecture, including basic webpack parameters, practical examples, and frequently asked questions. It covers topics such as entry points, output configuration, loaders, plugins, code splitting, and techniques for optimizing build performance and bundle size. The document also provides links to webpack documentation and resources for learning more about developing with webpack.
An Overview on Nuxt.js
An Overview on Nuxt.jsSquash Apps Pvt Ltd Amongst all the big front end frameworks, Nuxt.js stands out as it has a lot of advantages over the other. This presentation covers an overview of Nuxt.js and how Server Side Rendering helps in improving the SEO of a site.
Webpack 
Webpack DataArt This document discusses JavaScript modules and module bundlers like Webpack. It describes the purposes of JavaScript modules as encapsulation, organization, avoiding global scope pollution, and reusability. It then covers different ways to define modules, including using global variables, AMD, CommonJS, and ES6 modules. Webpack is introduced as a module bundler that can bundle modules, implement code splitting to optimize loading, and use loaders to treat different file types as modules. Webpack's plugin system and development tools are also discussed.
Webpack: your final module bundler
Webpack: your final module bundlerAndrea Giannantonio Webpack has quickly become one of the most popular choices among web developer builder tools. It can build, minify, split and do others awesome things to your assets.
We will do a simple walk through to let you familiar with the basics of webpack and all its potential.
An Intro into webpack
An Intro into webpackSquash Apps Pvt Ltd webpack is a powerful module bundler and it becomes an essential part of our JavaScript Ecosystem. This ppt comprises an overview on webpack, some of the core concepts of webpack and it's configurations with some working examples.
Webpack DevTalk
Webpack DevTalkAlessandro Bellini This document provides an overview and introduction to Webpack. It begins by establishing some ground rules and an agenda. It then discusses what prompted the creator to start using Webpack and how it works as an "assets crawler and bundler". The rest of the document covers the key aspects of Webpack like its configuration file, loaders and plugins, and how it can be integrated with other tools. Code examples are provided and questions are welcomed from the audience.
Webpack: from 0 to 2
Webpack: from 0 to 2Alessandro Bellini - Webpack is a module bundler that builds dependencies between modules and manages assets like JavaScript files, CSS files, and images.
- It uses loaders to transform different types of modules and plugins to extend its functionality. Loaders handle file transformations while plugins can access and modify the build process.
- Code splitting allows splitting code into separate bundles to optimize load performance by prioritizing loading and allowing on-demand loading of code. Techniques like extracting vendor code and using import statements help enable code splitting in Webpack.
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowDerek Willian Stavis Webpack is just a module bundler, they said. What they didn't say is why we need it, and what was the motivation that made us achieve what Webpack have been doing for us. In this talk we will navigate through the years of front-end development, ranging from 2003 to nowadays to understand this, and in the end, we will walk thought a complete Webpack project to understand how it works.
Nodejs - Building a RESTful API
Nodejs - Building a RESTful APISang Cù The document discusses building a RESTful API and deploying it to the cloud. It outlines using Node.js, Express.js, MongoDB, and other tools to build a scalable API. It then discusses deploying the application to services like Heroku and Travis CI for continuous integration and monitoring with New Relic. Case studies are provided of other companies like PayPal that were able to build applications faster and handle more traffic using similar Node.js architectures.
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationDavid Amend A presentation about the build tool grunt js JavaScript for web applications and node.js environments to achieve continous integration. David Amend
CQ5 Development Setup, Maven Build and Deployment
CQ5 Development Setup, Maven Build and Deploymentklcodanr Six Dimensions and 6D-Labs are pleased to distribute its 2nd CQ webinar "CQ5 Development Setup: Maven Build and Deployment" This webinar covers best practices in building and deploying CQ5 applications.
Intro to Vue 
Intro to Vue Isatu Conteh An introductory presentation on Vue.js done at an internal conference held at the Washington Post (DevDay 2017)
Introduction of webpack 4
Introduction of webpack 4Vijay Shukla It is a build tool that puts all of your assets, including Javascript, images, fonts,
CSS, in a dependency graph.
It lets us use require() in our source code to point to local files, like images.
We can decide how they’re processed in our final javascript bundle, like
replacing the path with a URL.
Nuxt.JS Introdruction
Nuxt.JS IntrodructionDavid Ličen This document provides an overview of a minimalist framework called Nuxt.js for creating universal server-side rendered (SSR) applications using Vue.js. Some key points covered include:
- Nuxt.js allows developers to write Vue components and pages while abstracting away concerns of client-server code splitting and routing.
- Features include automatic code splitting, SSR, routing, static file serving, bundling/minifying, and error handling.
- The framework uses a pages/ directory to define routes and components and includes Vuex and Vue-Router functionality out of the box.
- Async data loading, custom layouts, global meta tags, and asset handling are also
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseAaron Silverman Slides from Node.js and Twitter Bootstrap crash course given to Penn Graduate Computing Club. Covers creating basic node app, using the bootstrap grid, and deploying to an EC2 machine.
Adobe CQ5 for Developers - Introduction
Adobe CQ5 for Developers - IntroductionTekno Point This document provides an introduction to Adobe Experience Manager (AEM), formerly known as CQ5. It discusses key aspects of AEM including its use of OSGi and JCR technologies, templates and components for authoring content, and workflows for automating processes. The document also provides an overview of installing and setting up an AEM author instance, as well as related terms.
Webpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JSEmil Öberg Presentation from UppsalaJS, November 3, 2016.
Together we built a Javascript app and explored many parts of Webpack and how we can use Webpack to create production ready code as well as use it to help with our development.
Drupalcon 2021 - Nuxt.js for drupal developers
Drupalcon 2021 - Nuxt.js for drupal developersnuppla
Nuxt.js is a modern, performant framework that makes developing Vue.js-based frontend applications enjoyable. This session gives an introduction to Nuxt.js for Drupal developers. By providing analogies to known Drupal-APIs developers get ready to start building Nuxt.js applications that can run as a server or are deployed as static website. Finally, attendees will get an overview of the Nuxt ecosystem and the most essential Nuxt.js modules.
No up-front Javascript or Vue.js knowledge required!
Czym jest webpack i dlaczego chcesz go używać?
Czym jest webpack i dlaczego chcesz go używać?Marcin Gajda Podczas tworzenia frontendu aplikacji internetowych często odkrywamy, że nasza baza kodu JavaScript dość szybko się rozrasta i lawinowo przybywa nam zależności. Oczywistym rozwiązaniem wydaje się wtedy dzielenie kodu na mniejsze moduły, ale jak to robić mądrze? Tu z pomocą przychodzi nam webpack. Podczas tej prezentacji dowiemy się, w jaki sposób działa to narzędzie, jak konfiguruje się w nim kompilację assetów oraz jakie dodatkowe możliwości ono w sobie kryje.
Ad
More Related Content
What's hot (20)
How to make your Webpack builds 10x faster
How to make your Webpack builds 10x fastertrueter Sharing my slides on a talk I held at the Berlin-based FullStack JS meetup. Tips and tricks how I reduced our build time (full / incremental) from 60s / 4s to 8s / 300ms.
Full config:
https://gist.github.com/trueter/0e861403e59a9e27a476f3ad7ada1a89
Give us a visit at http://www.pixsy.com
Webpack
WebpackAnjali Chawla Webpack is a module bundler that takes modules with dependencies and generates static assets by bundling them together. It manages dependencies, combines assets like JavaScript, CSS, images, and fonts, and allows for preprocessing with loaders and plugins. Webpack addresses pain points like module management, bundling assets together efficiently, and handling changes by allowing code splitting, extracting common dependencies, and enabling hot module replacement to avoid full page reloads on changes.
Lecture: Webpack 4
Lecture: Webpack 4Sergei Iastrebov This document provides an overview of materials for a webpack lecture, including basic webpack parameters, practical examples, and frequently asked questions. It covers topics such as entry points, output configuration, loaders, plugins, code splitting, and techniques for optimizing build performance and bundle size. The document also provides links to webpack documentation and resources for learning more about developing with webpack.
An Overview on Nuxt.js
An Overview on Nuxt.jsSquash Apps Pvt Ltd Amongst all the big front end frameworks, Nuxt.js stands out as it has a lot of advantages over the other. This presentation covers an overview of Nuxt.js and how Server Side Rendering helps in improving the SEO of a site.
Webpack
Webpack DataArt This document discusses JavaScript modules and module bundlers like Webpack. It describes the purposes of JavaScript modules as encapsulation, organization, avoiding global scope pollution, and reusability. It then covers different ways to define modules, including using global variables, AMD, CommonJS, and ES6 modules. Webpack is introduced as a module bundler that can bundle modules, implement code splitting to optimize loading, and use loaders to treat different file types as modules. Webpack's plugin system and development tools are also discussed.
Webpack: your final module bundler
Webpack: your final module bundlerAndrea Giannantonio Webpack has quickly become one of the most popular choices among web developer builder tools. It can build, minify, split and do others awesome things to your assets.
We will do a simple walk through to let you familiar with the basics of webpack and all its potential.
An Intro into webpack
An Intro into webpackSquash Apps Pvt Ltd webpack is a powerful module bundler and it becomes an essential part of our JavaScript Ecosystem. This ppt comprises an overview on webpack, some of the core concepts of webpack and it's configurations with some working examples.
Webpack DevTalk
Webpack DevTalkAlessandro Bellini This document provides an overview and introduction to Webpack. It begins by establishing some ground rules and an agenda. It then discusses what prompted the creator to start using Webpack and how it works as an "assets crawler and bundler". The rest of the document covers the key aspects of Webpack like its configuration file, loaders and plugins, and how it can be integrated with other tools. Code examples are provided and questions are welcomed from the audience.
Webpack: from 0 to 2
Webpack: from 0 to 2Alessandro Bellini - Webpack is a module bundler that builds dependencies between modules and manages assets like JavaScript files, CSS files, and images.
- It uses loaders to transform different types of modules and plugins to extend its functionality. Loaders handle file transformations while plugins can access and modify the build process.
- Code splitting allows splitting code into separate bundles to optimize load performance by prioritizing loading and allowing on-demand loading of code. Techniques like extracting vendor code and using import statements help enable code splitting in Webpack.
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to nowDerek Willian Stavis Webpack is just a module bundler, they said. What they didn't say is why we need it, and what was the motivation that made us achieve what Webpack have been doing for us. In this talk we will navigate through the years of front-end development, ranging from 2003 to nowadays to understand this, and in the end, we will walk thought a complete Webpack project to understand how it works.
Nodejs - Building a RESTful API
Nodejs - Building a RESTful APISang Cù The document discusses building a RESTful API and deploying it to the cloud. It outlines using Node.js, Express.js, MongoDB, and other tools to build a scalable API. It then discusses deploying the application to services like Heroku and Travis CI for continuous integration and monitoring with New Relic. Case studies are provided of other companies like PayPal that were able to build applications faster and handle more traffic using similar Node.js architectures.
Grunt.js and Yeoman, Continous Integration
Grunt.js and Yeoman, Continous IntegrationDavid Amend A presentation about the build tool grunt js JavaScript for web applications and node.js environments to achieve continous integration. David Amend
CQ5 Development Setup, Maven Build and Deployment
CQ5 Development Setup, Maven Build and Deploymentklcodanr Six Dimensions and 6D-Labs are pleased to distribute its 2nd CQ webinar "CQ5 Development Setup: Maven Build and Deployment" This webinar covers best practices in building and deploying CQ5 applications.
Intro to Vue
Intro to Vue Isatu Conteh An introductory presentation on Vue.js done at an internal conference held at the Washington Post (DevDay 2017)
Introduction of webpack 4
Introduction of webpack 4Vijay Shukla It is a build tool that puts all of your assets, including Javascript, images, fonts,
CSS, in a dependency graph.
It lets us use require() in our source code to point to local files, like images.
We can decide how they’re processed in our final javascript bundle, like
replacing the path with a URL.
Nuxt.JS Introdruction
Nuxt.JS IntrodructionDavid Ličen This document provides an overview of a minimalist framework called Nuxt.js for creating universal server-side rendered (SSR) applications using Vue.js. Some key points covered include:
- Nuxt.js allows developers to write Vue components and pages while abstracting away concerns of client-server code splitting and routing.
- Features include automatic code splitting, SSR, routing, static file serving, bundling/minifying, and error handling.
- The framework uses a pages/ directory to define routes and components and includes Vuex and Vue-Router functionality out of the box.
- Async data loading, custom layouts, global meta tags, and asset handling are also
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseAaron Silverman Slides from Node.js and Twitter Bootstrap crash course given to Penn Graduate Computing Club. Covers creating basic node app, using the bootstrap grid, and deploying to an EC2 machine.
Adobe CQ5 for Developers - Introduction
Adobe CQ5 for Developers - IntroductionTekno Point This document provides an introduction to Adobe Experience Manager (AEM), formerly known as CQ5. It discusses key aspects of AEM including its use of OSGi and JCR technologies, templates and components for authoring content, and workflows for automating processes. The document also provides an overview of installing and setting up an AEM author instance, as well as related terms.
Webpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JSEmil Öberg Presentation from UppsalaJS, November 3, 2016.
Together we built a Javascript app and explored many parts of Webpack and how we can use Webpack to create production ready code as well as use it to help with our development.
Drupalcon 2021 - Nuxt.js for drupal developers
Drupalcon 2021 - Nuxt.js for drupal developersnuppla
Nuxt.js is a modern, performant framework that makes developing Vue.js-based frontend applications enjoyable. This session gives an introduction to Nuxt.js for Drupal developers. By providing analogies to known Drupal-APIs developers get ready to start building Nuxt.js applications that can run as a server or are deployed as static website. Finally, attendees will get an overview of the Nuxt ecosystem and the most essential Nuxt.js modules.
No up-front Javascript or Vue.js knowledge required!
Viewers also liked (16)
Czym jest webpack i dlaczego chcesz go używać?
Czym jest webpack i dlaczego chcesz go używać?Marcin Gajda Podczas tworzenia frontendu aplikacji internetowych często odkrywamy, że nasza baza kodu JavaScript dość szybko się rozrasta i lawinowo przybywa nam zależności. Oczywistym rozwiązaniem wydaje się wtedy dzielenie kodu na mniejsze moduły, ale jak to robić mądrze? Tu z pomocą przychodzi nam webpack. Podczas tej prezentacji dowiemy się, w jaki sposób działa to narzędzie, jak konfiguruje się w nim kompilację assetów oraz jakie dodatkowe możliwości ono w sobie kryje.
Planificacion de Su Seguridad Económica 2012
Planificacion de Su Seguridad Económica 2012CGLFINS El documento describe los servicios de planificación financiera y gestión de patrimonio de una empresa, incluyendo la generación, preservación y transferencia segura del patrimonio de los clientes. Ofrece protección contra cuatro riesgos principales: pérdida de empleo, vejez, incapacidad y muerte prematura. Recomienda el seguro de vida universal como la inversión más flexible para proporcionar renta, financiar educación y proteger el patrimonio de los herederos.
Aplicacion escritorio web
Aplicacion escritorio webmarianap611 El documento compara las aplicaciones de escritorio y las aplicaciones web. Las aplicaciones de escritorio se instalan y ejecutan directamente en el ordenador del usuario y su rendimiento depende del hardware. Las aplicaciones web se ejecutan en un servidor a través de un navegador web y permiten el acceso desde cualquier ordenador con conexión a internet. Algunas ventajas de las aplicaciones de escritorio son que no requieren conexión y son más rápidas, mientras que las aplicaciones web permiten el acceso multiusuario y no requieren instalación.
1 samuel 20 commentary
1 samuel 20 commentaryGLENN PEASE David flees from Naioth in Ramah after Saul's religious experience and goes to Jonathan for help. He asks Jonathan what crime he has committed against Saul to make Saul try to kill him. Jonathan does not believe Saul would actually try to harm David, but agrees to help David determine the truth by observing Saul at an upcoming feast. Jonathan and David renew their covenant of loyalty to one another. At the feast, Jonathan discovers that Saul does indeed intend to kill David, and warns David so that he can flee for his safety. Jonathan and David part ways sadly, as Jonathan understands he can no longer protect David from Saul.
TDD for Testers
TDD for TestersGil Zilberfeld This document provides an overview of test driven development (TDD) principles and benefits. It discusses how TDD can be applied to both new and legacy code projects. The key benefits of TDD include better test coverage, less debugging, and improved design. Applying TDD requires discipline to write tests before code in small incremental steps. The document concludes that TDD is a valuable technique for all types of projects that requires persistence.
How to find and close more business (without spending a thing)
How to find and close more business (without spending a thing)Heinz Marketing Inc 1) The document provides tips for finding and closing more business without spending money, including engaging prospects early by participating in their communities to build trust, using research tools to customize outreach, and publishing valuable content to attract new prospects.
2) It discusses calculating sales and pipeline needs by making assumptions about average sales price, close and opportunity rates, and cost per lead.
3) The document recommends listening to prospects on social media to identify early-stage buying signals, participating as a peer to teach reps how to interact directly with customers, and using different types of social content like proactive, reactive and participatory posts.
Zaragoza turismo-55
Zaragoza turismo-55Saucepolis blog & Hotel Sauce El documento presenta varios eventos culturales y lugares de interés en Zaragoza durante la primera semana de julio. Incluye un festival de hip hop en el anfiteatro de Ranillas los días 2 y 3 de julio, funciones del musical Grease en el Teatro Principal entre el martes y el domingo, y paseos en barco por el Ebro que continúan desde el 26 de junio. También proporciona información sobre los horarios de la Basílica del Pilar, La Seo, los museos arqueológicos y la Aljafería, así
1 samuel 14 commentary
1 samuel 14 commentaryGLENN PEASE A verse by verse commentary on 1 Samuel 14 dealing with Jonathan's attack of the Philistines and Jonathan eating honey. Then about Saul's family.
Trulia Metro Movers Report - Fall 2011
Trulia Metro Movers Report - Fall 2011Trulia The document summarizes key findings from Trulia's Metro Movers Report about housing demand trends in the US:
- The Metro Movers Index measures demand for housing markets, with values above 1 indicating more people want to move in than out. Demand is strongest in Sunbelt metros like Florida that saw large price drops, while demand is weakest in Northeast metros like DC with smaller price drops.
- National trends show most home searches are cross-metro, often between neighboring areas, but falling prices are attracting buyers to metros further away, especially in the South and West. New Yorkers and Chicagoans are searching in Sunbelt metros like Los Angeles, Miami, and Phoenix.
ECHA Website Customer Insight Study Summary Report
ECHA Website Customer Insight Study Summary ReportNikolaos Vaslamatzis Dec. 2015 - The present report summarises the results of a usability study performed for the European Chemicals Agency (ECHA)
The reference collection
The reference collectionvargas8854 The document summarizes how Saint Xavier University eliminated 95% of its print reference collection to address issues of overcrowding in the library and a lack of budget control over reference materials. They established new collection priorities focused on the university curriculum and digital resources over print. This involved a review of the entire reference collection, with materials either moved to the circulating collection, sent to off-site storage, or weeded. The process freed up significant funds and shelf space while still meeting curricular needs.
พลังประชาชน ที่บุรีรัมย์
พลังประชาชน ที่บุรีรัมย์konthaiuk พรรคพลังประชาชนเปิดตัส สส.ภาคอีสาน นำโดยสมัคร สุนทรเวช เมื่อ ๒๕ กันยายน ที่ผ่านมา
Press Festival Via011
Press Festival Via011Welcome Luiz O documento descreve o festival VIA O11, que ocorre em São Paulo e reúne diversas formas de arte e cultura, incluindo exposições, feira de produções independentes, tatuagens, música, gastronomia e festa. O festival ocorre no Apartamento BYOB e busca promover a inclusão e o encontro cultural sem barreiras.
Ad
Similar to Bundling your front-end with Webpack (20)
Be faster then rabbits
Be faster then rabbitsVladislav Bauer The document discusses various topics related to web development including Java principles, Spring frameworks, PHP, high-load web applications, mobile backend as a service (mBaas), web frameworks, Java web development frameworks like JSF and GWT, rendering on the server-side vs client-side, distribution of work between designers and developers, web browsers and their support for HTML5 and CSS3, programming languages, GUI frameworks, AngularJS, testing tools like JUnit, and build tools like Maven, Ant, and Ivy.
Thinkin' Tags - Rapid Prototyping of CSS Layouts
Thinkin' Tags - Rapid Prototyping of CSS Layoutsdjesse Some thoughts about the challenges of creating "Thinkin' Tags" as a JavaScript developer ... presented on apps.berlin.js (Feb., 28th, 2013)
RubyConf China 2015 - Rails off assets pipeline
RubyConf China 2015 - Rails off assets pipelineFlorian Dutey Asset pipeline is dead. FrontEnd world has much better tools to handle their needs. Here's some solutions to get rid of it and move into modern Rich Client development era.
Meetup. Technologies Intro for Non-Tech People
Meetup. Technologies Intro for Non-Tech PeopleIT Arena This document provides an introduction to programming terminology, concepts, and technologies for non-technical people. It outlines a training on software development lifecycles, engagement models, business domains, major programming languages, frameworks, and technologies. Key terms from front-end and back-end development, databases, DevOps, data science, and mobile apps are defined. Popular languages, frameworks, and platforms are compared, along with ratings of language popularity. Quality control techniques are briefly introduced.
Untangling spring week12
Untangling spring week12Derek Jacoby The document outlines the agenda for the final week of a web development course. It includes wrap-up discussions, group presentations, course surveys, and demos of web applications built with technologies like React, Node.js, and Google Cloud Platform. Students will also discuss current trends in web development tools and technologies and strategies for continuing their learning after completing the course.
Mini-Training: Node.js
Mini-Training: Node.jsBetclic Everest Group Tech Team A quick overview on Node.js to see how Javascript is changing server programming : brief history & motivations, what makes NodeJS so special/popular/difficult, typical use cases, and a few popular tools around the NodeJs world : npm, Grunt, IISNode, Tools for Visual Studio, …
Dockers and kubernetes
Dockers and kubernetesDr Ganesh Iyer Introduction to dockers and kubernetes. Learn how this helps you to build scalable and portable applications with cloud. It introduces the basic concepts of dockers, its differences with virtualization, then explain the need for orchestration and do some hands-on experiments with dockers
The challenge of application distribution - Introduction to Docker (2014 dec ...
The challenge of application distribution - Introduction to Docker (2014 dec ...Sébastien Portebois Live recording with the demos: https://www.youtube.com/watch?v=0XRcmJEiZOM
Contents
- The application distribution challenge
- The current solutions
- Introduction to Docker, Containers, and the Matrix from Hell
- Why people care: Separation of Concerns
- Technical Discussion
- Ecosystem, momentum
- How to build Docker images
- How to make containers talk to each other, how to handle data persistence
- Demo 1: isolation
- Demo 2: real case - installing Go Math! Academy, tail –f containers, unit tests
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalPromet Source If you are a developer or business manager with responsibilities over your website, then check out this deck.. What will you learn? The webinar, created by our Founder and CEO, Andy Kucharski, is a highly accessible, information-rich review on the ways Drupal site performance can be radically improved. Some of the main topics we will cover include: What is slow site.
An introduction to Node.js
An introduction to Node.jsKasey McCurdy This document provides a high-level overview of JavaScript and Node.js. It discusses how JavaScript originated as a browser scripting language but is now widely used for server-side applications through Node.js. Node.js uses Google's V8 JavaScript engine and allows JavaScript code to run outside of browsers. Popular Node.js frameworks like Express.js are introduced. Key features of JavaScript like asynchronous programming and Node.js concepts like modules, middleware, and MongoDB are summarized at a high level.
Design4Drupal Boston 2013 - Bumps in the Road to Responsive
Design4Drupal Boston 2013 - Bumps in the Road to ResponsiveSalem Ghoweri This document discusses challenges of responsive web design and provides solutions. It addresses issues like designers thinking in pixels rather than percentages, page bloat from multiple image versions, and lack of ideal design tools. Suggested approaches include using a fluid grid, delivering optimized responsive images, modular CSS, and conditionally loading content. The document also recommends starting with a community theme like AdaptiveTheme, Omega or Zen to save time. Drupal 8 is advancing responsive features like mobile initiatives and conditional loading to improve front-end performance.
Once upon a time, there were css, js and server-side rendering
Once upon a time, there were css, js and server-side renderingAndrea Giannantonio 22 July 2016 - RomaJS meetup
Video: https://www.youtube.com/watch?v=Xr9TItuNxLg
Once upon a time, there were css, js and server-side rendering by @JellyBellyDev and @MatteoManchi
Women Who Code, Ground Floor
Women Who Code, Ground FloorKatie Weiss This document provides a whirlwind tour of software development topics including common terminology like front-end vs back-end, languages vs frameworks. It describes the basic building blocks of a web application like HTML, CSS, JavaScript and how they are tied together by the DOM. Common technology stacks that pair languages like Java, PHP and Ruby with frameworks and databases are also outlined. The document concludes by suggesting ways for developers to take their skills to the next level in areas like responsive design, testing, design patterns and preparing applications to scale.
Demystifying Containerization Principles for Data Scientists
Demystifying Containerization Principles for Data ScientistsDr Ganesh Iyer Demystifying Containerization Principles for Data Scientists - An introductory tutorial on how Dockers can be used as a development environment for data science projects
Java
JavaQUAID-E-AWAM UNIVERSITY OF ENGINEERING, SCIENCE & TECHNOLOGY, NAWABSHAH, SINDH, PAKISTAN This document provides an overview of the Java programming language. It discusses Java's history beginning as a language for consumer electronics and its adoption as a web programming language. The document outlines Java's features such as being object-oriented, portable, robust, secure, and having a large standard library. It provides examples of using Java for web applets, database access, distributed applications, and graphics. It also compares Java's performance to C++ and discusses how to get started with Java development.
Going Offline with JS
Going Offline with JSbrendankowitz The document discusses JavaScript application development for both server-side and client-side environments. It covers dependency management with tools like Node.js Package Manager, common patterns like MVC with Spine.js, and Windows 8 development with WinJS. Code examples demonstrate using Node.js, Railway.js, Spine.js, and WinJS for asynchronous operations, navigation, and fragments. The talk encourages leveraging common JavaScript tools and patterns for building cross-platform applications.
Going offline with JS (DDD Sydney)
Going offline with JS (DDD Sydney)brendankowitz The document discusses JavaScript application development for both server-side and client-side applications. It covers dependency management with Node.js Package Manager, using MVC frameworks like Railway.js and Spine.js, testing with tools like QUnit and Tobi.js, and developing Windows 8 Metro apps with WinJS for navigation and fragments. Common patterns like namespaces, modules, and promises are also discussed.
Get responsive in 30 minutes (WordCamp Sofia)
Get responsive in 30 minutes (WordCamp Sofia)Nickolay Ninarski A presentation I made on WordCamp Sofia 2012. It's about how to make your WordPress theme responsive by Breaking and Fixing it.
Front End page speed performance improvements for Drupal
Front End page speed performance improvements for DrupalAndy Kucharski If you are a developer or business manager with responsibilities over your website, then check out this deck..
What will you learn?
The webinar, created by our Founder and CEO, Andy Kucharski, is a highly accessible, information-rich review on the ways Drupal site performance can be radically improved. Some of the main topics we will cover include:
What is slow site speed?
What tools to use to diagnose it.
Plus six key improvements to make Drupal “run fast!”
And if that’s not already enough, we will also share some best practices monitoring tips for making sure you know how the Drupal server is performing 24/7.
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...
The Great Consolidation - Entertainment Weekly Migration Case Study - SANDcam...Jon Peck The migration project involved moving content from Entertainment Weekly's WordPress and Vignette systems to Drupal. A team of 4 developers from Four Kitchens and 1 from Time Inc worked on the migration over 17 sprints from April 2014 to January 2015. Key aspects of the project included theming the site with Aurora, implementing JavaScript standards, migrating over 100,000 posts, images and terms from WordPress and Vignette, improving performance, and collaborating with Time Inc on custom content types and workflows. Testing was done to ensure the migrated site met performance standards.
Ad
Recently uploaded (20)
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex Toradex brings robust Linux support to SMARC (Smart Mobility Architecture), ensuring high performance and long-term reliability for embedded applications. Here’s how:
• Optimized Torizon OS & Yocto Support – Toradex provides Torizon OS, a Debian-based easy-to-use platform, and Yocto BSPs for customized Linux images on SMARC modules.
• Seamless Integration with i.MX 8M Plus and i.MX 95 – Toradex SMARC solutions leverage NXP’s i.MX 8 M Plus and i.MX 95 SoCs, delivering power efficiency and AI-ready performance.
• Secure and Reliable – With Secure Boot, over-the-air (OTA) updates, and LTS kernel support, Toradex ensures industrial-grade security and longevity.
• Containerized Workflows for AI & IoT – Support for Docker, ROS, and real-time Linux enables scalable AI, ML, and IoT applications.
• Strong Ecosystem & Developer Support – Toradex offers comprehensive documentation, developer tools, and dedicated support, accelerating time-to-market.
With Toradex’s Linux support for SMARC, developers get a scalable, secure, and high-performance solution for industrial, medical, and AI-driven applications.
Do you have a specific project or application in mind where you're considering SMARC? We can help with Free Compatibility Check and help you with quick time-to-market
For more information: https://www.toradex.com/computer-on-modules/smarc-arm-family
2025-05-Q4-2024-Investor-Presentation.pptx
2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo Cloudflare Q4 Financial Results Presentation
Role of Data Annotation Services in AI-Powered Manufacturing
Role of Data Annotation Services in AI-Powered ManufacturingAndrew Leo From predictive maintenance to robotic automation, AI is driving the future of manufacturing. But without high-quality annotated data, even the smartest models fall short.
Discover how data annotation services are powering accuracy, safety, and efficiency in AI-driven manufacturing systems.
Precision in data labeling = Precision on the production floor.
HCL Nomad Web – Best Practices and Managing Multiuser Environments
HCL Nomad Web – Best Practices and Managing Multiuser Environmentspanagenda Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-and-managing-multiuser-environments/
HCL Nomad Web is heralded as the next generation of the HCL Notes client, offering numerous advantages such as eliminating the need for packaging, distribution, and installation. Nomad Web client upgrades will be installed “automatically” in the background. This significantly reduces the administrative footprint compared to traditional HCL Notes clients. However, troubleshooting issues in Nomad Web present unique challenges compared to the Notes client.
Join Christoph and Marc as they demonstrate how to simplify the troubleshooting process in HCL Nomad Web, ensuring a smoother and more efficient user experience.
In this webinar, we will explore effective strategies for diagnosing and resolving common problems in HCL Nomad Web, including
- Accessing the console
- Locating and interpreting log files
- Accessing the data folder within the browser’s cache (using OPFS)
- Understand the difference between single- and multi-user scenarios
- Utilizing Client Clocking
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsInData Labs In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy.
This infographic contains:
-AI and data privacy: Key findings
-Statistics on AI data privacy in the today’s world
-Tips on how to overcome data privacy challenges
-Benefits of AI data security investments.
Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru Introduction to LPIC-1 Exam - overview, exam details, price and job opportunities
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john Analyze the growth of meme coins from mere online jokes to potential assets in the digital economy. Explore the community, culture, and utility as they elevate themselves to a new era in cryptocurrency.
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungenpanagenda Webinar Recording: https://www.panagenda.com/webinars/hcl-nomad-web-best-practices-und-verwaltung-von-multiuser-umgebungen/
HCL Nomad Web wird als die nächste Generation des HCL Notes-Clients gefeiert und bietet zahlreiche Vorteile, wie die Beseitigung des Bedarfs an Paketierung, Verteilung und Installation. Nomad Web-Client-Updates werden “automatisch” im Hintergrund installiert, was den administrativen Aufwand im Vergleich zu traditionellen HCL Notes-Clients erheblich reduziert. Allerdings stellt die Fehlerbehebung in Nomad Web im Vergleich zum Notes-Client einzigartige Herausforderungen dar.
Begleiten Sie Christoph und Marc, während sie demonstrieren, wie der Fehlerbehebungsprozess in HCL Nomad Web vereinfacht werden kann, um eine reibungslose und effiziente Benutzererfahrung zu gewährleisten.
In diesem Webinar werden wir effektive Strategien zur Diagnose und Lösung häufiger Probleme in HCL Nomad Web untersuchen, einschließlich
- Zugriff auf die Konsole
- Auffinden und Interpretieren von Protokolldateien
- Zugriff auf den Datenordner im Cache des Browsers (unter Verwendung von OPFS)
- Verständnis der Unterschiede zwischen Einzel- und Mehrbenutzerszenarien
- Nutzung der Client Clocking-Funktion
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity Join this UiPath Community Berlin meetup to explore the Orchestrator API, Swagger interface, and the Test Manager API. Learn how to leverage these tools to streamline automation, enhance testing, and integrate more efficiently with UiPath. Perfect for developers, testers, and automation enthusiasts!
📕 Agenda
Welcome & Introductions
Orchestrator API Overview
Exploring the Swagger Interface
Test Manager API Highlights
Streamlining Automation & Testing with APIs (Demo)
Q&A and Open Discussion
Perfect for developers, testers, and automation enthusiasts!
👉 Join our UiPath Community Berlin chapter: https://community.uipath.com/berlin/
This session streamed live on April 29, 2025, 18:00 CET.
Check out all our upcoming UiPath Community sessions at https://community.uipath.com/events/.
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...
AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB I started my online journey with several hosting services before stumbling upon Ai EngineHost. At first, the idea of paying one fee and getting lifetime access seemed too good to pass up. The platform is built on reliable US-based servers, ensuring your projects run at high speeds and remain safe. Let me take you step by step through its benefits and features as I explain why this hosting solution is a perfect fit for digital entrepreneurs.
Special Meetup Edition - TDX Bengaluru Meetup #52.pptx
Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55 We’re bringing the TDX energy to our community with 2 power-packed sessions:
🛠️ Workshop: MuleSoft for Agentforce
Explore the new version of our hands-on workshop featuring the latest Topic Center and API Catalog updates.
📄 Talk: Power Up Document Processing
Dive into smart automation with MuleSoft IDP, NLP, and Einstein AI for intelligent document workflows.
Big Data Analytics Quick Research Guide by Arthur Morgan
Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan This is a Quick Research Guide (QRG).
QRGs include the following:
- A brief, high-level overview of the QRG topic.
- A milestone timeline for the QRG topic.
- Links to various free online resource materials to provide a deeper dive into the QRG topic.
- Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic.
QRGs planned for the series:
- Artificial Intelligence QRG
- Quantum Computing QRG
- Big Data Analytics QRG
- Spacecraft Guidance, Navigation & Control QRG (coming 2026)
- UK Home Computing & The Birth of ARM QRG (coming 2027)
Any questions or comments?
- Please contact Arthur Morgan at [email protected].
100% human made.
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptx
Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxAnoop Ashok In today's fast-paced retail environment, efficiency is key. Every minute counts, and every penny matters. One tool that can significantly boost your store's efficiency is a well-executed planogram. These visual merchandising blueprints not only enhance store layouts but also save time and money in the process.
Technology Trends in 2025: AI and Big Data Analytics
Technology Trends in 2025: AI and Big Data AnalyticsInData Labs At InData Labs, we have been keeping an ear to the ground, looking out for AI-enabled digital transformation trends coming our way in 2025. Our report will provide a look into the technology landscape of the future, including:
-Artificial Intelligence Market Overview
-Strategies for AI Adoption in 2025
-Anticipated drivers of AI adoption and transformative technologies
-Benefits of AI and Big data for your business
-Tips on how to prepare your business for innovation
-AI and data privacy: Strategies for securing data privacy in AI models, etc.
Download your free copy nowand implement the key findings to improve your business.
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Artificial intelligence is changing how businesses operate. Companies are using AI agents to automate tasks, reduce time spent on repetitive work, and focus more on high-value activities. Noah Loul, an AI strategist and entrepreneur, has helped dozens of companies streamline their operations using smart automation. He believes AI agents aren't just tools—they're workers that take on repeatable tasks so your human team can focus on what matters. If you want to reduce time waste and increase output, AI agents are the next move.
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock Building 10x Organizations with Modern Productivity Metrics
10x developers may be a myth, but 10x organizations are very real, as proven by the influential study performed in the 1980s, ‘The Coding War Games.’
Right now, here in early 2025, we seem to be experiencing YAPP (Yet Another Productivity Philosophy), and that philosophy is converging on developer experience. It seems that with every new method we invent for the delivery of products, whether physical or virtual, we reinvent productivity philosophies to go alongside them.
But which of these approaches actually work? DORA? SPACE? DevEx? What should we invest in and create urgency behind today, so that we don’t find ourselves having the same discussion again in a decade?
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025
#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next.
Link to recording, transcript, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/
Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.
Cybersecurity Identity and Access Solutions using Azure AD
Cybersecurity Identity and Access Solutions using Azure ADVICTOR MAESTRE RAMIREZ Cybersecurity Identity and Access Solutions using Azure AD
Drupalcamp Finland – Measuring Front-end Energy Consumption
Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove How to measure web front-end energy consumption using Firefox Profiler. Presented in DrupalCamp Finland on April 25th, 2025.
Bundling your front-end with Webpack
- 1. Bundling your front-end with Danillo Corvalan
- 2. About me • Danillo Corvalan • Full Stack Developer – Nodejs, mongodb, mysql, docker – Backbone, React • TDC floripa 2014, sampa 2014 • Learning ReactJS (Packt pub)[In progress] – Sergio Siqueira
- 3. The problem • Big web Apps • Misunderstanding Single Page Apps – Giant javascript bundled files (No async load) – Images and Styles – Many Http Requests • Page rendering time • Exporting small modules or the whole App – Micro services
- 4. What we’ve got • Current tools such as requirejs, gulp, grunt, and so on – Generates giant scripts files – Doesn’t understand images and styles – Understand Flat files rather than modules and Dependency Graph – No on-demand load (Async)
- 5. The Solution - Webpack • Module bundler that emits static assets representing your modules • What are modules? – .js, .jade, .jsx, .hbs, .coffee, .css, .less, .sass – .png (Yes! Images are dependencies as well)
- 7. That’s definitely the solution! • Allows CommonJS/AMD • Allow multiple entry points and on-demand load • Support loaders to pre-process files i.e jade, coffee, css, less, JSX, etc. • Support plugins • Common Plugin for shared code between modules (jQuery, lodash, util libs, custom libs, etc.)
- 8. Demo https://github.com/DanilloCorvalan/webpack-app-sample Each numbered commit represents a webpack feature included in the demonstration app.
- 9. References • http://webpack.github.io/ (Official site) • https://github.com/webpack/webpack (Repo) • https://github.com/petehunt/webpack-howto (community getting started repo) • https://www.youtube.com/watch?v=VkTCL6N qm6Y&feature=youtu.be (YouTube video about Instagram and why Webpack fit their needs)