An app that will allow users to create, share and watch ๐ lists of YouTube channels.
- E2E / Integration
- Coverage
listd is a Full Stack App that will allow users to create, share and watch lists of YouTube channels. This app is being built LIVE on Twitch https://twitch.tv/codinggarden
Home Page: https://twitch.tv/codinggarden
License: MIT License
An app that will allow users to create, share and watch ๐ lists of YouTube channels.
Setup i18n
Hi
Here are some recommendations for changes:
https://prettier.io/docs/en/options.html
useTabs: true,
singleQuote: true,
trailingComma: 'es5',
printWidth: 100,
bracketSameLine: true,
tailwindConfig: './tailwind.config.cjs',
pluginSearchDirs: ['.'],
If we remove any of these options, the default value is going to be used instead.
useTabs
(default: false
)Tabs are evil! Please read this: https://alexkondov.com/indentation-warfare-tabs-vs-spaces.
[ ] Create ./.vscode/settings.json
and add this: "editor.insertSpaces": true
singleQuote
(default: false
)Use double quotes for consistency between your JavaScript, HTML, and CSS. It's also easier to write strings that contain a single quote!
trailingComma
(default: "es5"
)"es5"
is the default, so there is no need to have this config options.
In v3, "all"
is the default, which I think it's better.
[ ] Remove the trailingComma
config option when updating Prettier to version 3.
printWidth
(default: 80
)Using 80
is better for small screen sizes like laptops.
bracketSameLine
(default: false
)This makes the code look broken, unreadable, and ugly. I'll argue that this is one of the worst coding styles!
tailwindConfig
We don't need this because it doesn't accomplish anything in this project. Please read this: https://github.com/tailwindlabs/prettier-plugin-tailwindcss#options
pluginSearchDirs
I think this option is deprecated or something. It's nowhere to be found in prettier docs. Without it, everything works fine.
semi: false,
tabWidth: 4,
arrowParens: "avoid",
The default value for these options is not desired. So, let's change them.
semi
Why it's a good idea to not to use semicolons:
Readability:
Consistency:
Developer Preference:
Reduced Keystrokes:
Avoiding Pitfalls:
Interoperability:
Minification Benefits:
Embracing Modern Syntax:
tabWidth
By changing the tab width to 4
, we can improve code readability and reduce confusion significantly.
[ ] Create ./.vscode/settings.json
and add this: "editor.tabSize": 4
arrowParens
By avoiding arrow function paracentesis we can improve code readability and make the code cleaner.
[ ] Add "How to install PNPM" to CONTRIBUTING.md
.
Why it's a bad idea to use pre-commit hooks:
Watch this video: https://www.youtube.com/watch?v=RAelLqnnOp0
Overhead for Developers:
Risk of False Positives:
Difficulty for New Contributors:
Impact on Code Review:
Bypass with --no-verify
:
--no-verify
option when committing, potentially undermining the intended checks and validations.All of these are just opinions, feel free to talk about it on the stream, I think it would be nice talk.
Thanks โค๏ธ.
we don't add a dir
prop to the HTML element.
In
- <html lang="%lang%">
+ <html lang="%lang%" dir="%dir%">
- return resolve(event, { transformPageChunk: ({ html }) => html.replace('%lang%', locale) });
+ const direction = (new Intl.Locale(locale)).textInfo.direction
+ return resolve(event, { transformPageChunk: ({ html }) => html.replace('%lang%', locale).replace('%dir%', direction) });
Intl.Locale ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale
We have a lot of validation logic to handle forms
To use this super awesome library: https://github.com/ciscoheat/sveltekit-superforms
npm run lint
is not able to validate NavTrail.svelte
.
I tried to reinstall the whole project but I am not able to get the linter to work with this file.
Checkout the latest main
branch and run npm run lint
> [email protected] lint
> eslint --ext .js,.cjs,.ts,.svelte .
Error while parsing ***\NavTrail.svelte
Line 1, column 8: '>' expected.
`parseForESLint` from parser `@typescript-eslint/parser` is invalid and will just be ignored
I was looking at Prisma's different generators and saw https://github.com/keonik/prisma-erd-generator
add
generator erd {
provider = "prisma-erd-generator"
}
And it will generate ./prisma/ERD.svg
file
It is missing in CONTRIBUTING.md
. I think this command is doing what npx prisma generate
does also.
So I noticed that in the project you are using https://github.com/benflap/tabler-icons-svelte
but I was searching for tabler icons to add into my Svelte app and found this one instead https://tabler-icons.io/
and the Svelte implementation leads to https://github.com/tabler/tabler-icons/tree/master/packages/icons-svelte
PS: Sorry that I open this as an issue, but Discussion is not enabled.
Hey CJ, this is Chris from the Skeleton project.
FYI I caught this in your YouTube VOD today:
https://github.com/CodingGarden/listd/blob/main/src/app.postcss#L2
See this bit in the docs:
https://www.skeleton.dev/guides/tailwind
It's awesome that Svelte-Add implements these automatically, but unfortunately they do not provide a means to opt out. Leaving dupes like this might cause some issues so probably best to drop them, otherwise they might bite you later!
Hope this helps!
Saving the videos that the user clicked to help the user keep track of the watched videos. (Does the YT API provide such watch time? Like this red line?
We can add the video to the user's localStorage
or the database (more DB migrations, hooray!).
I would like to have a .editorconfig
file as to the recommendation from: https://editorconfig.org/
This is needed since not everyone will be using vscode
I would like to see a .editorconfig
file in the form of, updated to the needs of this project:
# EditorConfig is awesome: https://EditorConfig.org
# top-most EditorConfig file
root = true
# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true
# Matches multiple files with brace expansion notation
# Set default charset
[*.{js,py}]
charset = utf-8
# 4 space indentation
[*.py]
indent_style = space
indent_size = 4
# Tab indentation (no size specified)
[Makefile]
indent_style = tab
# Indentation override for all JS under lib directory
[lib/**.js]
indent_style = space
indent_size = 2
# Matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_style = space
indent_size = 2
Committing .vscode/settings.json
to source control removes the ability for contributors to have their own custom Workspace Settings while working on listd
.
For example, I would like to use the peacock extension to jazz up vscode's color scheme, but to do so, the extension must modify workspace settings.
Add vscode/settings.json
to .gitignore.
Rename .vscode/settings.json
to .vscode/settings.json.default
and add a blurb in the project README.md to encourage contributors to manually adopt the project's suggested default workspace settings.
Happy to create a PR with the suggested solution if approved.
It responded:
"Yes, it's perfectly okay to use
Using
Ultimately, your choice should depend on your design preferences, project requirements, and the semantics you want to convey. As long as your HTML structure makes sense within the context of your project and meets your design goals, you can use
๐
So, I never seen this before and I don't like it.
Go to the /create
page and search for dfgthyutrewrety5ryewretryitrye
in channel search input and you will get an error 500
.
lint-staged will only run against changed files speeding things up.
No response
none
No response
this pre-commit is realy new for me,
but it force the existing of cygpath,
which is still a open bug (eaven the issue got closed): desktop/desktop#10326
so cygpath had to be moved manuel to get the test running on windows env
workaround: desktop/desktop#10326 (comment)
Create a git commit in a windows env
/d/Programme/nodejs/npx: line 5: cygpath: command not found
node:internal/modules/cjs/loader:1078
throw err;
^
Error: Cannot find module 'C:\Users\*****\AppData\Local\GitHubDesktop\app-3.2.3\resources\app\git\node_modules\npm\bin\npx-cli.js'
at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
at Module._load (node:internal/modules/cjs/loader:920:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
Node.js v18.15.0
husky - pre-commit hook exited with code 1 (error)
Run a project type check as part of commit hooks and CI
I would like to have listd as a container as such to install it with docker hub, not having to worry about updates.
Problems that need to be solved:
docker-compose.yml
currently implements a volume for the database with local pathing, which won't work when both are containers.I would like to see a solution where both the database and listd can be used with docker.
WHEN we are using any kind of e-mail, we need to test them. Then I would like to see automated e-mail testing done. For example, there is a service that was mentioned by playwright: https://mailosaur.com/.
I would like to see automated email testing WHEN we are doing e-mail stuff.
We have to disable import/no-named-as-default-member
or ignore it for svelte files. Svelte components are imported using default named.
No response
import MyComponent from './MyComponent.svelte'
No response
It would be nice to have the Next and Previous buttons under the video, instead of scrolling down to click the next video.
adding <
and >
buttons under the video player
This is more of a question than a bug. Right now, we are setting the title and description during onMount
which will run after hydration (in client side).
Don't you think it defeats the purpose of SEO? since it won't be available in the server rendered HTML. Correct me if I am wrong.
No response
.
No response
Currently, we embed all the iframes, and the player is small.
User click the video and it opens a modal to 1) embed the iframe 2) play the video
The PR template currently shows erroneous tasks. It is interpreting the "PR type" as tasks instead of a list of options.
No response
Create a PR and select a type.
No response
Originally posted by omar2205 February 20, 2023
If we are building a YouTube feed, it would be helpful for the user to see the YouTube channels they have subscribed to.
I was able to add more scopes to the auth with this
Google({
clientId: GOOGLE_CLIENT_ID,
clientSecret: GOOGLE_CLIENT_SECRET,
authorization: {
params: {
scope:
'https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/youtube.readonly',
}
}
}),
I'm not sure if this will count towards our API usage.
We can get extra stuff like access_token and id_token like this:
Google({
clientId: GOOGLE_CLIENT_ID,
clientSecret: GOOGLE_CLIENT_SECRET,
authorization: {
params: {
access_type: 'offline', prompt: 'consent',
scope:
'openid https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/youtube.readonly',
},
},
// extra has id_token, access_token, refresh_token, and expires_in
profile(profile, extra) {
console.log({ profile, extra })
return {
id: profile.sub,
name: profile.name,
image: profile.picture,
email: profile.email,
}
},
}),
To get a user channels
ref: https://developers.google.com/youtube/v3/docs/subscriptions/list
const YT_API = 'https://www.googleapis.com/youtube/v3'
const getUserSubscriptions = async (access_token: string, maxResults = 10) =>
(await fetch(
`${YT_API}/subscriptions?part=snippet&mine=true&maxResults=${maxResults}&access_token=${access_token}`)).json()
Refresh token https://authjs.dev/guides/basics/refresh-token-rotation
UI does not show loading state when logging out or in.
Show loading state.
Publish a simple page with info about the project and URLs for the playlist and your twitch channel.
N/A
In this route /create
we have two buttons called "Create" that do the same action. I think we can improve the user experience by just having one sticky button following you around.
Here is when the top button got created (it was hard to find it ๐ ): https://youtu.be/STOSh_INDm0?list=PLM_i0obccy3ujNeSo0EoVppCYDr8YwjSQ&t=20170
When running npm install
npm warns that this package is deprecated.
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
This can be easily fixed by installing the npm recommendation @jridgewell/sourcemap-codec
Just fresh clone the repo and run npm install
script
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
I would like to have Playwright test for Lighthouse. https://www.npmjs.com/package/playwright-lighthouse
Lighthouse is a testing suite made by google: https://developer.chrome.com/docs/lighthouse/overview/
I would like to see tests implemented for main routes that are tested with lighthouse.
I would like to use Playwright to test different languages i18n features. https://playwright.dev/docs/emulation
I would like to see tests implemented for main routes that are tested with different user agents for i18n and mobile support.
Resolved the warning by using node v16
Following the basic setup in https://github.com/actions/setup-node
We can resolved the warning using the below code in our github workflows checks.yaml file
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
As a dev that wants do contribute to this project, I think that would be great to have a pull request template.
Something like this...
In this pr I did some changes on the main page.
To reproduce my feature, run the project locally and go to the main page.
If a person has some good lists of channels, the person should be able to share it with others.
A share button on lists page which opens a new page which has user search. after search the user, you share the list with that person.
Shared prisma instance/folder
A global variable
When the test is not successfull,
the docker-down:test script get not executed,
which mean a rerun is not possible since the old docker instance a still running -> to shutedown manuell
by execute the docker-down:test script by hand.
notice for the log:
i run two commands two show the issue:
No response
i added a second button to the login page which create unsuccessful test in oauth.test.ts
PS F:\github\listd> npm run test:e2e
> [email protected] test:e2e
> npm run docker-up:test && npm run migrate:init && cross-env NODE_ENV=test prisma db seed && playwright test && npm run docker-down:test
> [email protected] docker-up:test
> docker compose -f docker-compose.test.yml up -d --wait --force-recreate
[+] Running 3/3
โ Network listd_default Created 0.8s
โ Container listd-db-1 Healthy 3.6s
โ Container listd-redis-1 Healthy 3.6s
> [email protected] migrate:init
> prisma migrate dev --name init
Environment variables loaded from .env
Prisma schema loaded from prisma\schema.prisma
Datasource "db": PostgreSQL database "listd", schema "public" at "localhost:5432"
Applying migration `20230331211353_init`
The following migration(s) have been applied:
migrations/
โโ 20230331211353_init/
โโ migration.sql
Your database is now in sync with your schema.
โ Generated Prisma Client (4.14.0 | library) to .\node_modules\@prisma\client in 136ms
โ Generated prisma-erd-generator-markdown (1.3.1) to .\prisma\ERD.md in 663ms
Environment variables loaded from .env
Running seed command `tsx ./prisma/seeds/index.ts` ...
The seed command has been executed.
Running 3 tests using 3 workers
[WebServer]
[WebServer]
[WebServer] ".prisma/client/index-browser" is imported by ".prisma/client/index-browser?commonjs-external", but could not be resolved โ treating it as an external dependency.
[WebServer]
โ 1 app.test.ts:3:1 โบ index page has expected anchor tag (345ms)
โ 2 onboarding.test.ts:4:1 โบ new user redirects to the onboarding page (393ms)
โ 3 oauth.test.ts:3:1 โบ login button redirects to google (364ms)
1) oauth.test.ts:3:1 โบ login button redirects to google โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
Error: locator.click: Error: strict mode violation: getByRole('button') resolved to 2 elements:
1) <button class="btn variant-filled-primary cursor-pointer">Login with YouTube</button> aka getByRole('button', { name: 'Login with YouTube' }).first()
2) <button class="btn variant-filled-primary cursor-pointer">Login with YouTube</button> aka getByRole('button', { name: 'Login with YouTube' }).nth(1)
=========================== logs ===========================
============================================================
3 | test('login button redirects to google', async ({ page }) => {
4 | await page.goto('/');
> 5 | await page.getByRole('button').click();
| ^
6 | await page.waitForURL('**/accounts.google.com/**');
7 | expect(page.url()).toContain('https://accounts.google.com/');
8 | });
at F:\github\listd\tests\oauth.test.ts:5:33
1 failed
oauth.test.ts:3:1 โบ login button redirects to google โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
2 passed (1.6s)
PS F:\github\listd> npm run docker-down:test
> [email protected] docker-down:test
> docker compose -f docker-compose.test.yml down
[+] Running 3/3
โ Container listd-db-1 Removed 0.9s
โ Container listd-redis-1 Removed 0.6s
โ Network listd_default Removed
I would like to have Playwright test for accessibility flaws: https://playwright.dev/docs/accessibility-testing
I would like to see tests implemented for main routes that check for a11y flaws.
The latest version of skeleton uses "variants" so we should update to that before adding too much new UI code.
Update it.
UP UP
UP
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.