Tooling for the productive front-end developer

•Download as PPTX, PDF•

2 likes•541 views

Maurice De Beijer [MVP]

Tooling for the productive front-end developer presentation at the QNH DevDays 2016

Technology

Tooling for the productive
front-end developer
Maurice de Beijer
@mauricedb

Who am I?
• Maurice de Beijer
• The Problem Solver
• Microsoft Azure MVP
• Freelance developer/instructor
• Twitter: @mauricedb and @React_Tutorial
• Web: http://www.TheProblemSolver.nl
• E-mail: maurice.de.beijer@gmail.com
2

Overview
• Where to get scripts
• Searching for NPM
packages
• ECMAScript 2015 and
beyond
• Task runners
• Minification
• Bundling
• Chrome DevTools
• Performance testing
• Unit Testing
• E2E Testing
• Code generators
• Linting
• CSS
• Online editor
• Tools I use with GitHub

Where to get scripts
• Bower
• NPM
• JSPM

Searching for NPM packages
• https://www.npmjs.com
• https://npms.io

ECMAScript 2015 and beyond
• CoffeeScript
• Babel
• TypeScript
• JSX
• Dart

Task runners
• Grunt
• Gulp
• Broccoli
• NPM Scripts

Minification
• uglify-js
• clean-css
• html-minifier

Bundling
• Browserify
• SystemJS
• Webpack
• Rollup
• jspm

Chrome DevTools
• Console API
• Pretty Print
• Break on DOM modifications
• Break on XHR
• Break on Event Listener
• Asynchronous stack trace
• Timeline
• Audits
• Profiles

Performance testing
• YSlow
• WebPageTest
• Chrome DevTools
• Lighthouse

Unit Testing
• Testem
• Mocha
• Chai
• Chai-as-promised
• Jsdom

End 2 End Testing
• Selenium
• Nightwatch
• Browserstack

Code generators
• Angular CLI
• Create React App
• Yeoman

Linting
• ESLint
• TSLint
• Stylelint
• SonarQube

CSS
• Less
• SASS
• Stylelint
• scss-lint
• PostCSS
• Autoprefixer

Online editor
• JSFiddle
• JSBin
• HyperDev

Tools I use with GitHub
• Zenhub
• Shields
• David
• Greenkeeper
• Travis CI
• Codecov

Thank you
Maurice de Beijer - @mauricedb

What's hot

Working in harmony

Edmund Turbin

Cypress for Testing

PoojaSingh1123

DevOpsDays Philadelphia 2019 presentation. Zero to Hero: Start Test automation with Cypress In DevOps world, test automation is a must have. But start coding could be challenging for people novice in tech and also for the ones working in manual testing (because someone said that testers don’t need technical skills)! In this “right to the point” workshop you’ll start your automation test project - easy and painlessly. It’ll give you knowledge to continue learning and practicing after.

[English][Test Girls] Zero to Hero: Start Test automation with Cypress

Test Girls

Next generation frontend tooling

pksjce

Cypress e2e automation testing - day1 intor by: Hassan Hameed

Hassan Muhammad

Cypress Automation

Susantha Pathirana

React native-meetup-talk

kiranabburi

From zero to hero with Docker

Maurice De Beijer [MVP]

MEAN Stack Workshop at Node Philly, 4/9/14

Valeri Karpov

Isolated React Js components

Abe García

Node.js to the rescue

Marko Heijnen

Lambdaless and AWS CDK

MooYeol Lee

Sharing 4 years of experience about node.js - A google chrome V8 engine javascript based web server technology. This slide covers about wide range of knowledge about node.js learned from 4 years of production, experiment, test & failures 4년 동안 node.js 서버 프로그래밍을 경험한 내용을 간략하게 정리해 보았습니다. node.js 를 접하시는 분들에게 도움이 되었으면 합니다.

node.js 실무 - node js in practice by Jesang Yoon

Jesang Yoon

