Welcome to the WebDev Cave

Welcome to my Computer related Youtube channel, I have launched this channel to share with you all the things I have learned so far in web development, networking, programming and all the aspects that I am interested in concerning the computer world

#webdev

What is GEEK

Buddha Community

Welcome to the WebDev Cave

Welcome to my Computer related Youtube channel, I have launched this channel to share with you all the things I have learned so far in web development, networking, programming and all the aspects that I am interested in concerning the computer world

#webdev

How to Integrate 3D Into React Website using Three.js

Three.js 3D Elements for your website using ReactJS

After learning the basics of web development, you probably want to learn more advanced techniques to improve your website. Enhancing interactions is one way to do this. The most common ones include animations, hovering on buttons, and swiping. In this tutorial, we will learn how to integrate 3D into your React website using Three.js.

Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL. 

You can find the initial code:

https://codesandbox.io/s/three-js-initial-x3ojl

The final code: https://codesandbox.io/s/three-js-final-5phhd 

00:00 Intro to Three.js
03:10 Dependencies
04:00 Box geometry
17:35 Animated Sphere
22:40 Import 3D models

#threejs #webdev #reactjs #react #webdev 

Prisma Explained in 100 Seconds

Prisma in 100 Seconds

Prisma is an open-source ORM that makes it fun and safe to work with a database like MySQL, Postgres, SQL Server, or MongoDB. It generates a type-safe client library to provide an awesome DX in any Node.js or JavaScript project.

#database #webdev #100SecondsOfCode

🔗 Resources

- Prisma Docs https://www.prisma.io/ 
- Prisma Source Code https://github.com/prisma/prisma 
 

🔖 Topics Covered

- What is Prisma
- Is Prisma an ORM?
- Prisma Quickstart
- What is Prisma used for?
- How to use Prisma in Node.js
- Using Prisma with a relational database
- Prisma compared to Sequalize or TypeORM

#prisma #database #webdev 

Svelte Framework 배우기: SvelteKit으로 포트폴리오 웹사이트 구축

이 튜토리얼에서는 SvelteKit으로 포트폴리오 웹사이트를 구축하는 방법을 배우게 됩니다. Netlify에 Sveltekit 애플리케이션을 배포합니다. Sapper에서 Sveltekit으로 전환하는 이유와 Sveltekit에서 REST API를 사용하는 방법

이 단계별 자습서를 통해 첫 번째 SvelteKit 애플리케이션을 배포하는 방법을 알아보세요.

svelte의 팀은 몇 달 전에 Sveltekit을 소개했습니다. Sapper를 대체하는 새로운 프레임워크입니다. 아름다운 개발 경험과 유연한 파일 시스템 기반 라우팅으로 날렵한 앱을 빌드하는 가장 빠른 방법입니다. 이 기사에서는 프레임워크에서 필요한 모든 업데이트로 샘플 포트폴리오 웹사이트를 구축하여 Sveltekit이 어떻게 작동하는지 살펴볼 것입니다. Sveltekit으로 웹 앱 구축에 대한 모든 기본 개념, Sapper에서 Sveltekit으로 전환하는 이유, 앱 내에 데모 블로그를 구축하여 Sveltekit에서 REST API를 사용하는 방법을 배우게 됩니다. 또한 Netlify에서 Sveltekit 애플리케이션을 배포하는 방법을 배우게 됩니다.

Sveltekit이란 무엇입니까?

svelte 웹사이트 에 따르면 Svelte를 처음 사용하는 사람들을 위해 :

Svelte 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.
Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically 
updates the DOM when the state of your app changes.
Svelte is a component-based Javascript framework - much like React, Vue, or angular and is 
used for building web applications in Javascript.

반대로 Sveltekit은 모든 크기의 멋진 앱을 빌드하기 위한 프레임워크입니다. 더 작은 설치 공간으로 더 중요한 앱을 빌드할 수 있습니다. 아름다운 개발 경험, 유연한 파일 시스템 기반 라우팅, SSR(서버 측 렌더링), 클라이언트 측 수화 및 기타 고유 기능이 함께 제공됩니다.

Sapper에서 Sveltekit으로 전환하는 이유

Svelte의 창시자인 Richard Harris는 Sapper에서 sveltekit으로의 전환에 영향을 미친 몇 가지 이유를 다음과 같이 언급합니다.

