aelbore

:host {
  section {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--bto-carousel-width, 200px);
    gap: var(--bto-carosel-gap, 8px);
    padding: var(--bto-carousel-padding-container, 10px 0);
    overflow-x: auto;
 }

aelbore

Horizontal Timeline with Swiper

Horizontal Timeline with SwiperJS

A Pen by Jay on CodePen.

License.

aelbore

<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<button id="toggleButton">Toggle</button>

<ul class="timeline" id="timeline">
  <li class="li complete">
    <div class="timestamp">
      <span class="author">Abhi Sharma</span>
      <span class="date">11/15/2014<span>
    </div>

aelbore

Create your library

• Initialize project npm init -y
• Create esm module ./src/esm/my-lib.js

  function addNumber(value, value2) {
    return value + value2;
  }
  
  export { addNumber };

aelbore

Testing in Vue

Write lots of tests so people will afraid to delete yout code

Why need test?

aelbore

Requirements

• Docker Desktop on Windows (https://docs.docker.com/docker-for-windows/install)
• Mongodb Management Studio (https://robomongo.org/download)

Getting Started

1. Launch Terminal or Command Prompt
2. Type docker --version to check the version of docker
3. Pull docker image type docker pull mongo (this will get the latest version of mongodb)

aelbore

Testing in Vue

Write lots of tests so people will afraid to delete yout code
  - creator of redux
  
Don't just write tests that let you verify unit works with confidence.
Write tests that let you *delete* that unit of confidence.
  - creator of redux

aelbore

<template>
  <div id="app">
    <div style="text-align:center;margin-bottom:20px;">
      <h1>Welcome to Vue</h1>
      <img width="200" src="https://vuejs.org/images/logo.png" />
    </div>
    <div class="cards">
      <div v-for="(profile, index) in profiles" v-bind:key="index">
        <Card :profile="profile" />
      </div>

aelbore

Getting Started

ng new ng-elements --enable-ivy

Create and Build HelloWorldElements

• Remove all the files in src/app folder
• Create card.ts file in src/app folder
• Add Component

aelbore

Getting Started

ng new ng-elements --enable-ivy

Create and Build HelloWorldElements

• Remove all the files in src/app folder
• Add hello-world.ts file in src/app folder
• Add Component