O365Con18 - Implementing Automated UI Testing for SharePoint Solutions - Elio...

NCCOMMS

Stripe con 2021 UI stack

MaximeRainville1

e2e testing with cypress

Tomasz Bak

Docker, From zero to hero

Maurice De Beijer [MVP]

Jasmine - A BDD test framework for JavaScript

Sumanth krishna

Ci of js and apex using jasmine, phantom js and drone io df14

Kevin Poorman

Cypress report

Adarsh

What's hot (20)

Working in harmony

Cypress for Testing

[English][Test Girls] Zero to Hero: Start Test automation with Cypress

Next generation frontend tooling

Cypress e2e automation testing - day1 intor by: Hassan Hameed

Cypress Automation

React native-meetup-talk

From zero to hero with Docker

MEAN Stack Workshop at Node Philly, 4/9/14

Isolated React Js components

Node.js to the rescue

Lambdaless and AWS CDK

node.js 실무 - node js in practice by Jesang Yoon

O365Con18 - Implementing Automated UI Testing for SharePoint Solutions - Elio...

Stripe con 2021 UI stack

e2e testing with cypress

Docker, From zero to hero

Jasmine - A BDD test framework for JavaScript

Ci of js and apex using jasmine, phantom js and drone io df14

Cypress report

Viewers also liked

Severity и Priority для неначинающих: очевидное и невероятное

Deutsche Post

Javascript Test Automation Workshop (21.08.2014)

Deutsche Post

Testing nightwatch, by David Torroija

David Torroija

20160905 - BrisJS - nightwatch testing

Vladimir Roudakov

Automated Testing using JavaScript

Simon Guest

Web Application Development Tools for Creating Perfect User Experience

ChromeInfo Technologies

PepsiCo on Mobile & Millennials at the #MobiU2013 Summit, 9/26 in Chicago

Kimberly-Clark

A-Z Path to a Happy Life

Unified Caring Association

Wonderbook - Gamification in education - Manu Melwin Joy

manumelwin

Essential Conversations Guidebook v.12 - online version

Brian Fawcett

Gbd the south east by cause

James Carter

City branding 0.1

Sergey Khromov-Borisov

Front-End Testing: Demystified

Seth McLaughlin

2015.11.19-нд зохион байгуулагдсан “АШИГТ МАЛТМАЛЫН БАЯЖУУЛАХ ҮЙЛДВЭРИЙН ТЕХНИК-ЭДИЙН ЗАСГИЙН ҮНДЭСЛЭЛ БОЛОВСРУУЛАГЧ АЖ АХУЙН НЭГЖҮҮДИЙН УУЛЗАЛТ, СУРГАЛТ”-ын илтгэл Зохион байгууллагч: Уул Уурхайн Яам, Ашигт Малтмалын Газар, Монголын Ашигт Малтмал Баяжуулагчдын Холбоо, Геологийн Төв Лаборатори

ТЭЗҮ боловсруулагчдын уулзалт семинар

Bayjuulagch

簡介: 還記得你上次用 AJAX 撈資料生表格時，是怎麼寫的嗎？如果你花了 80% 的時間在 JS 裡面寫 for 迴圈串接 HTML 字串，再把這一坨 tr 字串塞進去 tbody。三個月發現每次回來維護這份程式時，又要再花一堆時間把分散在 HTML 和 JS 的頁面用腦袋整合起來、把業務邏輯分離。你已經受夠這種凌亂的程式碼了嗎？相信你一定會喜歡 Vue.js！讓我們一起從改寫後台網頁的 jQuery 範例開始，學習怎麼讓他變身成更容易維護的 Vue.js 網頁！ 1. 傳統 jQuery 後台頁面程式碼問題分析 2. Vue.js 與 MVVM 宣告式渲染簡介 3. 將前述案例逐步改寫成 Vue.js 宣告式渲染 & Vue.js 常用語法介紹

