JS Nation

JSNation 2023

Today's workshop focused on creating a website using SvelteKit and Storyblock CMS. It covered topics such as installing SvelteKit and integrating Storyblock, configuring SSL for localhost, connecting Storyblock SDK with a space, retrieving data and setting up preprocess, creating components and styling with Tailwind, compiling components and troubleshooting, creating dynamic pages and adding fields to the schema, working with the image service, and deploying and internationalization. The workshop also touched on advanced topics like multilingual support and emphasized the importance of being familiar with a good CMS and framework for job opportunities.

This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.

Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop

Alba Silvente Fuentes

Roberto Butti

JSNation 2022

Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.

What do you do when you're a framework that's survived and innovated in two JavaScript Framework Waves, and see the new wave cresting in the distance? You innovate. In this talk, we explore the JavaScript Framework landscape, and some of the major competitive features we've seen. We'll explore what Angular is introducing today and where we're headed in the future. <a href="https://www.froala.com/wysiwyg-editor?pb=1"></a>

The Wind and the Waves: The formation of Framework Waves from the Epicenter

Sarah Drasner

The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.

Interactive web-based tutorials have become a staple of front end frameworks, and it's easy to see why — developers love being able to try out new tools without the hassle of installing packages or cloning repos.But in the age of full stack meta-frameworks like Next, Remix and SvelteKit, these tutorials only go so far. In this talk, we'll look at how we on the Svelte team are using cutting edge web technology to rethink how we teach each other the tools of our trade.

Full Stack Documentation

Rich Harris

GraphQL Galaxy

GraphQL Galaxy 2021

This workshop focuses on using Svelte and SvelteKit to build a GraphQL-based CMS. It covers project setup, configuration, and working with GraphCMS. The workshop also explores fetching data from endpoints, styling with SvelteAdd, and working with blog post data and routing. Troubleshooting Tailwind CSS configuration and deployment with Versel are also discussed.

Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications. Table of contents: - Kick-off and Svelte introduction - Initialise frontend project - Tour of the SvelteKit skeleton project - Configure backend project - Query Data with GraphQL - Fetching data to the frontend with GraphQL - Styling - Svelte directives - Routing in SvelteKit - Endpoints in SvelteKit - Deploying to Netlify - Navigation - Mutations in GraphCMS - Sending GraphQL Mutations via SvelteKit - Q&amp;A <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

Build with SvelteKit and GraphQL

Scott Spence

Progressive enhancement is a strategy that provides a baseline experience for all users while enhancing it for those with modern browsers. Feature detection and graceful degradation are complementary approaches to achieve this. Polyfills can emulate new browser functionality in old browsers. Progressive enhancement is about meeting user needs while considering performance. Building apps in SvelteKit allows for easy development of progressively enhanced apps. Svelte components and DOM content provide a convenient way to structure and update the UI. Form submission and progressive enhancement can be achieved by enabling file upload and processing when JavaScript is disabled.

Progressive Enhancement is the philosophy of providing a basic, functional experience to everyone, regardless of device, and adding additional layers of interactivity and delight as they are supported. The last decade of web development, focusing on SPAs, where JavaScript is a hard requirement, have made this philosophy very difficult – how do we make websites that are fundamentally built with JavaScript accessible to users without it? This talk examines the philosophy behind Progressive Enhancement, then focuses on some concrete examples (including a dive into Svelte compiler output!) of how we can build functional, reliable, and usable experiences for all, adding delightful interactivity for those who can support it.

Progressive Enhancement - What It Is and Isn’t, a Practical Introduction With Svelte

Elliott Johnson

This Workshop focuses on building a small blog with a GraphQL backend using SvelteKit for the front end. It covers topics such as reactive programming, props, styling, and file-based routing. The workshop also explores setting up a GraphQL client, fetching data from the backend, and rendering components. It discusses dynamic endpoints, error handling, theme switching, and deploying the site with Vercel.

Want to get familiar with the framework that took the top spot for most loved framework on the Stack Overflow developer survey in 2021?Svelte is a super versatile framework with no virtual dom unlike React and Vue, it's a compiler that builds your projects into vanilla HTML, CSS and JavaScript.This workshop will go over the basics of setting up with SvelteKit and querying data from a GraphQL API and using that data in SvelteKit to retrieve data for use in the client (browser).Key learnings:How to use SvelteKit to build a simple project retrieve data from a GraphQL API and display it in the client. Many of the core concepts of Svelte and SvelteKit will be covered in this workshop.

Building with SvelteKit and GraphQL

React Summit

React Summit 2020

Svelte is a compiler-based framework that eliminates complexity and improves efficiency in web development. It combines HTML, styling, and JavaScript in one file and does not require additional build tools or state management packages. Svelte's syntax is concise and handles reactivity effectively. It supports component-based architecture, event handling, conditional rendering, and stores for state management. Svelte offers additional features like routing, dynamic importing, and built-in animation capabilities.

Svelte is a new prominent JS framework exposing “write less do more” philosophy. During this workshop you will get proficiency as a Svelte developer. We will be building an app that mimics the famous Q&amp;A website stackoverflow.com. Will start developing from simple front end components, later we'll connect it to a real running backend and then test it and optimise for production.Attending a workshop is the fastest way to acquire a body of knowledge about building web apps with Svelte.  <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

#svelte