 Resources from Tomasz Łakomy in 2021

The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

The whole magic of webapps is that users can interact with our code via various DOM events and Svelte is no exception in that regard.

In this quick lesson we're going to learn how to use DOM events in Svelte 3 as well as how to use event _modifiers_ to alter DOM event behaviour (such as `once` and `preventDefault`)

Use DOM events and event modifiers in Svelte 3

Every Svelte component has a lifecycle that starts when it is created, and ends when it is destroyed. There are a handful of functions that allow you to run code at key moments during that lifecycle.

The one you'll use most frequently is `onMount`, which runs after the component is first rendered to the DOM. 

In this lesson we're going to learn how to use `onMount` to fetch and render data from Star Wars API.

Use an onMount lifecycle method to fetch and render data in Svelte 3

Sometimes we don't want to have a complicated `update` function to change a value of our store. We know exactly what we want to change the value to - we can just use the `store.set` function to do that.

In this lesson we're going to learn how to set a value to a Svelte 3 store by using the `store.set` function to set the value of a counter without having to increment/decrement it one by one.

Set a value to a Svelte 3 store

Not all application state belongs inside your application's component hierarchy. Sometimes, you'll have values that need to be accessed by multiple unrelated components, or by a regular JavaScript module.

In Svelte, we do this with _stores_. In this lesson we're going to learn how to create a `writable` store and how to use it to allow `Incrementer` and `Decrementer` components modify the value of the store

Use Svelte 3 stores to share data between multiple unrelated components

It's important to avoid memory leaks, and Svelte 3 is no exception. When we're using the `subscribe` method from Svelte store in a component, it's important to clean ofter ourselves (especially if we're going to instantiate and destroy this component many times over).

In this lesson we're going to learn how to use `unsubscribe` to stop subscribing to the store change in a component's `onDestroy` call, as well how to use auto-subscriptions to refer to the store value and let Svelte take care of cleaning after us to avoid memory leaks.

Use auto-subscriptions in Svelte 3 to avoid memory leaks when using Stores

If our app needs to display values that are dynamically changing, it's better to animate that to deliver a more engaging user experience.

In this lesson we're going to learn how to use a `tweened` value to dynamically update the value of a progress bar in Svelte 3.

Tween a value and dynamically update the DOM with Svelte 3

Svelte is a tool for building fast web applications.

In this lesson we're going to learn what is Svelte and what's the difference between Svelte and other frameworks such as React or Vue.

WTF is Svelte?

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Ever since React Hooks were announced, many web developers wanted to use them to fetch data in their apps with GraphQL backend.

An `@apollo/react-hooks` package has been released recently with allows developers to use Apollo Client to fetch data from GraphQL endpoint using a `useQuery` hook. The new API has exactly the same possibilities as the previous, render-props based one but the resulting code is much simpler and easier to follow.

In this lesson we're going to learn how to fetch data with `useQuery` hook to get data about currency rates using both static and variable-based GraphQL query.

Fetch data with Apollo GraphQL useQuery hook

Developers love to automate things.

For instance, we'd like to be able to send a request to an endpoint every X milliseconds because something interesting might have happened. Or we want to get a new picture of a cute dog.

In this lesson, we're going to use `useQuery` hook to display a random image of a dog every 500 milliseconds using the `pollInterval` option as well as using the `startPolling` and `stopPolling` methods from Apollo Client to manually start and stop the polling process.

Automatically poll data from GraphQL API with Apollo Client useQuery hook

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

When using `useQuery` from Apollo React Hooks, the request will be sent automatically after the component has been mounted. This might not be the desired behaviour as we might want to send the request in response to user action (for instance, after a button click).

In this lesson we're going to learn how to use `useLazyQuery` hook to execute a query manually in order to fetch dog pictures.

Use useLazyQuery to manually execute a query with Apollo React Hooks

GraphQL is fantastic not only for querying data, but also for mutating it and with Apollo React Hooks we're able to do both.

In this lesson we're going to learn how to use `useMutation` [hook](https://www.apollographql.com/docs/react/essentials/mutations/) in order to add an item to a todo list with hooks instead of using the render props pattern based `Mutation` component 

Use useMutation hook to trigger GraphQL mutations with Apollo React Hooks

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

As developers, we strive to be quick and productive. We love to automate things so we spend less time on daunting, manual work and more time on solving interesting problems.

In this lesson we're going to learn how to use emmet (which is built into VSCode) to quickly write HTML/JSX and how to use prettier (which we're going to install from extensions tab) to automatically format it so we may work faster and be more productive.

Use emmet and prettier in VSCode to quickly write and format JSX

Some developers prefer to use git in a terminal, some prefer more GUI-based solutions.

VSCode has both terminal and a GUI which allows you to be able to stage, diff, commit (and many more) files to a git repository without having to leave your editor. In this lesson we're going to see how to stage/unstage changes, how to create a commit message, how to revert a commit and push it again.

Stage, diff and commit changes using Source Control tab in VSCode

Most websites are quite static and adding some animations/transitions can improve the user experience by a lot.

In this lesson we're going to learn how to use Svelte 3 transitions such as `slide`, `fade` and `blur` in order to show/hide a 'thank you' message in a form

Use Svelte 3 transitions to gracefully show and hide DOM elements

Most web applications have to deal with asynchronous data at some point.

Svelte 3 apps are no different, luckily Svelte allows us to await the value of a promise directly in markup using `await` block.

In this lesson we're going to learn how to use the `await` block to fetch the data from a Star Wars API and both display the data and handle loading state.

Use await block to wait for a promise and handle loading state in Svelte 3

Disclaimer: please use this feature carefully.

Sometimes we need to render HTML (that comes from a source that we trust!) directly into a component, for instance when we're using a WYSIWYG editor that we control.

In this quick lesson we're going to learn how to use `@html` in order to render HTML markup from a `textarea` into a `div` element.

Render HTML directly into a component in Svelte 3

When creating an app out of components we tend to compose them inside of one another. Svelte allows us to create slots using a `<slot />` component so the components we create can accept any children and render those.

In this lesson we are going to see an example of a slot being used to create a generic `box` component which can accept any children as a prop, along with handling a case where no children were provided.

Compose components with slots in Svelte 3

Slots in Svelte 3 allow us to compose components within one another.

Sometimes we'd like to have a component which can accept multiple children and for us to be able to control where each child gets rendered.

In this lesson we're going to learn how to use named slots in Svelte 3 to render content inside of a header, body and footer of an app.

Use named slots to compose multiple components in Svelte 3

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

In this quick lesson we're going to learn how to create a brand new AWS Lambda function from scratch and show how to test the execution of a 'hello world' Lambda function

Create an AWS Lambda function from scratch

AWS Lambda, Serverless, FaaS - there is a lot of noise around those topics online (and for a very good reason!) and it can get confusing at times.

In this quick 2 minute lesson we're going to cover what exactly is AWS Lambda, what's the Lambda pricing model (e.g. what's included in the free tier), what programming languages can be used with Lambda and also - what does it mean for something to be "serverless"

WTF is AWS Lambda?

Once the AWS Lambda function is created in AWS Cloud, we'd like to be able to call it outside of the AWS Console

In order to do that - we need to create a trigger.

In this lesson we're going to learn how to create an API Gateway trigger and attach it to a AWS Lambda function so the function will get triggered once an HTTP request is sent to this API.

Topics

Instructors

Content Type