• Sapper는 약간 복잡해 보였습니다. sveltejs/template 과 sveltejs/sapper-templated 의 구분은 특히 Svelte 를 처음 접하는 사람들에게 약간 혼란스러워 보입니다.
• Sapper 프로젝트가 2017년에 시작된 이래로, 코드베이스는 몇 년 동안 약간 지저분해졌습니다. 그리고 웹이 수년에 걸쳐 크게 바뀌었기 때문에 더 새로운 접근 방식을 재고할 필요가 있습니다.
• 또한 svelte를 사용하여 앱을 빌드하는 데 권장되는 단일 방법이 있다는 아이디어는 상당한 이점을 가져올 것입니다. 온보딩 프로세스를 단순화하고 유지 관리 및 지원 부담을 줄입니다.

Sveltekit 시작하기

Sveltekit은 최신 웹 앱 구축의 모든 병목 현상을 제거합니다. 창의적인 부분에 집중하는 동안 지루한 작업을 모두 수행합니다. 최신 웹용으로 설계된 번개처럼 빠른 프론트엔드 빌드 도구인 Snowpack under the hood 에 의해 구동됩니다 . Vite with Svelte 플러그인 을 사용 하여 HMR(Hot Module Replacement)을 통해 번개처럼 빠르고 기능이 풍부한 개발 경험을 제공합니다. 코드 변경 사항은 브라우저에 즉시 반영됩니다.

Sveltekit으로 프로젝트를 설정하려면 컴퓨터에 NodeJS가 설정되어 있어야 합니다. 아래 명령을 실행하여 sveltekit 데모 프로젝트를 스캐폴드한 다음 폴더로 이동하여 필요한 모든 종속성을 설치하세요.

npm init svelte@next my_portfolio_website 
cd my_portfolio_website
npm install 
npm run dev

첫 번째 명령은 'my_portfolio_website' 디렉토리에 있는 새 프로젝트를 스캐폴딩하여 TypeScript와 같은 몇 가지 기본 도구를 설정할 것인지 묻는 메시지를 표시합니다. 이 프로젝트에서는 Typescript를 사용하지 않을 것이기 때문에 '아니오'를 선택하십시오. 후속 명령은 종속성을 설치하고 localhost:3000 에서 서버를 시작합니다 .

아래는 우리가 만들고 있는 샘플 데모입니다.

이 기사를 따라 하기 위해 GitHub repo 를 확인할 수 있습니다 .

페이지 및 구성 요소 구성

Sveltekit의 환상적인 기능 중 하나는 파일 시스템 기반 라우터 입니다. 이는 코드베이스의 구조가 애플리케이션의 구조를 정의한다는 것을 의미합니다. 페이지와 엔드포인트라는 두 가지 유형의 경로가 있습니다. 페이지는 일반적으로 페이지가 사용자에게 표시되는 데 필요한 HTML, CSS 및 JavaScript를 생성하는 반면 Endpoints는 서버에서만 실행됩니다(또는 사전 렌더링 의 경우 사이트를 구축할 때 ).