從改寫後台 jQuery 開始的 Vue.js 宣告式渲染

Sheng-Han Su

5-Whys Method

Deutsche Post

Flight Plan to an Elevated Life

Unified Caring Association

Syncope

Nurunnabi Hossain

Powerful JavaScript Tips and Best Practices

Dragos Ionita

Product seminar presentation 1

Sergey Khromov-Borisov

Viewers also liked (20)

Severity и Priority для неначинающих: очевидное и невероятное

Javascript Test Automation Workshop (21.08.2014)

Testing nightwatch, by David Torroija

20160905 - BrisJS - nightwatch testing

Automated Testing using JavaScript

Web Application Development Tools for Creating Perfect User Experience

PepsiCo on Mobile & Millennials at the #MobiU2013 Summit, 9/26 in Chicago

A-Z Path to a Happy Life

Wonderbook - Gamification in education - Manu Melwin Joy

Essential Conversations Guidebook v.12 - online version

Gbd the south east by cause

City branding 0.1

Front-End Testing: Demystified

ТЭЗҮ боловсруулагчдын уулзалт семинар

從改寫後台 jQuery 開始的 Vue.js 宣告式渲染

5-Whys Method

Flight Plan to an Elevated Life

Syncope

Powerful JavaScript Tips and Best Practices

Product seminar presentation 1

Similar to Tooling for the productive front-end developer

Tooling for the productive front end developer

Maurice De Beijer [MVP]

MEAN Stack WeNode Barcelona Workshop

Valeri Karpov

Front-End Tools and Workflows

Sara Vieira

Introduction to cypress in Angular (Chinese)

Hong Tat Yew

Infinum Android Talks #13 - Developing Android Apps Like Navy Seals by Ivan Kušt

Infinum

Hidden Treasure - TestComplete Script Extensions

SmartBear

Greenfields tech decisions

Trent Hornibrook

Sitecore Development Approach Evolution – Destination Helix Sitecore officially recommended Helix as a set of overall design principles and conventions for Sitecore development around 18 month ago at SUGCON 2016 alongside with an official implementation example - Habitat. Why was it necessary? What are the benefits? Has it worked in practice? Peter Nazarov will share the outlook on why and how a combination of Sitecore Helix and Habitat benefits the business and development users of Sitecore in practice.

Sitecore development approach evolution – destination helix

Peter Nazarov

Software devops engineer in test (SDET)

Sriram Angajala

JavaOne 2016 NetBeans is not just a Java IDE. It supports JavaScript as a first-class citizen and provides a complete integrated development environment. It also provides project types for server-side JavaScript (Node.js) as well as web browsers and mobile (Apache Cordova). In addition, it supports Grunt, Mocha and Selenium, Angular and Knockout, and more. This session provides an update on NetBeans 8.1 and demonstrates the top new JavaScript features. You will see a Node.js application in action, look at the support for JavaScript unit testing, and also see how easy it is to debug an Apache Cordova application running on a tethered iPhone.

Java script nirvana in netbeans [con5679]

Ryan Cuprak

Beyond Domino Designer

Paul Withers

How To Use Selenium Successfully (Java Edition)

Dave Haeffner

Sencha Roadshow 2017: What's New in Sencha Test

Sencha

Ember - introduction

Harikrishnan C

SharePoint gives us a great platform for developing sophisticated intranet portals and collaboration sites and many other workloads. But it can also be a challenge to use modern software development frameworks like Scrum and XP. Wouldn’t it be great if we could get all the benefits of Agile practices – faster development, predictable deliveries, better quality, less stress and happy stakeholders? In this session we will cover the definitions of Lean, Agile, Scrum, Kanban, XP, and TDD. Then we will look at the specific challenges around Agile SharePoint development and some development techniques to overcome these obstacles. This talk covers both project delivery and engineering. We’ll look at unit tests, integration tests, UI tests, continuous integration and, of course, test-driven development (TDD) with practical experiences from real-life Agile SharePoint projects.

