Learn Android, Mac and Svelte

JavaScript community has been shaken recently by a release of Svelte 3 and for a good reason - it's a completely different approach than React or Vue. To quote the docs:

"[Svelte](https://svelte.dev/) is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app."

**The best part?** If you have 26 spare minutes you can learn the basics of Svelte 3 and start building your own apps with it!

Enjoy!



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

Up and running with Svelte 3

Bash makes automation easy. Just a few lines of code can take care of repetitive tasks for you and your teammates. 

In this course, we’ll dive deep into the automation potential of bash. You’ll learn to leverage common hooks that open up interesting automation possibilities, like git hooks, adding functions and aliases in your bash_profile, and running scheduled jobs in launchd.

For example, we’ll write a git hook that checks package.json for changes, and if there are changes, the hook runs npm install for you automatically. 

Along the way, you’ll also learn:

- more advanced bash commands like exec
- syntax such as redirecting stdout and stderr to the same destination
- timesaving tricks like brace expansions

Automation is all about saving you time — and at only 52 minutes, this course is well worth yours. Enjoy!

Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. Bash is a command processor that typically runs in a text window, where the user types commands that cause actions. Bash can also read and execute commands from a file, called a shell script.

bash

Advanced Bash Automation for Web Developers

A lot of the time, web apps are built primarily with the desktop layout in consideration, and the mobile layout suffers as a result. In this course we are going to discuss using features of user interface which are optimised for mobile devices.

We are going to discuss CSS features that make a big difference and build entire components that work great on mobile devices and browsers. We are going to take into account browser support to ensure our users are getting the experience we want them to.

More and more of our users depend on their mobile device to use our web apps. With this in mind, we are going to look at how to optimise the components we build for smaller viewports, and how to ensure our customer gets an optimised version of our web app for their device.

We are going to discuss different ways we can view, test, and debug our web app in a mobile setting so that we know what we are seeing is what our user is seeing, because sometimes a desktop browser emulating a mobile device just isn’t enough.


HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

Optimize User Experience for Mobile Devices and Browsers

Joe Previte is an active egghead instructor and blogger. This is a collection of screencast versions of selected blog posts. You can find his blog here: [joeprevite.com](https://joeprevite.com/)

Joe's Blog Posts as Screencasts

Creating forms is one of the simplest and most complicated things at the same time. A basic form consists of many different things happening, we have to retain the value, we have to keep watch of validation and we have to show error messages when something is invalid, this is on both the fields and on the entire form itself if we send a request off to the backend service.

So we're going to create a form using just the normal svelte features. Then we'll look into creating a form using the svelte forms lib. 

Create forms in Svelte with Svelte Forms Lib

Open source framework for building truly native mobile apps with Angular, TypeScript or JavaScript.

nativescript

We will learn how to add an Android library to our project and translate it’s Java api to NativeScript. For this lesson, we will look at [Filestack’s Android SDK](https://github.com/filestack/filepicker-android) built with Gradle. Specifically, we will cover how to immediately start working with the library even when a [NativeScript](/q/nativescript) plugin does not exist for it.

Use an Android library in NativeScript for Angular using Java apis

Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.

flutter

In this lesson we’ll learn how to fetch & then display data from an API over the network in a Flutter application using the http package.

Fetching & Displaying Data from an API in Flutter using the http Package

In this lesson we’ll learn how to style Text & Container widgets & also get a general understanding of how styling works in Flutter applications

Style a Flutter Text and Container Widget

In this lesson we’ll learn how Navigation in Flutter works by navigating to a new page when clicking on a button using the push & pop methods. We'll also look at how to pass properties to a new screen dynamically.

Getting Started with Navigation in Flutter

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

Progressive Web Apps can speed up app loading times, and even allow you to run your web app offline, and install it on a mobile device!  However, setting up a PWA correctly can be tricky.

In this course, we'll create a PWA from start to finish, using create-react-app.  We'll create a custom service worker, and use different caching strategies for different types of assets.

Finally, we'll look at how to install the app on both iOS and Android devices, and how to customize the app name, icon, and splash screen.

Course Introduction: Progressive Web Apps in React with create-react-app

In this lesson we’ll learn how to use themes in order to share colors and font styles throughout our application.

Using Themes in Flutter to Share Colors and Font Styles

In this lesson we’ll learn how to render both local & network images in a Flutter application using the Image class.


Load an Image in a Flutter App with the Image Class

In this lesson we’ll learn about the main layout widgets you'll need when building your user interface in Flutter. We’ll take a look at Container, Center, Row, Column, Stack, & GridView widgets learn how they work.

Building Layouts in Flutter with Layout Widgets

In this lesson, we'll learn how to specify a configuration object containing all of the routes for our application & navigate between them in a Flutter application.

Navigation with Named Routes in Flutter

ListView is the most commonly used scrolling widget in a Flutter application. In this video, we'll learn how to create dynamic lists using Flutter's ListView widget to render both lists of Strings & lists of Maps

Building Dynamic Lists in Flutter with ListViews

`launchd` is a robust scheduled job automation tool on macOS that allows you to schedule a task to be run at recurring times. It's macOS's take on Linux's `cron`. In this lesson, we’ll schedule a simple bash script that empties the Trash to run every Monday morning at 10am. 

First, we’ll create a plist file (a plist file is just XML) with our job configuration. In here, we’ll specify our bash script as the program to run. Then we move plist file to the `~/Library/LaunchAgents` folder. Then we’ll use launchctl to load our configuration file, which will make the job active. We'll manually activate our job to ensure it's working with `launchctl kickstart`. 

Schedule Timed Jobs on macOS with `launchd`

AppleScript is a peculiar language with a COBOL-like desire to read like English, but it's the key to automating UIs on the Mac. We'll use it together with bash to make Terminal open a new window to run any shell command.

Run a Command-line App in a New Terminal Window using Bash and AppleScript

In [the previous lesson](https://egghead.io/lessons/bash-run-a-command-line-app-in-a-new-terminal-window-using-bash-and-applescript "Run a command-line app in a new terminal window") we created a bash script that runs a given command line in a new Terminal window. Now we'll see how to use Automator to make an instance of that available as a menu item in Finder.

Turn a command-line app into a menu item in Finder

Svelte is a new approach to building user interfaces. 

Instead of doing the vast majority of work at the runtime as other frameworks do, Svelte shifts that work into the _compile_ step which happens when you build your app. As such, you're shipping heavily optimized code to your users.

In this quick lesson we are going to learn how to create a brand new project with Svelte 3 from scratch.

Create a new project with Svelte 3

In most Web applications we want to be able to render different HTML markup depending on values passed in from JavaScript code.

In this lesson we are going to learn how to render JavaScript variable in HTML markup when using Svelte 3.

Add data to HTML markup using Svelte 3

In Svelte 3, the same as in regular HTML we can add CSS styles to a component and this is what we're going to learn in this lesson.

Important note - styles are _scoped to the component_ which means that if we style a `h1` tag in component A, it won't automatically affect `h1` tags in component B.

Topics

Instructors

Content Type

Free or Pro