다른 구성 요소 기반 프레임워크와 마찬가지로 Pages는 .svelte파일(또는 config.extension 에 나열된 확장명을 가진 파일로 작성된 Svelte 구성 요소입니다 . 사용자가 애플리케이션을 처음 방문하면 기본적으로 해당 페이지의 서버 렌더링 버전이 제공됩니다. 거기에서 다른 페이지로의 탐색은 전적으로 클라이언트가 처리합니다.

파일 이름은 경로를 결정합니다. 예를 들어, src/routes/index.svelte 는 데모 사이트의 루트입니다.

선택한 코드 편집기로 프로젝트 폴더를 열고 src/routes/index.svelte 로 이동합니다 . 아래에 다음 코드를 삽입하십시오.

<!-- src/routes/index.svelte -->
<svelte:head>
 <title>David Adeneye</title>
</svelte:head>

<div class="container">
 <div class="info">
   <div class="animate-background">
     <div class="container info-container">
     <div class="info-text">
       <h1,
       <p class="animate-text-1">School-taught Computer Scientist,</p>
       <p class="text-2">Self-taught Software Engineer</p>
       </h1>
     </div>
     <h2 class="subtitle">
       On a mission to help SMEs across the globe do businesses 
       seamlessly and digitally.
     </h2>
     <div style="color:black" class="scroll-button animate-scroll" tabindex="0">
       <a href="/about">Click Here</a><div class="arrow">→</div>
     </div>
     </div>
   </div>
 </div>
</div>

<div class="background-div"></div>

두 번째 줄 의 <svelte:head>태그 요소를 사용하면 문서 내부에 요소를 삽입할 수 있습니다. 나머지 코드는 인덱스 페이지에 대한 HTML 페이지 구조입니다. 다음 섹션에서는 Sveltekit에서 스타일링이 어떻게 작동하는지 살펴볼 것입니다.<head>

SvelteKit에서 앱 스타일 지정

Sveltekit의 스타일링 작업 방식은 일반 HTML&CSS 프로젝트와 거의 동일한 프로세스입니다. app.html 의 head 태그에서 모든 페이지에 적용된 외부 CSS 파일 또는 루트 스타일을 참조 하고 문서 태그에 선택기를 첨부하여 스타일을 적용할 수 있습니다.

위 의 index.svelte 파일 스타일을 지정하려면 마지막 코드 아래에 다음 스타일을 추가하세요.

<style>
   .info {
       text-align: center;
       position: relative;
   }       

   .info-container {
       height: 100%;
       display:flex;
       flex-direction: column;
       justify-content: center;
       text-align: left;
       align-items: start;
   }

   .container {
   max-width: 1400px;
       margin: 190px 0 0 2.5rem;
   }

   .info h1 {
       font-size: 4rem;
       margin: 0;
   }

   .info h1 p {
       position: relative;
       font: inherit;
       margin: 0;
   text-align: left;
       line-height: 130%;
       width: fit-content;
       font-weight: 800;
       letter-spacing: -0.03em;
   }

   .info h2 {
       max-width: 65ch;
       font-weight: 200;
       margin-top: 0.50rem;
   }

 .background-div {
   background-color: var(--background);
     width: 100%;
   height: 56vh;
   margin: -155px auto;
 }
  
 
   .info .info-text {
       position: relative;
   }

 .scroll-button {
   display: flex;
   border: none;
   outline: none;
   cursor: pointer;
 }

   .scroll-button .arrow {
     margin-left: 0.50rem;
 }
</style>

또한 다른 페이지에서 글로벌 스타일 지정이 작동하도록 하려면 app.html을 열고 html 닫는 태그 아래에 다음 스타일을 삽입합니다.

<style>
   body {
   background-position: left top;
   font-family: "Inter", sans-serif;
   margin: 0;
   background-repeat: no-repeat;
   }

   * {
   box-sizing: border-box;
  
   }

   a {
   text-decoration: none;
   color: black;
   }

   :root{
       --background: #ecebe8;
   }


   nav {
       position: sticky;
       top: 0;
       left: 0;
       right: 0;
       margin: 0 80px 0 80px;
       padding-top: 2rem;
       padding-bottom: 2rem;
   }

   nav .nav-container {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }

   .nav-links {
       display: flex;
       justify-content: flex-end;
       align-items: center;
       margin: -1em 0;
       flex: 1 0 auto;
   }

   .nav-links .link {
       position: relative;
       margin: 1em;
       font-size: 0.85rem;
       letter-spacing: 1px;
       color: black;
   }

   .nav-logo {
       position: relative;
       line-height: 1;
       font-size: 1.1rem;
       color: black;
   }
</style>

또한 Svelte에서 구성 요소를 가져올 때 각 구성 요소 스타일 지정은 내부적으로 범위가 지정됩니다. 즉, 가져온 구성 요소에 적용된 스타일은 구성 요소 자체에만 영향을 줍니다.

Sveltekit의 레이아웃 및 탐색

앞에서 설명한 것처럼 페이지는 완전히 독립 실행형 구성 요소로 처리됩니다. 따라서 탐색 시 기존 구성 요소가 제거되고 새 구성 요소가 인계됩니다. 그러나 요소 또는 구성 요소는 탐색 메뉴 또는 바닥글과 같은 많은 응용 프로그램의 모든 페이지에 표시되어야 합니다. 따라서 모든 페이지에서 반복하는 대신 레이아웃 구성 요소를 사용할 수 있습니다.

웹사이트의 모든 페이지에 적용되는 레이아웃 구성 요소를 만들려면 src/routes/__layout.svelte 라는 파일을 만들고 아래에 다음 코드를 붙여넣습니다.

<!-- src/routes/__layout.svelte -->
<nav>
   <div class="nav-container">
       <a href="/" class="nav-logo" title="Back to Homepage">David Adeneye</a>
       <div class="nav-links">
           <a href="/about" class="link">About</a>
           <a href="/blog" class="link">Blog</a>
           <a href="/projects" class="link">Projects</a>
           <a href="/contact" class="link">Contact</a>
       </div>
   </div>
</nav>

<div class="container">
 <!-- Pages will be injected below -->
    <slot></slot>
</div>

<style>
    .container {
       max-width: 1400px;
       margin: 50px auto;
   }
</style>

위의 코드는 포트폴리오 웹사이트의 모든 페이지에 적용되는 탐색 메뉴바입니다. Sveltekit이 사용하는 기본 레이아웃 구성 요소는 포함하지 않은 경우 다음과 같습니다.

<slot></slot>

또한 원하는 마크업, 스타일 및 동작을 사용할 수 있습니다. 유일한 요구 사항은 위의 __layout.svelte 파일<slot> 에서와 같이 구성 요소에 페이지 콘텐츠 가 포함되어야 한다는 것 입니다.

Sveltekit의 라우팅

다른 모든 인기 있는 SSR 솔루션과 마찬가지로 Sveltekit에는 훌륭한 파일 기반 라우팅 시스템이 있습니다. 앱의 페이지는 기본적으로 src/routes 폴더에 저장됩니다. 이것은 애플리케이션의 구조가 코드베이스의 구조, 특히 src/routes 의 내용에 의해 정의된다는 것을 의미합니다 .

포트폴리오 웹사이트는 약 6페이지로 구성되어 있습니다.

• 홈 - index.svelte(위에서 이미 생성)
• 정보 - about.svelte(이 섹션에서 만들 것입니다)
• 블로그 - blog.svelte(다음 섹션에서 만들 것입니다)
• 프로젝트 - projects.svelte(github 저장소의 코드 파일 복사)
• 연락처 - contact.svelte(github 저장소의 코드 파일 복사)
• [id].svelte - 동적 경로(github 저장소의 코드 파일 복사)

위의 src/routes/__layout.svelte 에서 이러한 페이지에 대한 탐색 헤더 구조를 생성했기 때문에 . about.svelte 를 열고 아래에 다음 코드를 삽입하십시오.

<!-- src/routes/about.svelte -->
<svelte:head>
   <title>About</title>
</svelte:head>

<div class="main_container">
   <section>
       <div class="inner-container">
         <h2 class="about-title">I'm David Adeneye👋</h2>
         <div class="about-subtitle">
             <p>
               Software Engineer and a Technical Writer with a solid     
               background in Computer Science, I'm passionate about making 
               the web accessible for everyone. I design and develop visually compell                ing applications with user-friendly interaction that drive business g                owth and improve user experience. When I'm not solving problems,
               I love to create technical content for engineers and tech 
               startups across the globe.
             </p>
             <p>
               Creating magic daily on the internet. You can send me
                an email at <span class="info-text">adeneyeabiodun@gmail.com</span>
             </p>
         </div>
       </div>
     </section>
</div>

<style>
   .main_container {
       margin: 0 80px 0 65px;
   }

   .about-title {
       font-size: 4.2rem;
       font-weight: bold;
       margin-top: 11rem;
   }

   .about-subtitle {
       margin-top: -2rem;
   }

   .about-subtitle >p {
       width: 60%;
       font-weight: normal;
       font-size: 1rem;
       line-height: 2rem;
   }

   .info-text {
       font-style: italic;
       font-weight: bold;
   }
</style>

탐색 구성 요소는 항상 표시되며 페이지 사이를 클릭하면 항상 페이지 콘텐츠가 바뀝니다. 이제 포트폴리오 웹사이트가 작동하는 모습을 확인하십시오. 귀하의 정보 페이지는 다음과 같아야 합니다.

오픈 소스 세션 재생

OpenReplay 는 사용자가 웹 앱에서 수행하는 작업을 볼 수 있는 오픈 소스 세션 재생 제품군으로 문제를 더 빨리 해결할 수 있도록 도와줍니다. OpenReplay는 데이터를 완벽하게 제어할 수 있도록 자체 호스팅됩니다.

디버깅 경험을 즐기십시오 . OpenReplay를 무료로 사용하십시오 .

Sveltekit에서 REST API 사용

REST API에서 데이터를 가져오는 방법과 Sveltekit에서 로드하는 개념을 배우기 위해 웹사이트에 데모 블로그 게시물을 만들 것입니다. 테스트 및 프로토타이핑을 위한 무료 온라인 REST API 인 JSONPlaceholder 라는 무료 가짜 REST API와 상호 작용할 것입니다 .

시작하려면 src/routes/blog.svelte 를 열고 다음 코드를 붙여넣거나 함께 제공되는 소스 코드와 함께 읽으십시오.

<!-- src/routes/blog.svelte -->
<svelte:head>
   <title>Blog</title>
</svelte:head>

<script context="module">
   export const load = async ({ fetch }) => {
       const res = await fetch("https://jsonplaceholder.typicode.com/posts");
       const blogposts = await res.json();
       return {
           props: {
               blogposts,
           }
       }
   }
</script>

<script>
   export let blogposts;
</script>

<div class="container">
   <h1>My Articles</h1>
   <div class="blogposts">
       {#each blogposts as post}
       <div class="post">
           <h2>{post.title.substring(0, 20)}</h2>
           <p>{post.body.substring(0, 80)}</p>
           <p class="readmore">
            <a style=" color: rgb(10, 10, 139);" href={`/blog/${post.id}`}>
              Read More
            </a>
          </p>
       </div>
       {/each}
   </div>
</div>

위의 코드를 분석해보자. 6번째 줄<script context="module"> 에 주목하세요 . 구성 요소가 렌더링되기 전에 실행되기 때문에 필요합니다 . 구성요소별 인스턴스 코드는 두 번째 태그에 있어야 합니다. 그런 다음 함수를 사용하여 jsonplaceholder 가짜 API에서 데모 블로그 게시물을 가져와 웹사이트에 표시합니다.load<script>load

sveltekit 의 load기능은 클라이언트와 서버 모두에서 실행된다는 점을 제외하면 Next.js 와 비슷 getStaticProps하거나 비슷합니다.getServerSideProps

또한 페이지 스타일 지정을 위해 이 자습서와 함께 빌드하는 경우 코드 블록 내에서 함께 제공되는 CSS 코드를 복사하는 것을 잊지 마십시오.

귀하의 blog.svelte 는 다음과 같아야 합니다.

Sveltekit에서 동적 경로 사용

이와 같은 블로그를 구축하려면 동적으로 생성된 경로가 필요합니다. Sveltekit을 사용하면 동적 경로를 통해 이를 쉽게 구현할 수 있습니다.

이를 구현하려면 blog 라는 새 폴더를 만듭니다 . Sveltekit의 동적 매개변수는 [bracket]. 예를 들어 블로그 폴더 안에 [id].svelte 라는 파일을 만듭니다 . 파일을 열고 다음 코드를 붙여넣거나 소스 코드를 따르십시오.

<script context="module">
   export const load = async ({ page, fetch }) => {
       const id = page.params.id;

       const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);

       const post = await res.json();

       return {
           props: {
               post,
           }
       }
   }
</script>

코드에서 load 함수 내의 매개변수에 액세스하여 변수와 함께 저장했습니다 id. 그런 다음 매개변수를 사용하여 해당 ID의 정확한 블로그 게시물을 가져왔습니다. blog.svelte 로 돌아가서 아래 33행href 에서 동적으로 생성된 페이지에 액세스한 방법을 볼 수 있다고 가정합니다.

<p class="readmore">
  <a style="color: rgb(10, 10, 139);" href={`/blog/${post.id}`}> 
      Read More
  </a>
</p>

를 사용하여 정확한 블로그 게시물에 액세스하는 방법을 확인할 수 있습니다 post.id. 따라서 더 읽기 를 클릭 하면 전체 블로그를 읽을 수 있는 새 페이지가 로드됩니다.

배포 Sveltekit 응용 프로그램

Sveltekit에서 앱을 배포하려면 먼저 개발 대상에 맞게 조정해야 합니다. 어댑터라고 하는 여러 플러그인을 제공하여 배포 프로세스를 단순화하는 데 도움이 됩니다. 어댑터는 빌드된 앱을 입력으로 사용하고 배포를 위한 출력을 생성하는 작은 플러그인입니다.

Sveltekit은 공식적으로 지원되는 몇 가지 어댑터를 제공합니다.

정적 어댑터 : 사이트를 Github 페이지 등과 같은 호스팅 서비스와 호환되는 정적 파일 모음으로 사전 렌더링하는 Sveltekit 앱용 어댑터입니다.

어댑터 Vercel : 동적 서버 렌더링을 위한 기능을 사용하여 Vercel 앱을 생성하는 Svelte 앱용 어댑터입니다. Vercel 호스팅 플랫폼에 앱을 배포하는 데 사용됩니다.

어댑터 Netlify : 페이지를 동적으로 생성하기 위한 서비스 기능을 사용하여 Netlify 앱을 생성하는 Svelte 앱용 어댑터입니다. Netlify 플랫폼에 앱을 배포하는 데 사용됩니다.

Netlify에 데모 애플리케이션을 배포하는 방법을 살펴보겠습니다.

Netlify에 Sveltekit 배포

Netlify에 Sveltekit을 배포하려면 netlify-sveltekit 어댑터 를 사용해야 합니다 .

아래 명령을 사용하여 프로젝트에 adpater를 설치할 수 있습니다.

npm install -D @sveltejs/adapter-netlify@next

설치가 완료되면 어댑터를 프로젝트의 svelte.config.js 파일에 추가합니다. 파일에 아래 코드를 삽입하십시오.

import adapter from '@sveltejs/adapter-netlify';

export default {
  kit: {
    adapter: adapter(),
    target: '#svelte'
  }
};

그런 다음 프로젝트의 기본 디렉터리에 netlify.toml 파일을 만들고 빌드 명령과 게시 디렉터리를 지정합니다. 파일에 아래 코드를 삽입하십시오.

[build]
  command = "npm run build"
  publish = "build"

이 모든 설정이 끝나면 Git 또는 Netlify CLI를 사용하여 Netlify에 프로젝트를 배포합니다 .

Netlify 에 최종 배포된 웹 사이트에 대한 링크( jolly-franklin-11e50c.netlify.app )입니다.

결론

이 튜토리얼을 통해 즐겁게 작업하셨기를 바랍니다. 샘플 포트폴리오 웹사이트를 구축하여 Sveltekit의 기본 개념을 살펴보고 가장 중요한 것은 앱 내 데모 블로그에서 REST API를 사용하는 방법과 Netlify에 sveltekit 애플리케이션을 배포하는 방법을 살펴보았습니다. 자신을 위한 포트폴리오 웹사이트를 구축하려는 경우 다른 페이지를 구축하여 배운 내용을 실습에 적용하거나 이 데모를 취향에 맞게 업그레이드할 수 있습니다.

이 기사에 대한 지원 리포지토리는 Github에서 사용할 수 있습니다 .

https://blog.openreplay.com 의 원본 기사 출처

#sveltekit #svelte #webdev #webdev 

APIs Tutorial for Beginners - What, Why and How to Use an API?

What is an API? Learn all about APIs (Application Programming Interfaces) in this full tutorial for beginners. You will learn what APIs do, why APIs exist, and the many benefits of APIs. APIs are used all the time in programming and web development so it is important to understand how to use them.

You will also get hands-on experience with a few popular web APIs. As long as you know the absolute basics of coding and the web, you’ll have no problem following along.

⭐️ Course Contents ⭐️

⭐️ Unit 1 - What is an API
⌨️ Video 1 - Welcome (0:00:00)
⌨️ Video 2 - Defining Interface (0:03:57)
⌨️ Video 3 - Defining API (0:07:51)
⌨️ Video 4 - Remote APIs (0:12:55)
⌨️ Video 5 - How the web works (0:17:04)
⌨️ Video 6 - RESTful API Constraint Scavenger Hunt (0:22:00)

⭐️ Unit 2 - Exploring APIs
⌨️ Video 1 - Exploring an API online (0:27:36)
⌨️ Video 2 - Using an API from the command line (0:44:30)
⌨️ Video 3 - Using Postman to explore APIs (0:53:56)
⌨️ Video 4 - Please please Mr. Postman (1:03:33)
⌨️ Video 5 - Using Helper Libraries (JavaScript) (1:14:41)
⌨️ Video 6 - Using Helper Libraries (Python) (1:24:40)

⭐️ Unit 3 - Using APIs
⌨️ Video 1 - Introducing the project (1:34:18)
⌨️ Video 2 - Flask app (1:36:07)
⌨️ Video 3 - Dealing with API Limits (1:50:00)
⌨️ Video 4 - JavaScript Single Page Application (1:54:27)
⌨️ Video 5 - Moar JavaScript and Recap (2:07:53)
⌨️ Video 6 - Review (2:18:03)

🔗 Course Notes: https://github.com/craigsdennis/intro-to-apis-course/blob/master/course-notes.md

Shirts and Gifts for Your Friends & Loved ☞ https://bit.ly/36PHvXY

#api #webdev #python #javascript #web-development #webdev