Giter Site home page Giter Site logo

learnwithjason.dev's Introduction

Learn With Jason

Boop Crew HQ for Learn With Jason

Fun things to do: subscribe for updates · see upcoming episodes · add the Google Calendar

All Contributors

 

This site is home to Learn With Jason’s episode back catalog, upcoming schedule, and written posts. It’s an Nx monorepo housing multiple sites built with:

For data, it uses:

It also uses Algolia for search.

API

If you want to load Learn With Jason episodes or the schedule, there is an API available.

All requests are made through the /api/v2 path. For example:

https://www.learnwithjason.dev/api/v2/schedule

/api/v2/episodes

Loads the most recent 50 episodes.

/api/v2/episode/:slug

Load details about a single episode.

Options

  • /api/v2/episode/:slug?transcript=true — include the episode transcript in the response

/api/v2/schedule

Load upcoming episode details.

Local Development

To run this repo, you will need:

  • Node >= v18 (if you’re using nvm, run nvm use in the project root to switch)
  • the Netlify CLI
nvm use
npm i -g netlify-cli

To start, clone the repo and install dependencies:

# clone the repo
git clone [email protected]:learnwithjason/learnwithjason.dev

# move into the project directory, then into the site
cd learnwithjason.dev

# install dependencies
npm install

# start local dev!
npx nx run blog:dev

The project will start at http://localhost:8888. Please note that the environment variables will not be set, so some of the serverless functions won’t work unless you add your own env vars. This shouldn’t prevent working on the project for UI-related changes.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Brittney Postma
Brittney Postma

💻
Brandon
Brandon

💻
Ekin Alçar
Ekin Alçar

💻
Sarah Drasner
Sarah Drasner

💻
Seifeldin Mahjoub
Seifeldin Mahjoub

🚧
Ben Myers
Ben Myers

️️️️♿️
Ben Hong
Ben Hong

💻
Cassidy Williams
Cassidy Williams

💻
Ekene Eze
Ekene Eze

💻
Phil Hawksworth
Phil Hawksworth

💻
Tara Z. Manicsic
Tara Z. Manicsic

💻
Rohith Gilla
Rohith Gilla

🖋
Sarah Dayan
Sarah Dayan

💻
Hitesh Riziya
Hitesh Riziya

📖
Ryan Shaw
Ryan Shaw

💻
Logan McAnsh
Logan McAnsh

💻
Petar Todorov
Petar Todorov

💻
Muescha
Muescha

📖
Andy Kenward
Andy Kenward

💻
B. Burt
B. Burt

🖋
Levi Cameron
Levi Cameron

🖋
Darrik Moberg
Darrik Moberg

💻
Thomas Greco
Thomas Greco

🖋
Horacio Herrera
Horacio Herrera

💻
JR Cologne
JR Cologne

💻
Adam Cowley
Adam Cowley

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

learnwithjason.dev's People

Contributors

adam-cowley avatar allcontributors[bot] avatar andykenward avatar beeburrt avatar bendmyers avatar brandonroberts avatar brittneypostma avatar ekinalcar avatar horacioh avatar hriziya avatar jlengstorf avatar jr-cologne avatar lindakatcodes avatar mcansh avatar petardotjs avatar rohithgilla12 avatar ryankshaw avatar sarahdayan avatar seifsay3d avatar tgrecojs avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

learnwithjason.dev's Issues

Test what happens if we remove font preloading

based on this perf test, there might be an opportunity to speed up the page load by removing some of the preloads

<link
rel="preload"
href="/fonts/jwf-book.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/jwf-bookitalic.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/jwf-bold.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/jwf-bolditalic.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/jwf-ultra.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
rel="preload"
href="/fonts/jwf-ultraitalic.woff2"
as="font"
type="font/woff2"
crossorigin
/>

Please explore these Cool things.

When I see a cool website like yours, I would like to know the cost of loading speed, interactivity, data apis, hosting, & databases. What I would do is just copy the url of the website & go to page speed insights (https://pagespeed.web.dev/report?url=https%3A%2F%2Fwww.learnwithjason.dev%2F) & web dev measure (https://web.dev/measure/) & see what the results are interms of Time to Interactive, Largest Contentful Paint & First Contentful Paint.

As you can see, If you test your site that LCP, TTI, FCP is not really good. There are some of ideas that I suggest, you might see in the future. But don't consider rebuilding your website now, Just see these things, & experiment with them.

  1. The Meta Framework
    Just Cool Meta Frameworks are Emerging & getting population now. If you take Solid Start, Qwik & Marko, they are really Awesome. That they are trying to solve the most important performance bottlenecks of our Applications such as :-

    A. Rendering
    I don't prefer async rendering because it can be blocking & take seconds to first paint. So Solid Start & Marko gives you HTML Streaming (to not block rendering & sending static files) with small or no js.

    B. Bundle Sizes
    As React is Really huge, Framework build on Top of React have much huge bundle Sizes & Code to Execute, once the App hydrates, be Interactive. If you just add analytics scripts in your site you might end up with mbs of js to load & Execute. Frameworks like Solid Start, Qwik & Marko only loads like 40 kbs or no js as you like.

    C. Hydration Time
    As the framework bundle gets huge & huge, the hydration time or Time to be Interactive will get larger as we need to execute the huge bundle of code to make the app interactive & attach event handlers & more. But with Qwik & Marko you don't need to think about this & Solid Start will only take about 100 - 200 ms.

  2. API's
    As server less is going to the Edge. It's a Joy to use Cloudflare workers, Cloudflare Pages & Deno Deploy. Workers are globally distributed & sits closer to end users & workers can be used for Server Side Rendering (also called Edge Side Rendering). This gives your users a great UX as you app & your API's are awesome fast. Also Databases are going at the edge like faunadb does. Also content delivery system like cloudinary does. Also Graphql is really usefull in here to just fetch a data that we need.

Just Explore these things that I recommend to You.

  1. Cloudflare workers & Pages
  2. Solid Start, Qwik & Marko
  3. Faunadb & Cloudinary

Just see Ryan Carniato's Streams like this one https://m.youtube.com/watch?v=8hlo9uPrpr4 & Also try to make your website PWA with workbox & vite plugin pwa.

I am not saying your tech stack is bad but there are some things that you can make to make your web site awesome fast.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.