{"id":50497185,"url":"https://github.com/actionanand/scrollix","last_synced_at":"2026-06-02T08:31:21.434Z","repository":{"id":361688132,"uuid":"1255024495","full_name":"actionanand/scrollix","owner":"actionanand","description":"An Angular app for displaying embedded videos and posts from YouTube, Instagram, Facebook, Dailymotion, and more in a unified scrolling feed.","archived":false,"fork":false,"pushed_at":"2026-05-31T20:05:18.000Z","size":171,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-31T21:22:26.758Z","etag":null,"topics":["angular","angular2","angular21","angular21-2"],"latest_commit_sha":null,"homepage":"https://actionanand.github.io/scrollix/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/actionanand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-05-31T09:56:43.000Z","updated_at":"2026-05-31T20:04:57.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/actionanand/scrollix","commit_stats":null,"previous_names":["actionanand/scrollix"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/actionanand/scrollix","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fscrollix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fscrollix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fscrollix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fscrollix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/actionanand","download_url":"https://codeload.github.com/actionanand/scrollix/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/actionanand%2Fscrollix/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33814307,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-02T02:00:07.132Z","response_time":109,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular2","angular21","angular21-2"],"created_at":"2026-06-02T08:31:20.519Z","updated_at":"2026-06-02T08:31:21.421Z","avatar_url":"https://github.com/actionanand.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Scrollix\n\nThis project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.2.11.\n\n## Development server\n\nTo start a local development server, run:\n\n```bash\nnpm run develop\n```\n\nOnce the server is running, open your browser and navigate to `http://localhost:4212/`. The application will automatically reload whenever you modify any of the source files.\n\n## Live URL\n\n1. https://actionanand.github.io/scrollix/\n\n## Cloning Guide\n\n1.  Clone only the remote primary HEAD (default: origin/main)\n\n```bash\ngit clone \u003curl\u003e --single-branch\n```\n\n2. Only specific branch\n\n```bash\ngit clone \u003curl\u003e --branch \u003cbranch\u003e --single-branch [\u003cfolder\u003e]\n```\n\n```bash\ngit clone \u003curl\u003e --branch \u003cbranch\u003e\n```\n\n3. Cloning repositories using degit\n   - main branch is default.\n\n```bash\nnpx degit github:user/repo#branch-name \u003cfolder-name\u003e\n```\n\n4. Cloning this project with skeleton\n\n```bash\ngit clone https://github.com/actionanand/scrollix.git --branch 1-skeleton angular-proj-name\n```\n\n```bash\nnpx degit github:actionanand/scrollix#1-skeleton angular-proj-name\n```\n\n## Automate using `Prettier`, `Es Lint` and `Husky`\n\n1. Install the compatible node version\n\n```bash\n  nvm install v24.11.1\n```\n\n2. Install and Configure Prettier\n   - Install prettier as below:\n\n   ```bash\n     npm install prettier -D\n   ```\n\n   - Create a `.prettierrc.yml` file and write down the format as below: - [online ref](https://prettier.io/docs/en/options.html)\n\n   ```yml\n   trailingComma: 'all'\n   tabWidth: 2\n   useTabs: false\n   semi: true\n   singleQuote: true\n   bracketSpacing: true\n   bracketSameLine: true\n   arrowParens: 'avoid'\n   printWidth: 120\n   overrides:\n     - files:\n         - '*.js'\n         - '*.jsx'\n       options:\n         bracketSpacing: true\n         jsxSingleQuote: true\n         semi: true\n         singleQuote: true\n         tabWidth: 2\n         useTabs: false\n     - files:\n         - '*.ts'\n       options:\n         tabWidth: 2\n   ```\n\n   - Create a `.prettierignore` file and write as below(sample)\n\n   ```gitignore\n   # Ignore artifacts:\n   build\n   coverage\n   e2e\n   node_modules\n   dist\n   dest\n   reports\n\n   # Ignore files\n   *.lock\n   package-lock.json\n   yarn.lock\n   ```\n\n3. Install `Es Lint`, if not installed\n\n```bash\nng add @angular-eslint/schematics\n```\n\nif error comes, use the below command\n\n```shell\nng add @angular-eslint/schematics@21.0.0-alpha.1\n# or\nng add @angular-eslint/schematics@next\n```\n\n4. Configure pre-commit hooks\n\nPre-commit hooks are a nice way to run certain checks to ensure clean code. This can be used to format staged files if for some reason they weren’t automatically formatted during editing. [husky](https://github.com/typicode/husky) can be used to easily configure git hooks to prevent bad commits. We will use this along with [pretty-quick](https://github.com/azz/pretty-quick) to run Prettier on our changed files. Install these packages, along with [npm-run-all](https://github.com/mysticatea/npm-run-all), which will make it easier for us to run npm scripts:\n\n```bash\nnpm install -D husky pretty-quick npm-run-all\n```\n\nTo configure the pre-commit hook, simply add a `precommit` npm script. We want to first run Prettier, then run TSLint on the formatted files. To make our scripts cleaner, I am using the npm-run-all package, which gives you two commands, `run-s` to run scripts in sequence, and `run-p` to run scripts in parallel:\n\n```json\n  \"precommit\": \"run-s format:fix lint\",\n  \"format:fix\": \"pretty-quick --staged\",\n  \"format:check\": \"prettier --config ./.prettierrc --list-different \\\"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\\\"\",\n  \"format:all\": \"prettier --config ./.prettierrc --write \\\"src/{app,environments,assets}/**/*{.ts,.js,.json,.css,.scss}\\\"\",\n  \"lint\": \"ng lint\",\n```\n\n5. Initialize husky\n   - Run it once\n\n   ```bash\n     npx husky init\n   ```\n\n   - Add a hook\n\n   ```bash\n     echo \"npm run precommit\" \u003e .husky/pre-commit\n     echo \"npm run test\" \u003e .husky/pre-commit\n   ```\n\n   - Make a commit\n\n   ```bash\n     git commit -m \"Keep calm and commit\"\n     # `npm run precommit and npm test` will run every time you commit\n   ```\n\n6. How to skip prettier format only in particular file\n   1. JS\n\n   ```js\n   matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);\n\n   // prettier-ignore\n   matrix(\n       1, 0, 0,\n       0, 1, 0,\n       0, 0, 1\n     )\n   ```\n\n   2. JSX\n\n   ```jsx\n   \u003cdiv\u003e\n     {/* prettier-ignore */}\n     \u003cspan     ugly  format=''   /\u003e\n   \u003c/div\u003e\n   ```\n\n   3. HTML\n\n   ```html\n   \u003c!-- prettier-ignore --\u003e\n   \u003cdiv         class=\"x\"       \u003ehello world\u003c/div            \u003e\n\n   \u003c!-- prettier-ignore-attribute --\u003e\n   \u003cdiv\n     (mousedown)=\"       onStart    (    )         \"\n     (mouseup)=\"         onEnd      (    )         \"\n   \u003e\u003c/div\u003e\n\n   \u003c!-- prettier-ignore-attribute (mouseup) --\u003e\n   \u003cdiv (mousedown)=\"onStart()\" (mouseup)=\"         onEnd      (    )         \"\u003e\u003c/div\u003e\n   ```\n\n   4. CSS\n\n   ```css\n   /* prettier-ignore */\n   .my    ugly rule\n     {\n   \n     }\n   ```\n\n   5. Markdown\n\n   ```md\n     \u003c!-- prettier-ignore --\u003e\n\n   Do not format this\n   ```\n\n   6. YAML\n\n   ```yml\n   # prettier-ignore\n   key  : value\n     hello: world\n   ```\n\n   7. For more, please [check](https://prettier.io/docs/en/ignore.html)\n\n## Code scaffolding\n\nAngular CLI includes powerful code scaffolding tools. To generate a new component, run:\n\n```bash\nng generate component component-name\n```\n\nFor a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:\n\n```bash\nng generate --help\n```\n\n## Building\n\nTo build the project run:\n\n```bash\nng build\n```\n\nThis will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.\n\n## Running unit tests\n\nTo execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:\n\n```bash\nng test\n```\n\n## Running end-to-end tests\n\nFor end-to-end (e2e) testing, run:\n\n```bash\nng e2e\n```\n\nAngular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.\n\n## Important Angular 21.2+ Features\n\n### 1. Arrow functions directly inside templates\n\nIn recent versions of Angular (21.2+), you can use arrow functions directly within template expressions, which is especially useful with Angular Signals.\n\n```html\n\u003c!-- No separate component method required --\u003e\n\u003cbutton (click)=\"count.update(n =\u003e n + 1)\"\u003eIncrement\u003c/button\u003e\n```\n\n```ts\ncount = signal(0);\n```\n\n---\n\n### 2. Improved Signal APIs\n\nSignals are now deeply integrated into Angular and can replace many RxJS-based UI state patterns.\n\n```ts\nimport { signal, computed } from '@angular/core';\n\ncount = signal(5);\n\ndoubleCount = computed(() =\u003e this.count() * 2);\n```\n\n```html\n\u003cp\u003e{{ doubleCount() }}\u003c/p\u003e\n```\n\n---\n\n### 3. New control flow syntax (`@if`, `@for`, `@switch`)\n\nAngular now provides built-in template control flow syntax with better readability and performance.\n\n```html\n@if (users.length \u003e 0) {\n\u003cul\u003e\n  @for (user of users; track user.id) {\n  \u003cli\u003e{{ user.name }}\u003c/li\u003e\n  }\n\u003c/ul\u003e\n} @else {\n\u003cp\u003eNo users found\u003c/p\u003e\n}\n```\n\n---\n\n### 4. Deferrable views (`@defer`)\n\nLazy load template sections only when needed for better performance.\n\n```html\n@defer {\n\u003cheavy-chart /\u003e\n} @loading {\n\u003cp\u003eLoading chart...\u003c/p\u003e\n}\n```\n\n---\n\n### 5. Standalone components by default\n\nNo need for NgModules in most applications.\n\n```ts\n@Component({\n  selector: 'app-home',\n  standalone: true,\n  imports: [CommonModule],\n  templateUrl: './home.html',\n})\nexport class HomeComponent {}\n```\n\n---\n\n### 6. Better hydration and SSR support\n\nAngular now includes improved server-side rendering and hydration for faster page loads and SEO improvements.\n\n```bash\nng add @angular/ssr\n```\n\n---\n\n### 7. Built-in zoneless change detection support\n\nAngular now supports zoneless applications for better performance and predictable rendering.\n\n```ts\nbootstrapApplication(AppComponent, {\n  providers: [provideZonelessChangeDetection()],\n});\n```\n\n---\n\n### 8. Resource API for async data\n\nThe new Resource API simplifies async state handling.\n\n```ts\nuserResource = resource({\n  loader: () =\u003e fetch('/api/user').then((r) =\u003e r.json()),\n});\n```\n\n```html\n@if (userResource.hasValue()) {\n\u003cp\u003e{{ userResource.value().name }}\u003c/p\u003e\n}\n```\n\n---\n\n### 9. Improved typed reactive forms\n\nReactive Forms now provide stronger type inference and safer form handling.\n\n```ts\nprofileForm = new FormGroup({\n  name: new FormControl\u003cstring\u003e(''),\n  age: new FormControl\u003cnumber | null\u003e(null),\n});\n```\n\n---\n\n### 10. Faster builds with Vite and esbuild\n\nModern Angular versions use faster tooling internally for development and production builds.\n\n```bash\nng serve\n```\n\nStartup time and HMR performance are significantly improved compared to older Webpack-based setups.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionanand%2Fscrollix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Factionanand%2Fscrollix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Factionanand%2Fscrollix/lists"}