Su	Mo	Tu	We	Th	Fr	Sa
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	1	2	3	4	5

Udemy - Web Components & Stencil.js - Build Custom HTML Elements

Posted By: ParRus

Date: 8 May 2020 20:05:11

A Complete Introduction to building Custom HTML Elements/ Web Components with and without StencilJS

What you'll learn

Build your own re-usable HTML elements that you can use in your own projects or share with other developers
Overcome the limitations of the built-in HTML elements with the power of HTML, CSS and JavaScript only

Requirements
Basic JavaScript knowledge is required (base syntax, DOM basics, objects basics)
ES6+ JavaScript knowledge (classes etc) is a plus but not a must-have

Description
Let's face it: You got thousands of HTML tags to choose from but some really helpful ones (<tabs>, <side-drawer>, <modal>, …) are missing.

What if you could build your own HTML tags?

Without frameworks like Angular, libraries like React or expert JavaScript knowledge in general. Just with a magic, native-JavaScript feature called "Web Components" (or "custom HTML elements").

Web Components are a combination of various specifications that are baked into the browser. Getting started with these features is a breeze and you'll quickly be able to build your own powerful and re-usable (even across projects!) custom HTML elements.

Such custom elements don't replace Angular, React or Vue though - instead you can easily use them in ANY web project, including projects using such frameworks and libraries.

In this course, you'll learn this from scratch.

But we won't stop there. Whilst getting started is fairly easy, more complex components will be more difficult to create. Stencil.js is a tool that makes the creation of such native web components much easier by using modern features like TypeScript and JSX (don't know that? No worries, you'll learn it in the course!).

In detail, in this course you will learn:

how to build re-usable, lightweight custom HTML elements with native browser features

how to build web components of all complexities - from a simple tooltip to modals or side drawers

how to pass data into your own web components and use it there

how to emit your own custom events which you can listen to in JavaScript

how to use the Shadow DOM to scope your CSS styles to your custom elements

how to use Stencil.js to get a much easier development workflow

how to use the many features Stencil.js provides to build native web components way more efficiently

how to deploy/ re-use your own web components in ANY project using ANY JavaScript framework like Angular, React or Vue (or none at all!)

Prerequisites:

Basic JavaScript knowledge is a must-have

ES6 JavaScript knowledge (const, let, classes, …) is strongly recommended but not strictly required - a brief refresher is provided as part of the course

NO JavaScript framework knowledge (e.g. Angular, React, Vue) is required

NO TypeScript or JSX knowledge is required

Let's dive into this exciting technology together!

Who this course is for:
Everyone who's interested in building custom HTML tags!
Students who want to dive into a future-proof web technology that can be used in any web app

also You can find my other helpful Programming-posts
(if old file-links don't show activity, try copy-paste them to the address bar)

MediaInfo:

General
Complete name : 7. Public Methods & Properties.mp4
Format : MPEG-4
Format profile : Base Media
Codec ID : isom (isom/iso2/avc1/mp41)
File size : 53.9 MiB
Duration : 6 min 37 s
Overall bit rate : 1 136 kb/s
Writing application : Lavf58.12.100

Video
ID : 1
Format : AVC
Format/Info : Advanced Video Codec
Format profile : Main@L3.1
Format settings : CABAC / 4 Ref Frames
Format settings, CABAC : Yes
Format settings, RefFrames : 4 frames
Codec ID : avc1
Codec ID/Info : Advanced Video Coding
Duration : 6 min 37 s
Bit rate : 1 000 kb/s
Nominal bit rate : 3 000 kb/s
Width : 1 280 pixels
Height : 720 pixels
Display aspect ratio : 16:9
Frame rate mode : Constant
Frame rate : 30.000 FPS
Color space : YUV
Chroma subsampling : 4:2:0
Bit depth : 8 bits
Scan type : Progressive
Bits/(Pixel*Frame) : 0.036
Stream size : 47.4 MiB (88%)
Writing library : x264 core 148
Encoding settings : cabac=1 / ref=3 / deblock=1:-1:-1 / analyse=0x1:0x111 / me=umh / subme=6 / psy=1 / psy_rd=1.00:0.15 / mixed_ref=1 / me_range=16 / chroma_me=1 / trellis=1 / 8x8dct=0 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=-3 / threads=22 / lookahead_threads=3 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=2 / keyint=60 / keyint_min=6 / scenecut=0 / intra_refresh=0 / rc_lookahead=60 / rc=cbr / mbtree=1 / bitrate=3000 / ratetol=1.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / vbv_maxrate=3000 / vbv_bufsize=6000 / nal_hrd=none / filler=0 / ip_ratio=1.40 / aq=1:1.00

Audio
ID : 2
Format : AAC
Format/Info : Advanced Audio Codec
Format profile : LC
Codec ID : mp4a-40-2
Duration : 6 min 37 s
Bit rate mode : Constant
Bit rate : 128 kb/s
Channel(s) : 2 channels
Channel positions : Front: L R
Sampling rate : 48.0 kHz
Frame rate : 46.875 FPS (1024 SPF)
Compression mode : Lossy
Stream size : 6.07 MiB (11%)
Default : Yes
Alternate group : 1

Screenshots