Lean-Agile Development with SharePoint - Bill Ayers

SPC Adriatics

Coding Standard And Code Review

Milan Vukoje

UPenn on Rails intro

Mat Schaffer

Js Automation. npm scripts & Gulp

Anton Dosov

This presentation will discuss how we use Docker to improve our development and deployment of WordPress sites. The presentation describes how themes and plugins can be developed locally and then packaged into a Docker container. A Jenkins pipeline is used with Git to automatically run a build and deploy the new WordPress container onto a test server where automated Selenium scripts are executed. Based on the results of the tests the container is tagged as a production candidate. A deployment pipeline is then used to execute a Blue-Green deployment on the latest update to production. Once the deployment is proven to work through automated testing the router is switched to the new deployment. The overall process helps reduce the risk of production updates to WordPress, themes, and plugins as well as reduce security concerns caused by randomly installing plugins by users. The presentation will also discuss strategies for running a WordPress database both outside and inside of a Docker container. It will discuss the pros and cons of each approach. Presentation given at Salt Lake City WordCamp 2019, Oct 12, 2019. (https://2019.slc.wordcamp.org/).

Improving WordPress Development and Deployments with Docker

Brett Palmer

The MEAN Stack

Md. Ziaul Haq

Similar to Tooling for the productive front-end developer (20)

Tooling for the productive front end developer

MEAN Stack WeNode Barcelona Workshop

Front-End Tools and Workflows

Introduction to cypress in Angular (Chinese)

Infinum Android Talks #13 - Developing Android Apps Like Navy Seals by Ivan Kušt

Hidden Treasure - TestComplete Script Extensions

Greenfields tech decisions

Sitecore development approach evolution – destination helix

Software devops engineer in test (SDET)

Java script nirvana in netbeans [con5679]

Beyond Domino Designer

How To Use Selenium Successfully (Java Edition)

Sencha Roadshow 2017: What's New in Sencha Test

Ember - introduction

Lean-Agile Development with SharePoint - Bill Ayers

Coding Standard And Code Review

UPenn on Rails intro

Js Automation. npm scripts & Gulp

Improving WordPress Development and Deployments with Docker

The MEAN Stack

More from Maurice De Beijer [MVP]

In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities. Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications. Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.

Practice TypeScript Techniques Building React Server Components App

Maurice De Beijer [MVP]

Let's face the facts and admit it: Estimating how long it will take to build software is hard. Why is estimation so hard? Well there are some reasons for that. Many people tend to be optimistic about how long it will take to do a task. Not surprising when we learn the way memory works. It tends to skew our experiences from old projects. We often forget the many small setbacks encountered. Another reason is that many tasks are not included in the initial estimate. They only become visible over time. Does that mean that estimation is impossible and a waste of time? Not at all. Many software development activities are commercial activities. Starting something without even a rough estimate of what the costs and timeline will be is risky at best.

A foolproof Way to Estimate a Software Project

Maurice De Beijer [MVP]

Tired of having users email you that your Svelte application is broken? Turns out that building reliable applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts, including the backend API’s, work together as intended. Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real world user would. In this session Maurice will show you how to use Cypress during development and on the CI server with Svelte. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.

Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress

Maurice De Beijer [MVP]

Tired of having users email you that your web application is broken? Turns out that building reliable web applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts work together as intended. Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real user would. In this session Maurice will show you how to use Cypress during development and on the CI server. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.

Build reliable Svelte applications using Cypress

Maurice De Beijer [MVP]

Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex and mission critical application with React is another matter. How to configure reliable hosting on Azure for the front and back-end? How to track runtime errors that happen in the browser. And how to create an efficient workflow between front and back-end teams. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment. https://azconf.dev/

Building Reliable Applications Using React, .NET & Azure

Maurice De Beijer [MVP]

With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet? There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more. Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more. https://reactadvanced.com/workshops-3h

Concurrent Rendering Adventures in React 18

Maurice De Beijer [MVP]

Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex, distributed and mission critical application with React is another matter. Add occasional poor mobile connectivity and things become really challenging. That doesn't mean that it is impossible, it is just harder to architect and develop. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment. https://www.c-sharpcorner.com/events/react-virtual-conference2

Building reliable applications with React, C#, and Azure

Maurice De Beijer [MVP]

Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex, distributed and mission critical application with React is another matter. Add occasional poor mobile connectivity and things become really challenging. That doesn't mean that it is impossible, it is just harder to architect and develop. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment. https://www.meetup.com/nl-NL/tilburg-tech-tuesdays/events/277150883/

Building large and scalable mission critical applications with React

Maurice De Beijer [MVP]

Een kleine React applicatie bouwen met een backend is niet moeilijk. Maar wat als de applicatie groter en complexer wordt? Dan wordt het een ander verhaal. En al helemaal als het een publiek toegankelijke applicatie is. Plotseling blijkt dat allerlei vaak gedane aannames niet meer kloppen. Je krijgt te maken met netwerkstoringen en schaalbaarheid. Verschillende teams die onafhankelijk van elkaar aan de front- en backend werken. Runtime fouten die optreden omdat sommige browsers toch net even anders blijken te werken dan je verwacht. In deze sessie gaat Maurice de Beijer zijn ervaringen delen over hoe je dit aan kan pakken.

Building Reliable Applications Using React, .NET & Azure

Maurice De Beijer [MVP]

The React team rewrote the book on developing components. Before we had a choice between classes and functional components. Yet many components needed to be classes. A functional component was often too limited. Now, using hooks, we can extend functional components to be as powerful as we want. Suspense and asynchronous rendering is in the future of React. It will make large applications much more responsive and easier to deal with. Getting started with suspense and asynchronous rendering isn't hard as you will discover. Come to this session to learn what React hooks are and how to get started using hooks. But be warned, once seen React hooks can’t be unseen and your React components will never be the same again.

Why I am hooked on the future of React

Maurice De Beijer [MVP]

Building reliable web applications using Cypress

Maurice De Beijer [MVP]

React keeps on evolving and making hard things easier for the average developer. One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the <Suspense /> component makes life much easier. Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this. You will learn all about using , showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable by combining it with concurrent rendering, the useTransition() hook and the component.

Getting started with React Suspense and concurrent rendering

Maurice De Beijer [MVP]

The React team has rewritten the book on developing components several times. This time they have introduced Suspense. Amongst other thing this makes splitting your application into multiple bundles easier. But that is only the start as the real innovation comes when loading data. Gone are the side effect hooks with the typical loading, loaded and error states. Instead we can suspend components when loading data. Need to do multiple request? No problem you can suspend multiple components at the same time if you want. Need to trap errors? No problem just use a standard React error boundary. Come to this session to learn what React Suspense can do for you.

React suspense, not just for Alfred Hitchcock

Maurice De Beijer [MVP]

Reactive and functional programming, you have probably heard the term mentioned before. It’s supposed to be really cool and a good practice. But what is reactive programming exactly and how to get started with it in JavaScript? And why does Angular start using the reactive extensions for JavaScript (RxJS) instead of standard promises? In this presentation, Maurice is going to show you how to get started with RxJS, the JavaScript implementation of the ReactiveX library. You will learn why using RxJS is a great way of dealing with streams of events in an asynchronous and functional way.

From zero to hero with the Reactive extensions for JavaScript

Maurice De Beijer [MVP]

Why I am hooked on the future of React

Maurice De Beijer [MVP]

The new React

Maurice De Beijer [MVP]

From zero to hero with the reactive extensions for JavaScript

Maurice De Beijer [MVP]

Why I am hooked on the future of React

Maurice De Beijer [MVP]

I am hooked on React

Maurice De Beijer [MVP]

Using restful APIs can be hard on your React applications. Before you know it, you are doing lots of parallel queries to the server. Using GraphQL instead of REST might help a lot. Instead of downloading many complete resources each component declares its own needs. Then the GraphQL client library then combines these requirements. The result is a single optimized query for the server. In this session, Maurice de Beijer is going to show you how to get started with GraphQL in your React applications.

Create flexible React applications using GraphQL apis

Maurice De Beijer [MVP]

More from Maurice De Beijer [MVP] (20)

Practice TypeScript Techniques Building React Server Components App

A foolproof Way to Estimate a Software Project

Surati Tech Talks 2022 / Build reliable Svelte applications using Cypress

Build reliable Svelte applications using Cypress

Building Reliable Applications Using React, .NET & Azure

Concurrent Rendering Adventures in React 18

Building reliable applications with React, C#, and Azure

Building large and scalable mission critical applications with React

Building Reliable Applications Using React, .NET & Azure

Why I am hooked on the future of React

Building reliable web applications using Cypress

Getting started with React Suspense and concurrent rendering

React suspense, not just for Alfred Hitchcock

From zero to hero with the Reactive extensions for JavaScript

Why I am hooked on the future of React

The new React

From zero to hero with the reactive extensions for JavaScript

Why I am hooked on the future of React

I am hooked on React

Create flexible React applications using GraphQL apis

Recently uploaded

In this keynote, Asanka Abeysinghe, CTO,WSO2 will explore the shift towards platformless technology ecosystems and their importance in driving digital adaptability and innovation. We will discuss strategies for leveraging decentralized architectures and integrating diverse technologies, with a focus on building resilient, flexible, and future-ready IT infrastructures. We will also highlight WSO2's roadmap, emphasizing our commitment to supporting this transformative journey with our evolving product suite.

Platformless Horizons for Digital Adaptability

WSO2

Accelerating FinTech Innovation: Unleashing API Economy and GenAI Vasa Krishnan, Chief Technology Officer - FinResults Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...

apidays

CNIC Information System with Pakdata Cf In Pakistan

danishmna97

DBX First Quarter 2024 Investor Presentation

Dropbox

AWS Community Day CPH - Three problems of Terraform

Andrey Devyatkin

MS Copilot expands with MS Graph connectors

Nanddeep Nachan

The Good, the Bad and the Governed - Why is governance a dirty word? David O'Neill, Chief Operating Officer - APIContext Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

apidays

presentation ICT roal in 21st century education

jfdjdjcjdnsjd

Corporate and higher education. Two industries that, in the past, have had a clear divide with very little crossover. The difference in goals, learning styles and objectives paved the way for differing learning technologies platforms to evolve. Now, those stark lines are blurring as both sides are discovering they have content that’s relevant to the other. Join Tammy Rutherford as she walks through the pros and cons of corporate and higher ed collaborating. And the challenges of these different technology platforms working together for a brighter future.

Corporate and higher education May webinar.pptx

Rustici Software

Six Myths about Ontologies: The Basics of Formal Ontology

johnbeverley2021

Effective data discovery is crucial for maintaining compliance and mitigating risks in today's rapidly evolving privacy landscape. However, traditional manual approaches often struggle to keep pace with the growing volume and complexity of data. Join us for an insightful webinar where industry leaders from TrustArc and Privya will share their expertise on leveraging AI-powered solutions to revolutionize data discovery. You'll learn how to: - Effortlessly maintain a comprehensive, up-to-date data inventory - Harness code scanning insights to gain complete visibility into data flows leveraging the advantages of code scanning over DB scanning - Simplify compliance by leveraging Privya's integration with TrustArc - Implement proven strategies to mitigate third-party risks Our panel of experts will discuss real-world case studies and share practical strategies for overcoming common data discovery challenges. They'll also explore the latest trends and innovations in AI-driven data management, and how these technologies can help organizations stay ahead of the curve in an ever-changing privacy landscape.

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

TrustArc

Dubai, often portrayed as a shimmering oasis in the desert, faces its own set of challenges, including the occasional threat of flooding. Despite its reputation for opulence and modernity, the emirate is not immune to the forces of nature. In recent years, Dubai has experienced sporadic but significant floods, testing the resilience of its infrastructure and communities. Among the critical lifelines in this bustling metropolis is the Dubai International Airport, a bustling hub that connects the city to the world. This article explores the intersection of Dubai flood events and the resilience demonstrated by the Dubai International Airport in the face of such challenges.

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

Orbitshub

Whatsapp Number Escorts Call girls 8617370543 Available 24x7 Mcleodganj Call Girls Service Offer Genuine VIP Model Escorts Call Girls in Your Budget. Mcleodganj Call Girls Service Provide Real Call Girls Number. Make Your Sexual Pleasure Memorable with Our Mcleodganj Call Girls at Affordable Price. Top VIP Escorts Call Girls, High Profile Independent Escorts Call Girls, Housewife Women Escorts Call Girl, College Girls Escorts Call Girls, Russian Escorts Call girls Service in Your Budget.

Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model

Deepika Singh

[BuildWithAI] Introduction to Gemini.pdf

Sandro Moreira

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

Juan lago vázquez

ICT role in 21st century education and its challenges

rafiqahmad00786416

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

Edi Saputra

Discover the innovative features and strategic vision that keep WSO2 an industry leader. Explore the exciting 2024 roadmap of WSO2 API management, showcasing innovations, unified APIM/APK control plane, natural language API interaction, and cloud native agility. Discover how open source solutions, microservices architecture, and cloud native technologies unlock seamless API management in today's dynamic landscapes. Leave with a clear blueprint to revolutionize your API journey and achieve industry success!

WSO2's API Vision: Unifying Control, Empowering Developers

WSO2

The value of a flexible API Management solution for Open Banking Steve Melan, Manager for IT Innovation and Architecture - State's and Saving's Bank of Luxembourg Apidays New York 2024: The API Economy in the AI Era (April 30 & May 1, 2024) ------ Check out our conferences at https://www.apidays.global/ Do you want to sponsor or talk at one of our conferences? https://apidays.typeform.com/to/ILJeAaV8 Learn more on APIscene, the global media made by the community for the community: https://www.apiscene.io Explore the API ecosystem with the API Landscape: https://apilandscape.apiscene.io/

Apidays New York 2024 - The value of a flexible API Management solution for O...

apidays

Dubai, known for its towering skyscrapers, luxurious lifestyle, and relentless pursuit of innovation, often finds itself in the global spotlight. However, amidst the glitz and glamour, the emirate faces its own set of challenges, including the occasional threat of flooding. In recent years, Dubai has experienced sporadic but significant floods, disrupting normalcy and posing unique challenges to its infrastructure. Among the critical nodes in this bustling metropolis is the Dubai International Airport, a vital hub connecting the world. This article delves into the intersection of Dubai flood events and the resilience demonstrated by the Dubai International Airport in the face of such challenges.

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf

Orbitshub

Recently uploaded (20)

Platformless Horizons for Digital Adaptability

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...

CNIC Information System with Pakdata Cf In Pakistan

DBX First Quarter 2024 Investor Presentation

AWS Community Day CPH - Three problems of Terraform

MS Copilot expands with MS Graph connectors

Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...

presentation ICT roal in 21st century education

Corporate and higher education May webinar.pptx

Six Myths about Ontologies: The Basics of Formal Ontology

TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery

Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...

Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model

[BuildWithAI] Introduction to Gemini.pdf

Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood

ICT role in 21st century education and its challenges

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving

WSO2's API Vision: Unifying Control, Empowering Developers

Apidays New York 2024 - The value of a flexible API Management solution for O...

Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf

Tooling for the productive front-end developer

1. Tooling for the productive front-end developer Maurice de Beijer @mauricedb

2. Who am I? • Maurice de Beijer • The Problem Solver • Microsoft Azure MVP • Freelance developer/instructor • Twitter: @mauricedb and @React_Tutorial • Web: http://www.TheProblemSolver.nl • E-mail: maurice.de.beijer@gmail.com 2

3. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

4. Where to get scripts • Bower • NPM • JSPM

5. Download and copy 

6. Bower

7. NPM

8. JSPM

9. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

10. Searching for NPM packages • https://www.npmjs.com • https://npms.io

11. NPM

12. NPMS.IO

13. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

14. ECMAScript 2015 and beyond • CoffeeScript • Babel • TypeScript • JSX • Dart

15. CoffeeScript

16. Babel

17. TypeScript

18. JSX

19. Dart

20. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

21. Task runners • Grunt • Gulp • Broccoli • NPM Scripts

22. Grunt

23. Gulp

24. Broccoli

25. NPM Scripts

26. NPM Scripts

27. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

28. Minification • uglify-js • clean-css • html-minifier

29. Uglify

30. Clean CSS

31. HTML Minifier

32. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

33. Bundling • Browserify • SystemJS • Webpack • Rollup • jspm

34. Browserify

35. SystemJS

36. Webpack

37. Rollup

38. JSPM

39. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

40. Chrome DevTools • Console API • Pretty Print • Break on DOM modifications • Break on XHR • Break on Event Listener • Asynchronous stack trace • Timeline • Audits • Profiles

41. Console API

42. Pretty Print

43. Pretty Print

44. Break on DOM modifications

45. Break on XHR

46. Asynchronous stack trace

47. Timeline

48. Audits

49. Profile

50. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

51. Performance testing • YSlow • WebPageTest • Chrome DevTools • Lighthouse

52. YSlow

53. WebPageTest

54. Chrome timeline

55. Chrome audit

56.

57. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

58. Unit Testing • Testem • Mocha • Chai • Chai-as-promised • Jsdom

59. Testem

60. Mocha

61. Chai

62. Chai as promised

63. JS Dom

64. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

65. End 2 End Testing • Selenium • Nightwatch • Browserstack

66. Selenium

67. Nightwatch

68. BrowserStack

69. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

70. Code generators • Angular CLI • Create React App • Yeoman

71. Angular CLI

72. Create React App

73. Yeoman

74. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

75. Linting • ESLint • TSLint • Stylelint • SonarQube

76. ESLint

77. TSLint

78. StyleLint

79. SonarQube

80. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

81. CSS • Less • SASS • Stylelint • scss-lint • PostCSS • Autoprefixer

82. LESS

83. SASS

84. SyleLint

85. SCSS Lint

86. Post CSS

87. Autoprefixer

88. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

89. Online editor • JSFiddle • JSBin • HyperDev

90. JS Fiddle

91. JS Bin

92. Hyperdev

93. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

94. Tools I use with GitHub • Zenhub • Shields • David • Greenkeeper • Travis CI • Codecov

95. Zenhub

96. Gulp-main-bower-files

97. Shields

98. David

99. Greenkeeper

100. Travis CI

101. Codecov

102. Overview • Where to get scripts • Searching for NPM packages • ECMAScript 2015 and beyond • Task runners • Minification • Bundling • Chrome DevTools • Performance testing • Unit Testing • E2E Testing • Code generators • Linting • CSS • Online editor • Tools I use with GitHub

103. Thank you Maurice de Beijer - @mauricedb

Editor's Notes

https://www.flickr.com/photos/stevendepolo/4582437563/

Tooling for the productive front-end developer

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Tooling for the productive front-end developer

Similar to Tooling for the productive front-end developer (20)

More from Maurice De Beijer [MVP]

More from Maurice De Beijer [MVP] (20)

Recently uploaded

Recently uploaded (20)

Tooling for the productive front-end developer

Editor's Notes