Subtitles, statistics and DRM in Udemy video player (2020 edition) | beraliv

Subtitles with WebVTT, statistics and DRM

https://blog.beraliv.dev/2020-01-07-whats-inside-udemy-player

What

Address perceptual patterns in structure, e.g.:

• Colours 🟢 (e.g. for light/dark modes)
• Spaces 👽 (e.g. groups and cards at https://blog.beraliv.dev/)
• Shapes 📦 (e.g. more enriched post cards, highlighted blocks like in Confluence with What, Why, How, etc)
• Icons 🔎 (e.g. accessible search from every screen, RSS to subscribe to updates, subscribe to newsletter)

Why

Now the main page https://blog.beraliv.dev looks like different parts which are disconnected from each other.
The post cards are very short and may be not clear without image, introductory description, read time and more expanded title.
Some parts are completely unnecessary and can be moved or completely removed, e.g. buy me a coffee in header and footer, spotify in the footer
Everything fancy can be moved to portfolio site, here it should be focused on the blog only.

How

Header

It will contain all important icons for navigation, e.g. menu for mobile, accessible search from every screen, RSS to subscribe to updates, subscribe to newsletter and social networks links:

Additional information:

• Header light background – --tw-bg-opacity: 0.7; background-color: rgb(255 255 255 / var(--tw-bg-opacity));
• Header dark background – --tw-bg-opacity: 0.7; background-color: rgb(15 23 42 / var(--tw-bg-opacity));

Links:

• Hashnode example with header icons – https://soprinye.com/
• Hashnode example with header colours – https://blog.xnim.me/

Blog post card

It will contain all enhanced information to understand before starting reading it: more explanatory titles, 3-liner introductory description, read time (given 238 words per minute is average per average person) and image. It won't have visible lines so there won't be a confusion that it's disconnected from each other by style.

Additional information:

• Breakpoints – desktop – >=1024px, tablet – >=768px, mobile – <768px
• Desktop dimensions: image – 40%, text – 60%, 4rem gap to left/right and between blog posts, 2rem between image and text
• Tablet dimensions: image – 100%, text – 100%, 1rem to left/right, 2.5rem to top, 4rem between blog posts, 1.5rem between image and text
• Mobile dimensions: image – 100%, text – 100%, 1rem to left/right, 2.5rem to top, 4rem between blog posts, 1.5rem between image and text

Links:

• Hashnode example with posts – https://blog.xnim.me/

Search

It will be a pop-up with input that will return nothing by default (now it's everything at https://blog.beraliv.dev/search) and will return articles when changing input value:

Add page views (swr + firebase + vercel lambda)

Tutorial – https://leerob.io/blog/real-time-post-views

Scrollbar customisation in CSS and JS | beraliv

CSS support in different browser engines, hacks and tricks, JS libraries

https://blog.beraliv.dev/2018-10-04-scrollbar-customisation

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update all minor dependencies (@solidjs/router, @testing-library/react, @types/node, @types/react, effector, effector-solid, eslint, mocha, next-mdx-remote, node, prism-react-renderer, react, react-dom, solid-devtools, solid-js, typescript, vite, vite-plugin-solid, vite-plugin-solid-svg, vitest)
• chore(deps): update all major dependencies (major) (@testing-library/react, @types/jsdom, @types/node, @types/unist, actions/cache, actions/checkout, actions/download-artifact, actions/setup-node, actions/upload-artifact, effector, eslint, eslint-config-next, jsdom, next, node, prism-react-renderer, remark, remark-gfm, remark-unwrap-images, swr, typescript, unified, unist-util-visit, vite, vitest, yup)
• chore(deps): lock file maintenance
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

https://blog.beraliv.dev/rss.xml return 404

Expected behaviour

renovate correctly updates dependencies

Actual behaviour

renovate cannot update pnpm-lock.yml, e.g. – #467

State machine and bundles in Amazon video player (2019 edition) | beraliv

From video tag to the implementation, state machine, the way bundle is loaded, bundle names

https://blog.beraliv.dev/2019-12-17-amazon-prime-video-player-investigation

List of Type Challenges problems and solutions | beraliv

Easy, medium, hard and extreme step by step solutions to type challenges in TypeScript

https://blog.beraliv.dev/2021-04-04-type-challenges