We love to share knowledge by publishing videos, tutorials, and screencasts to the SpinSpire YouTube channel. So please subscribe.
Videos with extra writeups
But now, the same videos are available with extra show notes, written explanation, and code snippets. Enjoy!
Playlists
Developer Tools: Shell, Docker, etc.
An introductory series about developer tools that every modern developer should know.
SvelteJS series: SpinSpire tutorials and talks
A series exploring SvelteJS web UI compiler/framework.
Getting started in Web Development
Beginner level screencast videos to learn web development for those just starting out. Not much prior web development knowledge needed. Explains everything ...
Other Videos
live coding: Chrome/Firefox extensions and userscripts in Svelte
Learn how to write browser extensions for Chrome/Firefox/Edge/Opera etc using Svelte. How to customize any website or even scrape it using "client-side ...
block page refresh/navigation in Svelte if form fields unsaved (using stores and actions)
Learn how to prevent page unloading and navigation when the user has made changes to form input field. This video uses Svelte stores to reflect form change ...
Drupal "component" module: part 3: using Svelte UI framework/compiler
This video shows how to use Svelte to create custom elements / web components and use it with Drupal's "component" module. Detailed notes here: ...
Drupal "component" module: part 2: custom HTML tags (web-components)
This video shows how to use the "component" module of Drupal to embed your JavaScript/HTML/CSS apps into Drupal pages as blocks and then create your ...
Drupal "component" module: part 1: JS apps as Blocks
This video shows how to use the "component" module of Drupal to embed your JavaScript/HTML/CSS apps into Drupal pages as blocks. Detailed notes here: ...
docker-compose intro tutorial: full application stacks
docker-compose: A great devops tool. Lets you combine multiple containers into a set, mount volumes, forward ports, set env vars, container labels and much ...
docker intro tutorial: run programs in isolation (containerized)
docker - a way to run programs in a container (isolated from host) Notes: https://hub.docker.com/_/mariadb https://hub.docker.com/_/php docker run mariadb:10 ...
tutorial: ssh tools for remote operations
Show notes: https://docs.google.com/document/d/13KYZ9rNR52cM1SLqjYl4wPgb7j7HlnaYoBzJ04RvWD8/edit For questions, post a comment. For business ...
tutorial: vim/vi survival guide: editor basics
Show notes: https://docs.google.com/document/d/1iVPb94HisQ0jimVupOG5BOnSrjwXWcdJY2Vm7VWPZHM/edit For questions, post a comment. For business ...
common Linux commands every developer must know
Show notes: https://docs.google.com/document/d/1srbOIBhVU9FMWsIuxXfQ2W9xSUlK0NDOUdYhS1_jkVo/edit For questions, post a comment. For business ...
Shell command line keyboarding skills for developer productivity
Show notes: https://docs.google.com/document/d/1Y95-NUMG7p44Wk8H3-nnbMm71kBacCtgTTltOEets-w/edit For questions, post a comment. For business ...
compare Svite/Vite vs Snowpack "unbundlers" for FAST Svelte development
Comparison between fast, unbundled Svelte development with Svite/Vite v/s Snowpack - two dev ES6/JSX to JS transpiler runners.
Svelte presentation at JaxNode, August 2020
I presented to Jacksonville NodeJS group why learn Svelte, how to learn Svelte, and demo'd some of the awesomeness of Svelte. This is a recording of that ...
svelte tab component from scratch: using slots, stores, and context
Learn how to build UI tab component from scratch in SvelteJS using slots, stores, and context. Source code: https://bitbucket.org/spinspire/svelte-tabs For ...
build svelte modal dialog from scratch
How to build a modal dialog box from scratch in Svelte, with a little help from CSS. Source code: https://bitbucket.org/spinspire/svelte-modal/ TOC/Index 00:00 ...
Why learn Svelte? Business, technical, and personal reasons.
Why should you learn Svelte? This video gives you Business, technical, and personal justification. First convince yourself, and then convince your boss or your ...
How to learn Svelte? Roadmap for getting started (Google Presentation Doc included).
A complete guide to getting started with learning Svelte. Link to all the mentioned resources are in this doc ...
Svelte stores for auto detecting running AJAX requests and show Spinners with CSS animations
Implement AJAX counters (as stores) & spinners for Svelte using CSS animations, Svelte stores, and general purpose JavaScript wrapper functions that ...
call non-CORS REST APIs over AJAX with CORS proxy server (includes Svelte+Rollup setup)
Learn how to run a CORS proxy locally to make AJAX requests to a REST API that is not CORS-ready. Browsers enforce Same-Origin-Policy on AJAX requests ...
live code: svelte + rollup.config + package.json step-by-step, from scratch, by hand
Learn how to write rollup bundling config for Svelte app from scratch, by hand, step-by-step understanding each line you add and why you add it, without ...
live code: lazy loaded & responsive images in Svelte with svelte-image module
Make your Svelte applications faster, cheaper and more pleasant to users with responsive and lazy loaded images using "svelte-images" npm module. And once ...
Svelte reactive declarations and "tick" synch'ing
Shows what reactive declarations (reactivity in JavaScript) are in Svelte, how reactive updates are asynchronous, and how "await tick()" helps synchronize with ...
live code: Svelte Firebase realtime photo guestbook - image upload with in-browser resize
Shows how to write a photo guestbook with SvelteJS, Firebase, store data in firestore, upload images to Firebase storage, resize images in the browser, and see ...
live code: Svelte app showing realtime Postgres data changes (GraphQL subscriptions)
We live code a Svelte app to show realtime queries (subscriptions) to Postgres data over GraphQL using Hasura. The data changes in the database and the ...
Insanely fast mobile sites with Svelte, GraphQL and Drupal | Florida DrupalCamp 2020
Presentation by Jitesh Doshi at Florida Drupal Camp: Insanely fast mobile, offline-first, interactive sites with Svelte, Sapper, and Drupal Source code: ...
Decoupled (headless) Drupal/GraphQL with Svelte & Sapper frontend
We build a Svelte/Sapper front end to a decoupled/headless Drupal 8 backend communicating over GraphQL. Source: ...
Svelte live coding & demo at Jacksonville meetup
2 hour long detailed talk and demo about Svelte's features and business case (Why Svelte? Technical and Business reasons for using Svelte). Presented by ...
Svelte SPA routing: Routify tutorial
How to use Routify with Svelte for client-side (SPA) routing. Source code: https://bitbucket.org/spinspire/svelte-routify-demo/ Index/TOC: 00:00 What's the ...
Binding DOM to JS variables in Svelte - "bind:this" and "use" directives
Shows how to access, manipulate, and attach listeners on DOM nodes from Svelte code. Useful for integrating 3rd party JS libraries. "bind:this" for simple use ...
SvelteJS tree component: recursion using "svelte:self"
Shows how to build a custom Tree UI component using "svelte:self" tag, including click event handler that receives custom data context.
React vs Svelte comparison: AJAX
Shows how AJAX is done differently between React and Svelte (Svelte is much simpler) - using a free GeoCoding API to search for a partial address ...
Client-side (SPA) routing in Svelte
Shows how to create your own client-side router in Svelte using page.js library + store + context. Source code: https://bitbucket.org/spinspire/svelte-routing-demo ...
Introduction to Svelte & Sapper - a presentation at JaxNode
This is a recording of my talk on Svelte & Sapper that I gave to Jacksonville Node User Group (JaxNode). Source code is at ...
Sapper Svelte SPA - AJAX FORM POST to create database records
Advanced starter project for Sapper & Svelte based single page apps (SPA) with MongoDB CRUD. Serialize FORM to JSON and POST to create new records.
Sapper Svelte SPA - adding MongoDB persistence
Starter project for Sapper & Svelte based single page apps (SPA) with MongoDB persistence.
Sapper Svelte SPA - starter project
Starter project for Sapper & Svelte based single page apps (SPA). See https://bitbucket.org/spinspire/sapper-starter/commits/tag/stage-01 for solution source ...
Svelte: project structure and build process fully explained
Explains the role of each file in a Svelte project tree - including rollup.config.js and package.json. For questions, post a comment. For business inquiries: email ...
Session 4 - Drupal 8+Git+composer: configuration management workflow
A live session screencast from July 18, 2017. Shows how to use Git and composer with Drupal 8's configuration management workflow. Command used to ...
Session 5 - Drupal 8 RESTful web services
A live session screencast from July 19, 2017. Shows how to configure Drupal to serve RESTful services that serve content (nodes), users, terms and all the other ...
RevealJS: Easy, beautiful presentation template in HTML
Create beautiful presentation slides quickly and easily using my HTML template and Reveal.js. Template file link: ...
ReactJS vs SvelteJS comparison by building a FileUpload component in both
We create the same FileUpload component in ReactJS and Svelte and compare which one is cleaner, feature-rich, and developer-friendly. Source code: ...
Beginner's tutorial in JavaScript UI development: with SvelteJS
This beginner level screencast tutorial includes ... 00:05 intro 02:18 install npm, npx, yarn, and nodejs 05:46 install vscode (Visual Studio Code) 06:12 create a ...
ReactJS/webpack app from scratch, explaining every line of code and config
This screencast shows not just how to start a ReactJS app from scratch, but more importantly why each line of code or configuration exists and what it does.
Session 3 - JavaScript fundamentals: closures, prototypes, OOP
A live session screencast from June 22, 2017.
Session 6 - Introduction to ReactJS
A learning session screencast introducing ReactJS programming. ReactJS is a popular framework to implement Web UI's and Single Page Applications (SPA's).
Rich Web Applications with ReactJS and Drupal 8
Drupal GovCon 2017 presentation on: Rich Web Applications with ReactJS and Drupal 8 ReactJS is the shiny new JavaScript framework that everybody wants ...
Session 2 - Linux network configuration and troubleshooting tools
A live session screencast from June 21, 2017.
Session 1 - Fundamentals of Web, Internet and TCP/IP programming
A live session screencast from June 20, 2017.
Internet and Web Fundamentals for aspiring developers
See https://spinspire.bitbucket.io/ for related notes. A screencast to teach fundamentals of how the Internet works, the Web works, the domain name system ...