Full Day Workshops

When you’re visiting a site, your eyes are constantly scanning the digital landscape to create a spatial map of what it’s seeing. We are biologically trained to notice anything in this environment that’s moving- it draws our eye. Because of this, animation has the power to guide your users, define symbols and meaning, and even reflect your branding. But it has to be done well.

In this full-day workshop, Sarah will explain in detail how you can craft delightful SVG animations and everything you need to start using them in production — both on small and large scale. We’ll cover animation in general, and then dive deep into SVG, exploring all its different facets, technical issues and gotchas, performance benefits, and possibilities for accessibility.

What you will learn

SVGs, with their potential for high-quality and performant graphics, have myriad uses on the web. In this course, you’ll learn how to work with SVGs to create informative graphics, build well-optimized and high performance images, and manipulate them to create UX animations and powerful illustrations.

* How create an informative and stable animation, or even a more complex animation that is production-ready
* How to make SVG cross-browser compatible, backwards compatible, and how to optimize it properly
* The nuts and bolts of how SVG is used to create beautiful and powerful data visualisations
* How to leverage the powerful GreenSock API to control and manipulate multiple tweens to create stable animations for production
* How to use a variety of tools and techniques to create a seamless and engaging complex SVG animation that guides your users and compliments your branding

Your instructor Sarah Drasner

Sarah Drasner is an award-winning Speaker, Senior Developer Advocate at Microsoft, and Staff Writer at CSS-Tricks. Sarah is also the co-founder of Web Animation Workshops, with Val Head. She’s the author of SVG Animations from O’Reilly and has given Frontend Masters workshops on Vue.js and Advanced SVG Animations. Sarah is formerly Manager of UX Design & Engineering at Trulia (Zillow).

Requirements

Basic understanding of CSS and JavaScript.
Level: Intermediate
Target Audience: You are a curious developer interested in expanding your horizons with performant and cutting-edge programming techniques.

What you will need

Please bring your own laptop (Mac or Win) with your favorite text editor. Preferred: downloaded copy of Illustrator, Inkscape, or Sketch.

React is a library that helps you build User Interfaces for the web, mobile, and apps through the power of JavaScript. React is taking the world by storm. Come learn about the flexibility and simplicity of React and how to confidently build and launch React applications. You should expect to learn the basics of React and how to build components and applications.

What you will learn

* React components
* Managing state
* Handling events
* Loading and manipulating data

Your Instructor - John Lindquist

John Lindquist is a co-founder of egghead.io

John has spent the majority of his career developing Rich Web Applications. Before starting egghead.io, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg.

Who should come

* Good understanding of JavaScript
* Good understanding of HTML
* Basic terminal experience

Pre-requisites

* Node installed https://nodejs.org/en/download/current/
* Poi installed `npm i -g poi`
* Code editor (I will use VS Code) https://code.visualstudio.com/
*If all else fails, exercises can be done in-browser, but your own laptop will be much better learning experience.

In this full day training we will cover everything you need to successfully adopt GraphQL across your full stack from client to backend including tooling and best practices learned from top company engineers (Twitter, TopTable and graphcool).

You will learn how to build and design a GraphQL Server starting by defining the GraphQL Schema using types and relations. Moving to the client side, we will describe the differences between Relay Modern and Apollo Clients. As we implement the different features we will introduce GraphQL query syntax including queries, mutations, alias, fragments and directives. At this point we will review how client and server communicate, what tooling is available to track usage and improve performance and how to add authorisation and authentication. Finally we will focus on designing real-time features and sharing best practices to improve performance and leverage scalability.

Topics we will cover

* GraphQL Introduction
* Building a GraphQL Server
* Designing a GraphQL Schema
* Differences between Relay Modern and Apollo Client
* Building a GraphQL Client using queries and mutations
* Common practices: error handling, polling and pagination
* Adding authentication and authorisation
* Adding real-time with subscriptions

Requirements

* Level: Intermediate
* Basic understanding of React and JavaScript.
* Target Audience: You already know or a curious about GraphQL but are interested in learning best practices and less known areas.

What you will need

Bring your own laptop, fully charged, and a rested mind.

Your instructor Gerard Sans

Gerard is very excited about the future of the Web and JavaScript. Always happy Computer Science Engineer and humble Google Developer Expert. He loves to share his learnings by giving talks, trainings and writing about cool technologies. He loves running AngularZone and GraphQL London, mentoring students and giving back to the community.

With easy, fun labs, we will help you learn why ngrx is considered an essential library for modern Angular applications. Learn how redux works and why immutable data flows are crucial to predictable UX. Learn how ngrx brings reactive redux features to your Angular application and see how effects and facades work with asynchronous processes. See how easy it is to test your application logic and explore the redux time-travel features.

What you will learn

* What is state management and why do we need it
* Redux core concepts and principles
* Implement redux from scratch
* Implement reducers
* Combining reducers
* Middleware
* Learn about ngrx and how it is different from redux
* Selecting data from the store
* Dispatching actions
* How to tackle deep linking
* Introduction to memoization
* Selector composition
* ngrx/Effects for async operations
* Facade pattern
* Debugging techniques

Requirements

* Level: Intermediate
* Good understanding of JavaScript
* Intermediate working knowledge of Angular
* Understanding of Observables

Target Audience

This course is for you if you already know Angular but you are curious how to manage your state with libraries like redux or ngrx.

Your instructor Dominic Elm

Dominic is a graduate in computer science and is passionate about many web technologies including Angular, Firebase, and ReactiveX. He has always been enthusiastic about teaching. In fact, Dominic devoted his thesis on the topic of enterprise gamification making the the process of sharing and learning within companies fun and enjoyable for everyone. At the moment he's a Trainer at thoughtram providing Angular trainings worldwide.

Prerequisites

* Follow the preparation https://thoughtram.io/prepare-for-your-training.html
* GitHub account
* Git
* Node
* Angular CLI installed globally
* Code editor, e.g. Visual Studio Code

Angular is a powerful framework for creating modern Single Page Applications. Angular was specifically built for complex applications and large teams. For this reason it is widely adopted in enterprise environments and a perfect fit for typical business applications.
This course is an introduction into Angular and modern front-end development for traditional enterprise developers.

What you will learn

* Understanding the basics of single-page applications and the modern web development toolchain (npm, webpack, ECMAScript 2015+, TypeScript …)
* Setting up an Angular application with the Angular CLI
* Getting to know the building blocks of Angular (components, services, routing, backend access …) and the architecture of an Angular application
* Writing your own components
* Extending an application with an additional screen and backend access
* An overview over the current Angular ecosystem

Target audience

Developers and Architects who want to get to know Angular. The course is designed equally for backend developers with no front-end experience or frontend developers that want to learn Angular.
The course is especially a good fit for developers who already have experience in AngularJS (Angular 1.x) and want to get to know the new Angular.
Participants should have a solid programming background and basic knowledge of web development.

Preparation

* Bring your own laptop
* Node must be installed https://nodejs.org/en/download/current/ with node version 8 or higher.
*Unrestricted internet access (you must be able to access github/bitbucket and install packages via npm, corporate VPNs and proxies are a common source for problems in this regard …)

Your instructor

Jonas Bandi is a freelance developer, consultant and trainer. His current passion lies in bringing modern frontend development to traditional enterprise projects.
Coming from a Java & .NET background he is now primarily working with JavaScript, Angular & React. Jonas is currently building the web-stack for a leading wholesale supply company in Switzerland.