diff --git a/.env.example b/.env.example deleted file mode 100644 index c4a0e85e..00000000 --- a/.env.example +++ /dev/null @@ -1,16 +0,0 @@ -AIRTABLE_API_KEY= -AIRTABLE_BOOKS_BASE_ID= -RAINDROP_COLLECTION= -RAINDROP_TOKEN= -REVUE_API_KEY= -CONVERTKIT_API_KEY= -CONVERTKIT_API_SECRET= -GITHUB_ACCESS_TOKEN= -SIMKL_CLIENT_ID= -SIMKL_CLIENT_SECRET= -PLAUSIBLE_TOKEN= -SIMKL_CLIENT_ID= -SIMKL_CLIENT_SECRET= -SPOTIFY_CLIENT_ID= -SPOTIFY_CLIENT_SECRET= -SPOTIFY_REFRESH_TOKEN= diff --git a/.eslintignore b/.eslintignore deleted file mode 100755 index 697de6aa..00000000 --- a/.eslintignore +++ /dev/null @@ -1,13 +0,0 @@ -.next -next-env.d.ts -node_modules -package.json -package-lock.json -public -coverage -docs - -npm-debug.log* -.DS_Store -.vscode -!.storybook diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100755 index cc532e67..00000000 --- a/.eslintrc.js +++ /dev/null @@ -1,102 +0,0 @@ -module.exports = { - env: { - browser: true, - es2021: true, - node: true, - jest: true, - }, - parser: '@typescript-eslint/parser', - parserOptions: { - ecmaFeatures: { - jsx: true, - }, - ecmaVersion: '12', - sourceType: 'module', - }, - plugins: ['module-resolver', 'simple-import-sort'], - extends: [ - 'eslint:recommended', - 'next', - 'next/core-web-vitals', - 'plugin:import/recommended', - 'prettier', - ], - settings: { - react: { - version: 'detect', - }, - 'import/resolver': { - 'eslint-import-resolver-custom-alias': { - alias: { - '@/': './src', - }, - extensions: ['.ts', '.tsx'], - }, - typescript: { - project: './tsconfig.json', - }, - }, - 'import/parsers': { - '@typescript-eslint/parser': ['.ts', '.tsx'], - }, - }, - overrides: [ - { - files: ['*.ts', '*.tsx'], - rules: { - '@typescript-eslint/explicit-module-boundary-types': 'off', - }, - extends: [ - 'plugin:@typescript-eslint/recommended', - 'plugin:import/typescript', - 'plugin:jsx-a11y/recommended', - 'plugin:prettier/recommended', // always at the end - ], - }, - { - files: ['*.js'], - extends: [ - 'plugin:prettier/recommended', // always at the end - ], - }, - ], - rules: { - 'simple-import-sort/imports': [ - 'warn', - { - groups: [ - // ext library & side effect imports - ['^@?\\w', '^\\u0000'], - // {s}css files - ['^.+\\.s?css$'], - // Lib and hooks - ['^@/lib', '^@/hooks'], - // static data - ['^@/data'], - // components - ['^@/components'], - // Other imports - ['^@/'], - // relative paths up until 3 level - [ - '^\\./?$', - '^\\.(?!/?$)', - '^\\.\\./?$', - '^\\.\\.(?!/?$)', - '^\\.\\./\\.\\./?$', - '^\\.\\./\\.\\.(?!/?$)', - '^\\.\\./\\.\\./\\.\\./?$', - '^\\.\\./\\.\\./\\.\\.(?!/?$)', - ], - ['^@/types'], - // other that didnt fit in - ['^'], - ], - }, - ], - 'simple-import-sort/exports': 'error', - 'import/first': 'error', - 'import/newline-after-import': 'error', - 'import/no-duplicates': 'error', - }, -} diff --git a/.frontmatter/content/mediaDb.json b/.frontmatter/content/mediaDb.json deleted file mode 100644 index 0967ef42..00000000 --- a/.frontmatter/content/mediaDb.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/.frontmatter/database/mediaDb.json b/.frontmatter/database/mediaDb.json new file mode 100644 index 00000000..79b7a7e0 --- /dev/null +++ b/.frontmatter/database/mediaDb.json @@ -0,0 +1 @@ +{"public":{"images":{"articles":{"astuces-dexpat-pour-faciliter-demarches-administratives":{"map-earth-carnet-camera.jpeg":{"caption":"Carnet open on an old brown map. Multiple objects around like a pair of glasses, an old camera.","alt":"Photo by Dariusz Sankowski on Unsplash"},"american-passport-airplane-ticket.jpeg":{}},"decade-web-development-personal-journey":{"wikiktosource-fr.jpg":{}}}}}} \ No newline at end of file diff --git a/.frontmatter/templates/articles.mdx b/.frontmatter/templates/articles.mdx new file mode 100644 index 00000000..39438497 --- /dev/null +++ b/.frontmatter/templates/articles.mdx @@ -0,0 +1,14 @@ +--- +draft: true +locale: en +title: null +date: null +description: null +author: David Dias +categories: [] +tags: [] +type: article +preview: + url: /images/articles/ + alt: null +--- diff --git a/.frontmatter/templates/notes.mdx b/.frontmatter/templates/notes.mdx new file mode 100644 index 00000000..f9c7695a --- /dev/null +++ b/.frontmatter/templates/notes.mdx @@ -0,0 +1,13 @@ +--- +draft: true +locale: en +title: null +date: null +description: null +author: David Dias +tags: [] +type: note +preview: + url: /images/notes/ + alt: null +--- diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 8ef01bdd..31f476a8 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,5 +1,19 @@ version: 2 + updates: + - package-ecosystem: 'npm' + directory: '/' + schedule: + interval: 'weekly' + + commit-message: + prefix: fix + prefix-development: chore + include: scope + + labels: + - 'dependencies' + - package-ecosystem: github-actions directory: '/' schedule: diff --git a/.github/workflows/deploy-vercel-staging.yml b/.github/workflows/deploy-vercel-staging.yml deleted file mode 100644 index 5ecc134e..00000000 --- a/.github/workflows/deploy-vercel-staging.yml +++ /dev/null @@ -1,58 +0,0 @@ -name: Deploy Vercel Staging - -on: [push, pull_request] - -jobs: - lint: - name: Lint - runs-on: ubuntu-latest - - steps: - - name: Git checkout - uses: actions/checkout@v3 - - - name: Detect Node version - run: echo "##[set-output name=version;]$(cat .nvmrc)" - id: nvmrc - - - name: Setup Node.js - uses: actions/setup-node@v3 - with: - node-version: '${{ steps.nvmrc.outputs.version }}' - - - name: Install pnpm - uses: pnpm/action-setup@v2.2.2 - id: pnpm-install - with: - version: 7 - run_install: false - - # - name: Get pnpm store directory - # id: pnpm-cache - # run: | - # echo "::set-output name=pnpm_cache_dir::$(pnpm store path)" - - # - name: Setup pnpm cache - # uses: actions/cache@v3 - # with: - # path: | - # ${{ github.workspace }}/.next/cache - # ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }} - # key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} - # restore-keys: | - # ${{ runner.os }}-pnpm-store- - - - name: Install dependencies - run: pnpm install - - - name: Build - run: pnpm run build - - - name: Vercel deployment - uses: amondnet/vercel-action@v20 - with: - vercel-token: ${{ secrets.VERCEL_TOKEN }} - github-token: ${{ secrets.GITHUB_TOKEN }} - # vercel-args: "--prod" - vercel-org-id: ${{ secrets.VERCEL_ORG_ID}} - vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID}} diff --git a/.github/workflows/production-deployment.yml b/.github/workflows/production-deployment.yml new file mode 100644 index 00000000..212a9ba9 --- /dev/null +++ b/.github/workflows/production-deployment.yml @@ -0,0 +1,72 @@ +name: Production deployment + +on: + push: + branches: + - main + workflow_dispatch: + +jobs: + build: + name: Build + runs-on: ubuntu-latest + env: + RAINDROP_COLLECTION: ${{ secrets.RAINDROP_COLLECTION }} + RAINDROP_TOKEN: ${{ secrets.RAINDROP_TOKEN }} + + steps: + # - name: Cancel Previous Runs + # uses: styfle/cancel-workflow-action@0.10.0 + # with: + # access_token: ${{ github.token }} + + - name: Git checkout + uses: actions/checkout@v3 + + - name: Detect Node version + run: echo "##[set-output name=version;]$(cat .nvmrc)" + id: nvmrc + + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: '${{ steps.nvmrc.outputs.version }}' + + - name: Install pnpm + uses: pnpm/action-setup@v2.2.2 + id: pnpm-install + with: + version: 7 + run_install: false + + - name: Install dependencies + run: pnpm install + + - name: Run tests + run: pnpm test + + - name: Install playwright browsers + run: npx playwright install --with-deps + + - name: Run build + run: pnpm build + + - name: Run tests + run: pnpm test:e2e + + # - name: SimpleLocalize Download + # uses: simplelocalize/download@latest + # with: + # apiKey: ${{ secrets.SIMPLE_LOCALIZE_KEY }} + # downloadPath: ./locales/{lang}/{ns}.json + # downloadFormat: single-language-json + # uploadOptions: 'WRITE_NESTED,ESCAPE_NEW_LINES' + + - name: Vercel deployment + uses: amondnet/vercel-action@v25.1.1 + with: + vercel-token: ${{ secrets.VERCEL_TOKEN }} + github-token: ${{ secrets.GITHUB_TOKEN }} + vercel-args: '--prod' + vercel-org-id: ${{ secrets.VERCEL_ORG_ID}} + vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID}} diff --git a/.github/workflows/staging-deployment.yml b/.github/workflows/staging-deployment.yml new file mode 100644 index 00000000..66bb97a8 --- /dev/null +++ b/.github/workflows/staging-deployment.yml @@ -0,0 +1,92 @@ +name: Staging deployment + +on: + pull_request: + types: [opened, synchronize, reopened] + branches: + - main + +jobs: + lint: + name: Lint + runs-on: ubuntu-latest + + steps: + # - name: Cancel Previous Runs + # uses: styfle/cancel-workflow-action@0.10.0 + # with: + # access_token: ${{ github.token }} + + - name: Git checkout + uses: actions/checkout@v3 + + - name: Detect Node version + run: echo "##[set-output name=version;]$(cat .nvmrc)" + id: nvmrc + + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: '${{ steps.nvmrc.outputs.version }}' + + - name: Install pnpm + uses: pnpm/action-setup@v2.2.2 + id: pnpm-install + with: + version: 7 + run_install: false + + - name: Get pnpm store directory + id: pnpm-cache + run: | + echo "::set-output name=pnpm_cache_dir::$(pnpm store path)" + + - name: Cache pnpm + uses: actions/cache@v3 + with: + path: | + ${{ steps.pnpm-cache.outputs.pnpm_cache_dir }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- + + - name: Install dependencies + if: steps.pnpm-cache.outputs.cache-hit != 'true' + run: pnpm install + + - name: Run tests + run: pnpm test + + - name: Upload translations + uses: simplelocalize/upload@latest + with: + apiKey: ${{ secrets.SIMPLE_LOCALIZE_KEY }} + uploadPath: ./locales/{lang}/{ns}.json + uploadFormat: single-language-json + + - name: Build Next.js project + run: pnpm build + env: + RAINDROP_COLLECTION: ${{ secrets.RAINDROP_COLLECTION }} + RAINDROP_TOKEN: ${{ secrets.RAINDROP_TOKEN }} + GH_PUBLIC_TOKEN: ${{ secrets.GH_PUBLIC_TOKEN }} + SPOTIFY_CLIENT_ID: ${{ secrets.SPOTIFY_CLIENT_ID }} + SPOTIFY_CLIENT_SECRET: ${{ secrets.SPOTIFY_CLIENT_SECRET }} + SPOTIFY_REFRESH_TOKEN: ${{ secrets.SPOTIFY_REFRESH_TOKEN }} + + - name: Deploy to Staging + id: deploy-vercel-staging + uses: BetaHuhn/deploy-to-vercel-action@v1 + with: + VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} + VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID}} + PRODUCTION: false + BUILD_ENV: | + RAINDROP_COLLECTION=${{ secrets.RAINDROP_COLLECTION }} + RAINDROP_TOKEN=${{ secrets.RAINDROP_TOKEN }} + GH_PUBLIC_TOKEN=${{ secrets.GH_PUBLIC_TOKEN }} + SPOTIFY_CLIENT_ID=${{ secrets.SPOTIFY_CLIENT_ID }} + SPOTIFY_CLIENT_SECRET=${{ secrets.SPOTIFY_CLIENT_SECRET }} + SPOTIFY_REFRESH_TOKEN=${{ secrets.SPOTIFY_REFRESH_TOKEN }} diff --git a/.github/workflows/update-lockfile.yml b/.github/workflows/update-lockfile.yml new file mode 100644 index 00000000..c7c1b720 --- /dev/null +++ b/.github/workflows/update-lockfile.yml @@ -0,0 +1,25 @@ +# https://github.com/dependabot/dependabot-core/issues/1736 +name: Dependabot +on: pull_request_target +permissions: read-all +jobs: + update-lockfile: + runs-on: ubuntu-latest + if: ${{ github.actor == 'dependabot[bot]' }} + permissions: + pull-requests: write + contents: write + steps: + - uses: pnpm/action-setup@v2 + with: + version: ^7 + - uses: actions/checkout@v3 + with: + ref: ${{ github.event.pull_request.head.ref }} + - run: pnpm i --lockfile-only + - run: | + git config --global user.name github-actions[bot] + git config --global user.email github-actions[bot]@users.noreply.github.com + git add pnpm-lock.yaml + git commit -m "Update pnpm-lock.yaml" + git push diff --git a/.gitignore b/.gitignore old mode 100755 new mode 100644 index 737d8721..54562bbc --- a/.gitignore +++ b/.gitignore @@ -1,19 +1,21 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies -/node_modules +**/node_modules /.pnp .pnp.js # testing /coverage +test-results # next.js -/.next/ +.next /out/ +.swc # production -/build +build # misc .DS_Store @@ -33,3 +35,17 @@ yarn-error.log* # typescript *.tsbuildinfo + +# custom +public/sitemap.xml +public/sitemap-0.xml + +# Sentry +.sentryclirc + +# Simple Localize +simplelocalize.yml + +.turbo + +.env.local diff --git a/.husky/pre-push b/.husky/pre-push deleted file mode 100644 index 9c96ce93..00000000 --- a/.husky/pre-push +++ /dev/null @@ -1,4 +0,0 @@ -#!/usr/bin/env sh -. "$(dirname -- "$0")/_/husky.sh" - -pnpm build diff --git a/.npmrc b/.npmrc index 319e41e6..c7b730ca 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1,3 @@ strict-peer-dependencies=false +enable-pre-post-scripts=true +auto-install-peers=true diff --git a/.prettierignore b/.prettierignore old mode 100755 new mode 100644 index 7d42f5a0..0d7bf920 --- a/.prettierignore +++ b/.prettierignore @@ -1,9 +1,4 @@ -.next -next-env.d.ts -node_modules -package.json -package-lock.json public -coverage -docs/ -!.storybook +pnpm-lock.yaml +node_modules +.next diff --git a/.prettierrc b/.prettierrc old mode 100755 new mode 100644 diff --git a/.vscode/launch.json b/.vscode/launch.json index 32e56b9e..c96b004e 100755 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -5,7 +5,7 @@ "name": "Next.js: debug server-side", "type": "node-terminal", "request": "launch", - "command": "npm run dev" + "command": "pnpm dev" }, { "name": "Next.js: debug client-side", @@ -16,12 +16,31 @@ "name": "Next.js: debug full stack", "type": "node-terminal", "request": "launch", - "command": "npm run dev", + "command": "pnpm dev", "serverReadyAction": { "pattern": "started server on .+, url: (https?://.+)", "uriFormat": "%s", "action": "debugWithChrome" } + }, + { + "type": "node", + "name": "vscode-jest-tests.v2", + "request": "launch", + "args": [ + "test", + "--runInBand", + "--watchAll=false", + "--testNamePattern", + "${jest.testNamePattern}", + "--runTestsByPath", + "${jest.testFile}" + ], + "cwd": "${workspaceFolder}", + "console": "integratedTerminal", + "internalConsoleOptions": "neverOpen", + "disableOptimisticBPs": true, + "program": "${workspaceFolder}/pnpm" } ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index edd682b0..6fb72cfc 100755 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,14 +6,10 @@ ".next": true, "coverage": true, "public": true, - "out": true, - "out_build": true, - "out_functions": true, "CHANGELOG": true, "CODE_OF_CONDUCT": true, "CONTRIBUTING": true, - "LICENCE": true, - "package-lock.json.old": true + "LICENCE": true }, "editor.formatOnSave": true, "javascript.format.enable": true, @@ -27,10 +23,6 @@ "[typescript]": { "editor.formatOnSave": true }, - "[handlebars]": { - "editor.formatOnSave": false, - "editor.formatOnPaste": false - }, "eslint.alwaysShowStatus": true, "eslint.format.enable": true, "eslint.run": "onSave", @@ -38,5 +30,13 @@ "eslint.lintTask.enable": true, "eslint.nodePath": "node_modules", "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], - "cSpell.words": ["lastmod", "rehype", "semibold"] + "cSpell.words": ["lastmod", "Pybh", "rehype", "semibold", "UCXYs"], + "frontMatter.content.defaultFileType": "mdx", + "frontMatter.content.draftField": { + "name": "draft", + "type": "boolean" + }, + "frontMatter.content.supportedFileTypes": ["mdx"], + "jest.jestCommandLine": "npm run test --", + "jest.rootPath": "/Users/thedaviddias/Projects/thedaviddias-blog" } diff --git a/README.md b/README.md old mode 100755 new mode 100644 index c0656f29..a6ec9461 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# David Dias Blog +# thedaviddias diff --git a/SECURITY.md b/SECURITY.md new file mode 100644 index 00000000..034e8480 --- /dev/null +++ b/SECURITY.md @@ -0,0 +1,21 @@ +# Security Policy + +## Supported Versions + +Use this section to tell people about which versions of your project are +currently being supported with security updates. + +| Version | Supported | +| ------- | ------------------ | +| 5.1.x | :white_check_mark: | +| 5.0.x | :x: | +| 4.0.x | :white_check_mark: | +| < 4.0 | :x: | + +## Reporting a Vulnerability + +Use this section to tell people how to report a vulnerability. + +Tell them where to go, how often they can expect to get an update on a +reported vulnerability, what to expect if the vulnerability is accepted or +declined, etc. diff --git a/apps/blog/.env.example b/apps/blog/.env.example new file mode 100644 index 00000000..eb964b9b --- /dev/null +++ b/apps/blog/.env.example @@ -0,0 +1,47 @@ +# Unsplash metrics +UNSPLASH_ACCESS_KEY= + +# Analytics +PLAUSIBLE_API_KEY= + +# Github projects +GH_PUBLIC_TOKEN= + +# Bookmarks +RAINDROP_COLLECTION= +RAINDROP_TOKEN= + +# Shows and movies stats +SIMKL_USER_ID= +SIMKL_TOKEN= +SIMKL_CLIENT_ID= + +# Newsletters metrics +REVUE_API_KEY= + +# Code metrics +WAKATIME_API_KEY= + +# Steam +STEAM_USER_ID= +STEAM_KEY= + +# Foursquare +FOURSQUARE_API_KEY= +FOURSQUARE_CLIENT_ID= + +# Spotify +SPOTIFY_CLIENT_ID= +SPOTIFY_CLIENT_SECRET= +SPOTIFY_REFRESH_TOKEN= + +# YouTube metrics +YOUTUBE_CHANNEL_ID= +GOOGLE_CLIENT_EMAIL= +GOOGLE_PRIVATE_KEY= + +# Mailbox +MAILBOX_VALIDATOR_KEY= + +# Simple Localize +SIMPLE_LOCALIZE_KEY= diff --git a/apps/blog/.env.publish.example b/apps/blog/.env.publish.example new file mode 100644 index 00000000..59b5992f --- /dev/null +++ b/apps/blog/.env.publish.example @@ -0,0 +1,7 @@ +# Medium +MEDIUM_TOKEN= +MEDIUM_AUTHOR_ID= + +DEV_TOKEN= + +HASHNODE_TOKEN= diff --git a/apps/blog/.eslintignore b/apps/blog/.eslintignore new file mode 100644 index 00000000..2a61ce85 --- /dev/null +++ b/apps/blog/.eslintignore @@ -0,0 +1,2 @@ +wallaby.js +next.config.js diff --git a/apps/blog/.eslintrc.js b/apps/blog/.eslintrc.js new file mode 100644 index 00000000..538b6d45 --- /dev/null +++ b/apps/blog/.eslintrc.js @@ -0,0 +1,54 @@ +module.exports = { + extends: [ + 'next/core-web-vitals', + 'plugin:@typescript-eslint/recommended', + 'plugin:import/typescript', + 'plugin:react-hooks/recommended', + 'plugin:mdx/recommended', + 'plugin:jsx-a11y/recommended', + 'plugin:prettier/recommended', // always at the end + ], + plugins: ['simple-import-sort'], + rules: { + 'simple-import-sort/imports': [ + 'warn', + { + groups: [ + // ext library & side effect imports + ['^@?\\w', '^\\u0000'], + // {s}css files + ['^.+\\.s?css$'], + // Lib and hooks + ['^@/lib', '^@/hooks'], + // static data + ['^@/data'], + // components + ['^@/components'], + // Other imports + ['^@/'], + // relative paths up until 3 level + [ + '^\\./?$', + '^\\.(?!/?$)', + '^\\.\\./?$', + '^\\.\\.(?!/?$)', + '^\\.\\./\\.\\./?$', + '^\\.\\./\\.\\.(?!/?$)', + '^\\.\\./\\.\\./\\.\\./?$', + '^\\.\\./\\.\\./\\.\\.(?!/?$)', + ], + ['^@/types'], + // other that didn't fit in + ['^'], + ], + }, + ], + 'simple-import-sort/exports': 'error', + 'import/first': 'error', + 'import/newline-after-import': 'error', + 'import/no-duplicates': 'error', + 'no-console': ['error'], + 'react/jsx-no-undef': ['off', { allowGlobals: true }], + '@typescript-eslint/no-unused-vars': ['error'], + }, +} diff --git a/.quokka b/apps/blog/.quokka similarity index 100% rename from .quokka rename to apps/blog/.quokka diff --git a/apps/blog/README.md b/apps/blog/README.md new file mode 100644 index 00000000..31827574 --- /dev/null +++ b/apps/blog/README.md @@ -0,0 +1,5 @@ +# David Dias's personal website + +- Simple Localize: help with translations + +## Design inspiration diff --git a/apps/blog/e2e/about.spec.ts b/apps/blog/e2e/about.spec.ts new file mode 100644 index 00000000..e16b1e5d --- /dev/null +++ b/apps/blog/e2e/about.spec.ts @@ -0,0 +1,15 @@ +import { expect, test } from '@playwright/test' + +test('should navigate to the about page', async ({ page }) => { + // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts) + await page.goto('/') + + // Find an element with the text 'About Page' and click on it + await page.click('text=About') + // The new url should be "/about" (baseURL is used there) + + await expect(page).toHaveURL('/about') + + // The new page should contain an h1 with "About Page" + await expect(page.locator('h1')).toContainText('About me') +}) diff --git a/apps/blog/i18n.json b/apps/blog/i18n.json new file mode 100644 index 00000000..af2f8483 --- /dev/null +++ b/apps/blog/i18n.json @@ -0,0 +1,10 @@ +{ + "locales": ["en", "fr"], + "defaultLocale": "en", + "localeDetection": false, + "pages": { + "*": ["common", "about"], + "/404": ["404"], + "/about": ["about"] + } +} diff --git a/apps/blog/jest.config.js b/apps/blog/jest.config.js new file mode 100644 index 00000000..2bd000e5 --- /dev/null +++ b/apps/blog/jest.config.js @@ -0,0 +1,21 @@ +module.exports = { + preset: 'ts-jest', + testEnvironment: 'jsdom', + testPathIgnorePatterns: ['/.next/', '/node_modules/'], + setupFilesAfterEnv: ['/jest.setup.ts'], + transform: { + '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }], + }, + moduleNameMapper: { + '\\.(css|less|scss|sass)$': 'identity-obj-proxy', + }, + testRegex: '(/__tests__/.*|\\.(test))\\.(ts|tsx)$', + collectCoverage: false, + coverageReporters: ['lcov', 'text', 'html'], + collectCoverageFrom: ['./src/**'], + coverageThreshold: { + global: { + lines: 80, + }, + }, +} diff --git a/apps/blog/jest.setup.ts b/apps/blog/jest.setup.ts new file mode 100644 index 00000000..264828a9 --- /dev/null +++ b/apps/blog/jest.setup.ts @@ -0,0 +1 @@ +import '@testing-library/jest-dom/extend-expect' diff --git a/lint-staged.config.js b/apps/blog/lint-staged.config.js similarity index 84% rename from lint-staged.config.js rename to apps/blog/lint-staged.config.js index 3a425f4d..92137185 100644 --- a/lint-staged.config.js +++ b/apps/blog/lint-staged.config.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line @typescript-eslint/no-var-requires const { ESLint } = require('eslint') const removeIgnoredFiles = async (files) => { @@ -28,7 +29,9 @@ module.exports = { }, // Format YAML, MarkDown, JSON - '**/*.(yml|md)': (filenames) => `prettier --write ${filenames.join(' ')}`, + '**/*.(yml|md|mdx)': (filenames) => `prettier --write ${filenames.join(' ')}`, + + 'public/images/**/*': 'imageoptim', // Format the package.json // 'package.json': 'npx sort-package-json', diff --git a/apps/blog/locales/en/404.json b/apps/blog/locales/en/404.json new file mode 100644 index 00000000..2528e19c --- /dev/null +++ b/apps/blog/locales/en/404.json @@ -0,0 +1,9 @@ +{ + "404": { + "back_home": "Back Home", + "seo": { + "title": "Sorry 😩, this page can't be found.", + "description": "This page is the nightmare of any user. It's usually an ugly page that just tells you that the link doesn't exist. Fortunately, the world doesn't end yet!" + } + } +} diff --git a/apps/blog/locales/en/about.json b/apps/blog/locales/en/about.json new file mode 100644 index 00000000..ca55347f --- /dev/null +++ b/apps/blog/locales/en/about.json @@ -0,0 +1,10 @@ +{ + "about": { + "path": "/about", + "seo": { + "url": "about", + "title": "About me", + "description": "Learn a little bit about 'The David Dias'" + } + } +} diff --git a/apps/blog/locales/en/common.json b/apps/blog/locales/en/common.json new file mode 100644 index 00000000..a362f854 --- /dev/null +++ b/apps/blog/locales/en/common.json @@ -0,0 +1,309 @@ +{ + "title": "The David Dias", + "titleTemplate": "Développeur Front-End, podcasteur & créateur de contenu", + "date": "MMM dd, yyyy", + "layout": { + "a11y": { + "skipContent": "Skip to content" + }, + "nav": { + "home": "Home", + "notes": "Notes", + "articles": "Articles", + "projects": "Projects", + "bookmarks": "Bookmarks", + "about": "About", + "rss": "RSS" + }, + "darkMode": { + "light": "Switch to light mode", + "dark": "Switch to dark mode" + }, + "language": { + "fr": { + "fullName": "French", + "switch": "Switch to the {{lang}} version", + "abbreviation": "FR" + }, + "en": { + "fullName": "Anglaise", + "switch": "Changer pour la version {{lang}}", + "abbreviation": "EN" + } + }, + "footer": { + "name": "Footer", + "general": "General", + "social": "Social media", + "extra": "Extra links", + "extra_links": { + "tags": "Topics", + "uses": "Uses", + "gear": "Gear", + "dashboard": "Dashboard", + "newsletter": "Newsletter", + "resume": "Resume", + "analytics": "Analytics" + } + } + }, + "home": { + "path": "/", + "seo": { + "title": "The David Dias | Front-End Developer, podcaster & content creator", + "description": "Hey, I'm David Dias! Front-End Developer based in Toronto/Canada. I love talking about code, technology, expatriation and life." + }, + "hero": { + "greetings1": "Hey there!", + "greetings2": " I'm David Dias", + "presentation": "I'm a Front-End Developer, podcaster and content creator passionate about solving digital and human problems! I enjoy meeting new people, building communities and talking about tech, expatriation and the web." + }, + "sections": { + "podcast": { + "latest_podcasts": "Latest podcast", + "view_website": "View more on the website", + "url": "https://worldwebstories.com" + } + } + }, + "articles": { + "path": "/articles", + "seo": { + "title": "All my Articles about web development and more", + "description": "Articles about web development and anything that piques my curiosity and interest.", + "url": "articles" + }, + "h1": "All my Articles", + "sections": { + "latest-posts": "Latest articles", + "viewAll": "→ View all my articles", + "category_filter": "Access articles by categories", + "search": "Search by title keyword", + "search_placeholder": "Type a word to search" + } + }, + "notes": { + "path": "/notes", + "seo": { + "title": "My daily Notes about the world around me", + "description": "Find short and sweet notes I regularly publish. From discovery to experimentation and technical challenges I finally figured out, I have a lot to share!", + "url": "notes" + }, + "h1": "My Notes", + "sections": { + "latest-notes": "Latest notes", + "viewAll": "→ View all my notes", + "search": "Search by keyword", + "search_placeholder": "Tapez un mot pour faire une recherche" + } + }, + "about": { + "path": "/about", + "seo": { + "url": "about", + "title": "About me", + "description": "Learn a little bit about 'The David Dias'" + } + }, + "uses": { + "path": "/uses", + "seo": { + "title": "", + "description": "", + "url": "uses" + } + }, + "projects": { + "path": "/projects", + "seo": { + "url": "projects", + "title": "My Projects", + "description": "Discover all the projects I've worked on or I'm currently working on." + }, + "updated": "Updated {{date}} ago", + "sections": { + "popular": "Popular Github Projects", + "popular_description": "My most popular open-source projects. Feel free to take a look and contribute!", + "viewAll": "→ View all my projects", + "latest-projects": "Current projects" + } + }, + "openProjects": { + "path": "/projects", + "seo": { + "url": "projects", + "title": "My Projects", + "description": "Discover all the projects I've worked on or I'm currently working on." + }, + "updated": "Updated {{date}} ago", + "sections": { + "popular": "Popular Github Projects", + "popular_description": "My most popular open-source projects. Feel free to take a look and contribute!", + "viewAll": "→ View all my projects", + "latest-projects": "Updated Open-Source projects" + } + }, + "tags": { + "path": "/tags", + "seo": { + "title": "Notes related to {{name}}", + "url": "tags", + "title_all": "All the Tags", + "description": "All my posts related to {{name}}.", + "description_all": "All the tags attached to my articles and notes, sorted by posts published." + }, + "view_all_tags": "→ View all tags", + "section": "Tags", + "latest_posts": "List of all the posts related to {{name}}", + "h1": "Tag: {{name}}" + }, + "bookmarks": { + "path": "/bookmarks", + "seo": { + "url": "bookmarks", + "title": "Bookmarks", + "description": "List of bookmarks I regularly update about web development, career and open-source." + }, + "bookmark_filter": "Filters bookmarks by topic" + }, + "category": { + "path": "/categories", + "seo": { + "title": "Articles about {{name}}", + "description": "You will find all my posts related to {{name}}." + }, + "h1": "Category: {{name}}" + }, + "rss": { + "path": "/rss/feed.xml" + }, + "404": { + "back_home": "Back Home", + "seo": { + "title": "Sorry 😩, this page can't be found.", + "description": "This page is the nightmare of any user. It's usually an ugly page that just tells you that the link doesn't exist. Fortunately, the world doesn't end yet!" + } + }, + "500": { + "title": "Wow 😱, you broke everything.", + "seo": { + "title": "", + "description": "" + } + }, + "posts": { + "empty": "No articles found for that query.", + "continue": "Continue reading →", + "updated": "Updated on", + "published": "Originally published on", + "tableContent": "Table of Contents", + "previous": "Previous post", + "next": "Next post" + }, + "webmentions": { + "title": "Webmentions", + "description": "Tweet about this post and have it showing up here!", + "show": "Show", + "hide": "Hide", + "details": "{{show}} details of mentions", + "activity_reply": "this post {{date}} ago:", + "activity_others": "this post.", + "activity": { + "link": "linked to", + "reply": "replied to", + "repost": "retweeted", + "like": "liked" + } + }, + "comments": { + "title": "Comments", + "description": "Don't hesitate to leave your comment! In case you don't have a Github account, you can always tweet about it!", + "leave_comment": "Leave a comment" + }, + "dashboard": { + "path": "/dashboard", + "seo": { + "url": "dashboard", + "title": "Dashboard", + "description": "Find all the metrics related to all my activities and interests." + }, + "sections": { + "coding": { + "title": "Coding / Open source", + "url": "https://wakatime.com/@thedaviddias", + "average_activity": "Average coding activity per day", + "average_activity_duration": "(last 7 days)", + "total_time": "Total coding time", + "total_time_duration": "(last 7 days)", + "open_collective_fec": "Front-End Checklist balance", + "open_collective_fec_url": "https://opencollective.com/front-end-checklist", + "open_collective_htmlhint": "HTMLHint balance", + "open_collective_htmlhint_url": "https://opencollective.com/htmlhint" + }, + "photos": { + "title": "Photos", + "url": "https://unsplash.com/@thedaviddias", + "downloads": "Unsplash downloads", + "views": "Unsplash views" + }, + "tv": { + "title": "TV Shows and Movies", + "url": "https://simkl.com/5311920", + "total_spent": "Spent watching", + "total_spent_duration": "(since forever)", + "last_week_spent": "Spent watching TV Shows", + "last_week_spent_duration": "(last week)" + }, + "gaming": { + "title": "Gaming", + "total_number": "Total number of Steam games", + "most_played": "Most played game duration: {{name}}", + "most_played_duration": "(last 2 weeks)" + }, + "latest-dashboard": "Mini Dashboard", + "viewAll": "→ View my full dashboard" + }, + "unsplash": { + "downloads": "Unsplash Downloads", + "views": "Unsplash Views" + } + }, + "books": { + "currently": "Currently reading", + "next": "To read next", + "sections": { + "viewAll": "→ View my profile on Goodreads" + } + }, + "youtube": { + "sections": { + "latest_videos": "Latest Youtube videos", + "viewAll": "→ Access my Youtube channel" + } + }, + "newsletter": { + "title": "Subscribe to my Newsletter", + "description": "Get emails from me about A11y, web development, tech and expatriation!", + "subscribers": "{{number}} subscribers", + "form": { + "input": { + "placeholder": "username@email.com", + "label": "Email for newsletter" + }, + "submit": { + "text": "Subscribe" + }, + "success": { + "text": "You're now on the list! Don't forget to validate your subscription with the email you probably received." + } + }, + "all_issues": "Access all past issues" + }, + "related": { + "title": "Related posts", + "description": "You might also like these posts:" + }, + "share": { + "title": "Share this post" + } +} diff --git a/apps/blog/locales/fr/404.json b/apps/blog/locales/fr/404.json new file mode 100644 index 00000000..7a6129d2 --- /dev/null +++ b/apps/blog/locales/fr/404.json @@ -0,0 +1,9 @@ +{ + "404": { + "back_home": "Retour à l'accueil", + "seo": { + "title": "Désolé 😩, cette page ne peut pas être trouvée.", + "description": "" + } + } +} diff --git a/apps/blog/locales/fr/about.json b/apps/blog/locales/fr/about.json new file mode 100644 index 00000000..e109d874 --- /dev/null +++ b/apps/blog/locales/fr/about.json @@ -0,0 +1,10 @@ +{ + "about": { + "path": "/about", + "seo": { + "url": "about", + "title": "À propos de l'auteur", + "description": "Sachez-en un peu plus sur 'The David Dias'" + } + } +} diff --git a/apps/blog/locales/fr/common.json b/apps/blog/locales/fr/common.json new file mode 100644 index 00000000..a9e250ee --- /dev/null +++ b/apps/blog/locales/fr/common.json @@ -0,0 +1,290 @@ +{ + "title": "The David Dias", + "titleTemplate": "Front-End Developer, podcaster & content creator", + "date": "dd MMM yyyy", + "layout": { + "a11y": { + "skipContent": "Aller directement {{label}}" + }, + "nav": { + "home": "Accueil", + "notes": "Notes", + "articles": "Articles", + "projects": "Projets", + "bookmarks": "Marque-pages", + "about": "À propos", + "rss": "RSS" + }, + "darkMode": { + "light": "Passer au mode clair", + "dark": "Passer au mode sombre" + }, + "language": { + "fr": { + "fullName": "French", + "switch": "Switch to the {{lang}} version", + "abbreviation": "FR" + }, + "en": { + "fullName": "Anglaise", + "switch": "Changer pour la version {{lang}}", + "abbreviation": "EN" + } + }, + "footer": { + "name": "Pied de page", + "general": "Général", + "social": "Réseaux sociaux", + "extra": "Extra liens", + "extra_links": { + "tags": "Sujets", + "uses": "J'utilise", + "gear": "Matériel", + "resume": "CV", + "dashboard": "Tableau de bord", + "newsletter": "Newsletter", + "analytics": "Statistiques" + } + } + }, + "home": { + "path": "/fr", + "seo": { + "title": "The David Dias | Développeur Front-End, podcasteur & créateur de contenu", + "description": "Salut toi! Je m'appele David Dias. Je suis développeur Front-End, podcasteur, créateur de contenu numérique passioné pour résoudre les problèmes digitaux et humains! J'aime rencontrer de nouvelles personnes, bâtir des communautées et parler de tech, d'expatriation et de web." + }, + "hero": { + "greetings1": "Salut toi!", + "greetings2": "Je m'appelle David Dias", + "presentation": "Je suis développeur Front-End, podcasteur, créateur de contenu numérique passioné pour résoudre les problèmes digitaux et humains! J'aime rencontrer de nouvelles personnes, bâtir des communautées et parler de tech, d'expatriation et de web." + }, + "sections": { + "podcast": { + "latest_podcasts": "Dernier podcast", + "view_website": "En découvrir plus sur le site", + "url": "https://erreur200.com" + } + } + }, + "articles": { + "path": "/articles", + "seo": { + "title": "Articles", + "description": "Retrouvez mes articles sur le dévelopement web and sur tous les autres sujets qui me fascinnent et m'intéressent.", + "url": "articles" + }, + "h1": "Mes articles", + "sections": { + "latest-posts": "Derniers articles", + "viewAll": "→ Voir tous les articles", + "category_filter": "Filtrer par catégories", + "search": "Recherchez par mot clé", + "search_placeholder": "Tapez un mot pour faire une recherche" + } + }, + "notes": { + "path": "/notes", + "seo": { + "title": "Notes", + "description": "Retrouvez l'ensemble de mes notes: des bout de code, des expérimentations, des découvertes, tout ce qu'il me semble intéressant de vous partagez!", + "url": "notes" + }, + "h1": "Mes Notes", + "sections": { + "empty": "Pas de notes disponibles pour le moment.", + "latest-notes": "Dernières Notes", + "search": "Recherchez par mot clé", + "search_placeholder": "Tapez un mot pour faire une recherche" + } + }, + "uses": { + "path": "/uses", + "seo": { + "url": "uses", + "title": "", + "description": "" + } + }, + "projects": { + "path": "/projects", + "seo": { + "url": "projects", + "title": "Mes Projets", + "description": "Découvrez l'ensemble des projets sur lesquels j'ai travaillé et ceux sur lequel je suis toujours en train de travailler." + }, + "updated": "MàJ il y a {{date}}", + "sections": { + "popular": "Projets populaires sur Github", + "popular_description": "Mes projets Open Source les plus populaires. N'hésitez pas à y jeter un coup d'œil et à y participer!", + "viewAll": "→ Voir tous mes projets", + "latest-projects": "Derniers projets MàJ" + } + }, + "openProjects": { + "path": "/projects", + "seo": { + "url": "projects", + "title": "Mes Projets", + "description": "Découvrez l'ensemble des projets sur lesquels j'ai travaillé et ceux sur lequel je suis toujours en train de travailler." + }, + "updated": "MàJ il y a {{date}}", + "sections": { + "popular": "Projets populaires sur Github", + "popular_description": "Mes projets Open Source les plus populaires. N'hésitez pas à y jeter un coup d'œil et à y participer!", + "viewAll": "→ Voir tous mes projets", + "latest-projects": "Derniers projets MàJ" + } + }, + "tags": { + "path": "/tags", + "seo": { + "title": "Publication en lien avec {{name}}", + "url": "tags", + "title_all": "Toutes les étiquettes", + "description": "Toutes mes publications en lien avec le thème de {{name}}.", + "description_all": "Toutes les étiquettes attachées à mes articles et notes, ranger par le nombre d'articles publiés." + }, + "view_all_tags": "→ Voir toutes les étiquettes", + "section": "Étiquettes", + "latest_posts": "Liste de tous les articles en lien avec {{name}}", + "h1": "Étiquettes: {{name}}" + }, + "bookmarks": { + "path": "/bookmarks", + "seo": { + "url": "bookmarks", + "title": "Mes Marque-pages", + "description": "Voici une liste de marque-pages que je mets à jour régulièrement et en lien avec le développment web, la carrière professionnelle et l'open-source." + }, + "bookmark_filter": "Filter les marques-pages par sujet:" + }, + "category": { + "path": "/categories", + "seo": { + "title": "Lisez mon contenu sur {{name}}", + "description": "Vous trouverez l'ensemble de mes publications en lien avec {{name}}." + }, + "h1": "Catégorie: {{name}}" + }, + "rss": { + "path": "/rss/fr/feed.xml" + }, + "500": { + "title": "Wow 😱, you broke everything.", + "seo": { + "title": "", + "description": "" + } + }, + "posts": { + "empty": "Aucun articles trouvé basé sur votre recherche.", + "continue": "Continuez de lire →", + "updated": "MàJ le", + "published": "Initialement publié sur ", + "tableContent": "Table des matières", + "previous": "Publication précédente", + "next": "Publication suivante" + }, + "webmentions": { + "title": "Webmentions", + "description": "Tweeter au sujet de cet article et cela s'affichera ici!", + "show": "Montrer", + "hide": "Cacher", + "details": "{{show}} les mentions en détails", + "activity_reply": "cet article, il y a {{date}}:", + "activity_others": "cet article.", + "activity": { + "link": "relié à", + "reply": "a répoondu à", + "repost": "a retweeté", + "like": "a aimé" + } + }, + "comments": { + "title": "Commentaires", + "description": "N'hésitez pas à laisser votre commentaire! Si vous ne possédez pas de compte Github, vous pouvez toujours tweeter au sujet de cet article!", + "leave_comment": "Laissez un commentaire" + }, + "dashboard": { + "path": "/dashboard", + "seo": { + "url": "dashboard", + "title": "Tableau de bord", + "description": "" + }, + "sections": { + "photos": { + "url": "https://unsplash.com/@thedaviddias", + "title": "Photos", + "views": "Vues de Unsplash", + "downloads": "Téléchargements sur Unsplash" + }, + "coding": { + "total_time": "Temps total en train de coder", + "total_time_duration": "(7 derniers jours)", + "open_collective_fec": "Balance des dons pour la Front-End Checklist", + "open_collective_fec_url": "https://opencollective.com/front-end-checklist", + "average_activity_duration": "(7 derniers jours)", + "url": "https://wakatime.com/@thedaviddias", + "open_collective_htmlhint": "Balance des dons pour HTMLHint", + "average_activity": "Temps moyen à coder par jour", + "title": "Codage / Open source", + "open_collective_htmlhint_url": "https://opencollective.com/htmlhint" + }, + "tv": { + "title": "Films et séries télé", + "url": "https://simkl.com/5311920", + "last_week_spent_duration": "(semaine dernière)", + "total_spent": "Temps passé à regarder", + "total_spent_duration": "(depuis toujours)", + "last_week_spent": "Temps passé à regarder des séries" + }, + "gaming": { + "title": "Jeux", + "most_played": "Durée du jeu le plus joué: {{name}}", + "total_number": "Nombre total de jeux sur Steam", + "most_played_duration": "(2 dernières semaines)" + }, + "latest-dashboard": "Mini tableau de bord", + "viewAll": "→ Voir mon tableau de bord" + }, + "unsplash": { + "downloads": "Téléchargement sur Unsplash", + "views": "Vue de mon profile sur Unsplash" + } + }, + "books": { + "currently": "En train de lire", + "next": "À lire prochainement", + "sections": { + "viewAll": "→ Voir mon profil sur Goodreads" + } + }, + "youtube": { + "sections": { + "latest_videos": "Dernières vidéos Youtube", + "viewAll": "→ Consulter ma chaîne Youtube" + } + }, + "newsletter": { + "title": "S'abonner à mon bulletin digital", + "description": "Recevez des courriels en liens avec l'accessibilité, le dévelopement web, les technologies et l'expatriation! (en anglais)", + "subscribers": "{{number}} abonnés", + "form": { + "input": { + "placeholder": "nom@courriel.com", + "label": "Courriel pour le bulletin" + }, + "submit": { + "text": "S'abonner" + }, + "success": { + "text": "Youpi! Vous êtes maintenant sur la liste! Pensez à valider l'email que vous avez dû recevoir." + } + }, + "all_issues": "Voir tous les bulletins précédents" + }, + "share": { + "title": "Partager cet article" + } +} diff --git a/next-env.d.ts b/apps/blog/next-env.d.ts old mode 100755 new mode 100644 similarity index 100% rename from next-env.d.ts rename to apps/blog/next-env.d.ts diff --git a/apps/blog/next-sitemap.config.js b/apps/blog/next-sitemap.config.js new file mode 100644 index 00000000..58aafb49 --- /dev/null +++ b/apps/blog/next-sitemap.config.js @@ -0,0 +1,73 @@ +/** @type {import('next-sitemap').IConfig} */ + +const commonOptions = (config) => ({ + lastmod: config.autoLastmod ? new Date().toISOString() : undefined, + alternateRefs: [ + { + href: 'https://thedaviddias.dev', + hreflang: 'en', + }, + { + href: 'https://thedaviddias.dev/fr', + hreflang: 'fr', + }, + ], +}) + +const config = { + siteUrl: 'https://thedaviddias.dev', + generateRobotsTxt: true, + exclude: ['/404', '/fr/404'], + additionalPaths: async (config) => { + const result = [] + + result.push({ + loc: '/', + ...commonOptions(config), + }) + + result.push({ + loc: '/about', + changefreq: 'weekly', + ...commonOptions(config), + }) + + result.push({ + loc: '/articles', + ...commonOptions(config), + }) + + result.push({ + loc: '/notes', + ...commonOptions(config), + }) + + result.push({ + loc: '/projects', + changefreq: 'weekly', + ...commonOptions(config), + }) + + result.push({ + loc: '/tags', + changefreq: 'weekly', + ...commonOptions(config), + }) + + result.push({ + loc: '/dashboard', + changefreq: 'weekly', + ...commonOptions(config), + }) + + result.push({ + loc: '/uses', + changefreq: 'monthly', + ...commonOptions(config), + }) + + return result + }, +} + +module.exports = config diff --git a/apps/blog/next.config.js b/apps/blog/next.config.js new file mode 100644 index 00000000..bc5f9044 --- /dev/null +++ b/apps/blog/next.config.js @@ -0,0 +1,103 @@ +/** @type {import('next').NextConfig} */ +const nextTranslate = require('next-translate-plugin') +const { withSentryConfig } = require('@sentry/nextjs') +const { withPlausibleProxy } = require('next-plausible') +const withPlugins = require('next-compose-plugins') +const withBundleAnalyzer = require('@next/bundle-analyzer') + +const plausiblePlugin = withPlausibleProxy +const bundleAnalyser = withBundleAnalyzer({ enabled: process.env.ANALYZE === 'true' }) + +const plugins = [plausiblePlugin, bundleAnalyser] + +const nextConfig = withPlugins([plugins, nextTranslate], { + reactStrictMode: true, + swcMinify: true, + pageExtensions: ['ts', 'tsx', 'mdx'], + poweredByHeader: false, + typescript: { + // !! WARN !! + // Dangerously allow production builds to successfully complete even if + // your project has type errors. + // !! WARN !! + ignoreBuildErrors: true, + }, + images: { + domains: ['images.unsplash.com', 'webmention.io', 'i.gr-assets.com', 'i.ytimg.com'], + formats: ['image/avif', 'image/webp'], + }, + env: { + VERCEL_ENV: process.env.VERCEL_ENV, + }, + async redirects() { + return [ + { + source: '/blog/:path*', + destination: '/articles/:path*', + permanent: true, + }, + { + source: '/authors/@david-dias', + destination: '/about', + permanent: true, + }, + ] + }, + webpack(config) { + config.module.rules.push({ + test: /\.(png|jpe?g|gif|mp4)$/i, + use: [ + { + loader: 'file-loader', + options: { + publicPath: '/_next', + name: 'static/media/[name].[hash].[ext]', + }, + }, + ], + }) + const fileLoaderRule = config.module.rules.find((rule) => rule.test && rule.test.test('.svg')) + fileLoaderRule.exclude = /\.svg$/ + config.module.rules.push({ + test: /\.svg$/, + loader: require.resolve('@svgr/webpack'), + }) + return config + }, + async redirects() { + return [ + { + source: '/articles/what-i-learned-about-side-project-presenting-meetups-europe', + destination: '/articles/learned-presenting-side-project-europe', + permanent: true, + }, + { + source: '/blog/:slug', + destination: '/articles/:slug', + permanent: true, + }, + { + source: '/tag/:tag*', + destination: '/tags/:tag*', + permanent: true, + }, + ] + }, + sentry: { + hideSourceMaps: true, + }, +}) + +const sentryWebpackPluginOptions = { + // Additional config options for the Sentry Webpack plugin. Keep in mind that + // the following options are set automatically, and overriding them is not + // recommended: + // release, url, org, project, authToken, configFile, stripPrefix, + // urlPrefix, include, ignore + silent: true, // Suppresses all logs + dryRun: process.env.VERCEL_ENV !== 'production', +} + +// Make sure adding Sentry options is the last code to run before exporting, to +// ensure that your source maps include changes from all other Webpack plugins +module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions) diff --git a/apps/blog/package.json b/apps/blog/package.json new file mode 100644 index 00000000..6dd38fab --- /dev/null +++ b/apps/blog/package.json @@ -0,0 +1,113 @@ +{ + "name": "blog", + "version": "0.1.0", + "private": true, + "scripts": { + "build": "next build", + "postbuild": "next-sitemap", + "check:all": "pnpm check:format && pnpm check:lint && pnpm build", + "check:format": "prettier --check .", + "check:lint": "eslint . --ext js,ts,tsx,mdx,json", + "check:types": "tsc -p tsconfig.json --noEmit --pretty", + "dev": "next dev", + "format": "prettier --write .", + "lint": "next lint", + "lint:write": "eslint . --ext js,ts,tsx,mdx,json --fix --max-warnings=0", + "publish": "node scripts/publish-blog.js", + "start": "next start", + "test": "jest", + "test:coverate": "pnpm test -- --coverage", + "test:e2e": "playwright test" + }, + "dependencies": { + "@giscus/react": "^2.2.8", + "@tailwindcss/aspect-ratio": "0.4.2", + "@tailwindcss/forms": "0.5.3", + "@tailwindcss/typography": "0.5.9", + "@vercel/og": "^0.5.7", + "autoprefixer": "^10.4.14", + "eslint-config-prettier": "8.8.0", + "eslint-plugin-prettier": "^4.2.1", + "feed": "^4.2.2", + "googleapis": "110.0.0", + "gray-matter": "^4.0.3", + "is-mobile": "^4.0.0", + "next": "13.4.5", + "next-compose-plugins": "^2.2.1", + "next-mdx-remote": "^4.4.1", + "next-plausible": "^3.7.2", + "next-seo": "^5.5.0", + "next-themes": "0.2.1", + "postcss": "^8.4.24", + "prettier": "^2.8.8", + "react": "18.2.0", + "react-dom": "18.2.0", + "reading-time": "^1.5.0", + "slugify": "^1.6.6", + "tailwindcss": "3.3.2" + }, + "devDependencies": { + "@next/bundle-analyzer": "13.4.5", + "@next/env": "13.4.5", + "@nick22985/wakatime-api": "^1.0.2", + "@octokit/graphql": "^5.0.6", + "@octokit/graphql-schema": "^14.9.1", + "@playwright/test": "^1.35.0", + "@sentry/nextjs": "7.54.0", + "@sentry/node": "7.54.0", + "@svgr/webpack": "6.5.1", + "@testing-library/jest-dom": "^5.16.5", + "@testing-library/react": "^14.0.0", + "@types/jest": "^29.5.2", + "@types/node": "18.6.5", + "@types/prettier": "^2.7.3", + "@types/react": "18.2.11", + "@types/react-dom": "18.2.4", + "@types/rss": "0.0.30", + "@typescript-eslint/eslint-plugin": "5.59.9", + "@typescript-eslint/parser": "5.59.9", + "axe-core": "4.7.2", + "axios": "1.4.0", + "babel-jest": "^29.5.0", + "camel-case": "^4.1.2", + "clsx": "^1.2.1", + "date-fns": "2.30.0", + "dotenv": "16.1.4", + "eslint": "8.42.0", + "eslint-config-next": "13.4.5", + "eslint-plugin-jsx-a11y": "6.7.1", + "eslint-plugin-mdx": "2.1.0", + "eslint-plugin-react": "7.32.2", + "eslint-plugin-react-hooks": "^4.6.0", + "eslint-plugin-simple-import-sort": "10.0.0", + "hast-util-has-property": "^2.0.0", + "hast-util-heading-rank": "^2.1.1", + "hast-util-to-string": "^2.0.0", + "jest": "^29.5.0", + "jest-environment-jsdom": "^29.5.0", + "lint-staged": "13.2.2", + "next-bundle-analyzer": "0.6.7", + "next-sitemap": "4.1.3", + "next-translate": "2.3.0-canary.3", + "next-translate-plugin": "2.3.0-canary.3", + "node-fetch": "^3.3.1", + "pretty-ms": "^8.0.0", + "react-goodreads-shelf": "^3.1.5", + "react-social-media-embed": "^2.3.5", + "react-social-sharing": "^3.3.0", + "rehype-autolink-headings": "^6.1.1", + "rehype-figure": "^1.0.1", + "rehype-image-placeholder": "^1.0.1", + "rehype-parse": "^8.0.4", + "rehype-prism-plus": "1.5.1", + "rehype-slug": "5.1.0", + "rehype-stringify": "^9.0.3", + "remark-gfm": "^3.0.1", + "swr": "2.1.5", + "ts-jest": "^29.1.0", + "ts-node": "^10.9.1", + "typescript": "4.7.4", + "unified": "^10.1.2", + "unist-util-visit": "^4.1.0" + } +} diff --git a/apps/blog/playwright.config.ts b/apps/blog/playwright.config.ts new file mode 100644 index 00000000..a1c6bd4a --- /dev/null +++ b/apps/blog/playwright.config.ts @@ -0,0 +1,79 @@ +import { devices, PlaywrightTestConfig } from '@playwright/test' +import path from 'path' + +// Use process.env.PORT by default and fallback to port 3000 +const PORT = process.env.PORT || 3000 + +// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port +const baseURL = `http://localhost:${PORT}` + +// Reference: https://playwright.dev/docs/test-configuration +const config: PlaywrightTestConfig = { + // Timeout per test + timeout: 30 * 1000, + // Test directory + testDir: path.join(__dirname, 'e2e'), + // If a test fails, retry it additional 2 times + retries: 2, + // Artifacts folder where screenshots, videos, and traces are stored. + outputDir: 'test-results/', + + // Run your local dev server before starting the tests: + // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests + webServer: { + command: 'pnpm dev', + url: baseURL, + timeout: 120 * 1000, + reuseExistingServer: !process.env.CI, + }, + + use: { + // Use baseURL so to make navigations relative. + // More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url + baseURL, + + // Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc. + // More information: https://playwright.dev/docs/trace-viewer + trace: 'retry-with-trace', + + // All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context + // contextOptions: { + // ignoreHTTPSErrors: true, + // }, + }, + + projects: [ + { + name: 'Desktop Chrome', + use: { + ...devices['Desktop Chrome'], + }, + }, + // { + // name: 'Desktop Firefox', + // use: { + // ...devices['Desktop Firefox'], + // }, + // }, + { + name: 'Desktop Safari', + use: { + ...devices['Desktop Safari'], + }, + }, + // Test against mobile viewports. + // { + // name: 'Mobile Chrome', + // use: { + // ...devices['Pixel 5'], + // }, + // }, + // { + // name: 'Mobile Safari', + // use: { + // ...devices['iPhone 13'], + // }, + // }, + ], +} +export default config diff --git a/postcss.config.js b/apps/blog/postcss.config.js similarity index 100% rename from postcss.config.js rename to apps/blog/postcss.config.js diff --git a/apps/blog/public/favicon.ico b/apps/blog/public/favicon.ico new file mode 100644 index 00000000..8ba2a424 Binary files /dev/null and b/apps/blog/public/favicon.ico differ diff --git a/apps/blog/public/favicons/android-chrome-144x144.png b/apps/blog/public/favicons/android-chrome-144x144.png new file mode 100644 index 00000000..148d6dde Binary files /dev/null and b/apps/blog/public/favicons/android-chrome-144x144.png differ diff --git a/apps/blog/public/favicons/apple-touch-icon.png b/apps/blog/public/favicons/apple-touch-icon.png new file mode 100644 index 00000000..89416ba2 Binary files /dev/null and b/apps/blog/public/favicons/apple-touch-icon.png differ diff --git a/public/browserconfig.xml b/apps/blog/public/favicons/browserconfig.xml similarity index 55% rename from public/browserconfig.xml rename to apps/blog/public/favicons/browserconfig.xml index c484a7a8..9824d87b 100644 --- a/public/browserconfig.xml +++ b/apps/blog/public/favicons/browserconfig.xml @@ -2,8 +2,8 @@ - - #131a28 + + #000000 diff --git a/apps/blog/public/favicons/favicon-16x16.png b/apps/blog/public/favicons/favicon-16x16.png new file mode 100644 index 00000000..1d750382 Binary files /dev/null and b/apps/blog/public/favicons/favicon-16x16.png differ diff --git a/apps/blog/public/favicons/favicon-32x32.png b/apps/blog/public/favicons/favicon-32x32.png new file mode 100644 index 00000000..f886e489 Binary files /dev/null and b/apps/blog/public/favicons/favicon-32x32.png differ diff --git a/apps/blog/public/favicons/mstile-150x150.png b/apps/blog/public/favicons/mstile-150x150.png new file mode 100644 index 00000000..a8b4c2f5 Binary files /dev/null and b/apps/blog/public/favicons/mstile-150x150.png differ diff --git a/apps/blog/public/favicons/safari-pinned-tab.svg b/apps/blog/public/favicons/safari-pinned-tab.svg new file mode 100644 index 00000000..62677e8d --- /dev/null +++ b/apps/blog/public/favicons/safari-pinned-tab.svg @@ -0,0 +1,17 @@ + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + + diff --git a/apps/blog/public/favicons/site.webmanifest b/apps/blog/public/favicons/site.webmanifest new file mode 100644 index 00000000..b4d0ef6f --- /dev/null +++ b/apps/blog/public/favicons/site.webmanifest @@ -0,0 +1,14 @@ +{ + "name": "The David Dias", + "short_name": "The David Dias", + "icons": [ + { + "src": "/favicons/android-chrome-144x144.png", + "sizes": "144x144", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +} diff --git a/apps/blog/public/fonts/SourceSansPro-Bold.woff2 b/apps/blog/public/fonts/SourceSansPro-Bold.woff2 new file mode 100644 index 00000000..4413f7e0 Binary files /dev/null and b/apps/blog/public/fonts/SourceSansPro-Bold.woff2 differ diff --git a/apps/blog/public/fonts/SourceSansPro-Light.woff2 b/apps/blog/public/fonts/SourceSansPro-Light.woff2 new file mode 100644 index 00000000..500a7379 Binary files /dev/null and b/apps/blog/public/fonts/SourceSansPro-Light.woff2 differ diff --git a/apps/blog/public/fonts/SourceSansPro-Regular.woff2 b/apps/blog/public/fonts/SourceSansPro-Regular.woff2 new file mode 100644 index 00000000..d10a3423 Binary files /dev/null and b/apps/blog/public/fonts/SourceSansPro-Regular.woff2 differ diff --git a/apps/blog/public/fonts/oswald.woff2 b/apps/blog/public/fonts/oswald.woff2 new file mode 100644 index 00000000..c419865d Binary files /dev/null and b/apps/blog/public/fonts/oswald.woff2 differ diff --git a/apps/blog/public/images/about-david-dias.jpeg b/apps/blog/public/images/about-david-dias.jpeg new file mode 100644 index 00000000..df618793 Binary files /dev/null and b/apps/blog/public/images/about-david-dias.jpeg differ diff --git a/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/booking.jpg b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/booking.jpg new file mode 100644 index 00000000..ac262808 Binary files /dev/null and b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/booking.jpg differ diff --git a/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/etsy.jpg b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/etsy.jpg new file mode 100644 index 00000000..e07158a9 Binary files /dev/null and b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/etsy.jpg differ diff --git a/public/images/blog/9-best-practices-ux-for-two-factor-authentification/featured.jpg b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/featured.jpg similarity index 99% rename from public/images/blog/9-best-practices-ux-for-two-factor-authentification/featured.jpg rename to apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/featured.jpg index ac57fffd..9b8958b5 100644 Binary files a/public/images/blog/9-best-practices-ux-for-two-factor-authentification/featured.jpg and b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/featured.jpg differ diff --git a/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/instagram-login-code-space.jpg b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/instagram-login-code-space.jpg new file mode 100644 index 00000000..da708d4f Binary files /dev/null and b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/instagram-login-code-space.jpg differ diff --git a/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/kickstarter.jpg b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/kickstarter.jpg new file mode 100644 index 00000000..aae20fc2 Binary files /dev/null and b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/kickstarter.jpg differ diff --git a/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/slack.jpg b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/slack.jpg new file mode 100644 index 00000000..83aaf588 Binary files /dev/null and b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/slack.jpg differ diff --git a/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/titan-security-keys.jpeg b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/titan-security-keys.jpeg new file mode 100644 index 00000000..113fb150 Binary files /dev/null and b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/titan-security-keys.jpeg differ diff --git a/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/zapier.jpg b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/zapier.jpg new file mode 100644 index 00000000..89bcd203 Binary files /dev/null and b/apps/blog/public/images/articles/9-best-practices-ux-for-two-factor-authentification/zapier.jpg differ diff --git a/apps/blog/public/images/articles/9-reponses-questions-vous-vous-posez-toronto-canada/featured.jpg b/apps/blog/public/images/articles/9-reponses-questions-vous-vous-posez-toronto-canada/featured.jpg new file mode 100644 index 00000000..1e3abdac Binary files /dev/null and b/apps/blog/public/images/articles/9-reponses-questions-vous-vous-posez-toronto-canada/featured.jpg differ diff --git a/apps/blog/public/images/articles/actions-secrets-netlify.jpeg b/apps/blog/public/images/articles/actions-secrets-netlify.jpeg new file mode 100644 index 00000000..d9d79393 Binary files /dev/null and b/apps/blog/public/images/articles/actions-secrets-netlify.jpeg differ diff --git a/apps/blog/public/images/articles/all-github-actions-netlify.jpeg b/apps/blog/public/images/articles/all-github-actions-netlify.jpeg new file mode 100644 index 00000000..6914c468 Binary files /dev/null and b/apps/blog/public/images/articles/all-github-actions-netlify.jpeg differ diff --git a/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/american-passport-airplane-ticket.jpeg b/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/american-passport-airplane-ticket.jpeg new file mode 100644 index 00000000..c5854c2e Binary files /dev/null and b/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/american-passport-airplane-ticket.jpeg differ diff --git a/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/featured.jpg b/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/featured.jpg new file mode 100644 index 00000000..1e8dd29d Binary files /dev/null and b/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/featured.jpg differ diff --git a/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/map-earth-carnet-camera.jpeg b/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/map-earth-carnet-camera.jpeg new file mode 100644 index 00000000..d52d9d2a Binary files /dev/null and b/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/map-earth-carnet-camera.jpeg differ diff --git a/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/men-showing-photo-front.jpeg b/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/men-showing-photo-front.jpeg new file mode 100644 index 00000000..3bd766df Binary files /dev/null and b/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/men-showing-photo-front.jpeg differ diff --git a/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/service-public-capture.jpeg b/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/service-public-capture.jpeg new file mode 100644 index 00000000..1b9d4f88 Binary files /dev/null and b/apps/blog/public/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/service-public-capture.jpeg differ diff --git a/apps/blog/public/images/articles/automatically-create-netlify-toml.jpeg b/apps/blog/public/images/articles/automatically-create-netlify-toml.jpeg new file mode 100644 index 00000000..2c44067f Binary files /dev/null and b/apps/blog/public/images/articles/automatically-create-netlify-toml.jpeg differ diff --git a/apps/blog/public/images/articles/beyond-user-testing-leveraging-frontend-experience/table-computers.jpg b/apps/blog/public/images/articles/beyond-user-testing-leveraging-frontend-experience/table-computers.jpg new file mode 100644 index 00000000..cd8792fd Binary files /dev/null and b/apps/blog/public/images/articles/beyond-user-testing-leveraging-frontend-experience/table-computers.jpg differ diff --git a/apps/blog/public/images/articles/build-in-github-action-netlify.jpeg b/apps/blog/public/images/articles/build-in-github-action-netlify.jpeg new file mode 100644 index 00000000..2c46075b Binary files /dev/null and b/apps/blog/public/images/articles/build-in-github-action-netlify.jpeg differ diff --git a/apps/blog/public/images/articles/build-settings-netlify.jpeg b/apps/blog/public/images/articles/build-settings-netlify.jpeg new file mode 100644 index 00000000..539a31e7 Binary files /dev/null and b/apps/blog/public/images/articles/build-settings-netlify.jpeg differ diff --git a/apps/blog/public/images/articles/choose-city-country-front-developer/cost-living-montreal-toronto.png b/apps/blog/public/images/articles/choose-city-country-front-developer/cost-living-montreal-toronto.png new file mode 100644 index 00000000..ab686d2d Binary files /dev/null and b/apps/blog/public/images/articles/choose-city-country-front-developer/cost-living-montreal-toronto.png differ diff --git a/apps/blog/public/images/articles/choose-city-country-front-developer/cost-living-sydney-melbourne.png b/apps/blog/public/images/articles/choose-city-country-front-developer/cost-living-sydney-melbourne.png new file mode 100644 index 00000000..3ea0ac6c Binary files /dev/null and b/apps/blog/public/images/articles/choose-city-country-front-developer/cost-living-sydney-melbourne.png differ diff --git a/apps/blog/public/images/articles/choose-city-country-front-developer/cost-living-wellington-auckland.png b/apps/blog/public/images/articles/choose-city-country-front-developer/cost-living-wellington-auckland.png new file mode 100644 index 00000000..b42adcec Binary files /dev/null and b/apps/blog/public/images/articles/choose-city-country-front-developer/cost-living-wellington-auckland.png differ diff --git a/apps/blog/public/images/articles/choose-city-country-front-developer/earth-rounded.jpeg b/apps/blog/public/images/articles/choose-city-country-front-developer/earth-rounded.jpeg new file mode 100644 index 00000000..7c2f62fc Binary files /dev/null and b/apps/blog/public/images/articles/choose-city-country-front-developer/earth-rounded.jpeg differ diff --git a/apps/blog/public/images/articles/choose-city-country-front-developer/new-york-statue-liberty.jpeg b/apps/blog/public/images/articles/choose-city-country-front-developer/new-york-statue-liberty.jpeg new file mode 100644 index 00000000..708bfbc2 Binary files /dev/null and b/apps/blog/public/images/articles/choose-city-country-front-developer/new-york-statue-liberty.jpeg differ diff --git a/apps/blog/public/images/articles/choose-city-country-front-developer/sydney-view.jpeg b/apps/blog/public/images/articles/choose-city-country-front-developer/sydney-view.jpeg new file mode 100644 index 00000000..c0cbd2d8 Binary files /dev/null and b/apps/blog/public/images/articles/choose-city-country-front-developer/sydney-view.jpeg differ diff --git a/apps/blog/public/images/articles/choose-city-country-front-developer/toront-cn-tower.jpeg b/apps/blog/public/images/articles/choose-city-country-front-developer/toront-cn-tower.jpeg new file mode 100644 index 00000000..e1269757 Binary files /dev/null and b/apps/blog/public/images/articles/choose-city-country-front-developer/toront-cn-tower.jpeg differ diff --git a/apps/blog/public/images/articles/cli-after-all-questions-answered.jpeg b/apps/blog/public/images/articles/cli-after-all-questions-answered.jpeg new file mode 100644 index 00000000..df9dcd59 Binary files /dev/null and b/apps/blog/public/images/articles/cli-after-all-questions-answered.jpeg differ diff --git a/apps/blog/public/images/articles/cli-build-start-function-script.jpeg b/apps/blog/public/images/articles/cli-build-start-function-script.jpeg new file mode 100644 index 00000000..66bcdc11 Binary files /dev/null and b/apps/blog/public/images/articles/cli-build-start-function-script.jpeg differ diff --git a/apps/blog/public/images/articles/cli-name-application.jpeg b/apps/blog/public/images/articles/cli-name-application.jpeg new file mode 100644 index 00000000..f81330d3 Binary files /dev/null and b/apps/blog/public/images/articles/cli-name-application.jpeg differ diff --git a/apps/blog/public/images/articles/comment-canada-devenu-maison-4-ans-tentatives/featured.jpg b/apps/blog/public/images/articles/comment-canada-devenu-maison-4-ans-tentatives/featured.jpg new file mode 100644 index 00000000..d38a243e Binary files /dev/null and b/apps/blog/public/images/articles/comment-canada-devenu-maison-4-ans-tentatives/featured.jpg differ diff --git a/apps/blog/public/images/articles/connect-existing-direction.jpeg b/apps/blog/public/images/articles/connect-existing-direction.jpeg new file mode 100644 index 00000000..fbd9935a Binary files /dev/null and b/apps/blog/public/images/articles/connect-existing-direction.jpeg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/david-dias-blog-2012.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/david-dias-blog-2012.jpg new file mode 100644 index 00000000..870acf25 Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/david-dias-blog-2012.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/david-dias-blog-2015.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/david-dias-blog-2015.jpg new file mode 100644 index 00000000..12854a3a Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/david-dias-blog-2015.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/david-dias-blog-2020.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/david-dias-blog-2020.jpg new file mode 100644 index 00000000..efef38f8 Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/david-dias-blog-2020.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/david-dias-present-ndlr.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/david-dias-present-ndlr.jpg new file mode 100644 index 00000000..5f956a17 Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/david-dias-present-ndlr.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/erreur-200.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/erreur-200.jpg new file mode 100644 index 00000000..0b931249 Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/erreur-200.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/featured.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/featured.jpg new file mode 100644 index 00000000..d26a91fb Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/featured.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/franca-brasileira-logo.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/franca-brasileira-logo.jpg new file mode 100644 index 00000000..955a04b1 Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/franca-brasileira-logo.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/frontendchecklist.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/frontendchecklist.jpg new file mode 100644 index 00000000..726261ef Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/frontendchecklist.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/frontenddev-fr.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/frontenddev-fr.jpg new file mode 100644 index 00000000..97d54428 Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/frontenddev-fr.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/paroisse-ndlr-2005.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/paroisse-ndlr-2005.jpg new file mode 100644 index 00000000..05777681 Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/paroisse-ndlr-2005.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/paroisse-ndrl-2004.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/paroisse-ndrl-2004.jpg new file mode 100644 index 00000000..b420a042 Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/paroisse-ndrl-2004.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/wikikto-en.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/wikikto-en.jpg new file mode 100644 index 00000000..edfb7c87 Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/wikikto-en.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/wikikto-fr.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/wikikto-fr.jpg new file mode 100644 index 00000000..6a2d2202 Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/wikikto-fr.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/wikiktosource-fr.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/wikiktosource-fr.jpg new file mode 100644 index 00000000..b04b853e Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/wikiktosource-fr.jpg differ diff --git a/apps/blog/public/images/articles/decade-web-development-personal-journey/worldwebstories-podcast.jpg b/apps/blog/public/images/articles/decade-web-development-personal-journey/worldwebstories-podcast.jpg new file mode 100644 index 00000000..09dc3104 Binary files /dev/null and b/apps/blog/public/images/articles/decade-web-development-personal-journey/worldwebstories-podcast.jpg differ diff --git a/apps/blog/public/images/articles/deploy-context-section-netlify.jpeg b/apps/blog/public/images/articles/deploy-context-section-netlify.jpeg new file mode 100644 index 00000000..c9cb6a59 Binary files /dev/null and b/apps/blog/public/images/articles/deploy-context-section-netlify.jpeg differ diff --git a/apps/blog/public/images/articles/deploy-netlify-preview.jpeg b/apps/blog/public/images/articles/deploy-netlify-preview.jpeg new file mode 100644 index 00000000..a9d42db9 Binary files /dev/null and b/apps/blog/public/images/articles/deploy-netlify-preview.jpeg differ diff --git a/apps/blog/public/images/articles/front-end-checklist-just-tool-everything-depends-on-you/featured.jpg b/apps/blog/public/images/articles/front-end-checklist-just-tool-everything-depends-on-you/featured.jpg new file mode 100644 index 00000000..284df1f7 Binary files /dev/null and b/apps/blog/public/images/articles/front-end-checklist-just-tool-everything-depends-on-you/featured.jpg differ diff --git a/public/images/blog/front-end-checklist-just-tool-everything-depends-on-you/start-to-check.jpg b/apps/blog/public/images/articles/front-end-checklist-just-tool-everything-depends-on-you/start-to-check.jpg similarity index 100% rename from public/images/blog/front-end-checklist-just-tool-everything-depends-on-you/start-to-check.jpg rename to apps/blog/public/images/articles/front-end-checklist-just-tool-everything-depends-on-you/start-to-check.jpg diff --git a/public/images/blog/front-end-checklist-just-tool-everything-depends-on-you/validate-before-qa.jpg b/apps/blog/public/images/articles/front-end-checklist-just-tool-everything-depends-on-you/validate-before-qa.jpg similarity index 100% rename from public/images/blog/front-end-checklist-just-tool-everything-depends-on-you/validate-before-qa.jpg rename to apps/blog/public/images/articles/front-end-checklist-just-tool-everything-depends-on-you/validate-before-qa.jpg diff --git a/apps/blog/public/images/articles/front-end-performance-checklist-speeds-up-web-developments/featured.jpeg b/apps/blog/public/images/articles/front-end-performance-checklist-speeds-up-web-developments/featured.jpeg new file mode 100644 index 00000000..2f543978 Binary files /dev/null and b/apps/blog/public/images/articles/front-end-performance-checklist-speeds-up-web-developments/featured.jpeg differ diff --git a/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/computer-windows-white-table.jpeg b/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/computer-windows-white-table.jpeg new file mode 100644 index 00000000..4fc5f737 Binary files /dev/null and b/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/computer-windows-white-table.jpeg differ diff --git a/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/featured.jpeg b/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/featured.jpeg new file mode 100644 index 00000000..14a0d7aa Binary files /dev/null and b/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/featured.jpeg differ diff --git a/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/mindset-culture-processes.png b/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/mindset-culture-processes.png new file mode 100644 index 00000000..2dbbca79 Binary files /dev/null and b/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/mindset-culture-processes.png differ diff --git a/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/photoshop-design-desk.jpeg b/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/photoshop-design-desk.jpeg new file mode 100644 index 00000000..91666047 Binary files /dev/null and b/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/photoshop-design-desk.jpeg differ diff --git a/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/whiteboard-collaboration-wireframe.jpeg b/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/whiteboard-collaboration-wireframe.jpeg new file mode 100644 index 00000000..19b6fe4e Binary files /dev/null and b/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/whiteboard-collaboration-wireframe.jpeg differ diff --git a/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/wireframe-design-table.jpeg b/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/wireframe-design-table.jpeg new file mode 100644 index 00000000..3c772613 Binary files /dev/null and b/apps/blog/public/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/wireframe-design-table.jpeg differ diff --git a/public/images/blog/how-morning-routine-can-positively-change-your-life-forever/5-minutes-journal-coffee.jpg b/apps/blog/public/images/articles/how-morning-routine-can-positively-change-your-life-forever/5-minutes-journal-coffee.jpg similarity index 99% rename from public/images/blog/how-morning-routine-can-positively-change-your-life-forever/5-minutes-journal-coffee.jpg rename to apps/blog/public/images/articles/how-morning-routine-can-positively-change-your-life-forever/5-minutes-journal-coffee.jpg index e2a2398d..435f6652 100755 Binary files a/public/images/blog/how-morning-routine-can-positively-change-your-life-forever/5-minutes-journal-coffee.jpg and b/apps/blog/public/images/articles/how-morning-routine-can-positively-change-your-life-forever/5-minutes-journal-coffee.jpg differ diff --git a/apps/blog/public/images/articles/how-morning-routine-can-positively-change-your-life-forever/featured.jpeg b/apps/blog/public/images/articles/how-morning-routine-can-positively-change-your-life-forever/featured.jpeg new file mode 100644 index 00000000..5e90e4c2 Binary files /dev/null and b/apps/blog/public/images/articles/how-morning-routine-can-positively-change-your-life-forever/featured.jpeg differ diff --git a/apps/blog/public/images/articles/how-morning-routine-can-positively-change-your-life-forever/park-mauritius.jpg b/apps/blog/public/images/articles/how-morning-routine-can-positively-change-your-life-forever/park-mauritius.jpg new file mode 100644 index 00000000..be3917f0 Binary files /dev/null and b/apps/blog/public/images/articles/how-morning-routine-can-positively-change-your-life-forever/park-mauritius.jpg differ diff --git a/apps/blog/public/images/articles/how-morning-routine-can-positively-change-your-life-forever/sleep-ios-screenshots.jpeg b/apps/blog/public/images/articles/how-morning-routine-can-positively-change-your-life-forever/sleep-ios-screenshots.jpeg new file mode 100644 index 00000000..73c88eef Binary files /dev/null and b/apps/blog/public/images/articles/how-morning-routine-can-positively-change-your-life-forever/sleep-ios-screenshots.jpeg differ diff --git a/apps/blog/public/images/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days/dean-surprised.gif b/apps/blog/public/images/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days/dean-surprised.gif new file mode 100644 index 00000000..5e41d806 Binary files /dev/null and b/apps/blog/public/images/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days/dean-surprised.gif differ diff --git a/apps/blog/public/images/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days/frontend-open-source-projects.jpeg b/apps/blog/public/images/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days/frontend-open-source-projects.jpeg new file mode 100644 index 00000000..66cbbb2c Binary files /dev/null and b/apps/blog/public/images/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days/frontend-open-source-projects.jpeg differ diff --git a/apps/blog/public/images/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days/github-stars.jpeg b/apps/blog/public/images/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days/github-stars.jpeg new file mode 100644 index 00000000..27e6ee7d Binary files /dev/null and b/apps/blog/public/images/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days/github-stars.jpeg differ diff --git a/apps/blog/public/images/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days/insights-front-end-checklist.jpeg b/apps/blog/public/images/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days/insights-front-end-checklist.jpeg new file mode 100644 index 00000000..31c36379 Binary files /dev/null and b/apps/blog/public/images/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days/insights-front-end-checklist.jpeg differ diff --git a/apps/blog/public/images/articles/how-to-deploy-your-nextjs-app-on-netlify-using-github-actions/featured.jpg b/apps/blog/public/images/articles/how-to-deploy-your-nextjs-app-on-netlify-using-github-actions/featured.jpg new file mode 100644 index 00000000..15292d18 Binary files /dev/null and b/apps/blog/public/images/articles/how-to-deploy-your-nextjs-app-on-netlify-using-github-actions/featured.jpg differ diff --git a/apps/blog/public/images/articles/learned-presenting-side-project-europe/front-end-checklist-presentation-wall.jpeg b/apps/blog/public/images/articles/learned-presenting-side-project-europe/front-end-checklist-presentation-wall.jpeg new file mode 100644 index 00000000..e1581122 Binary files /dev/null and b/apps/blog/public/images/articles/learned-presenting-side-project-europe/front-end-checklist-presentation-wall.jpeg differ diff --git a/apps/blog/public/images/articles/learned-presenting-side-project-europe/iron-hack-david-dias-spain.jpeg b/apps/blog/public/images/articles/learned-presenting-side-project-europe/iron-hack-david-dias-spain.jpeg new file mode 100644 index 00000000..ae863b68 Binary files /dev/null and b/apps/blog/public/images/articles/learned-presenting-side-project-europe/iron-hack-david-dias-spain.jpeg differ diff --git a/apps/blog/public/images/articles/learned-presenting-side-project-europe/map-front-end-checklist-conference.png b/apps/blog/public/images/articles/learned-presenting-side-project-europe/map-front-end-checklist-conference.png new file mode 100644 index 00000000..6dcc3f80 Binary files /dev/null and b/apps/blog/public/images/articles/learned-presenting-side-project-europe/map-front-end-checklist-conference.png differ diff --git a/apps/blog/public/images/articles/learned-presenting-side-project-europe/meetup-front-end-checklist-madrid.jpeg b/apps/blog/public/images/articles/learned-presenting-side-project-europe/meetup-front-end-checklist-madrid.jpeg new file mode 100644 index 00000000..56676fbe Binary files /dev/null and b/apps/blog/public/images/articles/learned-presenting-side-project-europe/meetup-front-end-checklist-madrid.jpeg differ diff --git a/apps/blog/public/images/articles/learned-presenting-side-project-europe/talking-about-task-runners.jpeg b/apps/blog/public/images/articles/learned-presenting-side-project-europe/talking-about-task-runners.jpeg new file mode 100644 index 00000000..e5ed8c17 Binary files /dev/null and b/apps/blog/public/images/articles/learned-presenting-side-project-europe/talking-about-task-runners.jpeg differ diff --git a/apps/blog/public/images/articles/netlify-project-created.jpeg b/apps/blog/public/images/articles/netlify-project-created.jpeg new file mode 100644 index 00000000..4d164408 Binary files /dev/null and b/apps/blog/public/images/articles/netlify-project-created.jpeg differ diff --git a/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/a11y-additional-items.jpg b/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/a11y-additional-items.jpg new file mode 100644 index 00000000..af3e851d Binary files /dev/null and b/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/a11y-additional-items.jpg differ diff --git a/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/chrome-a11y.jpg b/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/chrome-a11y.jpg new file mode 100644 index 00000000..b85c4e75 Binary files /dev/null and b/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/chrome-a11y.jpg differ diff --git a/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/featured.jpg b/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/featured.jpg new file mode 100644 index 00000000..db201cb2 Binary files /dev/null and b/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/featured.jpg differ diff --git a/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/firefox-a11y.jpg b/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/firefox-a11y.jpg new file mode 100644 index 00000000..35d02f85 Binary files /dev/null and b/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/firefox-a11y.jpg differ diff --git a/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/lighthouse-24jdw.jpg b/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/lighthouse-24jdw.jpg new file mode 100644 index 00000000..5900bfb4 Binary files /dev/null and b/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/lighthouse-24jdw.jpg differ diff --git a/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/why-did-you-update.png b/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/why-did-you-update.png new file mode 100644 index 00000000..135cab19 Binary files /dev/null and b/apps/blog/public/images/articles/outils-astuces-rendre-accessible-performante-application-react/why-did-you-update.png differ diff --git a/apps/blog/public/images/articles/pr-github-preview-deploy-url.jpeg b/apps/blog/public/images/articles/pr-github-preview-deploy-url.jpeg new file mode 100644 index 00000000..178875bc Binary files /dev/null and b/apps/blog/public/images/articles/pr-github-preview-deploy-url.jpeg differ diff --git a/apps/blog/public/images/articles/question-name-team.jpeg b/apps/blog/public/images/articles/question-name-team.jpeg new file mode 100644 index 00000000..fb2b54d5 Binary files /dev/null and b/apps/blog/public/images/articles/question-name-team.jpeg differ diff --git a/apps/blog/public/images/articles/raycast-applications-super-developer/featured.jpg b/apps/blog/public/images/articles/raycast-applications-super-developer/featured.jpg new file mode 100644 index 00000000..31a7e0d2 Binary files /dev/null and b/apps/blog/public/images/articles/raycast-applications-super-developer/featured.jpg differ diff --git a/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-1password.jpg b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-1password.jpg new file mode 100644 index 00000000..19a9aac3 Binary files /dev/null and b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-1password.jpg differ diff --git a/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-clipboard.jpg b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-clipboard.jpg new file mode 100644 index 00000000..7cbe0662 Binary files /dev/null and b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-clipboard.jpg differ diff --git a/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-github.jpg b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-github.jpg new file mode 100644 index 00000000..f5252e67 Binary files /dev/null and b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-github.jpg differ diff --git a/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-raindrop.jpg b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-raindrop.jpg new file mode 100644 index 00000000..37e3b0ea Binary files /dev/null and b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-raindrop.jpg differ diff --git a/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-spotify.jpg b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-spotify.jpg new file mode 100644 index 00000000..f90c65b9 Binary files /dev/null and b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-spotify.jpg differ diff --git a/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-tailwind-docs.jpg b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-tailwind-docs.jpg new file mode 100644 index 00000000..6a510cbc Binary files /dev/null and b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-tailwind-docs.jpg differ diff --git a/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-vercel-deployments.jpg b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-vercel-deployments.jpg new file mode 100644 index 00000000..5bc28081 Binary files /dev/null and b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-vercel-deployments.jpg differ diff --git a/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-vscode.jpg b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-vscode.jpg new file mode 100644 index 00000000..bef9c3d0 Binary files /dev/null and b/apps/blog/public/images/articles/raycast-applications-super-developer/raycast-vscode.jpg differ diff --git a/apps/blog/public/images/articles/you-have-something-in-you-the-world-needs/door-barriere.jpeg b/apps/blog/public/images/articles/you-have-something-in-you-the-world-needs/door-barriere.jpeg new file mode 100644 index 00000000..ed07fea4 Binary files /dev/null and b/apps/blog/public/images/articles/you-have-something-in-you-the-world-needs/door-barriere.jpeg differ diff --git a/apps/blog/public/images/articles/you-have-something-in-you-the-world-needs/face-sad.jpeg b/apps/blog/public/images/articles/you-have-something-in-you-the-world-needs/face-sad.jpeg new file mode 100644 index 00000000..16b8d472 Binary files /dev/null and b/apps/blog/public/images/articles/you-have-something-in-you-the-world-needs/face-sad.jpeg differ diff --git a/apps/blog/public/images/articles/you-have-something-in-you-the-world-needs/featured.jpeg b/apps/blog/public/images/articles/you-have-something-in-you-the-world-needs/featured.jpeg new file mode 100644 index 00000000..3c3411b0 Binary files /dev/null and b/apps/blog/public/images/articles/you-have-something-in-you-the-world-needs/featured.jpeg differ diff --git a/apps/blog/public/images/david-dias-banner.png b/apps/blog/public/images/david-dias-banner.png new file mode 100644 index 00000000..f10c643c Binary files /dev/null and b/apps/blog/public/images/david-dias-banner.png differ diff --git a/apps/blog/public/images/david-dias-round.jpg b/apps/blog/public/images/david-dias-round.jpg new file mode 100644 index 00000000..78882fc7 Binary files /dev/null and b/apps/blog/public/images/david-dias-round.jpg differ diff --git a/apps/blog/public/images/david-dias-round.png b/apps/blog/public/images/david-dias-round.png new file mode 100644 index 00000000..489e1044 Binary files /dev/null and b/apps/blog/public/images/david-dias-round.png differ diff --git a/apps/blog/public/images/notes/audiobinder-mp3-m4v/audiobinder-cover-view.jpg b/apps/blog/public/images/notes/audiobinder-mp3-m4v/audiobinder-cover-view.jpg new file mode 100644 index 00000000..45324a13 Binary files /dev/null and b/apps/blog/public/images/notes/audiobinder-mp3-m4v/audiobinder-cover-view.jpg differ diff --git a/apps/blog/public/images/notes/audiobinder-mp3-m4v/audiobinder-main-view.jpg b/apps/blog/public/images/notes/audiobinder-mp3-m4v/audiobinder-main-view.jpg new file mode 100644 index 00000000..2503e991 Binary files /dev/null and b/apps/blog/public/images/notes/audiobinder-mp3-m4v/audiobinder-main-view.jpg differ diff --git a/apps/blog/public/images/notes/audiobinder-mp3-m4v/audiobookshelf-screenshot.jpg b/apps/blog/public/images/notes/audiobinder-mp3-m4v/audiobookshelf-screenshot.jpg new file mode 100644 index 00000000..0d1370a2 Binary files /dev/null and b/apps/blog/public/images/notes/audiobinder-mp3-m4v/audiobookshelf-screenshot.jpg differ diff --git a/apps/blog/public/images/notes/set-output-nvmrc-github-actions.jpg b/apps/blog/public/images/notes/set-output-nvmrc-github-actions.jpg new file mode 100644 index 00000000..56499532 Binary files /dev/null and b/apps/blog/public/images/notes/set-output-nvmrc-github-actions.jpg differ diff --git a/apps/blog/public/images/notes/steam-deck-email-purchase.jpg b/apps/blog/public/images/notes/steam-deck-email-purchase.jpg new file mode 100644 index 00000000..16d543b7 Binary files /dev/null and b/apps/blog/public/images/notes/steam-deck-email-purchase.jpg differ diff --git a/apps/blog/public/images/og/background-01.jpg b/apps/blog/public/images/og/background-01.jpg new file mode 100755 index 00000000..0ab1494c Binary files /dev/null and b/apps/blog/public/images/og/background-01.jpg differ diff --git a/apps/blog/public/images/og/default.png b/apps/blog/public/images/og/default.png new file mode 100644 index 00000000..0afbfe8a Binary files /dev/null and b/apps/blog/public/images/og/default.png differ diff --git a/apps/blog/public/images/svg/arrow-narrow-right.svg b/apps/blog/public/images/svg/arrow-narrow-right.svg new file mode 100644 index 00000000..f96c1437 --- /dev/null +++ b/apps/blog/public/images/svg/arrow-narrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/blog/public/images/svg/arrow-up-right.svg b/apps/blog/public/images/svg/arrow-up-right.svg new file mode 100644 index 00000000..e7e478bd --- /dev/null +++ b/apps/blog/public/images/svg/arrow-up-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/blog/public/images/svg/fr-flag.svg b/apps/blog/public/images/svg/fr-flag.svg new file mode 100644 index 00000000..706d3ea5 --- /dev/null +++ b/apps/blog/public/images/svg/fr-flag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/blog/public/images/svg/github-fork.svg b/apps/blog/public/images/svg/github-fork.svg new file mode 100644 index 00000000..ac6677bc --- /dev/null +++ b/apps/blog/public/images/svg/github-fork.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/blog/public/images/svg/github-star.svg b/apps/blog/public/images/svg/github-star.svg new file mode 100644 index 00000000..7729b8e6 --- /dev/null +++ b/apps/blog/public/images/svg/github-star.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/blog/public/images/svg/info.svg b/apps/blog/public/images/svg/info.svg new file mode 100644 index 00000000..7fae3dcd --- /dev/null +++ b/apps/blog/public/images/svg/info.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/blog/public/images/svg/us-flag.svg b/apps/blog/public/images/svg/us-flag.svg new file mode 100644 index 00000000..cb52ca67 --- /dev/null +++ b/apps/blog/public/images/svg/us-flag.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/apps/blog/public/images/svg/warning.svg b/apps/blog/public/images/svg/warning.svg new file mode 100644 index 00000000..7fae3dcd --- /dev/null +++ b/apps/blog/public/images/svg/warning.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/blog/public/images/tags/nextjs.png b/apps/blog/public/images/tags/nextjs.png new file mode 100644 index 00000000..331bf11d Binary files /dev/null and b/apps/blog/public/images/tags/nextjs.png differ diff --git a/apps/blog/public/images/uses/1password.png b/apps/blog/public/images/uses/1password.png new file mode 100644 index 00000000..e57e7aff Binary files /dev/null and b/apps/blog/public/images/uses/1password.png differ diff --git a/apps/blog/public/images/uses/alfred.png b/apps/blog/public/images/uses/alfred.png new file mode 100644 index 00000000..0fb31fbe Binary files /dev/null and b/apps/blog/public/images/uses/alfred.png differ diff --git a/apps/blog/public/images/uses/cleanshotx.png b/apps/blog/public/images/uses/cleanshotx.png new file mode 100644 index 00000000..3ec03d77 Binary files /dev/null and b/apps/blog/public/images/uses/cleanshotx.png differ diff --git a/apps/blog/public/images/uses/desk-david-dias.jpg b/apps/blog/public/images/uses/desk-david-dias.jpg new file mode 100644 index 00000000..0ed88612 Binary files /dev/null and b/apps/blog/public/images/uses/desk-david-dias.jpg differ diff --git a/apps/blog/public/images/uses/devonthink.png b/apps/blog/public/images/uses/devonthink.png new file mode 100644 index 00000000..1511bd8f Binary files /dev/null and b/apps/blog/public/images/uses/devonthink.png differ diff --git a/apps/blog/public/images/uses/eagle.png b/apps/blog/public/images/uses/eagle.png new file mode 100644 index 00000000..15337d43 Binary files /dev/null and b/apps/blog/public/images/uses/eagle.png differ diff --git a/apps/blog/public/images/uses/fantastical.png b/apps/blog/public/images/uses/fantastical.png new file mode 100644 index 00000000..abc0abef Binary files /dev/null and b/apps/blog/public/images/uses/fantastical.png differ diff --git a/apps/blog/public/images/uses/final.png b/apps/blog/public/images/uses/final.png new file mode 100644 index 00000000..66137f54 Binary files /dev/null and b/apps/blog/public/images/uses/final.png differ diff --git a/apps/blog/public/images/uses/iterm.png b/apps/blog/public/images/uses/iterm.png new file mode 100644 index 00000000..fd5c6db0 Binary files /dev/null and b/apps/blog/public/images/uses/iterm.png differ diff --git a/apps/blog/public/images/uses/logic.png b/apps/blog/public/images/uses/logic.png new file mode 100644 index 00000000..5a4258ba Binary files /dev/null and b/apps/blog/public/images/uses/logic.png differ diff --git a/apps/blog/public/images/uses/notion.png b/apps/blog/public/images/uses/notion.png new file mode 100644 index 00000000..0e76258f Binary files /dev/null and b/apps/blog/public/images/uses/notion.png differ diff --git a/apps/blog/public/images/uses/obsidian.png b/apps/blog/public/images/uses/obsidian.png new file mode 100644 index 00000000..5e9bcbda Binary files /dev/null and b/apps/blog/public/images/uses/obsidian.png differ diff --git a/apps/blog/public/images/uses/raycast.png b/apps/blog/public/images/uses/raycast.png new file mode 100644 index 00000000..291ca00c Binary files /dev/null and b/apps/blog/public/images/uses/raycast.png differ diff --git a/apps/blog/public/images/uses/tower.png b/apps/blog/public/images/uses/tower.png new file mode 100644 index 00000000..ed054294 Binary files /dev/null and b/apps/blog/public/images/uses/tower.png differ diff --git a/apps/blog/public/images/uses/vscode.png b/apps/blog/public/images/uses/vscode.png new file mode 100644 index 00000000..99dedf37 Binary files /dev/null and b/apps/blog/public/images/uses/vscode.png differ diff --git a/apps/blog/public/robots.txt b/apps/blog/public/robots.txt new file mode 100644 index 00000000..b204ce70 --- /dev/null +++ b/apps/blog/public/robots.txt @@ -0,0 +1,9 @@ +# * +User-agent: * +Allow: / + +# Host +Host: https://thedaviddias.dev + +# Sitemaps +Sitemap: https://thedaviddias.dev/sitemap.xml diff --git a/apps/blog/public/rss/feed.json b/apps/blog/public/rss/feed.json new file mode 100644 index 00000000..935f40fa --- /dev/null +++ b/apps/blog/public/rss/feed.json @@ -0,0 +1,254 @@ +{ + "version": "https://jsonfeed.org/version/1", + "title": "The David Dias | Front-End Developer, podcaster & content creator", + "home_page_url": "https://thedaviddias.dev", + "feed_url": "https://thedaviddias.dev/rss/feed.json", + "description": "Hey, I'm David Dias! Front-End Developer based in Toronto/Canada. I love talking about code, technology, expatriation and life.", + "icon": "https://thedaviddias.dev/favicons/android-chrome-144x144.png", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + }, + "items": [ + { + "id": "https://thedaviddias.dev/notes/methodology-principle-user-first", + "content_html": "

You've probably heard about "mobile first", "content first", "design first", etc. But have you heard about "user first"? I think it's the most important principle of all.

\n

"User First" is a methodology and principle where you put the user first in everything you do.

\n
    \n
  • Wondering about creating a new feature? Ask your users.
    • \n
  • Wondering what could bring your user's friend to your platform? Ask your users.
    • \n
  • Wondering what could make your user not using your platform anymore? Ask your users.
    • \n
\n

You get the idea.

\n

So why some businesses continue to do the opposite? Why some businesses continue to do what they think is best for their users without asking them? Sometimes it can a business think they know better what users want.

\n

I sometimes hear "our users don't know what they want, they always complain...". Well, if they complain, it's because they want something else.

\n

User needs creates businesses and businesses create user needs. It's a virtuous circle. If you don't listen to your users, you will lose them. And not excuses will make up for failing to listen to them.

", + "url": "https://thedaviddias.dev/notes/methodology-principle-user-first", + "title": "The Methodology and Principle of \"User First\"", + "summary": "User First\" approach puts users at the heart of all decisions. Engage with them to understand needs, ensuring your business remains relevant and loved.", + "date_modified": "2023-07-17T03:41:52.479Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/notes/how-to-convert-mp3-to-m4b-for-audiobooks", + "content_html": "

Depending on the platform, sometimes you may get audiobooks in MP3 format. However, MP3 is not the best format for audiobooks. It doesn't support chapters, and it's not bookmarkable. M4B is the best format for audiobooks. It supports chapters and is bookmarkable. It's also the format used by Apple for audiobooks.

\n

Last year, I discovered the only MacOS that simply convert multiple MP3 files into one M4B file. It's called AudioBookBinder App Store page and can be found on the App Store for free!

\n

How to use AudioBookBinder?

\n

AudioBook Binder is a simple app that does one thing and does it well. It converts MP3 files into M4B files. You drag your MP3 files into the app, and the cover, and it will convert them into one M4B file.

\n

\"AudioBookBinder
AudioBookBinder Files View
\n
\"AudioBookBinder
AudioBookBinder Cover View

\n

The options are limited but sufficient. You can set the cover, the title, the author, and the genre. I usually leave it to "Audiobook" for the genre.

\n

I hope you find this app useful as I did.

\n

And in case you store some audiobooks on your own server, you take a look at audiobookshelf. It's a Google and Apple app that allows you to listen to your audiobooks from your own server. It's open-source and free. You're welcome!

\n

\"Audiobookshelf\"
Home page of Audiobookshelf

", + "url": "https://thedaviddias.dev/notes/how-to-convert-mp3-to-m4b-for-audiobooks", + "title": "How to Convert MP3 to M4B for Audiobooks lovers, on MacOS?", + "summary": "Explore \"AudioBookBinder\", a handy MacOS app designed for making audiobooks. It quickly turns MP3 files into M4B format, making audiobook creation a breeze.", + "date_modified": "2023-07-16T21:04:32.187Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/notes/stop-using-thematic-break-to-design-horizontal-line", + "content_html": "

I have seen way too many times people using the <hr> HTML element, which is called "thematic break" instead of CSS.

\n

Using the HTML <hr> tag purely for designing horizontal lines is an incorrect practice.\nThe real purpose of the <hr> tag is to denote a thematic break in the content (like between paragraphs), not just to visually create a horizontal rule.

\n

If you need a decorative line, CSS is a more appropriate choice.

\n

For instance:

\n
<div class="styled-line">Some content</div>\n
\n

Example CSS:

\n
.styled-line {\n  border-bottom: 1px solid #000;\n  margin: 1em 0;\n}\n
\n

You generally don't want to have a single empty <span> or <div> element just to style it as a horizontal line. Often times, you can just use a bottom border on the element above it.

\n

In terms of accessibility, using <hr> as a design element can confuse screen reader users, as it indicates a "thematic break".

\n

Semantics are important, not only for accessibility but also for SEO. So, please, stop using the <hr> tag to design a horizontal line!

", + "url": "https://thedaviddias.dev/notes/stop-using-thematic-break-to-design-horizontal-line", + "title": "Stop using the \"
\" tag to design a horizontal line!", + "summary": "It's sometimes easy to forget that UI doesn't dicated semantics. In this article I'll show you how to use the \"
\" tag properly.", + "date_modified": "2023-06-01T04:38:32.569Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/notes/how-to-fix-set-output-nvmrc-github-actions", + "content_html": "

You may be getting the issue "The set-output command is deprecated and will be disabled soon. Please upgrade to using Environment Files." from your Github workflow.

\n

\"Screenshot

\n

Few months ago, I choose to update some of my Github workflows to read from my .nvmrc file instead of manually specifying my node version.

\n
on: push\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Detect Node version\n        run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)\n        id: nvmrc\n\n      - name: Use Node.js ${{ steps.nvmrc.outputs.NODE_VERSION }}\n        uses: actions/setup-node@v3\n        with:\n          node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}\n
\n

But since October 2022 and the runner version 2.298.2, Github shows a warning regarding a future depreciation of the set-output command.

\n

After few trials, I figured out how to update using the $GITHUB_OUTPUT instead:

\n
on: push\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Detect Node version\n        run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT\n        id: nvmrc\n        # shell: bash (to be added if you use composite actions)\n\n      - name: Use Node.js ${{ steps.nvmrc.outputs.NODE_VERSION }}\n        uses: actions/setup-node@v3\n        with:\n          node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'\n
\n

And "voilà", the warning should have disappeared and you should see the number of the version right after Use Node.js XXXX in your workflow.

", + "url": "https://thedaviddias.dev/notes/how-to-fix-set-output-nvmrc-github-actions", + "title": "How to fix \"set-output\" when reading nvmrc from the GitHub Actions?", + "summary": "Find out how to fix the deprecated set-output when you read the Nodejs version from your .nvmrc file in Github workflows.", + "date_modified": "2023-01-04T04:38:32.569Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/notes/how-to-fix-post-pre-build-pnpm", + "content_html": "

When recently working on my blog, I tried to add a postbuild scripts with next-sitemap in my package.json. My goal was to automatically generate .xml files after each Next.js builds.

\n

Using pnpm, I found out that my postbuild was working with npm but not pnpm.

\n

I found out this issue on Github mentionning the same problem I encountered. It seems that pre/posts scripts are not activated if using pnpm.

\n

I found the solution adding the line below in my .npmrc local file:

\n
enable-pre-post-scripts=true\n
\n

Now I can use pre/posts scripts and pnpm. I hope this could save you some time!

", + "url": "https://thedaviddias.dev/notes/how-to-fix-post-pre-build-pnpm", + "title": "How to fix \"postbuild\" and \"prebuild\" not working with pnpm?", + "summary": "Find out what I had to update to use pre and posts scripts with pnpm.", + "date_modified": "2022-07-30T04:38:32.569Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/notes/finally-received-steam-deck-confirmation-email", + "content_html": "

This was a long wait! After months of lurking on Youtube watching others playing with their Deck, I finally got my purchase confirmation email for the Steam Deck!

\n

\"\"

\n

What kept me sane during this time was probably this tool created by Labidou51. I was able to get a sense of when I would receive the email confirmation.

\n
View post on Twitter
\n

Some more days to wait and I hope to get this new amazing piece of tech (it's a computer) in my own hands! Maybe I can find a nice skin on Dbrand in the meantime 😜?!

", + "url": "https://thedaviddias.dev/notes/finally-received-steam-deck-confirmation-email", + "title": "Finally received my Steam Deck confirmation email!", + "date_modified": "2022-07-28T15:47:33.508Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/articles/decade-web-development-personal-journey-showcase", + "content_html": "

I published my first website around 2001. Probably before that. Almost 20 years ago. Unfortunately, the exact date I started doing web development is probably lost by now.

\n

Everything began when my dear friend, Christophe Raimbault, a priest in the Diocese of Tours, asked if I was interested in managing and building a website for the "Notre-Dame La Riche" parish. If you are not too familiar with what a parish is, it's mostly a local community of different churches. At the time, this sounded like an amazing challenge but I had no idea what I was getting into. I had never touch a line of code before, I was only 15 years old. I never stopped coding since then.

\n

The following list of websites are the ones that had the most impact on my life. I build a lot more websites but smaller and less important. I'm not including them here.

\n

"Notre-Dame La Riche" parish website (2000-2005)

\n

"Notre-Dame La Riche" parish website was my first website. At the time, no blogs, no Google, no Github... most of my time was dedicated in studying code source of other websites, reading books about HTML, CSS, PHP. It was definitelly a fun time. I was learning a lot, things seemed to be a lot more simple than nowadays.

\n

\"\"
Me presenting the website in 2005

\n

I still have some code source and I can't bear looking at it just for few seconds 🤣: CSS mixed with HTML, no version control, layouts build with tables... as I said, it was fun but I'm glad things have changed. The website had multiple refactoring along the years. I remember having some animated banners build with Flash.

\n

\"\"
Notre-Dame La Riche parish website in 2004

\n

\"\"
Notre-Dame La Riche parish website in 2005

\n
    \n
  • Internet Archive URL: https://web.archive.org/web/20050204174756/http://paroissendlr-tours.cef.fr/
    • \n
  • Stack: HTML, CSS, PHP, MySQL
    • \n
  • Current URL: https://paroisse-ndlr-scel.jimdo.com/
    • \n
\n

WikiKto (2005-2006)

\n

Wikipedia was launched in 2001. At this time, wikis were popular and Wikipedia was just beginning. I remember how much criticism this community project received. For many reasons that I have somewhat forgotten, I decided to create a dedicated wiki related to Catholic knowledge. I named it WikiKto (Kto is the French abbreviation for Catholic).

\n

To my great surprise, the project gained a lot of contributors. I was no longer alone. I was not the only one who thought that a wiki about Catholic knowledge was a good idea. I was not the only one who believed that Catholic knowledge should be shared and made accessible to everyone.

\n

The project was officially launched on May 13, 2005. I had to shut it down a little over a year later when I moved to Brazil and could no longer manage it.

\n

\"\"
WikiKto homepage in French
\n
\"\"
WikiKto homepage in English

\n
    \n
  • Internet Archive URL (French): https://web.archive.org/web/20060207015812/http://fr.wikikto.org/index.php/Accueil
    • \n
  • Internet Archive URL (English): https://web.archive.org/web/20051227152637/http://en.wikikto.org/index.php/Main_page
    • \n
  • Internet Archive URL (Portuguese - Launched October 12, 2006): https://web.archive.org/web/20070917013037/http://br.wikikto.eu/index.php/P%C3%A1gina_principal
    • \n
  • Stack: MediaWiki, PHP, MySQL
    • \n
  • Old URL: http://wikikto.org/
    • \n
\n

WikiKtosource (2005-2006)

\n

WikiKtosource was launched few weeks after WikiKto and was the equivalent to Wikimedia. It was a wiki dedicated to offer open source resources for the catholic community. It was a place to share and download resources like images mainly.

\n

\"\"

\n
    \n
  • Internet Archive URL (French): https://web.archive.org/web/20060207032908/http://fr.wikiktosource.org/index.php/Accueil
    • \n
  • Old URL: http://wikiktosource.org/
    • \n
\n

David Dias Blog (2010 to today)

\n

I created a first version of my personal blog in 2010. Few months before I started my first job as a web developer. For many years, creating new content and maintaining a blog has been a challenge for me with so many things and ideas to create. The current version of my blog (2022-2023) is probably the one that finally got the most attention to me.

\n

\"\"
David Dias Blog in 2012
\n
\"\"
David Dias Blog in 2015
\n
\"\"
David Dias Blog in 2020

\n
    \n
  • Stack: from Wordpress, to Gatsby (2020) and Next.js (2022)
    • \n
\n

França Brasileira (2009-2011)

\n

\"\"

\n

Back from Brazil, I decided to create a forum to help Brazilians to move to France and to connect to other Brazilians living in France. Thanks to all my contacts made in Brazil, I was able to get a lot of exposure and the forum and blog got very popular.

\n
    \n
  • Internet Archive URL: https://web.archive.org/web/20111210020959/http://www.francabrasileira.com/
    • \n
  • Stack: Workpress, PHP, MySQL
    • \n
  • Old URL: http://www.francabrasileira.com/
    • \n
\n

Frontenddeveloper (2013-2014)

\n

frontenddeveloper.fr was another trial to create a blog about front-end development. I was not very active on it and I decided to close it after few months.

\n

\"\"

\n
    \n
  • Internet Archive URL: https://web.archive.org/web/20130205064050/http://frontenddeveloper.fr/
    • \n
  • Stack: Workpress, PHP, MySQL
    • \n
  • Old URL: http://frontenddeveloper.fr/
    • \n
\n

Front-End Checklist (2017 to today)

\n

The Front-End Checklist is an open-source project I created just few month before leaving Mauritius. Initially build for my frontend team, it became a worlwide and very popular project around the globe. I have been meaning to build a V2, more modern and with a better user experience. Not sure if and when I will have time to do it.

\n

\"\"

\n
    \n
  • Stack: HTML, CSS, JavaScript
    • \n
  • Current URL: https://frontendchecklist.io/
    • \n
\n

World Web Stories (2021 to today)

\n

I officially start the podcast World Web Stories when I was living in Mauritus, in 2016. I was not very active, only had 5 episodes and it was in French. In 2021, unemployed for few weeks, I decided to relaunch the podcast in English with a new format and with the goal to interview one person from each country in the world.

\n

Unfortunately, I choose to spend more time on my other podcast "Erreur 200". I still want to continue this project, but I'm not sure when I will.

\n

\"\"

\n
    \n
  • Stack: Gatsby, React
    • \n
  • Current URL: https://worldwebstories.com/
    • \n
\n

Erreur 200 (2021 to today)

\n

Erreur 200 is a French podcast I co-host with Jean-Rémy Duboc about web development. We talk about our experience, our mistakes, our successes, our tips and tricks. We also interview people from the web development community.

\n

\"\"

\n
    \n
  • Stack: Gatsby, React
    • \n
  • Current URL: https://erreur200.com/
    • \n
\n

Conclusion

\n

Looking back more than 10 years, I'm very proud and grateful for all the opportunities and projects I had the chance to work on. I'm also very grateful for all the people I met along the way. Those projects shaped in a way my career and life and I'm not even mentionning all the professional projects I've worked on.

", + "url": "https://thedaviddias.dev/articles/decade-web-development-personal-journey-showcase", + "title": "My Decade in Web Development: A Personal Journey and Showcase", + "summary": "Dive into my decade-long journey in web development, chronicling key projects that have shaped my career.", + "image": "https://thedaviddias.dev/images/articles/decade-web-development-personal-journey/featured.jpg", + "date_modified": "2023-07-16T21:43:28.398Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/articles/raycast-applications-super-developer", + "content_html": "

Spolight on Mac is great, but it always lacked the possibility to add custom commands and third party access. And that's where Alfred comes in. It's a great application that allows you to do just that. I have been a big fan of "Alfred" at least since 2015. I would recommend this application to anyone who wants to be more productive on their Mac. I was a big fan!

\n

But few months ago, one of my colleague talked to me about Raycast. Eager to always find better tools and expand my productivity, I decided to give it a try. The first thing I noticed was the speed. Not that "Alfred" is slow, but Raycast was just blazing fast!

\n

I was hooked! And when I found out that all the applications were build in TypeScript, this was the cherry on the cake! After a few weeks now using it, I don't see myself going back.

\n

And today, I wanted to share with you the 10 applications I use the most in Raycast, on a daily basis. Those applications are more towards developers but I highly recommend you to check Raycast out (it's free)

\n

One Password

\n

\"\"

\n

1Password has been my password manager for many years. I can search, copy username or password, open the website. The only annoying part is the fact that 1Password always ask me to give access to the application. Annoying but still useful.

\n

TailwindCSS Docs

\n

\"\"

\n

I use TailwindCSS and nothing better than opening the TailwindCSS documentation directly from Raycast. I could search directly on the website but this saves me some clicks.

\n

Github

\n

\"\"

\n

Open pull requests, notifications, discussions from Github... I can also search directly repositories from Raycast.

\n

Spotify

\n

\"\"

\n

Play, pause, stop, next... I can control Spotify directly from Raycast. This is something I was always using on Alfred, couldn't approve Raycast if I didn't have this option.

\n

Raindrop

\n

\"\"

\n

Raindrops is my favourite bookmark manager. The kind of tool that constantly adds new features. I can search, open, add new bookmarks directly from Raycast with the Raindrop application.

\n

Vercel

\n

\"\"

\n

I love seeing the status of my deployment on Vercel from Raycast. Can directly open my projects too.

\n

Visual Studio Code

\n

\"\"

\n

I use "Visual Studio Code" Raycast App in combinaison with "Project Manager" to quickly access all my projects in an instant.

\n

Bonus: Clipboard History

\n

\"\"

\n

This is not an application, but a feature I loved on Alfred and actually exists on Raycast, even it's slighly less powerful.

\n

"Clipboard History" give you access to your last copied items. I've assign the double ⌥ (action) key to open the clipboard history. This is a feature I use constantly, and I'm glad it's available on Raycast.

", + "url": "https://thedaviddias.dev/articles/raycast-applications-super-developer", + "title": "Raycast Applications That Will Make You a Super Developer!", + "summary": "Raycast is one of the best tool if you want to speed up your productivity on Mac. Here are the 10 applications I use the most in Raycast, on a daily basis.", + "image": "https://thedaviddias.dev/images/articles/raycast-applications-super-developer/featured.jpg", + "date_modified": "2023-06-12T23:59:58.501Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/articles/beyond-user-testing-leveraging-frontend-experience", + "content_html": "

User testing is a crucial tool for gathering feedback on a product, but it's not enough to truly understand and improve user engagement. For the past 13 years, I have been building multi-language platforms for international brands and for a wide variety of users. Even in a space that constantly changes, where users have evolving needs, it's important to also acknowledge the role that experience plays in understanding them.

\n

\"\"
Photo by Marvin Meyer on Unsplash

\n

Being a Front-End Developer gave me and all my colleagues around the world a unique perspective on user experience. We understand how small design decisions can have a big impact on the user experience, and we have a deep understanding of how users interact with products. By leveraging our experience in front-end development, we can help create products that are not only effective but also enjoyable to use, leading to increased user satisfaction and loyalty.

\n

The limits of user testing

\n

User testing is a critical component of product development that can help identify usability issues and gather feedback from real users. By testing products with representative users, product teams can gain valuable insights in how users interact with their interfaces and what their pain points are. Whatever you use services like User Testing, or your own user testing directly with regular users, user testing also possess some limits that can’t be overlooked.

\n

For example, users may not always be able to articulate their needs and preferences accurately, or identify more obvious usability issues that sometimes are more subtle or hidden. User testing is also typically conducted in a controlled environment, which may not always accurately reflect real-wold usage scenarios.

\n

What about people that don’t use technology in a daily basis?

\n

Usually user testing is done by a certain user group or demographics and don’t include 100% of all users. From my point of view, user testing can’t be really complete without testing with people with disabilities. For people with experience in doing accessibility testing with real users, I’m sure you will agree that.

\n

User testing can lead to success or failure

\n

Through Internet history, user testing had lead to create successful products:

\n
    \n
  • Slack (which I daily use) is a popular communication tool. During its development, Slack's team conducted user testing to identify usability issues and gather feedback from its target users. This feedback helped them make improvements to the platform, resulting in a product that was easier to use and more engaging for its users.
    • \n
  • Dropbox is a cloud storage platform that allows users to store, share, and collaborate on files. Dropbox's team used user testing to identify pain points and improve the user experience, resulting in a product that was more intuitive and engaging for its users.
    • \n
  • And a lot more…!
    • \n
\n

But user testing can also fail to uncover critical usability issues which can contribute to the failure of some projects:

\n
    \n
  • Google Wave was a communication and collaboration platform that was introduced in 2009. User testing suggested that users would appreciate the platform's advanced features and integration with other Google products, but when it was released to the market, users found the platform confusing and difficult to use, leading to low adoption rates and eventually the discontinuation of the product in January 2018.
    • \n
  • The Amazon Fire Phone was a smartphone introduced by Amazon in 2014. User testing suggested that users would appreciate the phone's unique features, such as the dynamic perspective display, but when it was released to the market, users found the phone overpriced and underwhelming, leading to poor sales and eventually the discontinuation of the product. The lack of empathy towards the users needs was also part of the reasons why it failed.
    • \n
  • Twitter timeline algorithm: In 2016, Twitter also faced public outrage when they introduced an algorithm-based timeline, which did not align with users' preferences for a chronological timeline that allowed them to see real-time tweets in ascending order.
    • \n
\n

Building a successful project is not an easy task, a lot of factors can influence the success or the failure of a new product. Nowadays, users have different needs. Users switch faster to competitor then before, we have daily examples of that.

\n

User testing is one tool in companies belt that should be used as often as possible, but shouldn’t be the only one.

\n

Leveraging Front-End experience

\n

Front-End Developers (FED) are not just coders. Usually seen as the ones that “just” integrate designs into HTML, CSS and JavaScript, their t-shape personalities is often times overlooked (not all FES have t-shape skills though).

\n

A FED can play a critical role in creating engaging user experiences.

\n

Collaboration and communication for better user engagement

\n

As I said in my previous article about Front-End Developers, Web and UX/UI Designers collaboration, collaboration and communication is key in building a successful product.

\n

This collaborative approach allows different perspectives to merge and create a more holistic vision of the product. As Front-End Developers, we have the unique position of working at the intersection of design and technology. We are often the ones who bring the designers' visions to life while ensuring that the product remains functional and user-friendly.

\n

Front-end development is about more than just making things look good. It's about creating a seamless and intuitive interface that guides users through a product. Every button, every transition, every piece of interactive content is a chance to engage users and keep them invested in the product.

\n

The Benefits of Leveraging Front-End Experience

\n

Front-end developers have a deep understanding of user behavior, as they are responsible for creating the interactive elements that users engage with. They can use this knowledge to create more engaging user interfaces and to guide user testing to focus on areas of the product that are most likely to affect user engagement.

\n

Beyond just implementing designs, a seasoned FED can provide insights and suggest improvements to the UX/UI designs based on their knowledge of what is technically feasible and what would create a smoother user journey. They can spot potential pitfalls in the designs that might be overlooked during user testing.

\n

For example, a developer might notice that a particular design element could cause issues on certain devices or browsers. They might also suggest an alternative way of implementing a feature that enhances the user's experience. I have been advocating about accessibility for years now. Last year, I became CPACC certified and I continue to advocate for accessibility in my daily work. Not everyone understand what web accessibility is and how it impacts users. It takes time and effort to educate people about it.

\n

The Future of User Engagement

\n

As technology advances, users' expectations also rise. They demand faster, smoother, and more intuitive interfaces. User testing will always be a vital tool for gathering feedback, but to meet these evolving demands, we need to go beyond testing.

\n

Incorporating the front-end developer's expertise into the design process and user testing can help create a product that not only meets the users' needs but also provides an engaging and satisfying experience.

\n

We must continue to push the boundaries, experiment with new technologies, and constantly seek ways to better understand and improve user engagement. Only by doing this can we hope to create products that users will love to use.

\n

Front-End Developers bring a valuable perspective to the product development process. Let's use it to its fullest potential to create engaging, user-friendly products. After all, the success of any product lies in the satisfaction of its users.

\n
\n

At the end, user engagement is not just about the single experience of a product but the entire journey. It's about creating an engaging, intuitive, and satisfying journey that users want to return to again and again. And Front-End Developers play a crucial role in crafting this journey.

\n

Remember, user testing is a part of the journey, not the destination. We must use all the tools at our disposal, and that includes leveraging the front-end development experience to truly understand and improve user engagement.

\n

Let's continue to build with the user in mind, always striving to enhance their journey, their experience, and ultimately, their engagement.

\n

Resources

\n", + "url": "https://thedaviddias.dev/articles/beyond-user-testing-leveraging-frontend-experience", + "title": "Beyond User Testing: Leveraging Frontend Experience", + "summary": "For over a decade, I've been collaborating with web designers, and it's clear that we sometimes have differing perspectives. 'User testing' often takes center stage in decision-making, with the rich insights of frontend experience taking a backseat. But here's the thing - collaboration is pivotal. Recognizing the value that frontend developers bring is crucial for any team aiming to succeed in our fast-paced digital age.", + "image": "https://thedaviddias.dev/images/articles/beyond-user-testing-leveraging-frontend-experience/table-computers.jpg", + "date_modified": "2023-06-01T13:07:27.957Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/articles/how-front-end-developers-ui-ux-could-better-collaborate-together", + "content_html": "

The web has changed so much in the past 10 years. Technology has enabled new usages, new ways of communication, new ways of seeing the world. Web Design trends are also constantly changing, every year we see new trends that sometimes stick for few years, sometimes they don’t. The same happened in web development: we’ve seen new JavaScript frameworks, new ways to build components, new ways to code CSS, using pre or post-processors. The list is almost infinite. But something that has not changed is the need for collaboration between people working on the same web project.

\n

\"\"
Photo by Josh Calabrese on Unsplash

\n

As a Front-End Developer, I had the chance to work with numerous Web Designers and UX/UI designers over my career. No matter if I was in Brazil, France, Mauritius or Canada, I have observed the same challenges over and over again. And one unique solution doesn’t always apply to similar situations. You need to find what works best for you.

\n

In this article, I want to share some topics I believe should be discussed. From my point of view, we, as web professionals want the same thing: build accessible and performant products that will provide the best user experience possible.

\n

If you want your product to work, to get revenues, then you should start with the above goal first, not the other way around.

\n

But let’s start with some definitions.

\n

What is a Web Designer?

\n

\"\"
Photo by Eftakher Alam on Unsplash

\n

A lot of people could probably define what is a Web Designer better than I. But from my perspective, as a Front-End Developer, a Web Designer is someone with extensive skills in design that understands the constraints and the possibilities given by the web. I’ve seen a lot of really good “designers” but who were not always able to fully understand the “web” part of their title. Designing for the web is far from being straightforward. Be familiar with how to use Sketch or Figma is surely part of being a Web Designer, but it’s unfortunately not enough. And honestly, for me it’s totally fine: you learn as you progress.

\n

Probably, from my point of view, a Web Designers shouldn’t just rely on his knowledge and put pressure on himself to know everything about the web. That’s where a Front-End Developer can come into play. Front-End Developers are the ones that spend their time on the web, scrolling, studying code, finding new ways of building components… They are the perfect buddies of Web Designers, and both should be pairing regularly.

\n

What is a UX/UI Designer?

\n

\"\"
Photo by Kelly Sikkema on Unsplash

\n

A UX/UI Designer is someone where focus lays on users. Nothing should be more important than the user, the person, the human. A UX Designer needs to spend a lot of his time doing researches. I’ve always considered that a good UX/UI Designer should be passionate about people, what they want, how they want things… Of course, you also have the word “designer” in the title, because in the context we are talking about, a UX/UI Designer has the task to understand the user and also know what works the best in terms of UI. Something that works for a website dedicate to moms may not work for a website which main users are teens.

\n
\n

I’ve always considered that a good UX/UI Designer should be passionate about people, what they want, how they want things.

\n
\n

But he is not the only one who has developed an understanding of what users prefer and are used to when they browse the Internet. When a Front-End Developer wants to create a piece of code, a component, he usually dives into his structured memory of patterns. When someone says “button”, it triggers in his brain all the times (thousands of) he clicked on a button, but also snippets of CSS code that can be used to create a button or the long hours he spent analyzing CSS framework documentation…

\n

Front-End Developers can be a huge asset for any UX/UI Designer because they’ve learned so much about the web and usual patterns from a different perspective.

\n

What is a Front-End Developer?

\n

\"\"
Photo by Nubelson Fernandes on Unsplash

\n

I know a lot of people that could potentially disagree with my definition. For me, a Front-End Developer is a builder, someone that loves building web content using a combination of multiple skills. Because a Front-End Developer is not just a coder. To be a Front-End Developer you need to learn HTML, CSS, JavaScript but these are just the basics. You need to understand how to make a website accessible, how to use CSS to create an amazing layout, how to translate a design file to CSS, how to keep your application performant, how to build a UI/pattern library… the list is long but I’m sure you get my point.

\n

A Front-End Developer is the backbone of any web content. Without a Front-End Developer, the website couldn’t be created (even if you use a no-code generator, a Front-End Developer had to create the UI).

\n

Does that mean that a Front-End Developer is more important than other people in their team? Absolutely not, but his role requires him to be a facilitator, to understand what he can provide for the rest of his team.

\n

A Web Designer, UX/UI and Front-End Dev enter together in a bar…

\n

Now that we have a better idea of what these roles represent, how do we make them work together in a way that they feel empowered and enjoying the collaboration?

\n

It’s about mindset

\n

Any athlete will tell you that mindset is everything to achieve their goals, to win championships, to perform better. This is not that different when it’s about working as a team. Everyone’s mindset is important within a team. But it’s something that the group itself doesn’t have any control. Only individuals can decide to have an open mind, a true relationship with the other member of the team, visualize solutions instead of problems…

\n

We often forget that we all have a common goal. Sure, we can also have multiple goals for ourselves but if you are part of a team, it’s only to achieve a common goal.

\n

Differences are what make this specific group worth existing. EVERYONE has a role to play in any team.

\n

It’s about culture

\n

But it’s not only about individual mindsets. A team with a Web Designer, UX/UI and developers are usually part of a corporation. All over the world, numerous companies understand and value their culture. This is an essential part to guide employees towards common goals and achieve specific tasks.

\n

If companies provide the tools and the support to create trust and equality between the members of a team, then it makes it easier for people to collaborate together and learn from each other.

\n

It’s about ego

\n

Aaah the ego! Some people say that a bad reputation can hurt any company, I believe ego can hurt sometimes even more. The ego is one of the biggest enemies of any company, team or leadership group. I had the displeasure to work with 1–2 people during my career with a pretty big ego.

\n

I will always feel the pain these people have caused, it’s important to make peace with any related event but also with them. After all, we are all humans.

\n

Ego shouldn’t exist in a team. Period.

\n

It’s about collaboration

\n

Collaboration is knowing that people are better than you in certain areas. It’s knowing that you can learn from them. It’s knowing that you can also give something to them. Collaboration is finding the balance and putting everything and everyone at the center of the group.

\n

And no, collaboration is not something you implement once and it’s done, everything will always work perfectly. Collaboration is an equilibrist performance that could go wrong at any time. But you have to keep going because it’s so rewarding when you succeed!

\n

How to get your team to work together?

\n

Before giving you some answers, I want to tell you about two of the best experiences I had during my career with Web / UX / UI Designers.

\n

\"\"
Photo by Kaleidico on Unsplash

\n

My two best experiences with Designers

\n

My first best experience was in August 2014, in Cincinnati, USA. I’ve worked for a month with Barefoot Proximity to build a new platform. Julie Tran, which was leading the project in terms of design would create pieces of design, sent them to me for prototyping and we would discuss around that. What made the experience amazing was the level of exchange and collaboration.

\n

It wasn’t just about, “Hey, here is the design”, it would be more “hey, here is the design, can you do a quick prototype to see if that works. Let me know if you see any problems that may occur for mobile, accessibility etc…”.

\n

I was able to give my feedback based on my knowledge and experience, Julie would also push back when I would be hesitant to test a particular approach. Combining our visions, being open with each other was what made this project successful. Even with my English being pretty basic at this time, we both enjoyed our work and I kept only good memories from that collaboration.

\n

My second best experience was in 2015, with Julia Bruyneel, who was working in Paris as a Web/UX Designer freelancer. I was in Mauritius for a month and we had to collaborate for few weeks on new designs for an existing project.

\n

Even with the distance, and not knowing each other before, Julia would contact me and exchange about designs she would have made. That simple communication and regular exchange were reassuring for me (was lead on that project for 3 years) but also a manifestation of maturity and professionalism from Julia. It was short but I kept good memories of that collaboration.

\n

Mindset, culture and processes

\n

The three main keys, from my unique point of view, to have successful teams rely on mindset, culture and processes.

\n

\"\"
Mindset, culture and processes are the 3 keys for better collaboration

\n

Mindset: If you want to have people working together, in collaboration, using each other experience and vision, they need to have a similar mindset. I’m not saying an “identical mindset” or “same personalities”, I’m saying “similar mindset”. When everyone understands the goal of the team and is open to see each human behind his title, then you have more probabilities to have a successful team.

\n

Culture: Sometimes, having a similar mindset is not possible or challenging. In that case, is the responsibility of the structure or company to influence a specific mindset. Companies can decide who should be part of the “family”. That’s why the recruitment process is important.

\n

Processes: a lot of people I know, hate the word processes. For me, processes have always mean freedom. When you have a defined and clear process, you don’t have to stress or be hesitant or afraid. A process should exist to guide you in a process where people can predict what will come next. It’s reassuring to know that everyone has the same process in mind. Sometimes, when people's mindsets are not similar or the culture is lacking, processes should help people to visualize the direction they need to take.

\n

You could take these 3 points separated or combine them to maximize your chances to build successful teams.

\n

What Web / UX / UI Designers should know about Front-End Developers (letter dedicated to designers)?

\n
\n

“We love the web and we love being part of the creation process! We decided to become Front-End Developers because we love building! And it’s not just about converting designs to CSS, we love understanding the why, the how of the creation.\nAnd we understand that this may be scary at times because why the heck a Front-End Developer will tell a designer that his design is not accessible? Or tell the designers that he is not sure, this is gonna work for the user? It’s not about competing, it’s about putting energies in sync.\nThe problem sometimes is that we see patterns and code examples in our minds that we don’t always translate for other people to understand. But we’re working on that! I promise!\nWe have more to share than just our “title”, we have more to give than just lines of code. We are here to help!”

\n
\n

The main takeaways from this article

\n

If you are still reading, I hope you also share some common ideas exposed in this article. I have dedicated a portion of my career to try to be a facilitator and share all the knowledge I accumulated to build awesome products.

\n
    \n
  • Teams composed of Web Designers, UX/UI Designers and Front-End Developers sharing a similar mindset have more chances of success.
    • \n
  • An internal culture that encourages collaboration and equality between professionals will always produce the best results.
    • \n
  • Enforcing best practices through processes will help to make things more predictable and reassuring.
    • \n
  • The ego is one of the worst enemies of teamwork. You shouldn’t have any space for ego.
    • \n
  • A Front-End Developer is just a passionate professional who wants to be part of the creation process and not just at the end. His integration along the project will ensure the success of any project.
    • \n
\n
\n

What about your experience? How do you like to work with others? What would you like to see happening more often within your team?

", + "url": "https://thedaviddias.dev/articles/how-front-end-developers-ui-ux-could-better-collaborate-together", + "title": "How Front-End Developers, Web and UX/UI Designers could better collaborate together?", + "summary": "Collaboration between Developers and UX/UI Designers is essential to build a good product. With the right mindset, clear processes and an inclusive culture, everything is possible.", + "image": "https://thedaviddias.dev/images/articles/how-front-end-developers-web-and-ux-ui-designers-could-better-collaborate-together/featured.jpeg", + "date_modified": "2021-06-13T22:27:03.206Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/articles/9-best-practices-ux-for-two-factor-authentification", + "content_html": "

In 2023 alone, cybercriminals will steal 33 billion records. It takes 196 days on average to identify a data breach. The cost of a data breach will reach $150 million by 2020...\nThese numbers may be scary but they are only previsions. Things could be much worse in the near future. Security has become a hot topic these last years, almost everyone on the planet has already heard about a company data breach or even a friend that lost his Facebook account because someone hacked it! No one is completely safe nowadays.\n

\"Photo

\n

I've recently spent multiple hours ensuring that all the accounts I possess use a unique password, complex and long with at least 20 characters and with the two-factor authentication (2FA) enable if present. I've discovered so many disparities between companies and so many issues in terms of features and user experience. I wanted to share with you in this article, what I believe are the best and recommended features for any website or company that takes the security of their users seriously.

\n

1. Offer two-factor authentication options

\n

That is the starting point.

\n

If you care about your users or customers, you should give them the choice to activate the two-factor authentication. On around 800 websites where I have an account, only 5% offer a 2FA option. Some may argue that if you don't have highly sensitive information, it may be overkill to offer the 2FA. But any personal information could be considered sensitive.

\n

If you care about your users and their security, give them the option to enable the 2FA. Period.

\n

2. Don't force the users to choose only one 2FA method

\n

Google, Facebook, Twitter... they all offer simultaneous ways for 2FA: text message, authentication app and security key. More commonly, at least in a text message and authentication app, the security key seems to be set up only on certain services.

\n

But I've been surprised to see Etsy, even they use toggles on their UI, to force you to only choose one of the options. I'm not even sure if it was originally designed to work like that.

\n

\"Screenshot
The two-factor options on Etsy

\n

Bit.ly and booking.com in other hand only allow you to use your phone as a 2FA device. So if you lose your phone and your email access, you could be screwed.

\n

\"Screenshot
The verification code view on Booking.com

\n

Mailchimp and Tumblr, on the contrary, only offer 2FA using an authentication app.

\n

Zapier has an awesome step by step 2FA setup, probably one of the best I found. They offer multiple complementary ways and specifically tell you "in the event you get locked out of your account and have lost both your authentication device and recovery codes". The user understands that providing his phone number is an additional way to ensure he/she can access his account in case he/she lost the other ways to connect to their web app.

\n

\"Screenshot
The two-factor set by step setup on Zapier

\n

3. Make the QR code an image

\n

I have been using 1Password for quite some time now and the modal that scans the QR code doesn't always find the QR code. In that case, I found myself drag and dropping the QR into that modal to be recognized. But it only works when the code is an image.

\n

I would recommend having it as a format image that can be saved / drag and dropped.

\n

Reddit for example don't have the QR code as an image. Fortunately, everyone offers the text version of the QR code that you can use in your authentication application.

\n

4. Keep the code you send by email in the same format as requested in your app or website

\n

This one only happened to me once. It happened with Instagram.

\n

When Instagram sends a "verification code" by SMS, they included a space. If you copy-paste that code where it's required, first the input doesn't want the space and the last digit is not included in your paste. It's an annoying issue that could be fixed easily!

\n

\"Instagram
Instagram verification SMS code

\n

5. Give the option to have recovery/backup codes

\n

Sounds weird when said at loud but a lot of websites don't offer backup/recovery codes when you enable the 2FA. This was a surprise for me at first, 2FA means you will always have backup codes in case you lost access to your phone, email or the app you use to generate the random number. Nowadays, some websites don't offer that option. I tend to be really careful with those.

\n

Kickstarter and WPEngine are examples of websites that don't offer you any recovery/backup codes. I hope they could improve that.

\n

\"The
The Kickstarter security modal

\n

6. Always give the option to download the recovery codes

\n

Most of the websites propose to copy the recovery codes. This is not the best option.

\n

It's nice to have it, sure, but it's not enough. I personally store all my recovery codes in multiple places: one is the vault from Dropbox. Having just to drag and paste a simple text file is easy and fast.

\n

If you offer only the option to copy, then you could be forcing the user to:

\n
    \n
  1. open the text editor
    2. \n
  2. paste the codes
    3. \n
  3. give a name
    4. \n
  4. save the file on your device
    5. \n
\n

Technology is there to save user's time.

\n

Slack for example allows you to "Print codes" but not download them. Why not? I have to generate a PDF instead of my simple text file. Not the best user experience.

\n

\"The
The Two-Factor Authentication Backup Codes modal on Slack

\n

7. In the recovery code text file, always write which platform these codes are coming from

\n

Even Facebook can make mistakes and this one is important for me. Currently, if you download the recovery codes from Facebook, you open the file and you can't find any mention of Facebook or the name of the account. The file name facebook_recovery_codes is helpful but in my opinion, not enough. The name of the account and the name of the platform should be a minimum.

\n

And to make it more useful, adding the date when the codes were generated could also be added.

\n

Google which is a good example, uses your username in the name of the file, and also adds:

\n
SAVE YOUR BACKUP CODES\nKeep these backup codes somewhere safe but accessible.\n\nLIST OF CODES\n\n(email@gmail.com)\n\n* You can only use each backup code once.\n* Need more? Visit https://g.co/2sv\n* These codes were generated on: Date, 2021.\n
\n

8. Allow the user to regenerate recovery/backup codes

\n

It's essential to give the user the ability to regenerate recovery codes. Some don't offer this useful option.

\n

9. Offer more than one code (maybe?)

\n

This one is less important but I still wanted to mention a key difference in terms of recovery/backup codes.

\n

Most of the companies only offer one code vs a list of multiples codes that can be used. It's hard for me to defend one approach vs the other one. I just know that I feel better when I have more than one code.

\n

About security keys

\n

Security keys are the less common way to secure your account. If you are a public figure or someone with a high level of responsibility, having a security key could give you a little bit more peace of mind. But for a normal user, it may be overkill. Nonetheless, I wanted to maximize the security of my accounts and recently bought the Titan Security Key from Google. The USB version works on any computer and I use the Bluetooth version in case I'm on my iPhone or iPad.

\n

\"The
The box of the Titan Security Keys by Google

\n

They both are not cheap, but security should be part of your "unlimited budget", the same as for food.

\n

Conclusion

\n

I'm not a security expert and have limited knowledge in terms of security. But as a Software Engineer and particularly a user, I believe we have a long way ahead until most of the platforms implement all the tools to ensure secure access for users.

\n

Recap:

\n
    \n
  1. Offer two-factor authentication options
    2. \n
  2. Don't force the users to choose only one 2FA method
    3. \n
  3. Make the QR code an image
    4. \n
  4. Keep the code you send by email in the same format as requested in your app or website
    5. \n
  5. Give the option to have recovery/backup codes
    6. \n
  6. Always give the option to download the recovery codes
    7. \n
  7. In the recovery code text file, always write which platform these codes are coming from
    8. \n
  8. Allow the user to regenerate recovery/backup codes
    9. \n
  9. Offer more than one code (maybe?)
    10. \n
\n

Thanks for reading, I hope these suggestions would help you to have a better UX and improve your 2FA implementation.

\n

Feel free to ask me anything in the comments below!

", + "url": "https://thedaviddias.dev/articles/9-best-practices-ux-for-two-factor-authentification", + "title": "9 Best Practices & UX Improvements for the two-factor authentication (2FA)", + "summary": "The best and recommended features for any website or company that takes the security of their users seriously.", + "image": "https://thedaviddias.dev/images/articles/9-best-practices-ux-for-two-factor-authentification/featured.jpg", + "date_modified": "2021-02-25T00:01:00.000Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/articles/how-to-deploy-your-nextjs-app-on-netlify-using-github-actions", + "content_html": "

I've recently spent some time working with Next.js projects. Once my projects are done, the next logical step is to deploy these apps to be accessible to the world.

\n

I have naturally used the Vercel platform, which couldn't be easier to use and deploy your application with ease. Then I tried AWS Amplify, which I particularly love but for now, requires you to use the Serverless Framework if you want to benefit from Server Side Rendering (SSR) capabilities.

\n

Then, I remembered that Netlify has added support for Next.js, including dynamic routes, Preview Mode and more around November 2020. It was time for me to try it! But I also wanted to have a real CI/CD in place, to test my code and do more actions before deploying to Netlify. That's where Github Actions came to the rescue!

\n

I'm going to describe in this article, all the steps you need to take to deploy your Next.js application on Netlify using Github Actions.

\n
\n

The full version of the project can be found on Github.

\n
\n

Create a new Next.js App and push it to Github

\n

As always, you need to have a recent version of Node and NPM installed on your machine. I personally recommend using NVM since it simplifies having multiple active Node.js versions.

\n

To create a new Next.js project, type this command in your CLI:

\n
npx create-next-app name-of-your-app\n\n# move into the app's root directory\ncd ~/path-to-projects/name-of-your-app/\n
\n

This will install a new application using a basic Next.js boilerplate. Don't forget to move to your app root folder before launching any next commands.

\n

Once your Next.js project is locally created, you can create a new project on Github and push the code generated.

\n

(For those you are new to coding, feel free to follow these steps to create a new repository on Github.)

\n

Setting up your Netlify project

\n

There are 2 ways of creating a new Netlify project:

\n
    \n
  • Creating a project online here
    • \n
  • Using the Netlify CLI.
    • \n
\n

Let's use the CLI this time, I'm sure you already created a new project in the past using the Netlify interface.

\n

Let's start by installing netlify-cli globally:

\n
npm install netlify-cli -g\n
\n

Then check if the installation succeeds, confirming with this command:

\n
netlify\n
\n

Netlify account authentication

\n

Now you need to link your computer with your Netlify account. To authenticate with Netlify, you need to run this command:

\n
netlify login\n
\n

This will open a new tab in your browser where you'll need to "Authorize your Application" and then grant access to Netlify CLI.

\n

In case you already logged in previously, the console will output:

\n
Already logged in via netlify config on your machine\n
\n

Netlify project creation

\n

Now that your CLI is authorized to communicate with your Netlify account, it's time to programmatically create a new project:

\n
# create a new Netlify site using the Netlify shortcut: ntl\nntl init\n
\n

The first question you are asked is if you want to connect this directory to an existing Netlify site or create & configure a new site. Choose Create & configure a new site:

\n

\"Connect

\n

Then you have to choose your team:

\n

\"Question

\n

Choose the name of your application:

\n

\"Screenshot

\n

After entering the name of your project, the site is created and few URLs populated the CLI which gave you access to your admin URL, the URL of your site and the Site ID. Keep the site ID aside, you will need that number later on.

\n

For the next 3 questions (build, start and function), insert a space. We are not going to directly use the NPM scripts, our Github actions will later trigger each command.\n

\"Screenshot

\n

Finally, automatically create a netlify.toml file, which we will edit later. If your respond no, you can still create that file manually at the root of your project.

\n

\"Screenshot

\n

Once you provided an answer to all the questions, your terminal should look like this:

\n

\"Screenshot

\n

Updating our Netlify project

\n

It's now time to change some options on our Netlify project. Open directly your project on Netlify with this command:

\n
ntl open\n
\n

\"Screenshot

\n

You should see that our production deployment failed. You don't have to worry, this is totally normal. We need to disable our automatic build because our Github Actions will take care of it.

\n

Go in your Settings > Build & deploy. Click on Edit settings and Stop builds. Save.

\n

\"Screenshot

\n

Just below, go to the Deploy contexts section and select None for the Deploy previews.

\n

\"Screenshot

\n

Don't worry, like the build, we will create our preview URL using Github actions.

\n

Enable server-side rendering on Netlify

\n

If you have been using Next.js you are aware of the capability to do the server-side rendering. But usually, you will need to configure a Node server and that's something we don't want to have to deal with. Around October 2020, the Netlify team started working on next-on-netlify, a utility to enable SSR in Next.js on Netlify. That's what we are going to use here.

\n

(In case you are not interested in Github Actions and want to use Netlify to build your project, take a look at how to use the Next on Netlify Plugin. It directly wraps your Next.js app and doesn't need as much configuration as we are going to explain.)

\n

Let's start by installing our utility:

\n
npm install -D next-on-netlify\n
\n

Set Next.js target to serverless

\n

We must build our Next.js app as a serverless app

\n
module.exports = {\n  // Target must be serverless\n  target: "serverless",\n};\n
\n

Add a post build hook

\n

We need to add a postbuild command that is automatically triggered after our build command finishes. next-on-netlify does a lot of "magic" to copy and set up our Next.js app to be correctly hosted on Netlify.

\n
{\n  "name": "next-netlify-github-actions-starter",\n  "version": "0.1.0",\n  "private": true,\n  "scripts": {\n    "dev": "next dev",\n    "build": "next build",\n    "start": "next start",\n    "postbuild": "next-on-netlify"\n  },\n  ...\n}\n
\n

Configure Netlify

\n

Remember the file that was automatically created and called netlify.toml? You can remove all the boilerplate and replace it with only this code (be careful in respecting the indentation):

\n
[build]\n  command   = ""\n  functions = "out_functions"\n  publish   = "out_publish"\n
\n

Technically, when next-on-netlify will run, it will take what is in these folders and host it on Netlify. DO NOT CHANGE the name of these folders as these are hardcoded into the utility.

\n

Don't forget to add these line to your .gitignore file

\n
# Netlify build\nout_*\n
\n

You can commit your files. Let's work now on the Github Actions configuration.

\n

Github Actions configuration

\n

The netlify configuration is now done, all dependencies installed, it's time to configure our Github actions which will test, build and deploy our Next.js application to Netlify. But before that, we need to set up some Github secrets that we will need in our GH Actions.

\n

Go to your Github project > Settings > Secrets > New repository secret

\n

| Actions secret name | Comments |\n| -------------------- | ------------------------------------------------------------------------------------------- |\n| NETLIFY_AUTH_TOKEN | Request your token here |\n| NETLIFY_SITE_ID | The site to where deploy your site (get it from the API ID on your Site Settings) |

\n

\"Screenshot

\n

Create a new file called main.yml inside .github/workflows. Copy-paste the following code and read the explanation of it after this snippet.

\n
name: Main workflow\n\non:\n  pull_request:\n    branches:\n      - master\n      - main\n    types: [opened, synchronize, reopened]\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout code\n        uses: actions/checkout@v2\n\n      # Cache node modules and next folder\n      - name: 📬 Caching\n        uses: actions/cache@v2\n        with:\n          path: |\n            **/node_modules\n            ${{ github.workspace }}/.next/cache\n          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}\n\n      - name: Use Node.js 14.x\n        uses: actions/setup-node@v1\n        with:\n          node-version: 14.x\n\n      - name: 🧰 Install dependencies\n        run: npm run install\n\n      - name: 📦 Build project\n        run: npm run build --if-present\n\n      # - name: 🧹 Run lint\n      #   run: npm run lint\n\n      # - name: 🐛 Run tests\n      #   run: npm run test\n\n      # Deploy to Netlify with a personalized message\n      - name: 🚀 Deploy to Netlify\n        id: deploy-netlify\n        uses: netlify/actions/cli@master\n        env:\n          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}\n          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}\n        with:\n          args: deploy -m 'v${{ steps.package-version.outputs.current-version}} ・ ${{ github.head_ref }}'\n
\n

Detailed explanation of the main workflow file

\n
    \n
  1. Give a name to your Github action
    2. \n
  2. Choose which type of the event should trigger this action, you can use push instead of pull_request, it's up to you.
    3. \n
  3. Specify on which system this action should be launched, I choose the latest version of Ubuntu (Linux).
    4. \n
  4. Checkout your code
    5. \n
  5. Cache your node modules and the .next/cache folder. When you will first run this action, it will take some time. On the second launch, the action will take the modules that exist in the cache and will then proceed way faster.
    6. \n
  6. Specify the version of Node you want to use, in my case, I choose the most recent version of Node 14th.
    7. \n
  7. Install the dependencies of your project.
    8. \n
  8. Build your project. Remember that after the build, the post-build command will be launch. This is what you should see in the build logs in your Github Action tab:\n
    \"Screenshot
    9. \n
  9. I added lint and test commands, which I commented. You can use these to trigger ESLint, Jest (even Cypress) or any other plugin that ensures your code doesn't have any issue.
    10. \n
  10. Finally, we trigger the Netlify deployment to deploy our Next.js app to Netlify. 🎉
    11. \n
\n

\"Screenshot

\n

You may have seen an argument passed to the Netlify deploy:

\n
args: deploy -m 'v${{ steps.package-version.outputs.current-version}} ・ ${{ github.head_ref }}'\n
\n

This will add a message for each Deploy Preview, a way to keep track of which PR generated which Deploy.

\n

\"Screenshot

\n

On the same deploy page, you can click on the Deploy Preview and access your app using the preview URL.

\n

A better way would be to use another task to automatically populate your pull request with the log and preview URL. At the end of your file, add this action:

\n
# Publish the inspect and preview link to the PR\n- name: 👓 Netlify Preview URL\n  uses: unsplash/comment-on-pr@master\n  env:\n    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n    OUTPUT: "This pull request is being automatically deployed to Netlify.\\n\\n🔍 Inspect: ${{ steps.deploy-netlify.outputs.NETLIFY_LOGS_URL }}\\n✅ Preview: ${{ steps.deploy-netlify.outputs.NETLIFY_URL }}"\n  with:\n    msg: ${{ env.OUTPUT }}\n    check_for_duplicate_msg: false\n
\n

This will automatically create a comment in your PR.

\n

\"Screenshot

\n

Summary

\n

If you are still reading this, congrats! You have succeeded in deploying a fully enabled Next.JS application to Netlify using Github Actions!

\n

The next step for you now will be to add some linting rules and tests to ensure that you are sending to Netlify, an app that works perfectly!

\n

Feel free to download or fork the next-netlify-github-actions-starter, open an issue if you find any problem or send me any suggestion to make it better!

\n

Sources:

\n", + "url": "https://thedaviddias.dev/articles/how-to-deploy-your-nextjs-app-on-netlify-using-github-actions", + "title": "How to deploy your Next.js app on Netlify using Github Actions", + "summary": "Are you interested in Next.js and how to deploy your app to Netlify using Github Actions? Take a look at how Netlify allows you for free, to deploy your app with Server Side Rendering capabilities and more!.", + "image": "https://thedaviddias.dev/images/articles/how-to-deploy-your-nextjs-app-on-netlify-using-github-actions/featured.jpg", + "date_modified": "2021-01-21T00:01:00.000Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/articles/you-have-something-in-you-the-world-needs", + "content_html": "

I’m not a psychologist or either a student in psychology. I spent a good amount of time in my life reading personal development books but in the end, I’m just a Front-End Web developer, who writes code. I had the chance to live in different countries and created real and profound relationships with people with different cultures, different colors, different ages, different religions, different visions of the world… I couldn’t imagine my life without all these persons and what they brought to my existence.

\n

\"A
Photo by Ben White on Unsplash

\n

Talking and sharing life’s moments with all these people made me realized something you may know already: most of the human beings struggle in being happy and spend most of their lives, living in their past and acting or not acting based on numerous fears. Fear and past are the two biggest challenges that every human in history had to face.

\n

Fear kills

\n

Fear is more than just a word or a feeling you experimented watching horror movies. Fear is just the most powerful weapon that, in 2019, is killing more than any other weapon in the world.

\n

Fear does not just kill physically people, fear kills creativity, originality, growth, relationships, marriages, ideas, will, happiness… Fear makes you feel bad at work because you think you don’t know enough, it pushes you to fail at the University: fear to not be good enough, fear to fail another relationship, fear to talk too much, fear to not talk enough, fear to be judged, fear to be invisible, fear to be different, fear to not be understood…

\n

With all the social media platforms, we try to connect people, reduce the friction in creating new possible relationships, and it works. We have so many incredible situations, made possible thanks to all these platforms out there. But I don’t think it’s really enough to make people fearless. You can be a movie star, or a famous singer, at the end of the day, your memories, your past is there. You can’t really push the button rewind or delete. All of us need to learn to live with our past, our mistakes. And that’s probably one of the most complicated parts of being human.

\n

Take 2 minutes to analyze your day until now: I doubt you didn’t find any trace of fear pushing you to act or say something you didn’t really want to.

\n

We can only accept our pasts

\n

We can’t do anything to change our past, including yesterday. We can try to forget or think that we are not attached to it, and yes, you are right, our pasts don’t define who we are. But our pasts mold our personality and our beliefs, and beliefs are something so hard to change sometimes.\nWe can battle a whole life and try to change our pasts, but you know and I know that it’s a waste of time. Our pasts are all painful, we all have moments we would like to forget, people that make us feel bad, people that hurt us, friends, parents, that disappointed us, love relationships that created a hole in our heart… Fortunately, not physically.

\n

So what are our options? Actually, do we have options? Maybe we have an easy option. And if we tried to choose the one the majority chooses? That would work? I don’t think I have an answer that would make you feel happy. The only answer that I can think of, is that accepting our past, whatever happened, whatever you lived is probably the only way to live our present and feel that joy that exists in every little thing around you.

\n

I know what you may think: “Easy to say, hard to do”. Does anyone told you in your entire life: “Things are easy!”? Just ask you the question. Why most of us want something easy instead of something true. What happened in the history of humanity to make us believe that life equal easy or hard? Why can’t we just say that things are how they should be, and we need to choose the way we want to react when we are facing them? The way we choose to react and act is what matters.

\n

Creating a barrier will never be the option

\n

When someone out there, our neighbor, a president, a friend decide to create a wall in their garden or between countries, we all think and believe that it is not a solution or even an option. But how many times, did we create a mental barrier between us and the world? How many times, did we get nervous because we don’t have full control over our life’s events? How many times, did we get angry because our child felt and instead of showing him love, we yell at him because we were afraid it could hurt himself? Afraid that next time, he could fall being alone? It’s easier to hide that fear behind that attitude than accepts and embrace that uncomfortable feeling of fear and react with love.

\n

\"A
Photo by Matthew Garoffolo on Unsplash

\n

Maybe things in your life, made you create layers. Layers of protection to “help you face life’s challenge”. Really? Are you feeling happiest since you closed some doors and people think you are a negative person? Is the world a better place because you hide your feelings and you are not able to cry anymore? I don’t think so.

\n

I wish I could have multiple lives (some people believe in it), but the one we all have is the one we are currently living. And we usually don’t regret things we did, but things we were not able to achieve and to do, like be open to our wife or husband, show to our kids that we are not perfect and that we made mistakes sometimes.

\n

You can’t talk about life

\n

In some cultures, some places in the world, you can’t really talk about fear and past. You can’t talk about the struggle you have in your life. A lot of people across history tried their best to remove some humanity in some cultures and who really wants to defeat centuries of culture which forces you to not be yourself? Things are not equaled in the world, but it’s not a reason to not try.

\n

What makes people think they can’t talk about their issues, once again, fear is probably behind that for most cases.

\n

\"Woman
Photo by Niklas Hamann on Unsplash

\n

Sometimes I’m not sure why, in a work environment, people can’t say “I don’t know, I’m not sure, I’m having doubts lately…” Is an issue to be human nowadays? Because I feel, I can’t work? Because I’m not sure, I will not be a good employee? Of course, a company is a place for you to work, help a company to grow and get more value in the market but is it not a place where humans live, breath and share emotions and moments?

\n

I met many people around the world that were themselves at home, but could never be themselves at work. Look at your right… yeah, you found him/her!

\n

What are you waiting for?

\n

Things are going fast, technologies like cryptocurrency, AI, VR, autonomous cars, all of that is changing and is going to change our worlds. But in the end, fears, layers, will always be there, and one day, a lot more people will have to seek help if they want to be free from all of that. Life will always be what it is, but all of us can improve other’s lives, being there when they need, sending a small message asking if everything is fine. We don’t really need to make big efforts to help our world to feel better. Believing that you can do a lot for the people around you is the first step.

\n

Right now, maybe a friend is waiting to receive a message from you. A signal to make him feel he is not alone. Have someone that can reassure him that his/her past will not define his/her tomorrow.

\n

…What are you really waiting for? 📲

\n

Disclaimer: I usually write articles about code, immigration, and tech, but a lot of my friends are lately facing the same issues, and even I try my best to help them, it’s also up to them to take action and choose the life they really want. This article is a way to hopefully help other people that may be facing the same issues in their lives. Let me a comment if you find this article relevant for your life!

", + "url": "https://thedaviddias.dev/articles/you-have-something-in-you-the-world-needs", + "title": "You have something in YOU that the world needs", + "summary": "Sometimes the only thing you need to remember is that you are not alone in this world.", + "image": "https://thedaviddias.dev/images/articles/you-have-something-in-you-the-world-needs/featured.jpeg", + "date_modified": "2019-06-21T00:00:00.000Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/articles/front-end-performance-checklist-speeds-up-web-developments", + "content_html": "

Performance is a huge subject, but it's not always a "back-end" or an "admin" subject: it's a Front-End responsibility too. The Front-End Performance Checklist is an exhaustive list of elements you should check or at least be aware of, as a Front-End developer and apply to your project (personal and professional).

\n

How to use?

\n

For each rule, you will have a paragraph explaining why this rule is important and how you can fix it. For more deep information, you should find links that will point to 🛠 tools, 📖 articles or 📹 medias that can complete the checklist.

\n

All items in the Front-End Performance Checklist are essentials to achieve the highest performance score but you would find an indicator to help you to eventually prioritised some rules amount others. There are 3 levels of priority:

\n
    \n
  • ![Low][low] means that the item has a low priority.
    • \n
  • ![Medium][medium] means that the item has a medium priority. You shouldn't avoid tackling that item.
    • \n
  • ![High][high] means that the item has a high priority. You can't avoid following that rule and implement the corrections recommended.
    • \n
\n

Performance tools

\n

List of the tools you can use to test or monitor your website or application:

\n\n

References

\n\n
\n

HTML

\n
    \n
  • \n

    [ ] Minified HTML: ![medium] The HTML code is minified, comments, white spaces and new lines are removed from production files.

    \n

    Why:

    \n
    \n

    Removing all unnecessary spaces, comments and attributes will reduce the size of your HTML and speed up your site's page load times and obviously lighten the download for your user.

    \n
    \n

    How:

    \n
    \n

    Most of the frameworks have plugins to facilitate the minification of the webpages. You can use a bunch of NPM modules that can do the job for you automatically.

    \n
    \n\n
    • \n
  • \n

    [ ] Place CSS tags always before JavaScript tags: ![high] Ensure that your CSS is always loaded before having JavaScript code.

    \n
    <!-- Not recommended -->\n<script src="jquery.js"></script>\n<script src="foo.js"></script>\n<link rel="stylesheet" href="foo.css" />\n\n<!-- Recommended -->\n<link rel="stylesheet" href="foo.css" />\n<script src="jquery.js"></script>\n<script src="foo.js"></script>\n
    \n

    Why:

    \n
    \n

    Having your CSS tags before any JavaScript enables better, parallel download which speed up browser rendering time.

    \n
    \n

    How:

    \n
    \n

    ⁃ Ensure that <link> and <style> in your <head> are always before your <script>.

    \n
    \n\n
    • \n
  • \n

    [ ] Minimize the number of iframes: ![high] Use iframes only if you don't have any other technical possibility. Try to avoid iframes as much as you can.

    \n
    • \n
  • \n

    [ ] Pre-load optimization with prefetch, dns-prefetch and prerender: ![low] Popular browsers can use directive on <link> tag and "rel" attribute with certain keywords to pre-load specific URLs.

    \n

    Why:

    \n
    \n

    Prefetching allows a browser to silently fetch the necessary resources needed to display content that a user might access in the near future. The browser is able to store these resources in its cache and speed up the way web pages load when they are using different domains for page resources. When a web page has finished loading and the idle time has passed, the browser begins downloading other resources. When a user go in a particular link (already prefetched), the content will be instantly served.

    \n
    \n

    How:

    \n
    \n

    ⁃ Ensure that <link> is in your <head> section.

    \n
    \n\n
    • \n
\n

CSS

\n
    \n
  • \n

    [ ] Minification: ![high] All CSS files are minified, comments, white spaces and new lines are removed from production files.

    \n

    Why:

    \n
    \n

    When CSS files are minified, the content is loaded faster and less data is sent to the client. It's important to always minify CSS files in production. It is beneficial for the user as it is for any business who wants to lower bandwidth costs and lower resource usage.

    \n
    \n

    How:

    \n
    \n

    ⁃ Use tools to minify your files automatically before or during your build or your deployment.

    \n
    \n\n
    • \n
  • \n

    [ ] Concatenation: ![medium] CSS files are concatenated in a single file (Not always valid for HTTP/2).

    \n
    <!-- Not recommended -->\n<link rel="stylesheet" href="foo.css" />\n<link rel="stylesheet" href="bar.css" />\n\n<!-- Recommended -->\n<link rel="stylesheet" href="foobar.css" />\n
    \n

    Why:

    \n
    \n

    If you are still using HTTP/1, you may need to still concatenate your files, it's less true if your server use HTTP/2 (tests should be made).

    \n
    \n

    How:

    \n
    \n

    ⁃ Use online tool or any plugin before or during your build or your deployment to concatenate your files.\n⁃ Ensure, of course, that concatenation does not break your project.

    \n
    \n\n
    • \n
  • \n

    [ ] Non-blocking: ![high] CSS files need to be non-blocking to prevent the DOM from taking time to load.

    \n
    <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'" />\n<noscript><link rel="stylesheet" href="global.min.css" /></noscript>\n
    \n

    Why:

    \n
    \n

    CSS files can block the page load and delay the rendering of your page. Using preload can actually load the CSS files before the browser starts showing the content of the page.

    \n
    \n

    How:

    \n
    \n

    ⁃ You need to add the rel attribute with the preload value and add as="style" on the <link> element.

    \n
    \n\n
    • \n
  • \n

    [ ] Unused CSS: ![medium] Remove unused CSS selectors.

    \n

    Why:

    \n
    \n

    Removing unused CSS selectors can reduce the size of your files and then speed up the load of your assets.

    \n
    \n

    How:

    \n
    \n

    ⁃ ⚠️ Always check if the framework CSS you want to use don't already has a reset / normalize code included. Sometimes you may not need everything that is inside your reset / normalize file.

    \n
    \n\n
    • \n
  • \n

    [ ] CSS Critical: ![high] The CSS critical (or "above the fold") collects all the CSS used to render the visible portion of the page. It is embedded before your principal CSS call and between <style></style> in a single line (minified if possible).

    \n

    Why:

    \n
    \n

    Inlining critical CSS help to speed up the rendering of the web pages reducing the number of requests to the server.

    \n
    \n

    How:

    \n
    \n

    Generate the CSS critical with online tools or using a plugin like the one that Addy Osmani developed.

    \n
    \n\n
    • \n
  • \n

    [ ] Embedded or inline CSS: ![high] Avoid using embed or inline CSS inside your <body> (Not valid for HTTP/2)

    \n

    Why:

    \n
    \n

    One of the first reason it's because it's a good practice to separate content from design. It also helps you have a more maintainable code and keep your site accessible. But regarding performance, it's simply because it decreases the file-size of your HTML pages and the load time.

    \n
    \n

    How:

    \n
    \n

    Always use external stylesheets or embed CSS in your <head> (and follow the others CSS performance rules)

    \n
    \n\n
    • \n
  • \n

    [ ] Analyse stylesheets complexity: ![high] Analyzing your stylesheets can help you to flag issues, redundancies and duplicate CSS selectors.

    \n

    Why:

    \n
    \n

    Sometimes you may have redundancies or validation errors in your CSS, analysing your CSS files and removed these complexities can help you to speed up your CSS files (because your browser will read them faster)

    \n
    \n

    How:

    \n
    \n

    Your CSS should be organized, using a CSS preprocessor can help you with that. Some online tools listed below can also help you analysing and correct your code.

    \n
    \n\n
    • \n
\n

Fonts

\n

![fonts]

\n\n

Images

\n\n

JavaScript

\n\n

Server

\n\n
\n

Performances and JS Frameworks

\n

Angular

\n\n

React

\n\n

Vue

\n\n

Performances and CMS

\n

WordPress

\n\n

Articles

\n\n

Plugins recommended

\n\n
\n

Translations

\n

The Front-End Performance Checklist wants to also be available in other languages! Don't hesitate to submit your contribution!

\n", + "url": "https://thedaviddias.dev/articles/front-end-performance-checklist-speeds-up-web-developments", + "title": "The Front-End Performance Checklist speeds up your web developments", + "summary": "An exhaustive list of all the elements that will speed up your current web developments and offer the best user experience.", + "image": "https://thedaviddias.dev/images/articles/front-end-performance-checklist-speeds-up-web-developments/featured.jpeg", + "date_modified": "2018-07-22T00:01:00.000Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/articles/learned-presenting-side-project-europe", + "content_html": "

In October 2017, I launched my first open-source project on Github: the Front-End Checklist. In few hours, the project gained international visibility. After that, for a number of weeks, I had an incredible journey with many people around the world. I recently started giving talks in local communities around Spain and Portugal about the project, and I plan to check out France later on.

\n

Doing these presentations gave me a different perspective and vision about the worldwide communities who organize meetups regularly. I discovered that there were an huge number of people who were looking for more and more content and wanted to participate in local communities.

\n

After initiating the Front-End Dev Mauritius community, I know how complicated it can be to find people willing to share their experiences about Front-End Development. And for some, such as those who recently have moved from another city or country, having a welcoming tech community is important to getting setting up.\nI wanted to share with you some of the things I learned before, during, and after these meetups I participated in throughout Europe. And I want to encourage you to participate more in local events no matter where you are today.

\n

Don’t give up!

\n

\"Map
Barcelona, Madrid and Porto

\n

Knowing that I would be on "holidays" for a few weeks in France, Spain, and Portugal I decided to try contacting local groups in Barcelona, Madrid, Lisbon, Aveiro, and Porto. I sent messages directly to the founders of local groups using Meetup.com, or contacted them via Twitter when they had specified their account on their profile. But, as I was expecting, I didn’t receive a lot of replies at first.

\n

In Barcelona however, Bettina from Ignit, who managed the “Barcelona Front-End Development Meetup”, answered me really quickly. We decided, after some email exchanges and a phone call, to have a meetup on 14 March about my project.

\n

In Madrid, the “Front-end Developers Madrid” organizers never answered me. But Juan Macias, a teacher’s assistant at “Ironhack Madrid,” did everything to help me setup a talk, which I gave on 16 March.

\n

In Lisbon, Shannon Graybill from “Lisbon Le Wagon” showed a lot of interest in having me do a presentation. But we lost touch after we tried to call each other few times without setting a time. Besides, I decided not to present in Lisboa, but instead tried to do something in Porto (easier for me, as I was in Aveiro for two weeks).\nThen in Porto I contacted Ricardo Mendes, who usually organizes “Porto Codes”. After few messages and emails, we decide to organize a talk on 5 April at Porto.io, at a coworking space in the middle of the city.

\n

\"Event

\n

Know your audience

\n

One of the first rules I learned about giving a talk or a presentation was to “know your audience.” That is maybe the most challenging but nonetheless important rule you need to have in mind.\nA few days before each talk, I went through all the profiles on Meetup, trying to know my future audience better. Unfortunately, most of the people don’t put their Twitter or Facebook account in their profiles. They don’t often answer some basic questions sent by the owner of the group when they subscribe, which makes it really hard for a speaker learn about the target audience of a meetup.\nI sent a tweet to some people before the meetup in Barcelona, but I didn’t receive any responses. Next time 😉.

\n
View post on Twitter
\n

Since I didn’t know my audience in advance, I then decided to ask about each person’s career just before I started my talk. I adapted my content and discourse depending on their responses and it seemed that my slides were understandable by any level.

\n

Check for other local events

\n

I’m not a fan of football (although my father is) — I never felt passionate about it. But that was something that would’ve been useful to think about before setting the Barcelona meetup’s date. Twenty-three peopole planned to come, but just…2 of them came. I discovered afterwards that “Barcelona — Chelsea” was probably one of the reasons why people didn’t come.\nFor me, it was an awesome time. I was able to focus more on specific questions asked by Jimmy from Los Angeles and Costa Rica and Marcela from Mexico (I also won’t forget the delicious pizza we ate after the meetup at Anauco).

\n

Print your username on a tee-shirt

\n

\"David
Ironhack in Madrid (Spain)

\n

That might sound crazy, but printing my username on a tee-shirt was one of the things I’m happy I did. Some people may ask you how to contact you or may be too shy to do so. But with your username “on you,” it’s impossible not to find you on Internet (or forget who you are 😅)!

\n
View post on Twitter
\n
View post on Twitter
\n
View post on Twitter
\n

Tell stories and share what motivates you

\n

Telling stories is not that hard.\nLots of talks I’ve heard in the past, from different people, seemed “empty,” without any soul. Doing a talk is much more for me than a simple exposition of facts or numbers or code. It’s about a story, how someone found a way to develop their application, how some new technologies can improve the way we work in our daily lives, and so on.\nIn my case, it was how a “simple” checklist changed the way I see the Front-End worldwide community, and the way that some people will work in the future.

\n

Don’t need to be the best

\n

\"David
Talking about task runners at Ironhack Madrid

\n

That is maybe one of the biggest lesson I wanted to share with you in this post: you don’t need to be the best or the expert to share what you know or what you’ve learned before.\nLot of beginners with less than a couple years of experience don’t feel confident sharing what they know with others, because they think they don’t know enough.\nFrom my point of view, that’s the wrong belief. Whether you have experience or not, you always have something useful that can be shared with others. It’s as simple as that. And it’s something some people need to start believing once and for all.

\n

Take photos before everyone leaves!

\n

If your audience is used to sharing photos on Twitter or other social media, you’re lucky — you’ll have some photos of you to help you remember your talk or show the presentation you did. They might even come in handy if you want to write an article about it 😅.\nBut taking a group photo with all your attendees is a fun thing to plan before everyone runs out of the meetup. I failed on that point many times, and I was only able to take a picture in Porto with the two organisers, including Tim Lai.

\n
View post on Twitter
\n

A photo took after most of the attendees already went home.

\n

Ask for feedbacks

\n

This is another thing I missed, but I now know how useful it could’ve been. Having feedback on any work or talk can be really helpful when we try to improve ourselves and the way we present things.\nIn my next meetups, I’ll probably give attendees a bit.ly link redirecting to a Typeform quizz which I’ll ask them to fill out.

\n

And in case you didn’t read my article about how everything began, take a look at it here.\nPutting it all together\nGiving these talks in different cities and countries helped me learn how much can be shared and taught to an incredible number of people. During these last few years, while learning and sharing my vision of Front-End development, I wasn’t able to see how large the community of people wanting to become better actually was.\nWe can start with something really small, and that small thing can give us the opportunity to meet people and give them something they needed or were searching for.

\n

Now, let’s recap each point I went through:

\n
    \n
  • Even if local communities don’t always send you a response, don’t give up!
    • \n
  • Always check for other local events when you decide on a date for a meetup
    • \n
  • Try to know your audience before, or prepare your talk to be accessible for anyone
    • \n
  • Printing your username on a tee-shirt can be helpful
    • \n
  • Remember to tell stories and to show your motivation
    • \n
  • You don’t need to be the best to share something with someone else
    • \n
  • Don’t forget to take photos before everyone leaves
    • \n
  • Ask for feedback to improve your next talk
    • \n
\n

Thank you for reading!

\n

That’s it. In case you like my article and find it useful, here are some things you can do to show your support:

\n
    \n
  • Give a star ⭐️ on GitHub: https://github.com/thedaviddias/Front-End-Checklist (It’s important for me to continue launching other open-source projects)
    • \n
  • Follow me on GitHub: https://github.com/thedaviddias
    • \n
  • Follow me on Twitter: https://twitter.com/thedaviddias
    • \n
", + "url": "https://thedaviddias.dev/articles/learned-presenting-side-project-europe", + "title": "What I learned after presenting my side project in Europe", + "summary": "An overview of what I learned presenting the Front-End Checklist during my vacations in Europe", + "image": "https://thedaviddias.dev/images/articles/learned-presenting-side-project-europe/front-end-checklist-presentation-wall.jpeg", + "date_modified": "2018-05-22T00:00:00.000Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/articles/choose-city-country-front-developer", + "content_html": "

After I’ve been invited by my previous company to move to Mauritius to manage a Front-End Developer’s team, I’m now looking forward to choose where I want to move next. I’ve been working for many years in Paris, but going back to France, like some of my compatriotes I know, is not an option for me.

\n

\"\"

\n

When you start living outside your native country, creating worldwide links with others, you know that you can’t just “go back”. You can’t live ignoring the fact that being out of your comfort zone is the best thing that you can experience in life, more challenging when you live abroad. I spent 3 years in Brazil and these last two years in Mauritius. Thus I know that everything I learned from people around, I couldn’t learn if I was living in France.

\n

But today I’m facing a dilemma. I’m not sure which country / city I should to focus on my job researches. I need your help to decide where could be my next move…

\n
View post on Twitter
\n

1. Toronto / Canada

\n

\"\"
Toronto and its CN Tower

\n

Canada was is on 12th position of the Top Expat Destinations in 2016, 16th in 2017 according to “Expat Insider”. With more than 35 000 000 habitants split on around 9 000 000 km2, Canada is worldwide known to be a multicultural nation and with sometimes long and cold winters.

\n

I went to Canada in October 2014, to visit Toronto and Montreal. I really loved it! Most of the people prefer Montreal, but in my case, I enjoyed more staying in Toronto. I have few friends who moved there so they will be able to give me some advices if I need some. Since 2015, I have been registered in the pool for the IEC Working Holidays visa. Unfortunately, until today, I hadn’t any luck… But I still have hope 🌤

\n

The International Mobility Program for Francophones could be also an option for me. And to apply for the Express Entry, I just need to pass my [IELTS exam}(https://www.ielts.org/) (on January the 20th) and have enough point to apply for.

\n

The website Numbeo helps to compare the cost of living of different cities in the world. It seems that the cost of living in Toronto is less than most of the cities I’m interested in although these datas are not 100% reliable.

\n

\"\"
Montreal and Toronto seems to be cheaper than all other cities I’m mentioning in this article.

\n

2. Sydney or Melbourne / Australia

\n

\"\"

\n

The kangorou’s country was on 7th position in the Top 10 of best countries Expat Insider 2016 and is now on 34th position in 2017.

\n

I never went to Australia, but all my friend who went there, tell me good things about it. The immigration process does not seems easy and because I am +30 years, I can’t apply for the Working Holidays Visa. I’m still waiting from the French government to expand the upper age of eligibility from 30 to 35 years old.

\n

According to Numbeo, Sydney has a cost of living a little higher than Melbourne.

\n

\"\"

\n

3. Wellington or Auckland / New Zealand

\n

New Zealand was on 5th position for the Top 10 best countries by Expat Insider in 2016 and 6th for 2017.

\n

I don’t know why but I was always fascinated by that country. I read a lot of articles about the pros and cons, comments of people who complain about things which are better handled elsewhere. But let me tell you something, I learned one thing since I had lived in different countries. You can have an opinion about everything around, but you should learn to live with that. It doesn’t mean you need to accept everything, but you can’t be happy in a place where you are always criticising.

\n

Comparing two places, in the same country or in different country is in general a mistake you do in the first country you live… But the more you move, the more you’ll learn of how to enjoy where you are and skip details.

\n

The city of Auckland was the first to answer to my tweet asking about “Where I need to move”.

\n
View post on Twitter
\n

Wellington followed the next day with two adorable tweets:

\n
View post on Twitter
\n
View post on Twitter
\n

Maybe the weather in Wellington is not as good as Auckland… But the weather can’t be the only thing to compare (I’m already missing Mauritius’ sun 😂).

\n

\"\"
Another cost of living comparison with Auckland and Wellington

\n

4. New York, Chicago or somewhere else in the USA

\n

\"\"

\n

The USA was always on my TOP 1 choice (I went to NY 3 times) but it seems to be more and more complicated to get a job or a visa to go to the USA (Even if you have a project on Github with more than 23 000 likes 😅).

\n

I don’t completely leave that option away but today, it’s more part of a dream than a reality plan.

\n

I registered on the Green Card lottery for 2018… but I really don’t believe I can be so lucky…

\n

Why the USA?

\n

You may wonder: why the USA? It turns out that most of the people I admire are living in the USA. It seems to be easier to follow them being in the same country. It’s without counting on all conferences and meetups that are happening all over the country which I one day, I would like to be able to participate.

\n

But it’s probably because I’m looking for years to find a team of Developers, Web Designers and UX who can build innovative products together sharing their knowledge and having a similar vision.

\n
\n

I’m looking for years to find a team of Developers, Web Designers and UX who can build innovative products together sharing their knowledge and having a similar vision.

\n
\n

I just had that experience once: at Barefoot Proximity in Cincinnati, Ohio. Julie Tran, Creative Director and Micky Osterman, project manager gave me in 2014 an experience I could not forget. For more than one month, I’ve been working hand by hand creating a new brand website. Whereas I have much more experience today, what I tasted that month is how I would like to work with future teams.

\n

What’s next?

\n

2018 should be an interesting year.

\n

In January, my IELTS exam will give me more chances to complete some immigration forms.

\n

In February, I’ll start sending my resume to some companies I perceive I can fit and by chance, it’ll become easier to decide which country I should focus on more.

\n

In May/June, I hope to be in the country which will give me the chance to continue creating products and websites, managing young developers and working with an awesome team of experts who see the future of the web!

", + "url": "https://thedaviddias.dev/articles/choose-city-country-front-developer", + "title": "Help me to choose the best city/country to be a Front-End Developer!", + "summary": "Choosing a new city or country to leave is not an easy task. I'm sharing my process to choose the next city where I wanna live.", + "image": "https://thedaviddias.dev/images/articles/choose-city-country-front-developer/earth-rounded.jpeg", + "date_modified": "2017-12-28T13:07:27.957Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/articles/front-end-checklist-just-tool-everything-depends-on-you", + "content_html": "

One month ago, I launched the Front-End Checklist on GitHub. In less than 2 weeks, more than 10,000 people around the world starred the repository. That was completely unexpected and incredible!

\n

\"A

\n

I’ve been working as a front-end developer since 2011, but I started to build websites in 2000. Since then, like us all, I’ve been trying to improve the quality of my code and deliver websites faster. Along the way, I’ve been managing developers from two different countries. That has helped me to produce a checklist a little different than what I’ve found on around the web over the years.

\n

While I was creating the checklist, I continuously had the book “The Checklist Manifesto: How to Get Things Right” by Atul Gawade in mind. That book has helped me build checklists for my work and personal life, and simplify things that sometimes seem too complex.

\n

If you are working alone or in a team, individually, remotely, or on-site, I wanted to share some advice on using the Front-End Checklist and the web application that goes with it. Perhaps I can convince you to integrate it into your development cycle.

\n

\"A

\n

Decide which rules your project and team need to follow

\n

Every project is different. Before starting a new project, the whole team (i.e. the project managers, designers, developers, QA, etc.) need to agree on what the deliverables will be.

\n

To help you to decide, I created 3 different levels of priority: high, medium, and low. You don’t necessarily need to agree with those distinctions, but they may help order your tasks.

\n

The Front-End Checklist app was done to facilitate the creation of personalized checklists. Change some JSON files to your liking and you are ready to start!

\n

Define the rules to check at beginning, during, and at the end of your project

\n

You shouldn’t check all these rules only at the end of a project. You know as well as I do how projects are at the very end! Too hectic. Most of the items of the Front-End Checklist can be considered at the beginning of your development. It’s up to you to decide. Make it clear to your team upfront what happens when.

\n

Learn a little more about each rule

\n

Who loves reading the docs? Not most of us, but it’s essential. If you want to understand the reasons for the rule, you can’t avoid reading up about them. The more you understand the why of each rule, the better developer you become.

\n

Start to check!

\n

The Front-End Checklist app can facilitate your life as a developer. It’s a live checklist, so as you complete items your progress and grade are updated live. Everything is saved in localStorage so you can leave and come back as needed.

\n

The project is open source, so feel free to fork it and use it however you like. I’m working on making sure all the files are commented. I especially invite those interested in Pug to take a look at the views folder.

\n

Integrate automated testing in your workflow

\n

We all dream of automation (or is it just me?). For now, the Front-End Checklist is just an interactive list, but some of the tasks can be automated in your workflow.

\n

Take a look at the gulpfile used to generate the project. All tasks are packages you can use with npm, webpack, etc.

\n

Validate every page before sending to QA team and to production

\n

\"A

\n

If you’re passionate about generating clean code and care about your code quality, you should be regularly testing your pages. It’s so easy to make mistakes and remove some essential code. Or, someone else on your team might have done it, but it’s your shared responsibilty to be catching things like that.

\n

The Front-End Checklist can generate beautiful reports you can send to a project manager or Quality Assurance team.

\n

Enjoy your work above all

\n

Some people might look at such a long checklist and feel sick to their stomach. Going through such a list might cause anxiety and really not be any fun.

\n

But the Front-End Checklist is just a tool to help you deliver higher quality code. Code that affects all aspects of a project: the SEO, the user experience, the ROI, and ultimately the success of the project. A tool that can help across all those things might actually help reduce your anxiety and improve your health!

\n

Conclusion

\n

The success the Front-End Checklist received in such a short time reminded me that a lot of people are really interested in finding ways to improve their work. But just because the tool exists doesn’t directly help with that. You also need to commit to using it.

\n

In a time where AI is taking over many manual tasks, quality is a must-have. Even if automation takes over a lot of our tasks, some level of quality will remain impossible to automate, and us front-end developers still have many long days to enjoy our jobs.

", + "url": "https://thedaviddias.dev/articles/front-end-checklist-just-tool-everything-depends-on-you", + "title": "The Front-End Checklist is just a tool… everything depends on you", + "summary": "The steps you need to follow to efficiently use the application frontendchecklist.io", + "image": "https://thedaviddias.dev/images/articles/front-end-checklist-just-tool-everything-depends-on-you/featured.jpg", + "date_modified": "2017-12-08T00:01:00.000Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days", + "content_html": "

\"\"
A screenshot of the Front-End Checklist repository (numbers are already outdated since I finished writing that article)

\n

Last month I launched two open source projects on GitHub. A few days later, my Front-End Checklist was showing more than 6,000 stars (17,000 as of writing). And I got 600 stars for my Resources-Front-End-Beginner project!

\n

It was unexpected for me to receive such support coming from so many people around the globe: USA, Brazil, China, Japan, France, Canada, Spain, Mauritius, Japan, Portugal... Even now, I still can’t believe how many pull requests I received with changes and corrections these last days.

\n

For so long I received gifts from the open source world. Now I felt it was finally time for me to give back everything I have learned, and to help others.

\n

As a professional Front-End manager, I spend my time teaching and encouraging others to learn and practice. I regularly share interesting content and useful tools on the Front-End Dev Mauritius group on Facebook. But I never planned that the Front-End Checklist will become a worldwide project.

\n

My motivations to write another Front-End checklist

\n

I’ve seen some Front-End checklists over the past year on the web:

\n\n

Some of them helped me years ago when I wanted to improve my Front-End knowledge, but most of them were just “not enough.”

\n

Two years ago, I decided to start writing my own checklist based on my experiences. That checklist became way more important when I started to manage Front-End teams in France and Mauritius. Based on questions and usual mistakes from the teams, the content kept improving.

\n

When I needed to teach someone how to become a better Front-End developer, I always had in mind that checklist that I started to work on. The document which started with a simple personal need became an ambitious tool for my team.

\n

Then I started to feel the need to share it with more people.

\n

A month ago I decided to put a first version on GitHub. And… at that moment, everything started to happen fast… really fast.

\n

Things can happen fast on the internet. Really fast.

\n

On 18 October, I published the first version of my Front-End Checklist. I went to see all members of my team and I asked them to put a star 😀 on the repository. They don’t really have the habit to star projects on Github, I had to encourage them to do so 😂.

\n

A few hours later, watching an episode of Hawaii Five-O with my wife, I opened my GitHub repository on my iPad. I was shocked to find that in only few hours, I had already received 700 stars.

\n

\"\"
700 stars on Github in only few hours

\n

I was not able to understand why and where these stars were coming from. (At that time, I didn’t know about the Insights > Traffic section on GitHub.)

\n

I hadn’t even published any tweet about the Github repository. The next day, I published on my Twitter account: just few likes and retweets about the checklist. Nothing that may explain, where everyone was coming from.

\n
View post on Twitter
\n

I then started to validate pull requests and answer some logged issues. I was feeling so grateful for that unimaginable support. Even working daily with international websites, I forgot sometimes the power of Internet. (Or it’s maybe I’m living in a small island far from everything 😂.)

\n

Next day, I received on Twitter a message from Product Hunt:

\n
View post on Twitter
\n

Without really taking time to think, I opened my Illustrator and designed a logo to put on the page. I kept it basic, inspired by the logo of Front-End Coders, a future NGO I’ll be launching soon officially.

\n

\"\"
Front-End checklist and Front-End beginners essential logos

\n

Since then, I received in less than one week 40 pull requests, was published on Codrops for my 2 lists in their Collective #359, on the Panda Weekly Newsletter #130 and #131, Hacker news, Reddit (multiple times), NewsCenter.io, La Ferme du Web and more.

\n

Translation in Japanese, Spanish, Chinese, Korean, Portuguese and Vietnamese were done in less than 2 weeks!

\n

\"\"
Insights for the Front-End Checklist on 23 October 2017

\n

The list is positioned first on Google for the words “Front-End Checklist”. Some landing pages on Github have the checklist on first position (Front-End Development, Checklist, Guidelines).

\n

I discovered more recently that the project was on top of the trending feed on GitHub with more than 6,000 stars in less than a week (on 27 October 2017).

\n

The Front-End Checklist is trending on Github!

\n

Checklists can be more than simple checklists

\n

I’m a big fan of “Awesome”, the curated list of awesome lists created first by\nSindre Sorhus\n. But some lists are colossal and I found myself sometimes struggling to find what I want. I’m not sure if it’s because the amount of links or the absence of information attached to each link.

\n

This is why I decided to add emoticons in my two lists. I usually don’t use them too often, but in that case I found interesting to add more of these to have more information about the content of my links.

\n

The Front-End Checklist use emoticons to add more informations for each rule\nAs mentionned in the introduction of the Front-End Checklist, I used:

\n
    \n
  • 📖 for documentation or article links
    • \n
  • 🛠 for online and / or testing tools links
    • \n
  • 📹 for any type media, but specially video content
    • \n
\n

I also used 3 images (High, medium, low) to integrate different levels of priorities. I didn’t find any emoticon that could replace these images easily.

\n

The list of resources for Front-End Beginners also use emoticons to add some additional informations.\nOn my list of resources for Front-End Beginners, for example, I decided to indicate free and paid tutorials. It’s easier to have these type of informations before you click on any link. People can directly focus on what they prefer.

\n

I use daily applications like Cloud Outliner Pro and MindNode to create new lists for my personal and professional life (and Todoist). I can’t imagine doing a complex task without a set of items into a list.

\n

If you have something to share, share it on GitHub now!\nWhen it comes to sharing documentation or code, today, there’s no other place I like more than Github. Last week I decided I needed to put my work in a place where people can easily access and participate.

\n

This kind of project is meant to be used and perfected by experiences and different points of view. Because Front-End development is always moving, evolving, it’s not always simple to stay on track on everything. Collaborative projects, where people can participate are for me the best way to have constantly updated tools.

\n

I regularly meet young developers and people who want to become Front-End developer. Even on my YouTube channel, I receive lot of questions and requests. The first advice I give to them is to start coding and put their work on Github. It’s a way for them to show their interests to their friends, a future recruiter and to the world.

\n

The Front-End Code Camp is an event workshop to better understand the process of web development.\nDon’t hesitate, everything you do, related to coding and web, take time to present it correctly on an README file and click “push”!

\n

What’s next?

\n

By the time I wrote this article I was already working on a small open-source web app... Today, you can already access the Front-End Checklist App online!

\n

Due to many requests, I’m already working on an NPM module which will probably be used by a future website. It was not in my initial plans but when I saw so many people asking for, I couldn’t refuse.

\n

I have much more to share! I’m working on other lists that may be as good as the Front-End Checklist… Well, I hope! 😃

", + "url": "https://thedaviddias.dev/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days", + "title": "How my open source project earned 6,000 stars on GitHub in just 5 days", + "summary": "The Front-End Checklist is my first open-source project gaining so much attraction and visibility! In this article, I explain what happen the first 5 days my project got published.", + "image": "https://thedaviddias.dev/images/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days/github-stars.jpeg", + "date_modified": "2017-11-28T03:47:53.024Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/articles/how-morning-routine-can-positively-change-your-life-forever", + "content_html": "

\"\"
Meditation is part of my Morning Routine now…

\n

I cannot remember how many times it was hard for me to wake up in the morning. The snooze button was my best friend every morning, and I even hated when I was late to go somewhere. It was hard to believe that other ways could possibly exist when you work in my job area.

\n
\n

At that time, I believed only one possible way to live was possible.

\n
\n

As a Front-End Web Developer, these last years, sleeping 3–4 hours per night during a few successive days, drinking cups of coffee during the day (sometimes Redbull) was my ritual and my life. And I thought all developers life was close to that. To be the best, you need to go further, faster and perform better than others, and you cannot be restful, calm, have lot of leisure if you want to succeed…

\n

Moving to Mauritius in 2015

\n

I was asked to move from France to Mauritius in October 2015, delaying my goal to move to North America, to help my company to grow up and to manage a Front-End team of 12 persons (today 20).

\n

I met my wife on that island, the most beautiful and Kind woman ever (Kajaal Dias). And you may imagine I was in the paradise…

\n

But in reality, it was far to be the paradise like most of my colleagues and friends may still imagine.

\n

At that point of my life, I was not feeling accomplished; I was not really happy for what I was doing and I was not living the life I always wanted.

\n

As most of the people, I was not able to take real actions and make changes to build something new and different.

\n

Hacking my body to sleep only 4 hours per day

\n

In October 2016, seeing web tutorials on Youtube, my eyes were attracted by a video title “My 20 Hour Day” by Travis Neilson on his DevTips channel. And that was probably the start of lots of changes in my life.

\n

It was the first time I heard about “polyphasic sleep”. A way to sleep less, but being in good health and more alert than sleeping successive 8 hours. At the beginning, I thought it was another fake experiment that may work for few people only. But my curiosity pushed me to dive in some advanced research. (Thanks to Damien Fauché and his french ebook: “How to sleep only 2h per day”)

\n
\n

Finally, few days after, I decided to try the polyphasic sleep - Everyman 3.

\n

At the beginning it was hard and challenging but my motivation and dedication help me not to give up. Today, it has been 4 months that I’m still sleeping 3–4 hours at night and taking 2–3 naps during the day.

\n

My core sleeping time is between 10h30 pm to 2h30–3h00 am. I do my first nap at home before leaving for work at 7h am for 25 minutes, my second nap is at 1h pm during lunch time for 20 minutes (in my car) and the third one at home again at 6h30 pm for 25 minutes after working hours.

\n

\"Screenshots
Smart Sleep on iOS helps me to track my naps and to wake up. The start was not easy.

\n

It is not always simple to be regular, but it’s really essential to listen to your body. I remember sometimes at the beginning sleeping much more in the weekend because I missed some naps during the weekdays. I simply took attention to my body reactions and even you need to try hard at the beginning to create a new habit, your body can adapt if your are really aware of its needs.

\n

Today I am able to fall in sleep in less than 5 minutes (I slow down my breath, put myself in a stress-free position and not let my thoughts haunt me). That helps a lot when you need to do a 20 minutes nap.

\n

Some weeks after, I started to feel that my life can be different, I could do things differently and put a real step forward to my dreams and achieve more than I always wanted to do.

\n

Five minutes to change your way of thinking

\n

Putting a step forward in life, is putting a step ahead of others. And to feel good with others, you need to feel good in your life. And it started with me being grateful…

\n
\n

Gratitude is the quality of being thankful and simply appreciate what we have, even in general we don’t want to see how lucky we are.

\n
\n

I started writing into “The Five Minute Journal”. It is not a journal like the others. It allows me to be grateful, mindful and plan which great things will happen during my day. I feel positive and happier when I use it.

\n
View post on Twitter
\n

Starting my day with my journal, creating and tracking new habits were just the beginning of my journey.

\n

The “Miracle Morning” saved me (S.A.V.E.R.S.)

\n

Sleeping less allowed me to have time… much more time (one more day in my week). And even I love my work and to be a programmer, I felt I gave maybe too much to my coding life and not to my personal life and personal growth. I needed to put a real daily routine, a way to equilibrate my life in all its aspects.

\n

After starting my Five Minute Journal, I discovered “The Miracle Morning” by Hal Elrod, reading articles and his book. That was exactly what I was looking for!

\n

Then I started to put a morning routine using my favorite Todo app (Todoist).

\n
View post on Twitter
\n

S.A.V.E.R.S means Silence, Affirmations, Visualization, Exercises, Reading and Scribing. These 6 elements are part of my daily routine now and help me to start my day in the most positive way.

\n

My typical Morning Routine and his apps

\n

Waking up at 2h30 am, I start my day with a glass of water and a personal recipe with lemon, water, cinnamon, cayenne, ginger, apple cider, honey and collagen (everything organic). It allows me to feel good for whatever I ate the day before or will eat during the day. That did a huge change for my stomach, and I never had any stomach problems or pain again. (Remember in Mauritius, most of the recipes are spicy).

\n

I brew my “Kick Ass” coffee from Kicking Horse Coffee with my beautiful Java Presse (I really love USA brands). I don’t really need coffee, but it’s more a personal pleasure for my morning ritual. (Sometimes I drink the Bulletproof Coffee by Dave Asprey with Coconut Oil and Ghee).

\n

\"\"

\n

For meditation I use the excellent app calm.com. It can take only 10 minutes sometimes more, but that practice in my life had a significant impact in my way I live the present and feel more peaceful. There are other useful apps like Headspace amongst others.

\n

I wrote some affirmations I read every morning and before to go bed. After I take some minutes to visualize what I want to achieve in my day, that helps me to keep focus.

\n

I use Day One for scribbing whatever I feel or have in mind during my day and recently move to Fields Notes for my Morning Pages (thanks to Loic Le Meur).

\n

I put Brain.fm for 15 minutes (with my headphones) and read at least for 15 minutes. I created a list of books on Evernote I want to read each week and month. I’m challenging myself with Goodreads to read 50 books in 2017… I am late already… :)

\n

I regularly undertake activities like coding, watching tutorials, design, social media updates, new projects depending on the day. It is normally between 1h to 1h30 hours in the morning and oneextra hour in the evening.

\n

Then when my wife wakes up, we go for a 20 minutes walk in the park near our apartment. Before I take my shower, 5 minutes of plank and 5 minutes of shaper, it’s enough for me to sweat and feel good.

\n

I add when I have 20 minutes free some Yoga exercises with the help of Daily Yoga. Otherwise I participate every Saturday morning to a session class.

\n

\"The

\n

I take my cold shower hearing my favorite podcasts The School of Greatness by Lewis Howes, The 5 AM miracle by Jeff Sanders and The Tim Ferris Show by Tim Ferriss. Can’t leave home without hearing these guys!

\n

Since few weeks, I’m practicing Intermittent Fasting, so I don’t take breakfast but instead, I prepare a natural juice with cucumber, lemon, parsley, apple, carrot, wheat grass and with all others vegetables and fruits I find around.

\n

During my short trajet to work (10 minutes), I listen with my wife some best-selling nonfiction books using Blinkist. I really recommend you to take a premium account, it is worths every penny.

\n

Then I start my day at work with some other routines I may share in another article.

\n

(I use to track some new habits on my mini-book “Track your habits” by kikki.k and with the Coach.me app.)

\n

My new habits and Routines are only at the beginning

\n

Experimenting lot of new things in the previous 4 months, give me the will to go further and do everything I can to achieve my goals and dreams.

\n

I know I’m still adjusting with my Morning Routine, but I can’t go back after all what I discovered, all people I meet that give me some mindfulness and clarity in the life. I’m so grateful for all of this.

\n

Nothing can stop me now to fulfill every single unique present moment of my life.

\n
\n

Tell me about your Daily or Morning Routine

\n

And you, do you have a daily or morning routine?

\n

What you do daily to improve your life, achieve your goals and take actions to build the life you want?

", + "url": "https://thedaviddias.dev/articles/how-morning-routine-can-positively-change-your-life-forever", + "title": "How a Morning Routine can positively change your life forever", + "summary": "Having a Morning Routine can positively change your life in so many good ways. Through experimentation, I explore ways to improve my health and my mindset.", + "image": "https://thedaviddias.dev/images/articles/how-morning-routine-can-positively-change-your-life-forever/featured.jpeg", + "date_modified": "2017-01-21T00:01:00.000Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + } + ] +} \ No newline at end of file diff --git a/apps/blog/public/rss/feed.xml b/apps/blog/public/rss/feed.xml new file mode 100644 index 00000000..bf74a338 --- /dev/null +++ b/apps/blog/public/rss/feed.xml @@ -0,0 +1,2622 @@ + + + + The David Dias | Front-End Developer, podcaster & content creator + https://thedaviddias.dev + Hey, I'm David Dias! Front-End Developer based in Toronto/Canada. I love talking about code, technology, expatriation and life. + Wed, 19 Jul 2023 02:35:37 GMT + https://validator.w3.org/feed/docs/rss2.html + https://github.com/jpmonette/feed + en-US + + The David Dias | Front-End Developer, podcaster & content creator + https://thedaviddias.dev/favicons/android-chrome-144x144.png + https://thedaviddias.dev + + All rights reserved 2023, David Dias + Technology + + <![CDATA[The Methodology and Principle of "User First"]]> + https://thedaviddias.dev/notes/methodology-principle-user-first + https://thedaviddias.dev/notes/methodology-principle-user-first + Mon, 17 Jul 2023 03:41:52 GMT + + You've probably heard about "mobile first", "content first", "design first", etc. But have you heard about "user first"? I think it's the most important principle of all.

+

"User First" is a methodology and principle where you put the user first in everything you do.

+
    +
  • Wondering about creating a new feature? Ask your users.
    • +
  • Wondering what could bring your user's friend to your platform? Ask your users.
    • +
  • Wondering what could make your user not using your platform anymore? Ask your users.
    • +
+

You get the idea.

+

So why some businesses continue to do the opposite? Why some businesses continue to do what they think is best for their users without asking them? Sometimes it can a business think they know better what users want.

+

I sometimes hear "our users don't know what they want, they always complain...". Well, if they complain, it's because they want something else.

+

User needs creates businesses and businesses create user needs. It's a virtuous circle. If you don't listen to your users, you will lose them. And not excuses will make up for failing to listen to them.

]]> + thedaviddias@gmail.com (David Dias) + + + <![CDATA[How to Convert MP3 to M4B for Audiobooks lovers, on MacOS?]]> + https://thedaviddias.dev/notes/how-to-convert-mp3-to-m4b-for-audiobooks + https://thedaviddias.dev/notes/how-to-convert-mp3-to-m4b-for-audiobooks + Sun, 16 Jul 2023 21:04:32 GMT + + Depending on the platform, sometimes you may get audiobooks in MP3 format. However, MP3 is not the best format for audiobooks. It doesn't support chapters, and it's not bookmarkable. M4B is the best format for audiobooks. It supports chapters and is bookmarkable. It's also the format used by Apple for audiobooks.

+

Last year, I discovered the only MacOS that simply convert multiple MP3 files into one M4B file. It's called AudioBookBinder App Store page and can be found on the App Store for free!

+

How to use AudioBookBinder?

+

AudioBook Binder is a simple app that does one thing and does it well. It converts MP3 files into M4B files. You drag your MP3 files into the app, and the cover, and it will convert them into one M4B file.

+

AudioBookBinder Files View
AudioBookBinder Files View
+
AudioBookBinder Cover View
AudioBookBinder Cover View

+

The options are limited but sufficient. You can set the cover, the title, the author, and the genre. I usually leave it to "Audiobook" for the genre.

+

I hope you find this app useful as I did.

+

And in case you store some audiobooks on your own server, you take a look at audiobookshelf. It's a Google and Apple app that allows you to listen to your audiobooks from your own server. It's open-source and free. You're welcome!

+

Audiobookshelf
Home page of Audiobookshelf

]]> + thedaviddias@gmail.com (David Dias) + + + <![CDATA[Stop using the "<hr/>" tag to design a horizontal line!]]> + https://thedaviddias.dev/notes/stop-using-thematic-break-to-design-horizontal-line + https://thedaviddias.dev/notes/stop-using-thematic-break-to-design-horizontal-line + Thu, 01 Jun 2023 04:38:32 GMT + " tag properly.]]> + I have seen way too many times people using the <hr> HTML element, which is called "thematic break" instead of CSS.

+

Using the HTML <hr> tag purely for designing horizontal lines is an incorrect practice. +The real purpose of the <hr> tag is to denote a thematic break in the content (like between paragraphs), not just to visually create a horizontal rule.

+

If you need a decorative line, CSS is a more appropriate choice.

+

For instance:

+
<div class="styled-line">Some content</div>
+
+

Example CSS:

+
.styled-line {
+  border-bottom: 1px solid #000;
+  margin: 1em 0;
+}
+
+

You generally don't want to have a single empty <span> or <div> element just to style it as a horizontal line. Often times, you can just use a bottom border on the element above it.

+

In terms of accessibility, using <hr> as a design element can confuse screen reader users, as it indicates a "thematic break".

+

Semantics are important, not only for accessibility but also for SEO. So, please, stop using the <hr> tag to design a horizontal line!

]]> + thedaviddias@gmail.com (David Dias) + + + <![CDATA[How to fix "set-output" when reading nvmrc from the GitHub Actions?]]> + https://thedaviddias.dev/notes/how-to-fix-set-output-nvmrc-github-actions + https://thedaviddias.dev/notes/how-to-fix-set-output-nvmrc-github-actions + Wed, 04 Jan 2023 04:38:32 GMT + + You may be getting the issue "The set-output command is deprecated and will be disabled soon. Please upgrade to using Environment Files." from your Github workflow.

+

Screenshot showing the 'set-output' issue from the Github workflows

+

Few months ago, I choose to update some of my Github workflows to read from my .nvmrc file instead of manually specifying my node version.

+
on: push
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Detect Node version
+        run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)
+        id: nvmrc
+
+      - name: Use Node.js ${{ steps.nvmrc.outputs.NODE_VERSION }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ steps.nvmrc.outputs.NODE_VERSION }}
+
+

But since October 2022 and the runner version 2.298.2, Github shows a warning regarding a future depreciation of the set-output command.

+

After few trials, I figured out how to update using the $GITHUB_OUTPUT instead:

+
on: push
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Detect Node version
+        run: echo "NODE_VERSION=$(cat .nvmrc)" >> $GITHUB_OUTPUT
+        id: nvmrc
+        # shell: bash (to be added if you use composite actions)
+
+      - name: Use Node.js ${{ steps.nvmrc.outputs.NODE_VERSION }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: '${{ steps.nvmrc.outputs.NODE_VERSION }}'
+
+

And "voilà", the warning should have disappeared and you should see the number of the version right after Use Node.js XXXX in your workflow.

]]> + thedaviddias@gmail.com (David Dias) + + + <![CDATA[How to fix "postbuild" and "prebuild" not working with pnpm?]]> + https://thedaviddias.dev/notes/how-to-fix-post-pre-build-pnpm + https://thedaviddias.dev/notes/how-to-fix-post-pre-build-pnpm + Sat, 30 Jul 2022 04:38:32 GMT + + When recently working on my blog, I tried to add a postbuild scripts with next-sitemap in my package.json. My goal was to automatically generate .xml files after each Next.js builds.

+

Using pnpm, I found out that my postbuild was working with npm but not pnpm.

+

I found out this issue on Github mentionning the same problem I encountered. It seems that pre/posts scripts are not activated if using pnpm.

+

I found the solution adding the line below in my .npmrc local file:

+
enable-pre-post-scripts=true
+
+

Now I can use pre/posts scripts and pnpm. I hope this could save you some time!

]]> + thedaviddias@gmail.com (David Dias) + + + <![CDATA[Finally received my Steam Deck confirmation email!]]> + https://thedaviddias.dev/notes/finally-received-steam-deck-confirmation-email + https://thedaviddias.dev/notes/finally-received-steam-deck-confirmation-email + Thu, 28 Jul 2022 15:47:33 GMT + This was a long wait! After months of lurking on Youtube watching others playing with their Deck, I finally got my purchase confirmation email for the Steam Deck!

+

+

What kept me sane during this time was probably this tool created by Labidou51. I was able to get a sense of when I would receive the email confirmation.

+
View post on Twitter
+

Some more days to wait and I hope to get this new amazing piece of tech (it's a computer) in my own hands! Maybe I can find a nice skin on Dbrand in the meantime 😜?!

]]> + thedaviddias@gmail.com (David Dias) + + + <![CDATA[My Decade in Web Development: A Personal Journey and Showcase]]> + https://thedaviddias.dev/articles/decade-web-development-personal-journey-showcase + https://thedaviddias.dev/articles/decade-web-development-personal-journey-showcase + Sun, 16 Jul 2023 21:43:28 GMT + + I published my first website around 2001. Probably before that. Almost 20 years ago. Unfortunately, the exact date I started doing web development is probably lost by now.

+

Everything began when my dear friend, Christophe Raimbault, a priest in the Diocese of Tours, asked if I was interested in managing and building a website for the "Notre-Dame La Riche" parish. If you are not too familiar with what a parish is, it's mostly a local community of different churches. At the time, this sounded like an amazing challenge but I had no idea what I was getting into. I had never touch a line of code before, I was only 15 years old. I never stopped coding since then.

+

The following list of websites are the ones that had the most impact on my life. I build a lot more websites but smaller and less important. I'm not including them here.

+

"Notre-Dame La Riche" parish website (2000-2005)

+

"Notre-Dame La Riche" parish website was my first website. At the time, no blogs, no Google, no Github... most of my time was dedicated in studying code source of other websites, reading books about HTML, CSS, PHP. It was definitelly a fun time. I was learning a lot, things seemed to be a lot more simple than nowadays.

+

Me presenting the website in 2005

+

I still have some code source and I can't bear looking at it just for few seconds 🤣: CSS mixed with HTML, no version control, layouts build with tables... as I said, it was fun but I'm glad things have changed. The website had multiple refactoring along the years. I remember having some animated banners build with Flash.

+

Notre-Dame La Riche parish website in 2004

+

Notre-Dame La Riche parish website in 2005

+
    +
  • Internet Archive URL: https://web.archive.org/web/20050204174756/http://paroissendlr-tours.cef.fr/
    • +
  • Stack: HTML, CSS, PHP, MySQL
    • +
  • Current URL: https://paroisse-ndlr-scel.jimdo.com/
    • +
+

WikiKto (2005-2006)

+

Wikipedia was launched in 2001. At this time, wikis were popular and Wikipedia was just beginning. I remember how much criticism this community project received. For many reasons that I have somewhat forgotten, I decided to create a dedicated wiki related to Catholic knowledge. I named it WikiKto (Kto is the French abbreviation for Catholic).

+

To my great surprise, the project gained a lot of contributors. I was no longer alone. I was not the only one who thought that a wiki about Catholic knowledge was a good idea. I was not the only one who believed that Catholic knowledge should be shared and made accessible to everyone.

+

The project was officially launched on May 13, 2005. I had to shut it down a little over a year later when I moved to Brazil and could no longer manage it.

+

WikiKto homepage in French
+
WikiKto homepage in English

+
    +
  • Internet Archive URL (French): https://web.archive.org/web/20060207015812/http://fr.wikikto.org/index.php/Accueil
    • +
  • Internet Archive URL (English): https://web.archive.org/web/20051227152637/http://en.wikikto.org/index.php/Main_page
    • +
  • Internet Archive URL (Portuguese - Launched October 12, 2006): https://web.archive.org/web/20070917013037/http://br.wikikto.eu/index.php/P%C3%A1gina_principal
    • +
  • Stack: MediaWiki, PHP, MySQL
    • +
  • Old URL: http://wikikto.org/
    • +
+

WikiKtosource (2005-2006)

+

WikiKtosource was launched few weeks after WikiKto and was the equivalent to Wikimedia. It was a wiki dedicated to offer open source resources for the catholic community. It was a place to share and download resources like images mainly.

+

+
    +
  • Internet Archive URL (French): https://web.archive.org/web/20060207032908/http://fr.wikiktosource.org/index.php/Accueil
    • +
  • Old URL: http://wikiktosource.org/
    • +
+

David Dias Blog (2010 to today)

+

I created a first version of my personal blog in 2010. Few months before I started my first job as a web developer. For many years, creating new content and maintaining a blog has been a challenge for me with so many things and ideas to create. The current version of my blog (2022-2023) is probably the one that finally got the most attention to me.

+

David Dias Blog in 2012
+
David Dias Blog in 2015
+
David Dias Blog in 2020

+
    +
  • Stack: from Wordpress, to Gatsby (2020) and Next.js (2022)
    • +
+

França Brasileira (2009-2011)

+

+

Back from Brazil, I decided to create a forum to help Brazilians to move to France and to connect to other Brazilians living in France. Thanks to all my contacts made in Brazil, I was able to get a lot of exposure and the forum and blog got very popular.

+
    +
  • Internet Archive URL: https://web.archive.org/web/20111210020959/http://www.francabrasileira.com/
    • +
  • Stack: Workpress, PHP, MySQL
    • +
  • Old URL: http://www.francabrasileira.com/
    • +
+

Frontenddeveloper (2013-2014)

+

frontenddeveloper.fr was another trial to create a blog about front-end development. I was not very active on it and I decided to close it after few months.

+

+
    +
  • Internet Archive URL: https://web.archive.org/web/20130205064050/http://frontenddeveloper.fr/
    • +
  • Stack: Workpress, PHP, MySQL
    • +
  • Old URL: http://frontenddeveloper.fr/
    • +
+

Front-End Checklist (2017 to today)

+

The Front-End Checklist is an open-source project I created just few month before leaving Mauritius. Initially build for my frontend team, it became a worlwide and very popular project around the globe. I have been meaning to build a V2, more modern and with a better user experience. Not sure if and when I will have time to do it.

+

+
    +
  • Stack: HTML, CSS, JavaScript
    • +
  • Current URL: https://frontendchecklist.io/
    • +
+

World Web Stories (2021 to today)

+

I officially start the podcast World Web Stories when I was living in Mauritus, in 2016. I was not very active, only had 5 episodes and it was in French. In 2021, unemployed for few weeks, I decided to relaunch the podcast in English with a new format and with the goal to interview one person from each country in the world.

+

Unfortunately, I choose to spend more time on my other podcast "Erreur 200". I still want to continue this project, but I'm not sure when I will.

+

+
    +
  • Stack: Gatsby, React
    • +
  • Current URL: https://worldwebstories.com/
    • +
+

Erreur 200 (2021 to today)

+

Erreur 200 is a French podcast I co-host with Jean-Rémy Duboc about web development. We talk about our experience, our mistakes, our successes, our tips and tricks. We also interview people from the web development community.

+

+
    +
  • Stack: Gatsby, React
    • +
  • Current URL: https://erreur200.com/
    • +
+

Conclusion

+

Looking back more than 10 years, I'm very proud and grateful for all the opportunities and projects I had the chance to work on. I'm also very grateful for all the people I met along the way. Those projects shaped in a way my career and life and I'm not even mentionning all the professional projects I've worked on.

]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[Raycast Applications That Will Make You a Super Developer!]]> + https://thedaviddias.dev/articles/raycast-applications-super-developer + https://thedaviddias.dev/articles/raycast-applications-super-developer + Mon, 12 Jun 2023 23:59:58 GMT + + Spolight on Mac is great, but it always lacked the possibility to add custom commands and third party access. And that's where Alfred comes in. It's a great application that allows you to do just that. I have been a big fan of "Alfred" at least since 2015. I would recommend this application to anyone who wants to be more productive on their Mac. I was a big fan!

+

But few months ago, one of my colleague talked to me about Raycast. Eager to always find better tools and expand my productivity, I decided to give it a try. The first thing I noticed was the speed. Not that "Alfred" is slow, but Raycast was just blazing fast!

+

I was hooked! And when I found out that all the applications were build in TypeScript, this was the cherry on the cake! After a few weeks now using it, I don't see myself going back.

+

And today, I wanted to share with you the 10 applications I use the most in Raycast, on a daily basis. Those applications are more towards developers but I highly recommend you to check Raycast out (it's free)

+

One Password

+

+

1Password has been my password manager for many years. I can search, copy username or password, open the website. The only annoying part is the fact that 1Password always ask me to give access to the application. Annoying but still useful.

+

TailwindCSS Docs

+

+

I use TailwindCSS and nothing better than opening the TailwindCSS documentation directly from Raycast. I could search directly on the website but this saves me some clicks.

+

Github

+

+

Open pull requests, notifications, discussions from Github... I can also search directly repositories from Raycast.

+

Spotify

+

+

Play, pause, stop, next... I can control Spotify directly from Raycast. This is something I was always using on Alfred, couldn't approve Raycast if I didn't have this option.

+

Raindrop

+

+

Raindrops is my favourite bookmark manager. The kind of tool that constantly adds new features. I can search, open, add new bookmarks directly from Raycast with the Raindrop application.

+

Vercel

+

+

I love seeing the status of my deployment on Vercel from Raycast. Can directly open my projects too.

+

Visual Studio Code

+

+

I use "Visual Studio Code" Raycast App in combinaison with "Project Manager" to quickly access all my projects in an instant.

+

Bonus: Clipboard History

+

+

This is not an application, but a feature I loved on Alfred and actually exists on Raycast, even it's slighly less powerful.

+

"Clipboard History" give you access to your last copied items. I've assign the double ⌥ (action) key to open the clipboard history. This is a feature I use constantly, and I'm glad it's available on Raycast.

]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[Beyond User Testing: Leveraging Frontend Experience]]> + https://thedaviddias.dev/articles/beyond-user-testing-leveraging-frontend-experience + https://thedaviddias.dev/articles/beyond-user-testing-leveraging-frontend-experience + Thu, 01 Jun 2023 13:07:27 GMT + + User testing is a crucial tool for gathering feedback on a product, but it's not enough to truly understand and improve user engagement. For the past 13 years, I have been building multi-language platforms for international brands and for a wide variety of users. Even in a space that constantly changes, where users have evolving needs, it's important to also acknowledge the role that experience plays in understanding them.

+

Photo by Marvin Meyer on Unsplash

+

Being a Front-End Developer gave me and all my colleagues around the world a unique perspective on user experience. We understand how small design decisions can have a big impact on the user experience, and we have a deep understanding of how users interact with products. By leveraging our experience in front-end development, we can help create products that are not only effective but also enjoyable to use, leading to increased user satisfaction and loyalty.

+

The limits of user testing

+

User testing is a critical component of product development that can help identify usability issues and gather feedback from real users. By testing products with representative users, product teams can gain valuable insights in how users interact with their interfaces and what their pain points are. Whatever you use services like User Testing, or your own user testing directly with regular users, user testing also possess some limits that can’t be overlooked.

+

For example, users may not always be able to articulate their needs and preferences accurately, or identify more obvious usability issues that sometimes are more subtle or hidden. User testing is also typically conducted in a controlled environment, which may not always accurately reflect real-wold usage scenarios.

+

What about people that don’t use technology in a daily basis?

+

Usually user testing is done by a certain user group or demographics and don’t include 100% of all users. From my point of view, user testing can’t be really complete without testing with people with disabilities. For people with experience in doing accessibility testing with real users, I’m sure you will agree that.

+

User testing can lead to success or failure

+

Through Internet history, user testing had lead to create successful products:

+
    +
  • Slack (which I daily use) is a popular communication tool. During its development, Slack's team conducted user testing to identify usability issues and gather feedback from its target users. This feedback helped them make improvements to the platform, resulting in a product that was easier to use and more engaging for its users.
    • +
  • Dropbox is a cloud storage platform that allows users to store, share, and collaborate on files. Dropbox's team used user testing to identify pain points and improve the user experience, resulting in a product that was more intuitive and engaging for its users.
    • +
  • And a lot more…!
    • +
+

But user testing can also fail to uncover critical usability issues which can contribute to the failure of some projects:

+
    +
  • Google Wave was a communication and collaboration platform that was introduced in 2009. User testing suggested that users would appreciate the platform's advanced features and integration with other Google products, but when it was released to the market, users found the platform confusing and difficult to use, leading to low adoption rates and eventually the discontinuation of the product in January 2018.
    • +
  • The Amazon Fire Phone was a smartphone introduced by Amazon in 2014. User testing suggested that users would appreciate the phone's unique features, such as the dynamic perspective display, but when it was released to the market, users found the phone overpriced and underwhelming, leading to poor sales and eventually the discontinuation of the product. The lack of empathy towards the users needs was also part of the reasons why it failed.
    • +
  • Twitter timeline algorithm: In 2016, Twitter also faced public outrage when they introduced an algorithm-based timeline, which did not align with users' preferences for a chronological timeline that allowed them to see real-time tweets in ascending order.
    • +
+

Building a successful project is not an easy task, a lot of factors can influence the success or the failure of a new product. Nowadays, users have different needs. Users switch faster to competitor then before, we have daily examples of that.

+

User testing is one tool in companies belt that should be used as often as possible, but shouldn’t be the only one.

+

Leveraging Front-End experience

+

Front-End Developers (FED) are not just coders. Usually seen as the ones that “just” integrate designs into HTML, CSS and JavaScript, their t-shape personalities is often times overlooked (not all FES have t-shape skills though).

+

A FED can play a critical role in creating engaging user experiences.

+

Collaboration and communication for better user engagement

+

As I said in my previous article about Front-End Developers, Web and UX/UI Designers collaboration, collaboration and communication is key in building a successful product.

+

This collaborative approach allows different perspectives to merge and create a more holistic vision of the product. As Front-End Developers, we have the unique position of working at the intersection of design and technology. We are often the ones who bring the designers' visions to life while ensuring that the product remains functional and user-friendly.

+

Front-end development is about more than just making things look good. It's about creating a seamless and intuitive interface that guides users through a product. Every button, every transition, every piece of interactive content is a chance to engage users and keep them invested in the product.

+

The Benefits of Leveraging Front-End Experience

+

Front-end developers have a deep understanding of user behavior, as they are responsible for creating the interactive elements that users engage with. They can use this knowledge to create more engaging user interfaces and to guide user testing to focus on areas of the product that are most likely to affect user engagement.

+

Beyond just implementing designs, a seasoned FED can provide insights and suggest improvements to the UX/UI designs based on their knowledge of what is technically feasible and what would create a smoother user journey. They can spot potential pitfalls in the designs that might be overlooked during user testing.

+

For example, a developer might notice that a particular design element could cause issues on certain devices or browsers. They might also suggest an alternative way of implementing a feature that enhances the user's experience. I have been advocating about accessibility for years now. Last year, I became CPACC certified and I continue to advocate for accessibility in my daily work. Not everyone understand what web accessibility is and how it impacts users. It takes time and effort to educate people about it.

+

The Future of User Engagement

+

As technology advances, users' expectations also rise. They demand faster, smoother, and more intuitive interfaces. User testing will always be a vital tool for gathering feedback, but to meet these evolving demands, we need to go beyond testing.

+

Incorporating the front-end developer's expertise into the design process and user testing can help create a product that not only meets the users' needs but also provides an engaging and satisfying experience.

+

We must continue to push the boundaries, experiment with new technologies, and constantly seek ways to better understand and improve user engagement. Only by doing this can we hope to create products that users will love to use.

+

Front-End Developers bring a valuable perspective to the product development process. Let's use it to its fullest potential to create engaging, user-friendly products. After all, the success of any product lies in the satisfaction of its users.

+
+

At the end, user engagement is not just about the single experience of a product but the entire journey. It's about creating an engaging, intuitive, and satisfying journey that users want to return to again and again. And Front-End Developers play a crucial role in crafting this journey.

+

Remember, user testing is a part of the journey, not the destination. We must use all the tools at our disposal, and that includes leveraging the front-end development experience to truly understand and improve user engagement.

+

Let's continue to build with the user in mind, always striving to enhance their journey, their experience, and ultimately, their engagement.

+

Resources

+]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[How Front-End Developers, Web and UX/UI Designers could better collaborate together?]]> + https://thedaviddias.dev/articles/how-front-end-developers-ui-ux-could-better-collaborate-together + https://thedaviddias.dev/articles/how-front-end-developers-ui-ux-could-better-collaborate-together + Sun, 13 Jun 2021 22:27:03 GMT + + The web has changed so much in the past 10 years. Technology has enabled new usages, new ways of communication, new ways of seeing the world. Web Design trends are also constantly changing, every year we see new trends that sometimes stick for few years, sometimes they don’t. The same happened in web development: we’ve seen new JavaScript frameworks, new ways to build components, new ways to code CSS, using pre or post-processors. The list is almost infinite. But something that has not changed is the need for collaboration between people working on the same web project.

+

Photo by Josh Calabrese on Unsplash

+

As a Front-End Developer, I had the chance to work with numerous Web Designers and UX/UI designers over my career. No matter if I was in Brazil, France, Mauritius or Canada, I have observed the same challenges over and over again. And one unique solution doesn’t always apply to similar situations. You need to find what works best for you.

+

In this article, I want to share some topics I believe should be discussed. From my point of view, we, as web professionals want the same thing: build accessible and performant products that will provide the best user experience possible.

+

If you want your product to work, to get revenues, then you should start with the above goal first, not the other way around.

+

But let’s start with some definitions.

+

What is a Web Designer?

+

Photo by Eftakher Alam on Unsplash

+

A lot of people could probably define what is a Web Designer better than I. But from my perspective, as a Front-End Developer, a Web Designer is someone with extensive skills in design that understands the constraints and the possibilities given by the web. I’ve seen a lot of really good “designers” but who were not always able to fully understand the “web” part of their title. Designing for the web is far from being straightforward. Be familiar with how to use Sketch or Figma is surely part of being a Web Designer, but it’s unfortunately not enough. And honestly, for me it’s totally fine: you learn as you progress.

+

Probably, from my point of view, a Web Designers shouldn’t just rely on his knowledge and put pressure on himself to know everything about the web. That’s where a Front-End Developer can come into play. Front-End Developers are the ones that spend their time on the web, scrolling, studying code, finding new ways of building components… They are the perfect buddies of Web Designers, and both should be pairing regularly.

+

What is a UX/UI Designer?

+

Photo by Kelly Sikkema on Unsplash

+

A UX/UI Designer is someone where focus lays on users. Nothing should be more important than the user, the person, the human. A UX Designer needs to spend a lot of his time doing researches. I’ve always considered that a good UX/UI Designer should be passionate about people, what they want, how they want things… Of course, you also have the word “designer” in the title, because in the context we are talking about, a UX/UI Designer has the task to understand the user and also know what works the best in terms of UI. Something that works for a website dedicate to moms may not work for a website which main users are teens.

+
+

I’ve always considered that a good UX/UI Designer should be passionate about people, what they want, how they want things.

+
+

But he is not the only one who has developed an understanding of what users prefer and are used to when they browse the Internet. When a Front-End Developer wants to create a piece of code, a component, he usually dives into his structured memory of patterns. When someone says “button”, it triggers in his brain all the times (thousands of) he clicked on a button, but also snippets of CSS code that can be used to create a button or the long hours he spent analyzing CSS framework documentation…

+

Front-End Developers can be a huge asset for any UX/UI Designer because they’ve learned so much about the web and usual patterns from a different perspective.

+

What is a Front-End Developer?

+

Photo by Nubelson Fernandes on Unsplash

+

I know a lot of people that could potentially disagree with my definition. For me, a Front-End Developer is a builder, someone that loves building web content using a combination of multiple skills. Because a Front-End Developer is not just a coder. To be a Front-End Developer you need to learn HTML, CSS, JavaScript but these are just the basics. You need to understand how to make a website accessible, how to use CSS to create an amazing layout, how to translate a design file to CSS, how to keep your application performant, how to build a UI/pattern library… the list is long but I’m sure you get my point.

+

A Front-End Developer is the backbone of any web content. Without a Front-End Developer, the website couldn’t be created (even if you use a no-code generator, a Front-End Developer had to create the UI).

+

Does that mean that a Front-End Developer is more important than other people in their team? Absolutely not, but his role requires him to be a facilitator, to understand what he can provide for the rest of his team.

+

A Web Designer, UX/UI and Front-End Dev enter together in a bar…

+

Now that we have a better idea of what these roles represent, how do we make them work together in a way that they feel empowered and enjoying the collaboration?

+

It’s about mindset

+

Any athlete will tell you that mindset is everything to achieve their goals, to win championships, to perform better. This is not that different when it’s about working as a team. Everyone’s mindset is important within a team. But it’s something that the group itself doesn’t have any control. Only individuals can decide to have an open mind, a true relationship with the other member of the team, visualize solutions instead of problems…

+

We often forget that we all have a common goal. Sure, we can also have multiple goals for ourselves but if you are part of a team, it’s only to achieve a common goal.

+

Differences are what make this specific group worth existing. EVERYONE has a role to play in any team.

+

It’s about culture

+

But it’s not only about individual mindsets. A team with a Web Designer, UX/UI and developers are usually part of a corporation. All over the world, numerous companies understand and value their culture. This is an essential part to guide employees towards common goals and achieve specific tasks.

+

If companies provide the tools and the support to create trust and equality between the members of a team, then it makes it easier for people to collaborate together and learn from each other.

+

It’s about ego

+

Aaah the ego! Some people say that a bad reputation can hurt any company, I believe ego can hurt sometimes even more. The ego is one of the biggest enemies of any company, team or leadership group. I had the displeasure to work with 1–2 people during my career with a pretty big ego.

+

I will always feel the pain these people have caused, it’s important to make peace with any related event but also with them. After all, we are all humans.

+

Ego shouldn’t exist in a team. Period.

+

It’s about collaboration

+

Collaboration is knowing that people are better than you in certain areas. It’s knowing that you can learn from them. It’s knowing that you can also give something to them. Collaboration is finding the balance and putting everything and everyone at the center of the group.

+

And no, collaboration is not something you implement once and it’s done, everything will always work perfectly. Collaboration is an equilibrist performance that could go wrong at any time. But you have to keep going because it’s so rewarding when you succeed!

+

How to get your team to work together?

+

Before giving you some answers, I want to tell you about two of the best experiences I had during my career with Web / UX / UI Designers.

+

Photo by Kaleidico on Unsplash

+

My two best experiences with Designers

+

My first best experience was in August 2014, in Cincinnati, USA. I’ve worked for a month with Barefoot Proximity to build a new platform. Julie Tran, which was leading the project in terms of design would create pieces of design, sent them to me for prototyping and we would discuss around that. What made the experience amazing was the level of exchange and collaboration.

+

It wasn’t just about, “Hey, here is the design”, it would be more “hey, here is the design, can you do a quick prototype to see if that works. Let me know if you see any problems that may occur for mobile, accessibility etc…”.

+

I was able to give my feedback based on my knowledge and experience, Julie would also push back when I would be hesitant to test a particular approach. Combining our visions, being open with each other was what made this project successful. Even with my English being pretty basic at this time, we both enjoyed our work and I kept only good memories from that collaboration.

+

My second best experience was in 2015, with Julia Bruyneel, who was working in Paris as a Web/UX Designer freelancer. I was in Mauritius for a month and we had to collaborate for few weeks on new designs for an existing project.

+

Even with the distance, and not knowing each other before, Julia would contact me and exchange about designs she would have made. That simple communication and regular exchange were reassuring for me (was lead on that project for 3 years) but also a manifestation of maturity and professionalism from Julia. It was short but I kept good memories of that collaboration.

+

Mindset, culture and processes

+

The three main keys, from my unique point of view, to have successful teams rely on mindset, culture and processes.

+

Mindset, culture and processes are the 3 keys for better collaboration

+

Mindset: If you want to have people working together, in collaboration, using each other experience and vision, they need to have a similar mindset. I’m not saying an “identical mindset” or “same personalities”, I’m saying “similar mindset”. When everyone understands the goal of the team and is open to see each human behind his title, then you have more probabilities to have a successful team.

+

Culture: Sometimes, having a similar mindset is not possible or challenging. In that case, is the responsibility of the structure or company to influence a specific mindset. Companies can decide who should be part of the “family”. That’s why the recruitment process is important.

+

Processes: a lot of people I know, hate the word processes. For me, processes have always mean freedom. When you have a defined and clear process, you don’t have to stress or be hesitant or afraid. A process should exist to guide you in a process where people can predict what will come next. It’s reassuring to know that everyone has the same process in mind. Sometimes, when people's mindsets are not similar or the culture is lacking, processes should help people to visualize the direction they need to take.

+

You could take these 3 points separated or combine them to maximize your chances to build successful teams.

+

What Web / UX / UI Designers should know about Front-End Developers (letter dedicated to designers)?

+
+

“We love the web and we love being part of the creation process! We decided to become Front-End Developers because we love building! And it’s not just about converting designs to CSS, we love understanding the why, the how of the creation. +And we understand that this may be scary at times because why the heck a Front-End Developer will tell a designer that his design is not accessible? Or tell the designers that he is not sure, this is gonna work for the user? It’s not about competing, it’s about putting energies in sync. +The problem sometimes is that we see patterns and code examples in our minds that we don’t always translate for other people to understand. But we’re working on that! I promise! +We have more to share than just our “title”, we have more to give than just lines of code. We are here to help!”

+
+

The main takeaways from this article

+

If you are still reading, I hope you also share some common ideas exposed in this article. I have dedicated a portion of my career to try to be a facilitator and share all the knowledge I accumulated to build awesome products.

+
    +
  • Teams composed of Web Designers, UX/UI Designers and Front-End Developers sharing a similar mindset have more chances of success.
    • +
  • An internal culture that encourages collaboration and equality between professionals will always produce the best results.
    • +
  • Enforcing best practices through processes will help to make things more predictable and reassuring.
    • +
  • The ego is one of the worst enemies of teamwork. You shouldn’t have any space for ego.
    • +
  • A Front-End Developer is just a passionate professional who wants to be part of the creation process and not just at the end. His integration along the project will ensure the success of any project.
    • +
+
+

What about your experience? How do you like to work with others? What would you like to see happening more often within your team?

]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[9 Best Practices & UX Improvements for the two-factor authentication (2FA)]]> + https://thedaviddias.dev/articles/9-best-practices-ux-for-two-factor-authentification + https://thedaviddias.dev/articles/9-best-practices-ux-for-two-factor-authentification + Thu, 25 Feb 2021 00:01:00 GMT + + In 2023 alone, cybercriminals will steal 33 billion records. It takes 196 days on average to identify a data breach. The cost of a data breach will reach $150 million by 2020... +These numbers may be scary but they are only previsions. Things could be much worse in the near future. Security has become a hot topic these last years, almost everyone on the planet has already heard about a company data breach or even a friend that lost his Facebook account because someone hacked it! No one is completely safe nowadays. +
Photo of a white lock icon on a purple fullscreen background displayed on a cellphone screen

+

I've recently spent multiple hours ensuring that all the accounts I possess use a unique password, complex and long with at least 20 characters and with the two-factor authentication (2FA) enable if present. I've discovered so many disparities between companies and so many issues in terms of features and user experience. I wanted to share with you in this article, what I believe are the best and recommended features for any website or company that takes the security of their users seriously.

+

1. Offer two-factor authentication options

+

That is the starting point.

+

If you care about your users or customers, you should give them the choice to activate the two-factor authentication. On around 800 websites where I have an account, only 5% offer a 2FA option. Some may argue that if you don't have highly sensitive information, it may be overkill to offer the 2FA. But any personal information could be considered sensitive.

+

If you care about your users and their security, give them the option to enable the 2FA. Period.

+

2. Don't force the users to choose only one 2FA method

+

Google, Facebook, Twitter... they all offer simultaneous ways for 2FA: text message, authentication app and security key. More commonly, at least in a text message and authentication app, the security key seems to be set up only on certain services.

+

But I've been surprised to see Etsy, even they use toggles on their UI, to force you to only choose one of the options. I'm not even sure if it was originally designed to work like that.

+

Screenshot of the two-factor options on Etsy
The two-factor options on Etsy

+

Bit.ly and booking.com in other hand only allow you to use your phone as a 2FA device. So if you lose your phone and your email access, you could be screwed.

+

Screenshot of the verification code form on Booking.com. A verification code field is showed empty with a blue button below saying "Verify and sign in"
The verification code view on Booking.com

+

Mailchimp and Tumblr, on the contrary, only offer 2FA using an authentication app.

+

Zapier has an awesome step by step 2FA setup, probably one of the best I found. They offer multiple complementary ways and specifically tell you "in the event you get locked out of your account and have lost both your authentication device and recovery codes". The user understands that providing his phone number is an additional way to ensure he/she can access his account in case he/she lost the other ways to connect to their web app.

+

Screenshot of the two-factor set by step setup on Zapier. Currently showing the "Emergency Verification" step which contains a Phone Number field with a verification code field.
The two-factor set by step setup on Zapier

+

3. Make the QR code an image

+

I have been using 1Password for quite some time now and the modal that scans the QR code doesn't always find the QR code. In that case, I found myself drag and dropping the QR into that modal to be recognized. But it only works when the code is an image.

+

I would recommend having it as a format image that can be saved / drag and dropped.

+

Reddit for example don't have the QR code as an image. Fortunately, everyone offers the text version of the QR code that you can use in your authentication application.

+

4. Keep the code you send by email in the same format as requested in your app or website

+

This one only happened to me once. It happened with Instagram.

+

When Instagram sends a "verification code" by SMS, they included a space. If you copy-paste that code where it's required, first the input doesn't want the space and the last digit is not included in your paste. It's an annoying issue that could be fixed easily!

+

Instagram verification SMS code
Instagram verification SMS code

+

5. Give the option to have recovery/backup codes

+

Sounds weird when said at loud but a lot of websites don't offer backup/recovery codes when you enable the 2FA. This was a surprise for me at first, 2FA means you will always have backup codes in case you lost access to your phone, email or the app you use to generate the random number. Nowadays, some websites don't offer that option. I tend to be really careful with those.

+

Kickstarter and WPEngine are examples of websites that don't offer you any recovery/backup codes. I hope they could improve that.

+

The Kickstarter security modal
The Kickstarter security modal

+

6. Always give the option to download the recovery codes

+

Most of the websites propose to copy the recovery codes. This is not the best option.

+

It's nice to have it, sure, but it's not enough. I personally store all my recovery codes in multiple places: one is the vault from Dropbox. Having just to drag and paste a simple text file is easy and fast.

+

If you offer only the option to copy, then you could be forcing the user to:

+
    +
  1. open the text editor
    2. +
  2. paste the codes
    3. +
  3. give a name
    4. +
  4. save the file on your device
    5. +
+

Technology is there to save user's time.

+

Slack for example allows you to "Print codes" but not download them. Why not? I have to generate a PDF instead of my simple text file. Not the best user experience.

+

The Two-Factor Authentication Backup Codes modal on Slack
The Two-Factor Authentication Backup Codes modal on Slack

+

7. In the recovery code text file, always write which platform these codes are coming from

+

Even Facebook can make mistakes and this one is important for me. Currently, if you download the recovery codes from Facebook, you open the file and you can't find any mention of Facebook or the name of the account. The file name facebook_recovery_codes is helpful but in my opinion, not enough. The name of the account and the name of the platform should be a minimum.

+

And to make it more useful, adding the date when the codes were generated could also be added.

+

Google which is a good example, uses your username in the name of the file, and also adds:

+
SAVE YOUR BACKUP CODES
+Keep these backup codes somewhere safe but accessible.
+
+LIST OF CODES
+
+(email@gmail.com)
+
+* You can only use each backup code once.
+* Need more? Visit https://g.co/2sv
+* These codes were generated on: Date, 2021.
+
+

8. Allow the user to regenerate recovery/backup codes

+

It's essential to give the user the ability to regenerate recovery codes. Some don't offer this useful option.

+

9. Offer more than one code (maybe?)

+

This one is less important but I still wanted to mention a key difference in terms of recovery/backup codes.

+

Most of the companies only offer one code vs a list of multiples codes that can be used. It's hard for me to defend one approach vs the other one. I just know that I feel better when I have more than one code.

+

About security keys

+

Security keys are the less common way to secure your account. If you are a public figure or someone with a high level of responsibility, having a security key could give you a little bit more peace of mind. But for a normal user, it may be overkill. Nonetheless, I wanted to maximize the security of my accounts and recently bought the Titan Security Key from Google. The USB version works on any computer and I use the Bluetooth version in case I'm on my iPhone or iPad.

+

The white box of the Titan Security Keys by Google showing the bluetooth and USB 3.0 key
The box of the Titan Security Keys by Google

+

They both are not cheap, but security should be part of your "unlimited budget", the same as for food.

+

Conclusion

+

I'm not a security expert and have limited knowledge in terms of security. But as a Software Engineer and particularly a user, I believe we have a long way ahead until most of the platforms implement all the tools to ensure secure access for users.

+

Recap:

+
    +
  1. Offer two-factor authentication options
    2. +
  2. Don't force the users to choose only one 2FA method
    3. +
  3. Make the QR code an image
    4. +
  4. Keep the code you send by email in the same format as requested in your app or website
    5. +
  5. Give the option to have recovery/backup codes
    6. +
  6. Always give the option to download the recovery codes
    7. +
  7. In the recovery code text file, always write which platform these codes are coming from
    8. +
  8. Allow the user to regenerate recovery/backup codes
    9. +
  9. Offer more than one code (maybe?)
    10. +
+

Thanks for reading, I hope these suggestions would help you to have a better UX and improve your 2FA implementation.

+

Feel free to ask me anything in the comments below!

]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[How to deploy your Next.js app on Netlify using Github Actions]]> + https://thedaviddias.dev/articles/how-to-deploy-your-nextjs-app-on-netlify-using-github-actions + https://thedaviddias.dev/articles/how-to-deploy-your-nextjs-app-on-netlify-using-github-actions + Thu, 21 Jan 2021 00:01:00 GMT + + I've recently spent some time working with Next.js projects. Once my projects are done, the next logical step is to deploy these apps to be accessible to the world.

+

I have naturally used the Vercel platform, which couldn't be easier to use and deploy your application with ease. Then I tried AWS Amplify, which I particularly love but for now, requires you to use the Serverless Framework if you want to benefit from Server Side Rendering (SSR) capabilities.

+

Then, I remembered that Netlify has added support for Next.js, including dynamic routes, Preview Mode and more around November 2020. It was time for me to try it! But I also wanted to have a real CI/CD in place, to test my code and do more actions before deploying to Netlify. That's where Github Actions came to the rescue!

+

I'm going to describe in this article, all the steps you need to take to deploy your Next.js application on Netlify using Github Actions.

+
+

The full version of the project can be found on Github.

+
+

Create a new Next.js App and push it to Github

+

As always, you need to have a recent version of Node and NPM installed on your machine. I personally recommend using NVM since it simplifies having multiple active Node.js versions.

+

To create a new Next.js project, type this command in your CLI:

+
npx create-next-app name-of-your-app
+
+# move into the app's root directory
+cd ~/path-to-projects/name-of-your-app/
+
+

This will install a new application using a basic Next.js boilerplate. Don't forget to move to your app root folder before launching any next commands.

+

Once your Next.js project is locally created, you can create a new project on Github and push the code generated.

+

(For those you are new to coding, feel free to follow these steps to create a new repository on Github.)

+

Setting up your Netlify project

+

There are 2 ways of creating a new Netlify project:

+
    +
  • Creating a project online here
    • +
  • Using the Netlify CLI.
    • +
+

Let's use the CLI this time, I'm sure you already created a new project in the past using the Netlify interface.

+

Let's start by installing netlify-cli globally:

+
npm install netlify-cli -g
+
+

Then check if the installation succeeds, confirming with this command:

+
netlify
+
+

Netlify account authentication

+

Now you need to link your computer with your Netlify account. To authenticate with Netlify, you need to run this command:

+
netlify login
+
+

This will open a new tab in your browser where you'll need to "Authorize your Application" and then grant access to Netlify CLI.

+

In case you already logged in previously, the console will output:

+
Already logged in via netlify config on your machine
+
+

Netlify project creation

+

Now that your CLI is authorized to communicate with your Netlify account, it's time to programmatically create a new project:

+
# create a new Netlify site using the Netlify shortcut: ntl
+ntl init
+
+

The first question you are asked is if you want to connect this directory to an existing Netlify site or create & configure a new site. Choose Create & configure a new site:

+

Connect to an existing directory or create and configure a new site

+

Then you have to choose your team:

+

Question about the name of the team

+

Choose the name of your application:

+

Screenshot of the CLI asking for the name of your application

+

After entering the name of your project, the site is created and few URLs populated the CLI which gave you access to your admin URL, the URL of your site and the Site ID. Keep the site ID aside, you will need that number later on.

+

For the next 3 questions (build, start and function), insert a space. We are not going to directly use the NPM scripts, our Github actions will later trigger each command. +

Screenshot of the CLI with the build, start and function script command suggestion

+

Finally, automatically create a netlify.toml file, which we will edit later. If your respond no, you can still create that file manually at the root of your project.

+

Screenshot of the CLI asking to create a netlify.toml file

+

Once you provided an answer to all the questions, your terminal should look like this:

+

Screenshot of the CLI after all the questions are answered

+

Updating our Netlify project

+

It's now time to change some options on our Netlify project. Open directly your project on Netlify with this command:

+
ntl open
+
+

Screenshot of the Netlify project created

+

You should see that our production deployment failed. You don't have to worry, this is totally normal. We need to disable our automatic build because our Github Actions will take care of it.

+

Go in your Settings > Build & deploy. Click on Edit settings and Stop builds. Save.

+

Screenshot of the Build settings on Netlify

+

Just below, go to the Deploy contexts section and select None for the Deploy previews.

+

Screenshot of the Deploy context section on Netlify

+

Don't worry, like the build, we will create our preview URL using Github actions.

+

Enable server-side rendering on Netlify

+

If you have been using Next.js you are aware of the capability to do the server-side rendering. But usually, you will need to configure a Node server and that's something we don't want to have to deal with. Around October 2020, the Netlify team started working on next-on-netlify, a utility to enable SSR in Next.js on Netlify. That's what we are going to use here.

+

(In case you are not interested in Github Actions and want to use Netlify to build your project, take a look at how to use the Next on Netlify Plugin. It directly wraps your Next.js app and doesn't need as much configuration as we are going to explain.)

+

Let's start by installing our utility:

+
npm install -D next-on-netlify
+
+

Set Next.js target to serverless

+

We must build our Next.js app as a serverless app

+
module.exports = {
+  // Target must be serverless
+  target: "serverless",
+};
+
+

Add a post build hook

+

We need to add a postbuild command that is automatically triggered after our build command finishes. next-on-netlify does a lot of "magic" to copy and set up our Next.js app to be correctly hosted on Netlify.

+
{
+  "name": "next-netlify-github-actions-starter",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "postbuild": "next-on-netlify"
+  },
+  ...
+}
+
+

Configure Netlify

+

Remember the file that was automatically created and called netlify.toml? You can remove all the boilerplate and replace it with only this code (be careful in respecting the indentation):

+
[build]
+  command   = ""
+  functions = "out_functions"
+  publish   = "out_publish"
+
+

Technically, when next-on-netlify will run, it will take what is in these folders and host it on Netlify. DO NOT CHANGE the name of these folders as these are hardcoded into the utility.

+

Don't forget to add these line to your .gitignore file

+
# Netlify build
+out_*
+
+

You can commit your files. Let's work now on the Github Actions configuration.

+

Github Actions configuration

+

The netlify configuration is now done, all dependencies installed, it's time to configure our Github actions which will test, build and deploy our Next.js application to Netlify. But before that, we need to set up some Github secrets that we will need in our GH Actions.

+

Go to your Github project > Settings > Secrets > New repository secret

+

| Actions secret name | Comments | +| -------------------- | ------------------------------------------------------------------------------------------- | +| NETLIFY_AUTH_TOKEN | Request your token here | +| NETLIFY_SITE_ID | The site to where deploy your site (get it from the API ID on your Site Settings) |

+

Screenshot of the Actions secrets page on Github

+

Create a new file called main.yml inside .github/workflows. Copy-paste the following code and read the explanation of it after this snippet.

+
name: Main workflow
+
+on:
+  pull_request:
+    branches:
+      - master
+      - main
+    types: [opened, synchronize, reopened]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      # Cache node modules and next folder
+      - name: 📬 Caching
+        uses: actions/cache@v2
+        with:
+          path: |
+            **/node_modules
+            ${{ github.workspace }}/.next/cache
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+
+      - name: 🧰 Install dependencies
+        run: npm run install
+
+      - name: 📦 Build project
+        run: npm run build --if-present
+
+      # - name: 🧹 Run lint
+      #   run: npm run lint
+
+      # - name: 🐛 Run tests
+      #   run: npm run test
+
+      # Deploy to Netlify with a personalized message
+      - name: 🚀 Deploy to Netlify
+        id: deploy-netlify
+        uses: netlify/actions/cli@master
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        with:
+          args: deploy -m 'v${{ steps.package-version.outputs.current-version}} ・ ${{ github.head_ref }}'
+
+

Detailed explanation of the main workflow file

+
    +
  1. Give a name to your Github action
    2. +
  2. Choose which type of the event should trigger this action, you can use push instead of pull_request, it's up to you.
    3. +
  3. Specify on which system this action should be launched, I choose the latest version of Ubuntu (Linux).
    4. +
  4. Checkout your code
    5. +
  5. Cache your node modules and the .next/cache folder. When you will first run this action, it will take some time. On the second launch, the action will take the modules that exist in the cache and will then proceed way faster.
    6. +
  6. Specify the version of Node you want to use, in my case, I choose the most recent version of Node 14th.
    7. +
  7. Install the dependencies of your project.
    8. +
  8. Build your project. Remember that after the build, the post-build command will be launch. This is what you should see in the build logs in your Github Action tab: +
    Screenshot of the build-in Github Action
    9. +
  9. I added lint and test commands, which I commented. You can use these to trigger ESLint, Jest (even Cypress) or any other plugin that ensures your code doesn't have any issue.
    10. +
  10. Finally, we trigger the Netlify deployment to deploy our Next.js app to Netlify. 🎉
    11. +
+

Screenshot of all Github actions

+

You may have seen an argument passed to the Netlify deploy:

+
args: deploy -m 'v${{ steps.package-version.outputs.current-version}} ・ ${{ github.head_ref }}'
+
+

This will add a message for each Deploy Preview, a way to keep track of which PR generated which Deploy.

+

Screenshot of the Deploy page on Netlify

+

On the same deploy page, you can click on the Deploy Preview and access your app using the preview URL.

+

A better way would be to use another task to automatically populate your pull request with the log and preview URL. At the end of your file, add this action:

+
# Publish the inspect and preview link to the PR
+- name: 👓 Netlify Preview URL
+  uses: unsplash/comment-on-pr@master
+  env:
+    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    OUTPUT: "This pull request is being automatically deployed to Netlify.\n\n🔍 Inspect: ${{ steps.deploy-netlify.outputs.NETLIFY_LOGS_URL }}\n✅ Preview: ${{ steps.deploy-netlify.outputs.NETLIFY_URL }}"
+  with:
+    msg: ${{ env.OUTPUT }}
+    check_for_duplicate_msg: false
+
+

This will automatically create a comment in your PR.

+

Screenshot of the PR on Github specifying the link to the logs and preview deploy URL

+

Summary

+

If you are still reading this, congrats! You have succeeded in deploying a fully enabled Next.JS application to Netlify using Github Actions!

+

The next step for you now will be to add some linting rules and tests to ensure that you are sending to Netlify, an app that works perfectly!

+

Feel free to download or fork the next-netlify-github-actions-starter, open an issue if you find any problem or send me any suggestion to make it better!

+

Sources:

+]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[You have something in YOU that the world needs]]> + https://thedaviddias.dev/articles/you-have-something-in-you-the-world-needs + https://thedaviddias.dev/articles/you-have-something-in-you-the-world-needs + Fri, 21 Jun 2019 00:00:00 GMT + + I’m not a psychologist or either a student in psychology. I spent a good amount of time in my life reading personal development books but in the end, I’m just a Front-End Web developer, who writes code. I had the chance to live in different countries and created real and profound relationships with people with different cultures, different colors, different ages, different religions, different visions of the world… I couldn’t imagine my life without all these persons and what they brought to my existence.

+

A woman is a globe
Photo by Ben White on Unsplash

+

Talking and sharing life’s moments with all these people made me realized something you may know already: most of the human beings struggle in being happy and spend most of their lives, living in their past and acting or not acting based on numerous fears. Fear and past are the two biggest challenges that every human in history had to face.

+

Fear kills

+

Fear is more than just a word or a feeling you experimented watching horror movies. Fear is just the most powerful weapon that, in 2019, is killing more than any other weapon in the world.

+

Fear does not just kill physically people, fear kills creativity, originality, growth, relationships, marriages, ideas, will, happiness… Fear makes you feel bad at work because you think you don’t know enough, it pushes you to fail at the University: fear to not be good enough, fear to fail another relationship, fear to talk too much, fear to not talk enough, fear to be judged, fear to be invisible, fear to be different, fear to not be understood…

+

With all the social media platforms, we try to connect people, reduce the friction in creating new possible relationships, and it works. We have so many incredible situations, made possible thanks to all these platforms out there. But I don’t think it’s really enough to make people fearless. You can be a movie star, or a famous singer, at the end of the day, your memories, your past is there. You can’t really push the button rewind or delete. All of us need to learn to live with our past, our mistakes. And that’s probably one of the most complicated parts of being human.

+

Take 2 minutes to analyze your day until now: I doubt you didn’t find any trace of fear pushing you to act or say something you didn’t really want to.

+

We can only accept our pasts

+

We can’t do anything to change our past, including yesterday. We can try to forget or think that we are not attached to it, and yes, you are right, our pasts don’t define who we are. But our pasts mold our personality and our beliefs, and beliefs are something so hard to change sometimes. +We can battle a whole life and try to change our pasts, but you know and I know that it’s a waste of time. Our pasts are all painful, we all have moments we would like to forget, people that make us feel bad, people that hurt us, friends, parents, that disappointed us, love relationships that created a hole in our heart… Fortunately, not physically.

+

So what are our options? Actually, do we have options? Maybe we have an easy option. And if we tried to choose the one the majority chooses? That would work? I don’t think I have an answer that would make you feel happy. The only answer that I can think of, is that accepting our past, whatever happened, whatever you lived is probably the only way to live our present and feel that joy that exists in every little thing around you.

+

I know what you may think: “Easy to say, hard to do”. Does anyone told you in your entire life: “Things are easy!”? Just ask you the question. Why most of us want something easy instead of something true. What happened in the history of humanity to make us believe that life equal easy or hard? Why can’t we just say that things are how they should be, and we need to choose the way we want to react when we are facing them? The way we choose to react and act is what matters.

+

Creating a barrier will never be the option

+

When someone out there, our neighbor, a president, a friend decide to create a wall in their garden or between countries, we all think and believe that it is not a solution or even an option. But how many times, did we create a mental barrier between us and the world? How many times, did we get nervous because we don’t have full control over our life’s events? How many times, did we get angry because our child felt and instead of showing him love, we yell at him because we were afraid it could hurt himself? Afraid that next time, he could fall being alone? It’s easier to hide that fear behind that attitude than accepts and embrace that uncomfortable feeling of fear and react with love.

+

A red and white road block in front of a green door
Photo by Matthew Garoffolo on Unsplash

+

Maybe things in your life, made you create layers. Layers of protection to “help you face life’s challenge”. Really? Are you feeling happiest since you closed some doors and people think you are a negative person? Is the world a better place because you hide your feelings and you are not able to cry anymore? I don’t think so.

+

I wish I could have multiple lives (some people believe in it), but the one we all have is the one we are currently living. And we usually don’t regret things we did, but things we were not able to achieve and to do, like be open to our wife or husband, show to our kids that we are not perfect and that we made mistakes sometimes.

+

You can’t talk about life

+

In some cultures, some places in the world, you can’t really talk about fear and past. You can’t talk about the struggle you have in your life. A lot of people across history tried their best to remove some humanity in some cultures and who really wants to defeat centuries of culture which forces you to not be yourself? Things are not equaled in the world, but it’s not a reason to not try.

+

What makes people think they can’t talk about their issues, once again, fear is probably behind that for most cases.

+

Woman in the dark looking down do a screen that reflects on her face. She looks tired.
Photo by Niklas Hamann on Unsplash

+

Sometimes I’m not sure why, in a work environment, people can’t say “I don’t know, I’m not sure, I’m having doubts lately…” Is an issue to be human nowadays? Because I feel, I can’t work? Because I’m not sure, I will not be a good employee? Of course, a company is a place for you to work, help a company to grow and get more value in the market but is it not a place where humans live, breath and share emotions and moments?

+

I met many people around the world that were themselves at home, but could never be themselves at work. Look at your right… yeah, you found him/her!

+

What are you waiting for?

+

Things are going fast, technologies like cryptocurrency, AI, VR, autonomous cars, all of that is changing and is going to change our worlds. But in the end, fears, layers, will always be there, and one day, a lot more people will have to seek help if they want to be free from all of that. Life will always be what it is, but all of us can improve other’s lives, being there when they need, sending a small message asking if everything is fine. We don’t really need to make big efforts to help our world to feel better. Believing that you can do a lot for the people around you is the first step.

+

Right now, maybe a friend is waiting to receive a message from you. A signal to make him feel he is not alone. Have someone that can reassure him that his/her past will not define his/her tomorrow.

+

…What are you really waiting for? 📲

+

Disclaimer: I usually write articles about code, immigration, and tech, but a lot of my friends are lately facing the same issues, and even I try my best to help them, it’s also up to them to take action and choose the life they really want. This article is a way to hopefully help other people that may be facing the same issues in their lives. Let me a comment if you find this article relevant for your life!

]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[The Front-End Performance Checklist speeds up your web developments]]> + https://thedaviddias.dev/articles/front-end-performance-checklist-speeds-up-web-developments + https://thedaviddias.dev/articles/front-end-performance-checklist-speeds-up-web-developments + Sun, 22 Jul 2018 00:01:00 GMT + + Performance is a huge subject, but it's not always a "back-end" or an "admin" subject: it's a Front-End responsibility too. The Front-End Performance Checklist is an exhaustive list of elements you should check or at least be aware of, as a Front-End developer and apply to your project (personal and professional).

+

How to use?

+

For each rule, you will have a paragraph explaining why this rule is important and how you can fix it. For more deep information, you should find links that will point to 🛠 tools, 📖 articles or 📹 medias that can complete the checklist.

+

All items in the Front-End Performance Checklist are essentials to achieve the highest performance score but you would find an indicator to help you to eventually prioritised some rules amount others. There are 3 levels of priority:

+
    +
  • ![Low][low] means that the item has a low priority.
    • +
  • ![Medium][medium] means that the item has a medium priority. You shouldn't avoid tackling that item.
    • +
  • ![High][high] means that the item has a high priority. You can't avoid following that rule and implement the corrections recommended.
    • +
+

Performance tools

+

List of the tools you can use to test or monitor your website or application:

+ +

References

+ +
+

HTML

+
    +
  • +

    [ ] Minified HTML: ![medium] The HTML code is minified, comments, white spaces and new lines are removed from production files.

    +

    Why:

    +
    +

    Removing all unnecessary spaces, comments and attributes will reduce the size of your HTML and speed up your site's page load times and obviously lighten the download for your user.

    +
    +

    How:

    +
    +

    Most of the frameworks have plugins to facilitate the minification of the webpages. You can use a bunch of NPM modules that can do the job for you automatically.

    +
    + +
    • +
  • +

    [ ] Place CSS tags always before JavaScript tags: ![high] Ensure that your CSS is always loaded before having JavaScript code.

    +
    <!-- Not recommended -->
+<script src="jquery.js"></script>
+<script src="foo.js"></script>
+<link rel="stylesheet" href="foo.css" />
+
+<!-- Recommended -->
+<link rel="stylesheet" href="foo.css" />
+<script src="jquery.js"></script>
+<script src="foo.js"></script>
+
    +

    Why:

    +
    +

    Having your CSS tags before any JavaScript enables better, parallel download which speed up browser rendering time.

    +
    +

    How:

    +
    +

    ⁃ Ensure that <link> and <style> in your <head> are always before your <script>.

    +
    + +
    • +
  • +

    [ ] Minimize the number of iframes: ![high] Use iframes only if you don't have any other technical possibility. Try to avoid iframes as much as you can.

    +
    • +
  • +

    [ ] Pre-load optimization with prefetch, dns-prefetch and prerender: ![low] Popular browsers can use directive on <link> tag and "rel" attribute with certain keywords to pre-load specific URLs.

    +

    Why:

    +
    +

    Prefetching allows a browser to silently fetch the necessary resources needed to display content that a user might access in the near future. The browser is able to store these resources in its cache and speed up the way web pages load when they are using different domains for page resources. When a web page has finished loading and the idle time has passed, the browser begins downloading other resources. When a user go in a particular link (already prefetched), the content will be instantly served.

    +
    +

    How:

    +
    +

    ⁃ Ensure that <link> is in your <head> section.

    +
    + +
    • +
+

CSS

+
    +
  • +

    [ ] Minification: ![high] All CSS files are minified, comments, white spaces and new lines are removed from production files.

    +

    Why:

    +
    +

    When CSS files are minified, the content is loaded faster and less data is sent to the client. It's important to always minify CSS files in production. It is beneficial for the user as it is for any business who wants to lower bandwidth costs and lower resource usage.

    +
    +

    How:

    +
    +

    ⁃ Use tools to minify your files automatically before or during your build or your deployment.

    +
    + +
    • +
  • +

    [ ] Concatenation: ![medium] CSS files are concatenated in a single file (Not always valid for HTTP/2).

    +
    <!-- Not recommended -->
+<link rel="stylesheet" href="foo.css" />
+<link rel="stylesheet" href="bar.css" />
+
+<!-- Recommended -->
+<link rel="stylesheet" href="foobar.css" />
+
    +

    Why:

    +
    +

    If you are still using HTTP/1, you may need to still concatenate your files, it's less true if your server use HTTP/2 (tests should be made).

    +
    +

    How:

    +
    +

    ⁃ Use online tool or any plugin before or during your build or your deployment to concatenate your files. +⁃ Ensure, of course, that concatenation does not break your project.

    +
    + +
    • +
  • +

    [ ] Non-blocking: ![high] CSS files need to be non-blocking to prevent the DOM from taking time to load.

    +
    <link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'" />
+<noscript><link rel="stylesheet" href="global.min.css" /></noscript>
+
    +

    Why:

    +
    +

    CSS files can block the page load and delay the rendering of your page. Using preload can actually load the CSS files before the browser starts showing the content of the page.

    +
    +

    How:

    +
    +

    ⁃ You need to add the rel attribute with the preload value and add as="style" on the <link> element.

    +
    + +
    • +
  • +

    [ ] Unused CSS: ![medium] Remove unused CSS selectors.

    +

    Why:

    +
    +

    Removing unused CSS selectors can reduce the size of your files and then speed up the load of your assets.

    +
    +

    How:

    +
    +

    ⁃ ⚠️ Always check if the framework CSS you want to use don't already has a reset / normalize code included. Sometimes you may not need everything that is inside your reset / normalize file.

    +
    + +
    • +
  • +

    [ ] CSS Critical: ![high] The CSS critical (or "above the fold") collects all the CSS used to render the visible portion of the page. It is embedded before your principal CSS call and between <style></style> in a single line (minified if possible).

    +

    Why:

    +
    +

    Inlining critical CSS help to speed up the rendering of the web pages reducing the number of requests to the server.

    +
    +

    How:

    +
    +

    Generate the CSS critical with online tools or using a plugin like the one that Addy Osmani developed.

    +
    + +
    • +
  • +

    [ ] Embedded or inline CSS: ![high] Avoid using embed or inline CSS inside your <body> (Not valid for HTTP/2)

    +

    Why:

    +
    +

    One of the first reason it's because it's a good practice to separate content from design. It also helps you have a more maintainable code and keep your site accessible. But regarding performance, it's simply because it decreases the file-size of your HTML pages and the load time.

    +
    +

    How:

    +
    +

    Always use external stylesheets or embed CSS in your <head> (and follow the others CSS performance rules)

    +
    + +
    • +
  • +

    [ ] Analyse stylesheets complexity: ![high] Analyzing your stylesheets can help you to flag issues, redundancies and duplicate CSS selectors.

    +

    Why:

    +
    +

    Sometimes you may have redundancies or validation errors in your CSS, analysing your CSS files and removed these complexities can help you to speed up your CSS files (because your browser will read them faster)

    +
    +

    How:

    +
    +

    Your CSS should be organized, using a CSS preprocessor can help you with that. Some online tools listed below can also help you analysing and correct your code.

    +
    + +
    • +
+

Fonts

+

![fonts]

+ +

Images

+ +

JavaScript

+ +

Server

+ +
+

Performances and JS Frameworks

+

Angular

+ +

React

+ +

Vue

+ +

Performances and CMS

+

WordPress

+ +

Articles

+ +

Plugins recommended

+ +
+

Translations

+

The Front-End Performance Checklist wants to also be available in other languages! Don't hesitate to submit your contribution!

+]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[What I learned after presenting my side project in Europe]]> + https://thedaviddias.dev/articles/learned-presenting-side-project-europe + https://thedaviddias.dev/articles/learned-presenting-side-project-europe + Tue, 22 May 2018 00:00:00 GMT + + In October 2017, I launched my first open-source project on Github: the Front-End Checklist. In few hours, the project gained international visibility. After that, for a number of weeks, I had an incredible journey with many people around the world. I recently started giving talks in local communities around Spain and Portugal about the project, and I plan to check out France later on.

+

Doing these presentations gave me a different perspective and vision about the worldwide communities who organize meetups regularly. I discovered that there were an huge number of people who were looking for more and more content and wanted to participate in local communities.

+

After initiating the Front-End Dev Mauritius community, I know how complicated it can be to find people willing to share their experiences about Front-End Development. And for some, such as those who recently have moved from another city or country, having a welcoming tech community is important to getting setting up. +I wanted to share with you some of the things I learned before, during, and after these meetups I participated in throughout Europe. And I want to encourage you to participate more in local events no matter where you are today.

+

Don’t give up!

+

Map showing Spain and Portugal and a line linking Barcelona to Madrid and Porto
Barcelona, Madrid and Porto

+

Knowing that I would be on "holidays" for a few weeks in France, Spain, and Portugal I decided to try contacting local groups in Barcelona, Madrid, Lisbon, Aveiro, and Porto. I sent messages directly to the founders of local groups using Meetup.com, or contacted them via Twitter when they had specified their account on their profile. But, as I was expecting, I didn’t receive a lot of replies at first.

+

In Barcelona however, Bettina from Ignit, who managed the “Barcelona Front-End Development Meetup”, answered me really quickly. We decided, after some email exchanges and a phone call, to have a meetup on 14 March about my project.

+

In Madrid, the “Front-end Developers Madrid” organizers never answered me. But Juan Macias, a teacher’s assistant at “Ironhack Madrid,” did everything to help me setup a talk, which I gave on 16 March.

+

In Lisbon, Shannon Graybill from “Lisbon Le Wagon” showed a lot of interest in having me do a presentation. But we lost touch after we tried to call each other few times without setting a time. Besides, I decided not to present in Lisboa, but instead tried to do something in Porto (easier for me, as I was in Aveiro for two weeks). +Then in Porto I contacted Ricardo Mendes, who usually organizes “Porto Codes”. After few messages and emails, we decide to organize a talk on 5 April at Porto.io, at a coworking space in the middle of the city.

+

Event page on the Porto Codes Meetup page

+

Know your audience

+

One of the first rules I learned about giving a talk or a presentation was to “know your audience.” That is maybe the most challenging but nonetheless important rule you need to have in mind. +A few days before each talk, I went through all the profiles on Meetup, trying to know my future audience better. Unfortunately, most of the people don’t put their Twitter or Facebook account in their profiles. They don’t often answer some basic questions sent by the owner of the group when they subscribe, which makes it really hard for a speaker learn about the target audience of a meetup. +I sent a tweet to some people before the meetup in Barcelona, but I didn’t receive any responses. Next time 😉.

+
View post on Twitter
+

Since I didn’t know my audience in advance, I then decided to ask about each person’s career just before I started my talk. I adapted my content and discourse depending on their responses and it seemed that my slides were understandable by any level.

+

Check for other local events

+

I’m not a fan of football (although my father is) — I never felt passionate about it. But that was something that would’ve been useful to think about before setting the Barcelona meetup’s date. Twenty-three peopole planned to come, but just…2 of them came. I discovered afterwards that “Barcelona — Chelsea” was probably one of the reasons why people didn’t come. +For me, it was an awesome time. I was able to focus more on specific questions asked by Jimmy from Los Angeles and Costa Rica and Marcela from Mexico (I also won’t forget the delicious pizza we ate after the meetup at Anauco).

+

Print your username on a tee-shirt

+

David Dias standing up and presenting near a video projector and MacBook. He is wearing a white tee-shirt with his username @thedaviddias printed in black.
Ironhack in Madrid (Spain)

+

That might sound crazy, but printing my username on a tee-shirt was one of the things I’m happy I did. Some people may ask you how to contact you or may be too shy to do so. But with your username “on you,” it’s impossible not to find you on Internet (or forget who you are 😅)!

+
View post on Twitter
+
View post on Twitter
+
View post on Twitter
+

Tell stories and share what motivates you

+

Telling stories is not that hard. +Lots of talks I’ve heard in the past, from different people, seemed “empty,” without any soul. Doing a talk is much more for me than a simple exposition of facts or numbers or code. It’s about a story, how someone found a way to develop their application, how some new technologies can improve the way we work in our daily lives, and so on. +In my case, it was how a “simple” checklist changed the way I see the Front-End worldwide community, and the way that some people will work in the future.

+

Don’t need to be the best

+

David Dias standing front of a slide showing a list of JS task runners (Grunt, Gulp, Webpack...)
Talking about task runners at Ironhack Madrid

+

That is maybe one of the biggest lesson I wanted to share with you in this post: you don’t need to be the best or the expert to share what you know or what you’ve learned before. +Lot of beginners with less than a couple years of experience don’t feel confident sharing what they know with others, because they think they don’t know enough. +From my point of view, that’s the wrong belief. Whether you have experience or not, you always have something useful that can be shared with others. It’s as simple as that. And it’s something some people need to start believing once and for all.

+

Take photos before everyone leaves!

+

If your audience is used to sharing photos on Twitter or other social media, you’re lucky — you’ll have some photos of you to help you remember your talk or show the presentation you did. They might even come in handy if you want to write an article about it 😅. +But taking a group photo with all your attendees is a fun thing to plan before everyone runs out of the meetup. I failed on that point many times, and I was only able to take a picture in Porto with the two organisers, including Tim Lai.

+
View post on Twitter
+

A photo took after most of the attendees already went home.

+

Ask for feedbacks

+

This is another thing I missed, but I now know how useful it could’ve been. Having feedback on any work or talk can be really helpful when we try to improve ourselves and the way we present things. +In my next meetups, I’ll probably give attendees a bit.ly link redirecting to a Typeform quizz which I’ll ask them to fill out.

+

And in case you didn’t read my article about how everything began, take a look at it here. +Putting it all together +Giving these talks in different cities and countries helped me learn how much can be shared and taught to an incredible number of people. During these last few years, while learning and sharing my vision of Front-End development, I wasn’t able to see how large the community of people wanting to become better actually was. +We can start with something really small, and that small thing can give us the opportunity to meet people and give them something they needed or were searching for.

+

Now, let’s recap each point I went through:

+
    +
  • Even if local communities don’t always send you a response, don’t give up!
    • +
  • Always check for other local events when you decide on a date for a meetup
    • +
  • Try to know your audience before, or prepare your talk to be accessible for anyone
    • +
  • Printing your username on a tee-shirt can be helpful
    • +
  • Remember to tell stories and to show your motivation
    • +
  • You don’t need to be the best to share something with someone else
    • +
  • Don’t forget to take photos before everyone leaves
    • +
  • Ask for feedback to improve your next talk
    • +
+

Thank you for reading!

+

That’s it. In case you like my article and find it useful, here are some things you can do to show your support:

+
    +
  • Give a star ⭐️ on GitHub: https://github.com/thedaviddias/Front-End-Checklist (It’s important for me to continue launching other open-source projects)
    • +
  • Follow me on GitHub: https://github.com/thedaviddias
    • +
  • Follow me on Twitter: https://twitter.com/thedaviddias
    • +
]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[Help me to choose the best city/country to be a Front-End Developer!]]> + https://thedaviddias.dev/articles/choose-city-country-front-developer + https://thedaviddias.dev/articles/choose-city-country-front-developer + Thu, 28 Dec 2017 13:07:27 GMT + + After I’ve been invited by my previous company to move to Mauritius to manage a Front-End Developer’s team, I’m now looking forward to choose where I want to move next. I’ve been working for many years in Paris, but going back to France, like some of my compatriotes I know, is not an option for me.

+

+

When you start living outside your native country, creating worldwide links with others, you know that you can’t just “go back”. You can’t live ignoring the fact that being out of your comfort zone is the best thing that you can experience in life, more challenging when you live abroad. I spent 3 years in Brazil and these last two years in Mauritius. Thus I know that everything I learned from people around, I couldn’t learn if I was living in France.

+

But today I’m facing a dilemma. I’m not sure which country / city I should to focus on my job researches. I need your help to decide where could be my next move…

+
View post on Twitter
+

1. Toronto / Canada

+

Toronto and its CN Tower

+

Canada was is on 12th position of the Top Expat Destinations in 2016, 16th in 2017 according to “Expat Insider”. With more than 35 000 000 habitants split on around 9 000 000 km2, Canada is worldwide known to be a multicultural nation and with sometimes long and cold winters.

+

I went to Canada in October 2014, to visit Toronto and Montreal. I really loved it! Most of the people prefer Montreal, but in my case, I enjoyed more staying in Toronto. I have few friends who moved there so they will be able to give me some advices if I need some. Since 2015, I have been registered in the pool for the IEC Working Holidays visa. Unfortunately, until today, I hadn’t any luck… But I still have hope 🌤

+

The International Mobility Program for Francophones could be also an option for me. And to apply for the Express Entry, I just need to pass my [IELTS exam}(https://www.ielts.org/) (on January the 20th) and have enough point to apply for.

+

The website Numbeo helps to compare the cost of living of different cities in the world. It seems that the cost of living in Toronto is less than most of the cities I’m interested in although these datas are not 100% reliable.

+

Montreal and Toronto seems to be cheaper than all other cities I’m mentioning in this article.

+

2. Sydney or Melbourne / Australia

+

+

The kangorou’s country was on 7th position in the Top 10 of best countries Expat Insider 2016 and is now on 34th position in 2017.

+

I never went to Australia, but all my friend who went there, tell me good things about it. The immigration process does not seems easy and because I am +30 years, I can’t apply for the Working Holidays Visa. I’m still waiting from the French government to expand the upper age of eligibility from 30 to 35 years old.

+

According to Numbeo, Sydney has a cost of living a little higher than Melbourne.

+

+

3. Wellington or Auckland / New Zealand

+

New Zealand was on 5th position for the Top 10 best countries by Expat Insider in 2016 and 6th for 2017.

+

I don’t know why but I was always fascinated by that country. I read a lot of articles about the pros and cons, comments of people who complain about things which are better handled elsewhere. But let me tell you something, I learned one thing since I had lived in different countries. You can have an opinion about everything around, but you should learn to live with that. It doesn’t mean you need to accept everything, but you can’t be happy in a place where you are always criticising.

+

Comparing two places, in the same country or in different country is in general a mistake you do in the first country you live… But the more you move, the more you’ll learn of how to enjoy where you are and skip details.

+

The city of Auckland was the first to answer to my tweet asking about “Where I need to move”.

+
View post on Twitter
+

Wellington followed the next day with two adorable tweets:

+
View post on Twitter
+
View post on Twitter
+

Maybe the weather in Wellington is not as good as Auckland… But the weather can’t be the only thing to compare (I’m already missing Mauritius’ sun 😂).

+

Another cost of living comparison with Auckland and Wellington

+

4. New York, Chicago or somewhere else in the USA

+

+

The USA was always on my TOP 1 choice (I went to NY 3 times) but it seems to be more and more complicated to get a job or a visa to go to the USA (Even if you have a project on Github with more than 23 000 likes 😅).

+

I don’t completely leave that option away but today, it’s more part of a dream than a reality plan.

+

I registered on the Green Card lottery for 2018… but I really don’t believe I can be so lucky…

+

Why the USA?

+

You may wonder: why the USA? It turns out that most of the people I admire are living in the USA. It seems to be easier to follow them being in the same country. It’s without counting on all conferences and meetups that are happening all over the country which I one day, I would like to be able to participate.

+

But it’s probably because I’m looking for years to find a team of Developers, Web Designers and UX who can build innovative products together sharing their knowledge and having a similar vision.

+
+

I’m looking for years to find a team of Developers, Web Designers and UX who can build innovative products together sharing their knowledge and having a similar vision.

+
+

I just had that experience once: at Barefoot Proximity in Cincinnati, Ohio. Julie Tran, Creative Director and Micky Osterman, project manager gave me in 2014 an experience I could not forget. For more than one month, I’ve been working hand by hand creating a new brand website. Whereas I have much more experience today, what I tasted that month is how I would like to work with future teams.

+

What’s next?

+

2018 should be an interesting year.

+

In January, my IELTS exam will give me more chances to complete some immigration forms.

+

In February, I’ll start sending my resume to some companies I perceive I can fit and by chance, it’ll become easier to decide which country I should focus on more.

+

In May/June, I hope to be in the country which will give me the chance to continue creating products and websites, managing young developers and working with an awesome team of experts who see the future of the web!

]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[The Front-End Checklist is just a tool… everything depends on you]]> + https://thedaviddias.dev/articles/front-end-checklist-just-tool-everything-depends-on-you + https://thedaviddias.dev/articles/front-end-checklist-just-tool-everything-depends-on-you + Fri, 08 Dec 2017 00:01:00 GMT + + One month ago, I launched the Front-End Checklist on GitHub. In less than 2 weeks, more than 10,000 people around the world starred the repository. That was completely unexpected and incredible!

+

A screenshot of the number of stars on Github

+

I’ve been working as a front-end developer since 2011, but I started to build websites in 2000. Since then, like us all, I’ve been trying to improve the quality of my code and deliver websites faster. Along the way, I’ve been managing developers from two different countries. That has helped me to produce a checklist a little different than what I’ve found on around the web over the years.

+

While I was creating the checklist, I continuously had the book “The Checklist Manifesto: How to Get Things Right” by Atul Gawade in mind. That book has helped me build checklists for my work and personal life, and simplify things that sometimes seem too complex.

+

If you are working alone or in a team, individually, remotely, or on-site, I wanted to share some advice on using the Front-End Checklist and the web application that goes with it. Perhaps I can convince you to integrate it into your development cycle.

+

A screenshot of the HEAD section on frontendchecklist.io

+

Decide which rules your project and team need to follow

+

Every project is different. Before starting a new project, the whole team (i.e. the project managers, designers, developers, QA, etc.) need to agree on what the deliverables will be.

+

To help you to decide, I created 3 different levels of priority: high, medium, and low. You don’t necessarily need to agree with those distinctions, but they may help order your tasks.

+

The Front-End Checklist app was done to facilitate the creation of personalized checklists. Change some JSON files to your liking and you are ready to start!

+

Define the rules to check at beginning, during, and at the end of your project

+

You shouldn’t check all these rules only at the end of a project. You know as well as I do how projects are at the very end! Too hectic. Most of the items of the Front-End Checklist can be considered at the beginning of your development. It’s up to you to decide. Make it clear to your team upfront what happens when.

+

Learn a little more about each rule

+

Who loves reading the docs? Not most of us, but it’s essential. If you want to understand the reasons for the rule, you can’t avoid reading up about them. The more you understand the why of each rule, the better developer you become.

+

Start to check!

+

The Front-End Checklist app can facilitate your life as a developer. It’s a live checklist, so as you complete items your progress and grade are updated live. Everything is saved in localStorage so you can leave and come back as needed.

+

The project is open source, so feel free to fork it and use it however you like. I’m working on making sure all the files are commented. I especially invite those interested in Pug to take a look at the views folder.

+

Integrate automated testing in your workflow

+

We all dream of automation (or is it just me?). For now, the Front-End Checklist is just an interactive list, but some of the tasks can be automated in your workflow.

+

Take a look at the gulpfile used to generate the project. All tasks are packages you can use with npm, webpack, etc.

+

Validate every page before sending to QA team and to production

+

A screenshot of the print version of frontendchecklist.io

+

If you’re passionate about generating clean code and care about your code quality, you should be regularly testing your pages. It’s so easy to make mistakes and remove some essential code. Or, someone else on your team might have done it, but it’s your shared responsibilty to be catching things like that.

+

The Front-End Checklist can generate beautiful reports you can send to a project manager or Quality Assurance team.

+

Enjoy your work above all

+

Some people might look at such a long checklist and feel sick to their stomach. Going through such a list might cause anxiety and really not be any fun.

+

But the Front-End Checklist is just a tool to help you deliver higher quality code. Code that affects all aspects of a project: the SEO, the user experience, the ROI, and ultimately the success of the project. A tool that can help across all those things might actually help reduce your anxiety and improve your health!

+

Conclusion

+

The success the Front-End Checklist received in such a short time reminded me that a lot of people are really interested in finding ways to improve their work. But just because the tool exists doesn’t directly help with that. You also need to commit to using it.

+

In a time where AI is taking over many manual tasks, quality is a must-have. Even if automation takes over a lot of our tasks, some level of quality will remain impossible to automate, and us front-end developers still have many long days to enjoy our jobs.

]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[How my open source project earned 6,000 stars on GitHub in just 5 days]]> + https://thedaviddias.dev/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days + https://thedaviddias.dev/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days + Tue, 28 Nov 2017 03:47:53 GMT + +
A screenshot of the Front-End Checklist repository (numbers are already outdated since I finished writing that article)

+

Last month I launched two open source projects on GitHub. A few days later, my Front-End Checklist was showing more than 6,000 stars (17,000 as of writing). And I got 600 stars for my Resources-Front-End-Beginner project!

+

It was unexpected for me to receive such support coming from so many people around the globe: USA, Brazil, China, Japan, France, Canada, Spain, Mauritius, Japan, Portugal... Even now, I still can’t believe how many pull requests I received with changes and corrections these last days.

+

For so long I received gifts from the open source world. Now I felt it was finally time for me to give back everything I have learned, and to help others.

+

As a professional Front-End manager, I spend my time teaching and encouraging others to learn and practice. I regularly share interesting content and useful tools on the Front-End Dev Mauritius group on Facebook. But I never planned that the Front-End Checklist will become a worldwide project.

+

My motivations to write another Front-End checklist

+

I’ve seen some Front-End checklists over the past year on the web:

+ +

Some of them helped me years ago when I wanted to improve my Front-End knowledge, but most of them were just “not enough.”

+

Two years ago, I decided to start writing my own checklist based on my experiences. That checklist became way more important when I started to manage Front-End teams in France and Mauritius. Based on questions and usual mistakes from the teams, the content kept improving.

+

When I needed to teach someone how to become a better Front-End developer, I always had in mind that checklist that I started to work on. The document which started with a simple personal need became an ambitious tool for my team.

+

Then I started to feel the need to share it with more people.

+

A month ago I decided to put a first version on GitHub. And… at that moment, everything started to happen fast… really fast.

+

Things can happen fast on the internet. Really fast.

+

On 18 October, I published the first version of my Front-End Checklist. I went to see all members of my team and I asked them to put a star 😀 on the repository. They don’t really have the habit to star projects on Github, I had to encourage them to do so 😂.

+

A few hours later, watching an episode of Hawaii Five-O with my wife, I opened my GitHub repository on my iPad. I was shocked to find that in only few hours, I had already received 700 stars.

+

700 stars on Github in only few hours

+

I was not able to understand why and where these stars were coming from. (At that time, I didn’t know about the Insights > Traffic section on GitHub.)

+

I hadn’t even published any tweet about the Github repository. The next day, I published on my Twitter account: just few likes and retweets about the checklist. Nothing that may explain, where everyone was coming from.

+
View post on Twitter
+

I then started to validate pull requests and answer some logged issues. I was feeling so grateful for that unimaginable support. Even working daily with international websites, I forgot sometimes the power of Internet. (Or it’s maybe I’m living in a small island far from everything 😂.)

+

Next day, I received on Twitter a message from Product Hunt:

+
View post on Twitter
+

Without really taking time to think, I opened my Illustrator and designed a logo to put on the page. I kept it basic, inspired by the logo of Front-End Coders, a future NGO I’ll be launching soon officially.

+

Front-End checklist and Front-End beginners essential logos

+

Since then, I received in less than one week 40 pull requests, was published on Codrops for my 2 lists in their Collective #359, on the Panda Weekly Newsletter #130 and #131, Hacker news, Reddit (multiple times), NewsCenter.io, La Ferme du Web and more.

+

Translation in Japanese, Spanish, Chinese, Korean, Portuguese and Vietnamese were done in less than 2 weeks!

+

Insights for the Front-End Checklist on 23 October 2017

+

The list is positioned first on Google for the words “Front-End Checklist”. Some landing pages on Github have the checklist on first position (Front-End Development, Checklist, Guidelines).

+

I discovered more recently that the project was on top of the trending feed on GitHub with more than 6,000 stars in less than a week (on 27 October 2017).

+

The Front-End Checklist is trending on Github!

+

Checklists can be more than simple checklists

+

I’m a big fan of “Awesome”, the curated list of awesome lists created first by +Sindre Sorhus +. But some lists are colossal and I found myself sometimes struggling to find what I want. I’m not sure if it’s because the amount of links or the absence of information attached to each link.

+

This is why I decided to add emoticons in my two lists. I usually don’t use them too often, but in that case I found interesting to add more of these to have more information about the content of my links.

+

The Front-End Checklist use emoticons to add more informations for each rule +As mentionned in the introduction of the Front-End Checklist, I used:

+
    +
  • 📖 for documentation or article links
    • +
  • 🛠 for online and / or testing tools links
    • +
  • 📹 for any type media, but specially video content
    • +
+

I also used 3 images (High, medium, low) to integrate different levels of priorities. I didn’t find any emoticon that could replace these images easily.

+

The list of resources for Front-End Beginners also use emoticons to add some additional informations. +On my list of resources for Front-End Beginners, for example, I decided to indicate free and paid tutorials. It’s easier to have these type of informations before you click on any link. People can directly focus on what they prefer.

+

I use daily applications like Cloud Outliner Pro and MindNode to create new lists for my personal and professional life (and Todoist). I can’t imagine doing a complex task without a set of items into a list.

+

If you have something to share, share it on GitHub now! +When it comes to sharing documentation or code, today, there’s no other place I like more than Github. Last week I decided I needed to put my work in a place where people can easily access and participate.

+

This kind of project is meant to be used and perfected by experiences and different points of view. Because Front-End development is always moving, evolving, it’s not always simple to stay on track on everything. Collaborative projects, where people can participate are for me the best way to have constantly updated tools.

+

I regularly meet young developers and people who want to become Front-End developer. Even on my YouTube channel, I receive lot of questions and requests. The first advice I give to them is to start coding and put their work on Github. It’s a way for them to show their interests to their friends, a future recruiter and to the world.

+

The Front-End Code Camp is an event workshop to better understand the process of web development. +Don’t hesitate, everything you do, related to coding and web, take time to present it correctly on an README file and click “push”!

+

What’s next?

+

By the time I wrote this article I was already working on a small open-source web app... Today, you can already access the Front-End Checklist App online!

+

Due to many requests, I’m already working on an NPM module which will probably be used by a future website. It was not in my initial plans but when I saw so many people asking for, I couldn’t refuse.

+

I have much more to share! I’m working on other lists that may be as good as the Front-End Checklist… Well, I hope! 😃

]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[How a Morning Routine can positively change your life forever]]> + https://thedaviddias.dev/articles/how-morning-routine-can-positively-change-your-life-forever + https://thedaviddias.dev/articles/how-morning-routine-can-positively-change-your-life-forever + Sat, 21 Jan 2017 00:01:00 GMT + +
Meditation is part of my Morning Routine now…

+

I cannot remember how many times it was hard for me to wake up in the morning. The snooze button was my best friend every morning, and I even hated when I was late to go somewhere. It was hard to believe that other ways could possibly exist when you work in my job area.

+
+

At that time, I believed only one possible way to live was possible.

+
+

As a Front-End Web Developer, these last years, sleeping 3–4 hours per night during a few successive days, drinking cups of coffee during the day (sometimes Redbull) was my ritual and my life. And I thought all developers life was close to that. To be the best, you need to go further, faster and perform better than others, and you cannot be restful, calm, have lot of leisure if you want to succeed…

+

Moving to Mauritius in 2015

+

I was asked to move from France to Mauritius in October 2015, delaying my goal to move to North America, to help my company to grow up and to manage a Front-End team of 12 persons (today 20).

+

I met my wife on that island, the most beautiful and Kind woman ever (Kajaal Dias). And you may imagine I was in the paradise…

+

But in reality, it was far to be the paradise like most of my colleagues and friends may still imagine.

+

At that point of my life, I was not feeling accomplished; I was not really happy for what I was doing and I was not living the life I always wanted.

+

As most of the people, I was not able to take real actions and make changes to build something new and different.

+

Hacking my body to sleep only 4 hours per day

+

In October 2016, seeing web tutorials on Youtube, my eyes were attracted by a video title “My 20 Hour Day” by Travis Neilson on his DevTips channel. And that was probably the start of lots of changes in my life.

+

It was the first time I heard about “polyphasic sleep”. A way to sleep less, but being in good health and more alert than sleeping successive 8 hours. At the beginning, I thought it was another fake experiment that may work for few people only. But my curiosity pushed me to dive in some advanced research. (Thanks to Damien Fauché and his french ebook: “How to sleep only 2h per day”)

+
+

Finally, few days after, I decided to try the polyphasic sleep - Everyman 3.

+

At the beginning it was hard and challenging but my motivation and dedication help me not to give up. Today, it has been 4 months that I’m still sleeping 3–4 hours at night and taking 2–3 naps during the day.

+

My core sleeping time is between 10h30 pm to 2h30–3h00 am. I do my first nap at home before leaving for work at 7h am for 25 minutes, my second nap is at 1h pm during lunch time for 20 minutes (in my car) and the third one at home again at 6h30 pm for 25 minutes after working hours.

+

Screenshots of the Smart Sleep iOS appplication. It shows statistics of my hours sleeping and awake.
Smart Sleep on iOS helps me to track my naps and to wake up. The start was not easy.

+

It is not always simple to be regular, but it’s really essential to listen to your body. I remember sometimes at the beginning sleeping much more in the weekend because I missed some naps during the weekdays. I simply took attention to my body reactions and even you need to try hard at the beginning to create a new habit, your body can adapt if your are really aware of its needs.

+

Today I am able to fall in sleep in less than 5 minutes (I slow down my breath, put myself in a stress-free position and not let my thoughts haunt me). That helps a lot when you need to do a 20 minutes nap.

+

Some weeks after, I started to feel that my life can be different, I could do things differently and put a real step forward to my dreams and achieve more than I always wanted to do.

+

Five minutes to change your way of thinking

+

Putting a step forward in life, is putting a step ahead of others. And to feel good with others, you need to feel good in your life. And it started with me being grateful…

+
+

Gratitude is the quality of being thankful and simply appreciate what we have, even in general we don’t want to see how lucky we are.

+
+

I started writing into “The Five Minute Journal”. It is not a journal like the others. It allows me to be grateful, mindful and plan which great things will happen during my day. I feel positive and happier when I use it.

+
View post on Twitter
+

Starting my day with my journal, creating and tracking new habits were just the beginning of my journey.

+

The “Miracle Morning” saved me (S.A.V.E.R.S.)

+

Sleeping less allowed me to have time… much more time (one more day in my week). And even I love my work and to be a programmer, I felt I gave maybe too much to my coding life and not to my personal life and personal growth. I needed to put a real daily routine, a way to equilibrate my life in all its aspects.

+

After starting my Five Minute Journal, I discovered “The Miracle Morning” by Hal Elrod, reading articles and his book. That was exactly what I was looking for!

+

Then I started to put a morning routine using my favorite Todo app (Todoist).

+
View post on Twitter
+

S.A.V.E.R.S means Silence, Affirmations, Visualization, Exercises, Reading and Scribing. These 6 elements are part of my daily routine now and help me to start my day in the most positive way.

+

My typical Morning Routine and his apps

+

Waking up at 2h30 am, I start my day with a glass of water and a personal recipe with lemon, water, cinnamon, cayenne, ginger, apple cider, honey and collagen (everything organic). It allows me to feel good for whatever I ate the day before or will eat during the day. That did a huge change for my stomach, and I never had any stomach problems or pain again. (Remember in Mauritius, most of the recipes are spicy).

+

I brew my “Kick Ass” coffee from Kicking Horse Coffee with my beautiful Java Presse (I really love USA brands). I don’t really need coffee, but it’s more a personal pleasure for my morning ritual. (Sometimes I drink the Bulletproof Coffee by Dave Asprey with Coconut Oil and Ghee).

+

+

For meditation I use the excellent app calm.com. It can take only 10 minutes sometimes more, but that practice in my life had a significant impact in my way I live the present and feel more peaceful. There are other useful apps like Headspace amongst others.

+

I wrote some affirmations I read every morning and before to go bed. After I take some minutes to visualize what I want to achieve in my day, that helps me to keep focus.

+

I use Day One for scribbing whatever I feel or have in mind during my day and recently move to Fields Notes for my Morning Pages (thanks to Loic Le Meur).

+

I put Brain.fm for 15 minutes (with my headphones) and read at least for 15 minutes. I created a list of books on Evernote I want to read each week and month. I’m challenging myself with Goodreads to read 50 books in 2017… I am late already… :)

+

I regularly undertake activities like coding, watching tutorials, design, social media updates, new projects depending on the day. It is normally between 1h to 1h30 hours in the morning and oneextra hour in the evening.

+

Then when my wife wakes up, we go for a 20 minutes walk in the park near our apartment. Before I take my shower, 5 minutes of plank and 5 minutes of shaper, it’s enough for me to sweat and feel good.

+

I add when I have 20 minutes free some Yoga exercises with the help of Daily Yoga. Otherwise I participate every Saturday morning to a session class.

+

The most beautiful and clean park you can find in Mauritius

+

I take my cold shower hearing my favorite podcasts The School of Greatness by Lewis Howes, The 5 AM miracle by Jeff Sanders and The Tim Ferris Show by Tim Ferriss. Can’t leave home without hearing these guys!

+

Since few weeks, I’m practicing Intermittent Fasting, so I don’t take breakfast but instead, I prepare a natural juice with cucumber, lemon, parsley, apple, carrot, wheat grass and with all others vegetables and fruits I find around.

+

During my short trajet to work (10 minutes), I listen with my wife some best-selling nonfiction books using Blinkist. I really recommend you to take a premium account, it is worths every penny.

+

Then I start my day at work with some other routines I may share in another article.

+

(I use to track some new habits on my mini-book “Track your habits” by kikki.k and with the Coach.me app.)

+

My new habits and Routines are only at the beginning

+

Experimenting lot of new things in the previous 4 months, give me the will to go further and do everything I can to achieve my goals and dreams.

+

I know I’m still adjusting with my Morning Routine, but I can’t go back after all what I discovered, all people I meet that give me some mindfulness and clarity in the life. I’m so grateful for all of this.

+

Nothing can stop me now to fulfill every single unique present moment of my life.

+
+

Tell me about your Daily or Morning Routine

+

And you, do you have a daily or morning routine?

+

What you do daily to improve your life, achieve your goals and take actions to build the life you want?

]]> + thedaviddias@gmail.com (David Dias) + + + + \ No newline at end of file diff --git a/apps/blog/public/rss/fr/feed.json b/apps/blog/public/rss/fr/feed.json new file mode 100644 index 00000000..0f0d5034 --- /dev/null +++ b/apps/blog/public/rss/fr/feed.json @@ -0,0 +1,66 @@ +{ + "version": "https://jsonfeed.org/version/1", + "title": "The David Dias | Développeur Front-End, podcasteur & créateur de contenu", + "home_page_url": "https://thedaviddias.dev", + "feed_url": "https://thedaviddias.dev/rss/fr/feed.json", + "description": "Salut toi! Je m'appele David Dias. Je suis développeur Front-End, podcasteur, créateur de contenu numérique passioné pour résoudre les problèmes digitaux et humains! J'aime rencontrer de nouvelles personnes, bâtir des communautées et parler de tech, d'expatriation et de web.", + "icon": "https://thedaviddias.dev/favicons/android-chrome-144x144.png", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + }, + "items": [ + { + "id": "https://thedaviddias.dev/fr/articles/astuces-dexpat-pour-faciliter-demarches-administratives", + "content_html": "

\"La
\nToute préparation à une possible expatriation passe par une phase inévitable: celle de rassembler tous les documents requis pour avoir la possibilité d’accomplir son rêve. C’est la phase que redoute toute personne qui ne souhaite pas se retrouver avec un refus de visa ou de permis de travail simplement à cause d’une « feuille de papier ». Pour vous faciliter cette phase et vous permettre de sereinement vous préparer, j’ai rassemblé toutes mes astuces et habitudes qui m’ont permis de vivre sereinement mes 3 expatriations: au Brésil, à l’Île Maurice et au Canada.

\n

Listez tous vos voyages sur un carnet de voyage / vol

\n

Un carnet de voyage ouvert et vide posé sur un vieux mappemonde marron. Entouré par une vieille loupe, de vieilles cartes postales, des lunettes et un appareil photo.\nPhoto by Dariusz Sankowski on Unsplash\nCe n’est que récemment que j’ai pris le temps de rassembler toutes les informations concernant mes précédents voyages, j’aurais préféré avoir pu le commencer avant. Aujourd’hui, pour beaucoup, les vols sont réservés en ligne: il est donc assez facile de retrouver la trace de ses voyages dans ses emails. Mais étant donné que dans mon cas, j’avais la volonté de lister tous mes voyages depuis 2003, et qu’à cette époque, la réservation en ligne n’était pas extrêmement courante, la tâche n’a pas été simple.

\n

\"Un
Photo de Dariusz Sankowski sur Unsplash

\n

Heureusement pour moi, les photos (à l’aéroport ou de mon billet d’avion), les numérisation des pages de passeports (avec les tampons d’entrée et de sortie) m’ont permit de pouvoir lister les 22 vols en avion que j’ai effectués depuis 2003.

\n

Je vous partage d’ailleurs un simple modèle de feuilles de données Google que j’ai utilisé pour répertorier mes voyages (vous pouvez le dupliquer et l’enregistrer dans votre propre Google Drive). Avoir un carnet de voyage / vol est indispensable et vous sauvera de nombreuses heures de recherche lorsque votre futur pays d’expatriation vous demandera où vous êtes allez vous promener ces dernières années. Souvent, pour une demande de résidence, on peut aussi vous demander vos voyages sur les 10 dernières années (c’est le cas pour les USA). Je vous conseille de vous y préparer.

\n

Vous pouvez aussi trouver un modèle de journal de voyages sur le site du Canada, à imprimer si vous le souhaitez.

\n

Numérisez et sauvegardez en ligne vos documents importants

\n

\"La
Photo de Nicole Harrington sur Unsplash

\n

Numériser ses documents régulièrement devrait être une habitude et une pratique enseignée à l’école! Depuis des années, j’ai l’habitude de numériser tous mes documents sur un espace de stockage en ligne comme Google Drive, totalement gratuit et simple à utiliser quel que soit votre âge. Vous pouvez de nos jours utiliser facilement votre téléphone pour la numérisation de n’importe quel document. Des applications gratuites comme Adobe Scan (que j’utilise), Microsoft Office Lens ou même Evernote Scannable uniquement pour iOS, vous permettent d’identifier le type de document et de le sauvegarder ou de le partager facilement.

\n

Passeports (toutes les pages écrites), carte d’identité (recto-verso), justificatifs de domicile, factures, notes du baccalauréat, diplômes, certificats de travail, fiches de paies, billets d’avions, feuilles d’impôts, les documents se trouvant dans votre portefeuille (en cas de vol, cela peut s’avérer pratique)… Tous ces documents sont importants, et je dirais que même si vous ne vous expatrier pas ou plus, prendre l’habitude de stocker ces documents peuvent vous faciliter beaucoup la tâche pour de futures démarches administratives.

\n

Si vous habitez en France et que vous avez un compte sur le site « Service-Public.fr » (si vous n’en avez pas, aller tout de suite en créer un!), vous avez une catégorie « Mes documents » vous permettant facilement de stocker des documents importants liés à votre état civil, un endroit en plus pour ne pas avoir à chercher ailleurs. Lors de votre l’enregistrement sur les Registres des Français établis hors de France, votre carte consulaire est automatiquement sauvegardée dans cette rubrique. Je pense que c’est le cas pour d’autres démarches également.

\n

![Capture d'écran du site Service-Public.fr montrant la catégorie "Mes documents"](/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/service-public-capture.jpeg 'Capture d'écran du site Service-Public.fr montrant la catégorie "Mes documents"')

\n

Apprenez les bases de fonctionnement d’un éditeur de fichiers pdf

\n

Le format PDF est un format électronique permettant le partage assez simple de documents. Souvent vous avez aussi la possibilité de télécharger des documents aux formats JPEG, PNG qui sont des formats d’images. Mais il est toujours plus simple, surtout pour celui qui reçoit les documents de recevoir les fichiers au format PDF. S’il n’est pas déjà installé sur votre appareil, vous pouvez utiliser le logiciel gratuit Acrobat Reader ou trouver la panoplie d’autres logiciels gratuits qui vous permettent de convertir un format image en PDF, d’y insérer une image, d’écrire dans le document…

\n

Il m’arrive très souvent, au lieu d’imprimer des documents (et par faute d’imprimante), de les ouvrir dans un lecteur / éditeur de fichiers PDF et d’écrire sur les formulaires comme si je le faisais à la main. Une photo de ma signature importée dans ce document et me voilà avec un document entièrement rempli, que je peux facilement envoyer et sauvegarder sur mon ordinateur et en ligne.

\n

Les quelques astuces que vous pouvez apprendre comme remplir un formulaire (s’il n’est pas déjà prêt à être rempli) ou ajouter une image (votre signature par exemple) vous seront souvent utiles et pourront vous faire gagner un temps précieux (en plus de contribuer à protéger la planète en imprimant moins)

\n

Prenez-vous en photo tous les 3-4 mois

\n

\"Un
Photo de [Kyle Glenn](https://unsplash.com/@kylejglenn?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur Unsplash

\n

Dans la majorité de vos démarches, il vous sera demandé une photo au format d’identité. Et quoi de plus embêtant que de vous apercevoir que vous n’en avez pas pris avant d’accidentellement vous raser un côté de la tête (ne rigolez pas, cela peut arriver à tout le monde). Si vous prenez l’habitude de prendre des photos au format identité (sans sourire et sans chapeau s’il vous plaît), cela vous permettra deux choses:

\n
    \n
  • en avoir une sous la main si vous en avez besoin,
    • \n
  • pouvoir faire un joli montage sur plusieurs années de votre évolution physiologique. Oui, ça se fait beaucoup de nos jours…
    • \n
\n

Vous n’avez pas besoin d’aller à chaque fois chez le photographe (sauf pour une demande de résidence permanente), mais tâchez de respecter les consignes pour éviter de voir votre dossier refusé à cause d’une photo floue ou de dimensions incorrectes.

\n

Anticipez vos futures démarches

\n

Préparer tous vos documents pour une demande de permis de travail ou de visa étudiant c’est super! Mais pouvoir anticiper vos futures démarches c’est encore mieux. Et cela a été mon erreur très récemment: en plein processus de demande de résidence; j’ai la possibilité de faire valoir ma première année d’université et ainsi pouvoir peut-être avoir les points nécessaires pour une demande d’Entrée Express.

\n

Mais voilà, mon numéro d’étudiant est soigneusement rangé dans une pochette cartonnée en France et mes parents étant en vacances, ils n’ont donc pas la possibilité de m’envoyer mon identifiant. Je dois donc attendre pour pouvoir faire ma demande de relevé de notes, juste parce que je n’avais pas suffisamment anticipé ces démarches.

\n

Jeter un œil sur la liste des documents nécessaires pour de futures démarches peut s’avérer essentiel. Pour ceux qui ont habité dans d’autres pays comme moi, il faut considérer que certaines démarches prennent aussi plus de temps dans certains endroits. Par exemple, en France, faire une demande d’extrait judiciaire se fait en ligne, et vous recevez votre acte par la poste en moins de deux semaines (selon la destination bien sûr). A l’Île Maurice, cela peut prendre entre un à deux mois et vous devez avoir une personne sur place pour s’en occuper. Deux mois, c’est très long…

\n

Ne stressez pas, il y a souvent une solution à tout

\n

Il se peut que vous ayez beaucoup voyagé, ou que votre appartement ai pris feux un jour (je vous le souhaite pas) et que vous ayez perdu vos documents importants. Ne paniquez pas!

\n

Les démarches administratives font parties de tout processus d’immigration, et la majorité des personnes savent cela. Il vous manque un document? Voyez un moyen de pouvoir en récupérer une copie: il y a toujours en règle générale une alternative ou possibilité de récupérer ou avoir accès à un document important. Ne vous mettez pas davantage de pression inutile et essayer de suivre les astuces que je vous partage. Je vous assure que vos démarches n’en seront que moins stressantes et plus simples à affronter.

", + "url": "https://thedaviddias.dev/fr/articles/astuces-dexpat-pour-faciliter-demarches-administratives", + "title": "Mes astuces d'expat pour faciliter vos démarches administratives", + "summary": "Toute préparation à une possible expatriation passe par une phase inévitable: celle de rassembler tous les documents requis pour avoir la possibilité d’accomplir son rêve. Pour vous faciliter cette phase et vous permettre de sereinement vous préparer, j’ai rassemblé toutes mes astuces et habitudes qui m’ont permis de vivre sereinement mes 3 expatriations.", + "image": "https://thedaviddias.dev/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/featured.jpg", + "date_modified": "2019-06-21T00:01:00.000Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/fr/articles/9-reponses-questions-vous-vous-posez-toronto-canada", + "content_html": "

Régulièrement, beaucoup de personnes me contactent pour me poser des questions sur le Canada et Toronto : parfois des jeunes qui souhaiterai s’expatrier pour la premiere fois, des couples qui souhaitent changer de vie. J’essaye autant que je peux de leur répondre avec ma petite expérience (bientôt un an) de vie dans la grande métropole.

\n

\"Une

\n

Que vous viviez en France ou dans un pays francophone, les questions que j’ai rassemblé dans cet article sont sûrement celles que vous vous posez. Il n’est pas toujours évident de pouvoir dénouer le vrai du faux en ligne, car les expériences sont toutes différentes. Il se peut même que mes réponses ne soient pas parfaites mais elles sont des pistes qui je l’espère vous permettront d’y voir plus clair.

\n

Quelles sont mes options pour venir m’installer au canada?

\n

C’est LA question que vous verrez le plus un peu partout, sur les forums, dans les groupes de discussions Facebook. Et la réponse ne tiendra jamais en quelques lignes tellement le Canada offrent des possibilités pour légalement venir habiter ou déménager sur le sol nord américain. Entre le Programme Vacances Travail, le programme mobilité francophone, le visa d’affaire, le parrainage… Un petit tour sur la rubrique « Autres visas et procédures » peut être un bon début si vous voulez en savoir plus.

\n

Quel que soit votre situation, vos compétences, il est presque certain qu’il existe un programme ou des démarches qui peuvent vous permettre de venir vous installer ici.

\n

Pour les plus jeunes, de manière générale, même s’il vous est possible de venir sans forcément avoir fait de longues études, j’ai de plus en plus tendance à fortement recommandé d’avoir un niveau Master, peu importe la filière (je vous recommande toutefois vous renseigner pour vous assurer que votre Master possède des équivalences au Canada). Le fait d’avoir un diplôme de niveau Master est un facteur qui vous favorisera toujours que ce soit pour habiter au Canada, aux États-Unis, en Nouvelle-Zélande…

\n

Si vous décidez de faire une demande de résidence permanente, beaucoup d’éléments sont pris en compte pour vous attribuez un certain nombre de points, avoir des études supérieures est un plus à ne pas négliger sur le long terme.

\n

Quelles sont mes options pour travailler à toronto?

\n

Beaucoup d’entreprises, notamment dans le secteurs des services ou de l’informatique, ont recours au sponsorship. Cela peut être coûteux et long pour une entreprise, mais certains ont compris l’avantage d’avoir des employés aux expériences et provenances diverses.

\n

Le programme mobilité francophone par lequel je suis venu au Canada est assez simple, peu coûteux et rapide (j’ai reçu mon visa de travail en 4 semaines environ). Travailler en étant sous visa du PVT est aussi une autre possibilité. J’entends parfois certaines personnes me dire que les employeurs n’aiment pas trop le PVT, je ne pourrais pas le confirmer ou le nier. Je pense simplement que si un employeur a besoin de main-d’oeuvre, il ne s’arrêtera pas à cela. C’est après à vous de le convaincre de vous embaucher.

\n

Changer d’emploi tous les 2 ans et demi est assez courant au Canada. Cela n’est pas forcément vu ou synonyme d’instabilité professionnelle comme cela l’est parfois en France. Votre futur employeur n’a en général aucun moyen de savoir si vous avez été licencié ou si vous êtes parti de vous même.

\n

Il faut aussi savoir que lorsqu’une entreprise établis votre contrat d’embauche, elle peut être amenée à vous demander le téléphone / contact de votre précédent responsable. Les vérifications existent, elles ne sont pas non plus trop poussées (ils ne demandent pas si vous êtes un gentil employé) mais simplement pour vérifier vos dires. Ne chercher donc pas à mentir à votre futur employeur, il y a de fortes chances qui le découvre.

\n

Comment trouver du travail au canada?

\n

LinkedIn. Ma première réponse est que quel que soit votre secteur, vous devez absolument avoir un profile sur LinkedIn (en anglais et actualisé). Comprendre comment les recruteurs utilisent les filtres de LinkedIn pour trouver de possible candidats est très important et vous permettra de vous différenciez.

\n

Mais ce n’est pas suffisant. Glassdoor, Indeed et Kijiji sont aussi des plate-formes que je vous recommande. Certaines entreprises ont souvent une rubrique sur leur site où elles postent leurs offres. Ne pas oublier aussi que les pages Facebook et comptes Twitter des entreprises qui vous intéressent peuvent aussi vous permettre de ne pas manquer une opportunité.

\n

Être visible est d’une importance primordiale, montrer ce que vous savez faire permet de rassurer un futur employeur. Et c’est quelque chose que vous devez mettre en place bien avant de venir au Canada. Si vous faites partie d’une association, voyez si un journal en ligne ne serait pas intéressé de vous interviewer, si vous êtes expert dans un domaine, n’hésitez pas à écrire sur un site ou votre propre articles, pensez aussi à lancer une chaîne Youtube… Il existe de nombreux moyens aujourd’hui qui peuvent vous permettre d’être visible et donner un aperçu de vos compétences à un employeur.

\n

JE N’AI PAS UN BON NIVEAU D’ANGLAIS, VAIS-JE POUVOIR ME DÉBROUILLER DANS LA PARTIE ANGLOPHONE DU CANADA?

\n

C’est certainement l’une des plus grandes craintes, et la raison pour laquelle beaucoup de français choisissent la région du Québec, plutôt que le reste du Canada. Et très honnêtement, bien que ce soit une appréhension normale, elle n’a pas forcément lieu d’être. Oui, vous serez certainement amené à beaucoup douter de vous et de votre choix lorsque pendant les premières semaines, vous n’arriverez pas forcément à vous exprimer et à tout comprendre. Mais c’est un processus temporaire et tout à fait normal: tout le monde passe par cela et s’en sort.

\n

Je ne peux que vous recommander de vous plonger dans la langue anglaise bien avant votre arrivée. Des années avant de venir habiter au Canada, je commençais déjà à visionner des séries en anglais (avec sous-titre d’abord en français puis après en anglais). Travaillant dans le web, tout le contenu que je suis amené à lire est le plus souvent en anglais. Aujourd’hui, avec Youtube et les podcasts, il ne manque pas de contenu en anglais pour pouvoir vous y plonger.

\n

Si vous souhaitez venir un mois à Toronto et pouvoir améliorer votre anglais, je ne peux qu’hautement vous recommander le cours de « English for effective communication » de l’Université de Toronto. Oui, le cours est assez cher, mais vous serez forcer de parler pendant toutes vos matinées pendant 4 semaines. Vous vous sentirez beaucoup plus à l’aise après cela et vous apprendrez énormément sur d’autres cultures.

\n

COMMENT EST LE SYSTÈME DE SANTÉ EN ONTARIO?

\n

Le système français est je pense l’un des meilleurs au monde. Et l’on s’en rends bien compte en venant ici. Le système n’est pas mauvais et mon expérience est assez limité dans le domaine, heureusement. Basé sur mon expérience personnelle: la difficulté réside surtout pour trouver un médecin de famille, obligatoire si vous souhaitez voir certains spécialistes. A ce jour, je n’en ai toujours pas.

\n

Par contre, ce qui est assez surprenant c’est que si vous avez une carte de santé appelé OHIP (qui est effective 3 mois après votre installation, à demander bien avant la fin des 3 premiers mois), vous sortez de chez le docteur sans rien payer. Dans mon cas, il m’est arrivé deux ou trois fois d’aller dans des walk-ing cliniques ouvertes quasiment tous les jours, et je n’ai jamais rien eu à régler. C’est un peu déroutant au début.

\n

Il est indispensable toutefois d’avoir une mutuelle, car certains frais peuvent vite vous coûter cher. Selon votre profession, vous pourriez avoir la chance d’avoir une bonne mutuelle. Certaines même vous allouent une somme de 1000 dollars par an pour l’utiliser à des fins médicales et couvrir certaines dépenses non pris en charge par la carte de santé ou le plan de base de votre mutuelle. Ne dépensez pas tout dans de nouvelles jolies paires de lunettes Channel!

\n

Combien coûte la location d’un appartement à toronto?

\n

Un appartement d’environ 35m2 dans le centre de Toronto peut coûter aux alentours de 2200 dollars canadien. Un appartement dans la périphérie (la GTA), plus spacieux peut vous coûter mensuellement aux alentours de 1800 dollars. Les prix peuvent varier, bien sûr, mais c’est une moyenne basé sur le témoignages des gens que je rencontre.

\n

Il ne faut pas commettre l’erreur de comparer avec les loyers en France (notamment Paris) ou même se dire qu’il est mieux de payer 1800 que 2200 car d’autres coûts doivent être pris en considération avant de faire son choix.

\n

Si vous êtes deux et que vous prenez un abonnement mensuel pour le TTC (Toronto Transit Commission société qui gère les transports de la ville), il faudra rajouter environ 150 dollars par personne, ce qui fait un total de 300 dollars par mois. Il faut aussi prendre en considération votre possible lieu de travail, les frais liés à la dépense d’eau, le chauffage etc… Dans certains condominiums, vous n’aurez à payer que l’électricité, pas la climatisation et l’eau. Il est donc important d’avoir une liste de tous les frais possibles afin de déterminer le loyer acceptable dans votre situation.

\n

Pour donner un exemple de mon cas personnel, pour ce qui est de l’électricité, je suis amené à payer aux alentours de 60 dollars, 100 pour l’abonnement internet et environ 150 pour deux abonnements cellulaires avec données. Avec aux alentours de 200–250 dollars de dépenses, toutes les deux semaines pour des courses au supermarché, vous avez ici un exemple de dépenses pour un couple vivant dans le centre de Toronto.

\n

Comment sont les torontais vis-à-vis des français? sont-ils mal / bien vus?

\n

Ce qui est formidable à Toronto, c’est qu’il est très difficile d’y vivre et d’y avoir des préjugés. Bien sûr, il existe des personnes qui en ont, mais le fait que la ville de Toronto soit cosmopolite rends difficile d’y vivre si on possédent des a-priori sur les personnes et les nationalités..

\n

J’ai récemment organisé une petite fête entre amis, où sur 20 personnes, 14 nationalités étaient représentées: de quoi vous donner une idée de la pluri-culturalité qu’il peut y avoir à Toronto.

\n

Comment décrire le niveau de vie?

\n

J’ai tendance à trouver que les prix sont plus ou moins comparables à ceux que vous pouvez trouver en France. Certaines enseignes affichent des prix un peu plus élevés que d’autres. Loblaws est considéré par certains comme étant le plus cher mais la viande et les fruits de mer y sont de qualité. Vous avez Walmart, Costco, Sobeys sont d’autres enseignes répandues au Canada.

\n

Bien sûr, le fromage, le vin et autres spécialités françaises restent plus chers qu’en France, mais c’est le cas de tous les pays importateurs de produits français. Oui souvent, lorsque l’ont passe des vacances France, nos familles et amis ne comprennent pas forcément pourquoi certains repas se résument à plusieurs fromages, du pain et une bonne bouteille de vin rouge… On peut pas leur en vouloir, mais n’espérer pas qu’ils comprennent.

\n

Qu’est est la plus grosse difficulté qu’on peut avoir en s’expatriant à toronto?

\n

L’expatriation en règle générale a son lot de haut et bas (voir le schéma ), des phases qui peuvent durer plus ou moins longtemps selon les personnes et les événements. A chaque expatriation, les phases sont les mêmes. Il ne faut pas faire l’erreur de croire que plus on vit d’expatriations plus cela est facile, ça ne l’est pas.

\n

Etant certainement dans la phase « acceptation » maintenant, il a fallu affronter des moments de doutes et de crise, personnelle et professionnelle. Pendant ces moments, le replis sur soi est souvent perçu comme une solution, mais je vous en décourage fortement. Le Canada étant un pays d’immigrants, vous pouvez être assuré qu’il existe juste à côté de vous une personne qui est passé par les mêmes phases et qui sera là pour vous aider.

\n

Le plus gros défi, que j’ai personnellement dû affronter récemment concerne la manière dont certains Canadiens (attention toujours à ne pas généraliser) ont pour communiquer lorsqu’il y a des problèmes. J’ai été surpris, dans le cadre professionnel, de passer du tout va très bien à tout va très mal, en l’espace simplement de quelques semaines. A ma grande surprise, tous les francophones, immigrés à Toronto que je connais, m’ont témoigné être passer par là, souvent durant leur première année au Canada. C’est rassurant de savoir que mon cas n’est pas isolé.

\n

Il existe un certain non-dit parfois, qui peut parfois être une bonne chose mais qui lorsque nous n’avons pas l’habitude peut aussi être déroutant. C’est quelque chose à avoir en tête, mais qui fait partie du jeu.

", + "url": "https://thedaviddias.dev/fr/articles/9-reponses-questions-vous-vous-posez-toronto-canada", + "title": "9 réponses aux questions que vous vous posez sur Toronto et le Canada", + "summary": "Régulièrement, beaucoup de personnes me contactent pour me poser des questions sur le Canada et Toronto : parfois des jeunes qui souhaiterai s’expatrier pour la premiere fois, des couples qui souhaitent changer de vie. J’essaye autant que je peux de leur répondre avec ma petite expérience (bientôt un an) de vie dans la grande métropole. ", + "image": "https://thedaviddias.dev/images/articles/9-reponses-questions-vous-vous-posez-toronto-canada/featured.jpg", + "date_modified": "2019-06-17T00:01:00.000Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/fr/articles/comment-canada-devenu-maison-4-ans-tentatives", + "content_html": "

C’est en 2014 que je pose les pieds au Canada pour la première fois. Depuis cette année, j’ai tenté de tout mettre en œuvre pour que ce pays, et spécialement la ville de Toronto, devienne ma maison. En juin 2018, après deux tentatives de PVT, un déménagement de deux ans à l’Île Maurice, je pose enfin les pieds au Canada avec ma femme et mon permis de travail en poche. Ce n’est que le début de l’aventure!

\n

\"Un

\n

UN PARCOURS PAS COMME LES AUTRES

\n

Aucun parcours n’est jamais le même. Celui que j’ai eu au cours des dernières années n’a pas toujours été facile, faire face à l’inconnu de savoir si un jour je pourrais vivre au Canada… Mais je me suis toujours dis que si certains pouvaient y arriver, il n’y avais pas de raison que moi-même je ne puisse pas y arriver non plus.

\n

Tout a commencé à mon retour du Canada en 2014: j’ai passé beaucoup de temps à lire des articles, des livres et des témoignages de personnes en ligne ou même à discuter de l’expatriation au Canada avec des personnes que je rencontrais. Je souhaitais avoir les pour, les contre, tout ce qui pouvait m’aider à faire les choix qui me correspondent le plus. Malgré mes tentatives de PVT en 2015 et en 2016, je n’ai pas renoncé pour autant à trouver un moyen de commencer une nouvelle vie future au Canada.

\n

Étant développeur web (Front-End) depuis déjà plusieurs années, je n’étais pas sans ignorer que ma profession est en forte demande un peu partout dans le monde, le Canada ne dérogeais pas à la règle. Mais même avec cet avantage dans les mains, il faut parfois se rendre plus visible car au milieu de tous les potentiels candidats, il faut pouvoir savoir prouver sa valeur et montrer à son futur possible employeur l’avantage que l’on peut représenter face à un candidat Canadien.

\n

SOYEZ VISIBLE AVANT TOUT

\n

C’est notamment grâce à un de mes projets informatique open-source (dont la fameuse Front-End Checklist) que j’ai pu me faire connaître. Grâce à ces plus de 33 000 étoiles (l’équivalent des j’aimes de Facebook), j’ai eu la chance de gagner une visibilité internationale qui a certainement joué pour pouvoir alors décrocher des entretiens dans plusieurs startups de Toronto avant même de venir sur place.

\n

Après avoir passé beaucoup temps sur LinkedIn et Glassdoor, j’ai eu la chance de pouvoir passer plusieurs entretiens via Skype, à chaque fois avec différentes personnes. Les 3-4 entretiens pour une même entreprise étant assez courants au Canada. Il faut s’y préparer et être relax: tous les recruteurs que j’ai pu rencontrer ont vraiment été supers et transparents. Celles-ci ont été des expériences différentes de celles que j’avais pu avoir par le passé.

\n

LE PROGRAMME MOBILITÉ FRANCOPHONE

\n

C’est aussi en grande partie grâce à l’existence du programme mobilité francophone que j’ai pu assez facilement, ayant une proposition de travail, décrocher mon permis de travail et venir m’installer au Canada.

\n

Contrairement à un sponsorship, le programme mobilité francophone ne coûte qu’aux alentours de 230 dollars canadien pour l’employeur. Après avoir remplir un formulaire en ligne sur le portail de l’employeur canadien, il reçoit un numéro correspond au dossier et que vous aurez à indiquer dans les documents que vous devrez réunir et transmettre en ligne. Il faut noter que le Canada est vraiment exemplaire, de mon point de vue, en ce qui concerne leur le site officiel du gouvernement du Canada et tous les services à destination des futurs immigrés.

\n

TROUVER UN TRAVAIL N’EST PAS TOUJOURS LE PLUS COMPLIQUÉ

\n

Grâce à mon expatriation au Brésil de 2006 à 2009 et puis celle de l’Île Maurice entre 2015 et 2018, j’ai vécu mon expatriation au Canada de manière plus sereine. Cela n’empêche cependant pas les remises en questions et les manques de repères, ce qui au début est toujours une phase quelque peu déroutante. La clé pour moi et ma femme a certainement été de ne pas trop regarder en arrière mais plutôt en avant. Trouver des solutions aux problèmes qui pouvaient possiblement se manifester et accepter le choix que nous avions fait de venir au Canada.

\n

La recherche d’un logement a été beaucoup plus compliquée que nous l’avions anticipé. L’absence d’un historique de crédit (un document permettant de montrer que vous remboursez correctement vos crédits et dettes) rends plus difficile pour de nouveaux arrivants d’être accepté par les bailleurs. D’autant plus, que nous recherchions dans le centre-ville de Toronto, là où la demande est très élevée et les places rares.

\n

Grâce à l’aide d’une « broker » française: Nelly de Breze, après un mois et demi de Airbnb, nous avons finalement pu trouver un petit appartement (environ 35 mètres carrés) dans un condo à 15 minutes à pied de mon travail, et 5 minutes à pied du travail de ma femme. On ne pouvait vraiment pas rêver mieux.

\n
\n

Un an s’est presque écoulé depuis notre arrivée au Canada. Il n’y a pas un jour qui se passe où nous regrettons notre choix. Nous commençons à nous préparer pour notre demande de résidence via l’Entrée express. Une autre étape confirmant notre volonté de faire partie de ce merveilleux pays qui nous permet de connaître de nouvelles personnes chaque jour, souvent eux aussi expatriés au Canada!

", + "url": "https://thedaviddias.dev/fr/articles/comment-canada-devenu-maison-4-ans-tentatives", + "title": "Comment le Canada est devenu ma maison après 4 ans de tentatives?", + "summary": "C’est en 2014 que je pose les pieds au Canada pour la première fois. Depuis cette année, j’ai tenté de tout mettre en œuvre pour que ce pays, et spécialement la ville de Toronto, devienne ma maison. En juin 2018, après deux tentatives de PVT, un déménagement de deux ans à l’Île Maurice, je pose enfin les pieds au Canada avec ma femme et mon permis de travail en poche. Ce n’est que le début de l’aventure!", + "image": "https://thedaviddias.dev/images/articles/comment-canada-devenu-maison-4-ans-tentatives/featured.jpg", + "date_modified": "2019-04-02T00:01:00.000Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + }, + { + "id": "https://thedaviddias.dev/fr/articles/outils-astuces-rendre-accessible-performante-application-react", + "content_html": "

L’accessibilité et la performance sont deux (vastes) sujets qui m’ont toujours passionné et qui sont devenus ces dernières années au centre de nombreux meetups et conférences auquels j’ai pu assister (petit clin d’oeil à A11yTO). Récemment expatrié au Canada, j’ai eu l’opportunité, dans ma nouvelle entreprise, de dédier mon temps à la refonte d’un project avec React et de devoir du coup, rendre cette application accessible et performante. (Youpi !)

\n

Que vous connaissiez React ou pas, que vous utilisiez un framework JavaScript ou que vous développiez un simple site web en HTML et CSS, les outils et astuces que j’ai rassemblé dans cet article vous permettront de mieux appréhender ces problématiques et d’y répondre correctement dans vos projets (présents et futurs).

\n

Tout le monde a besoin d’accessibilité

\n

L’accessibilité (aussi appelée a11y) est un sujet qui a toujours été présent depuis le début du web.

\n

Encore de nos jours, certaines entreprises et même développeurs continuent pourtant de penser que l’accessibilité est un sujet à part… tout comme certains pensaient il y a quelques années que l’UX (Expérience Utilisateur) n’était pas importante… Hum hum. Je vais prendre un exemple très simple pour vous démontrer l’importance de rendre un site internet ou une application web accessible.

\n

Imaginons que vous deviez en urgence acheter un billet d’avion ou de train de chez vous. Vous êtes sur votre PC, vous naviguez tranquillement sur le site d’achat quand soudain… votre souris fonctionnant sur batterie, n’a plus de jus (et non vous n’avez pas de piles de rechange ni même le câble USB pour la connecter à votre ordinateur, et votre iPhone 5s vient juste de s’éteindre). Imaginons donc que vous n’ayez plus que votre clavier pour finaliser votre achat. Et maintenant imaginez que le développeur n’ait absolument pas eu envie de tester la navigation par clavier. On peut même imaginer qu’il ait gentiment mis un outline: 0; parce que le client n’aimait pas voir ce contour bleu autour des liens et boutons.

\n

Je ne pense pas avoir besoin d’aller plus loin. J’ai beaucoup d’autre exemples aussi simple que celui-ci, qui ne mettent aucun doute sur le fait que l’accessibilité n’est pas une thématique limitée aux personnes avec des handicaps ou problèmes physiques. L’accessibilité est une thématique actuelle et universelle.

\n

La documentation de React consacre toute une page concernant l’accessibilité et vous y trouverez des éléments complémentaires au contenu de mon article.

\n

Mes outils de base pour « mesurer et analyser »

\n

Que vous veniez de commencer à développer votre application ou que vous deviez optimiser un projet existant, il y a certains outils que vous pouvez utiliser pour vous donner un aperçu du statut de votre projet.

\n

Lighthouse

\n

Que ce soit l’accessibilité, la performance, le SEO ou tout autre domaine front-end, il est important de pouvoir mesurer régulièrement l’état de votre application avant d’y apporter des améliorations ou corrections. L’un des outils que j’utilise quotidiennement et que vous connaissez peut-être est Lighthouse.

\n

\"\"
Résultats d’analyse de Lighthouse sur 24joursdeweb.fr.

\n

Beaucoup mis en avant lors du dernier Google Dev Summit en novembre 2018, Lighthouse est l’outil que vous trouverez soit dans l’onglet « Audit » des outils de développement de Chrome, ou maintenant intégré dans la page résultat de Google PageSpeed Insights. Vous pouvez ainsi analyser n’importe quel site en utilisant n’importe quel navigateur.

\n

Webhint

\n

Webhint est aussi un outil (open-source) qui a été créé par deux connaissances travaillant chez Microsoft. La documentation présente sur leur site est une des plus complètes que j’ai vu à ce jour, je vous recommande d’y jeter un œil.

\n

Vous pouvez soit utiliser leur site ou analyser n’importe quel site utilisant la ligne de commande. Webhint vous génèrera un rapport en HTML que vous pourrez partager avec vos équipes ou votre client.

\n

… et les autres

\n

Dareboost (entreprise française) et Calibre sont d’autres services que j’utilise selon les projets et que vous pouvez tester gratuitement pour une durée ou un nombre de fois limité.

\n

Repérer les erreurs et optimiser l’accessibilité

\n

Au delà des outils précédents qui vous donnent un aperçu global de l’état de votre site internet ou de votre application web, il m’arrive de travailler avec des packages ou modules plus spécifiques que je couple avec mon workflow de travail. Mais avant de vous les présenter, voici par quoi vous devez commencer : activer l’inspecteur d’accessibilité.

\n

Dans Google Chrome:

\n
    \n
  • Depuis certaines récentes versions de Chrome, vous pouvez maintenant trouver l’onglet accessibilité dans la partie « styles » de l’onglet « Éléments » des outils de développement de Chrome.
    • \n
\n

\"\"

\n

Dans Mozilla Firefox:

\n

Ouvrez la boîte à outils du développeur dans Firefox: depuis la version 63 de Firefox, vous devriez avoir un onglet « Accessibilité » comme sur la capture suivante. Il suffit de cliquer sur le bouton pour l’activer.\n

\"\"

\n

ESLint-plugin-jsx-a11y

\n

Si vous travaillez avec JavaScript depuis quelques temps, vous devez certainement utiliser ESLint dans votre workflow (vous pouvez lire cet article pour une complète présentation d’ESLint). ESLint-plugin-jsx-a11y, qui fonctionne avec ESLint) est un simple plugin qui va vous alerter dans le cas où votre code présente une erreur en terme d’accessibilité. Un simple outil mais efficace pour détecteur une erreur pendant le développement ou au moment du build.

\n

stylelint-a11y

\n

Récemment sorti, stylelint-a11y, est à utiliser si bien sûr vous utiliser Stylelint de base. Le plugin vous alerte sur des possibles erreurs d’accessibilité dans votre CSS / Sass.\nSi par exemple, vous utilisez une taille de texte trop petite ou des display: none, stylelint-a11y vous le dira.

\n

Permettre à un utilisateur d’accéder au contenu de votre website ou application en prenant en compte tous ces facteurs est important. Addy Osmani, ingénieur chez Google, a récemment publié un article sur le « Coût du JavaScript » et présente les problématiques et les solutions pour améliorer les performances de son site ou application.

\n

react-a11y

\n

react-a11y est un autre module qui vous alerte de possibles problèmes d’accessibilité directement dans votre console.

\n

react-axe

\n

react-axe, similaire à react-a11y, mais est basé sur axe-core développé par Deque et qui permet aussi de prendre connaissance de possibles erreurs d’accessibilité. Vous pouvez aussi télécharger l’extension aXe qui rajoute un onglet à votre Google DevTools et vous donne la même chose que react-axe mais pour n’importe quel site.

\n

D’autres plugins à explorer

\n

Malheureusement, il serait trop long de vous parlez de tous les plugins que j’ai pu tester depuis le début de mon projet, et qui m’on permis de construire une application React plus accessible. Je vous partage toutefois une petite liste de plugins (régulièrement mis à jour) auxquels je vous recommande de jeter un œil :

\n\n

Rien ne vaut le test manuel

\n

Bien sûr, après avoir testé et optimiser votre code à l’aide de ces outils, le seul vrai moyen de tester votre application et d’inviter des personnes avec des difficultés d’accessibilité différentes à la tester manuellement. Ils pourront ainsi vous faire des retours utiles basés sur leurs expériences et leur manière de naviguer le web.

\n

\"\"

\n

Après avoir traiter assez rapidement certains outils et astuces pour davantage d’accessibilité, nous allons nous pencher sur la performance.

\n

Mais au fait, c’est quoi la performance ?

\n

Que vous viviez en France ou au Canada, de nos jours, les connexions internet sont ici et là extrêmement rapides. Mais Internet n’est pas limité à la France, ou même à l’Europe ou à l’Amérique. Internet est accessible de n’importe où dans le monde et à travers n’importe quel appareil (téléphone, smartphone, TV, montre, réfrigérateur, tableau blanc tactile…).

\n

Savoir détecter les problèmes de performance

\n

Améliorer les performances de son site ou plus particulièrement de son application React demande l’utilisation de certains outils que nous pouvons utiliser dès le début, au milieu ou même en fin de projet.

\n

Commencer par analyser vos bundles

\n

webpack-bundle-analyser n’est pas un outil spécifique à React : c’est un plugin qui permet de visualiser le poids de vos modules et fichiers JavaScript présents dans vos bundles générés par Webpack. C’est un bon moyen de découvrir un potentiel module qui serait trop lourd. Il est tout à fait possible de l’utiliser dès que vous commencer à importer des packages pour votre projet.

\n

Choisir une meilleure alternative

\n

Si webpack-bundle-analyser a mis un évidence certains modules qui pourraient impacter vos performances, vous pouvez alors utiliser Bundlephobia pour choisir d’autres modules équivalents (et plus léger). Un simple exemple avec la fameuse librairie Moment.js qui en général est utilisée à tort et à travers et qui pourrait très souvent être remplacée par d’autres librairies beaucoup plus petites.

\n

Avant de choisir d’utiliser quelqueconque plugin, n’hésitez pas à vous demander si celui que vous souhaitez utiliser est vraiment utile, s’il n’existe pas d’autres alternatives ou une alternative plus légère…

\n

Analyser vos props pour éviter le rendu inutile

\n

Le module why-did-you-update peut vous permettre de vous alerter lorsque vos props sont re-rendu inutilement.

\n

\"\"

\n

Il vous suffit d’installer le package dans votre projet et insérer ce bout de code dans votre app.js :

\n
import React from 'react'\n\nif (process.env.NODE_ENV !== 'production') {\n  const { whyDidYouUpdate } = require('why-did-you-update')\n  whyDidYouUpdate(React)\n}\n
\n

Astuces pour améliorer les performances de votre application react

\n

Utiliser le tree-shaking

\n

Le « tree-shaking » est une technique qui permet, à la création de votre bundle, de ne pas inclure du « code mort » dont vous n’avez pas besoin. Vous vous retrouvez donc avec un bundle plus léger.

\n

Pour cela, vous devez utiliser :

\n
    \n
  • Les ES2015 Modules (import, export…)
    • \n
  • Webpack 2 ou version supérieure
    • \n
  • Un minifier qui supporte le tree-shaking (UglifyJS ou Babel)
    • \n
\n

Un exemple de bonne pratique à adopter :

\n
// Au lieu de\nimport * from 'package'\n\n// Préférer cela\nimport { module } from 'package'\n
\n

N’oubliez pas la mise en cache

\n

La mise en cache n’est pas forcément utile dans la phase de développement mais est indispensable pour une web application en production. Cela consiste tout simplement à rajouter un hash (série de chiffres et caractères) qui change à chaque fois que le contenu du fichier est modifié.

\n

Ce que beaucoup font consiste à créer au moins un bundle (à l’aide de Webpack) « main » avec votre propre code et un fichier « vendor » qui contiendrait tous les fichiers des libraries externes que vous seriez amener à utiliser. (en production, préférer l’utilisation de contenthash).

\n

Ce n’est qu’un début…

\n

Bien sûr dans cet article, je n’ai fait que gratter la surface (il y aurait beaucoup d’autres points à traiter), l’accessibilité et la performance web sont des spécialités à part entière qui demande beaucoup de pratique avant d’être appréhendé correctement. Mais aujourd’hui, plus que jamais, si vous n’en avez pas fait vos domaines d’expertises, ce sont définitivement des sujets qu’il est impossible d’ignorer. Le Web a toujours été un moyen de partage et de communication ouvert à tous, c’est à nous, architectes de faire en sorte que cela puisse continuer de la sorte.

\n

Je vous laisse quelques ressources complémentaires qui vous permettront d’approfondir un peu plus ces 2 thématiques !

\n

Accessibilité :

\n
    \n
  • 24a11y: c’est comme 24 jours de web mais pour l’accessibilité.
    • \n
  • Deque University: Deque est une entreprise de consulting qui offre des certifications et ressources sur l’accessibilité.
    • \n
  • Accessibility sur Tuts+: une série d’articles sur l’accessibilité (en anglais)
    • \n
\n

Performance :

\n
    \n
  • Front-End Performance Checklist: mon open-source checklist pour ce qui concerne la performance (vous y trouverez tous les liens possibles pour approndir le sujet).
    • \n
\n

Et bientôt, j’aurais le plaisir de publier la « Front-End Accessibility Checklist » sur GitHub, restez attentif !

", + "url": "https://thedaviddias.dev/fr/articles/outils-astuces-rendre-accessible-performante-application-react", + "title": "Outils et astuces pour rendre accessible et performante son application React", + "summary": "L'accessibilité et la performance sont deux de mes sujets de prédilection. Je partage dans cet article mes astuces et conseils pour vous assurez une qualité minimum pour votre projet.", + "image": "https://thedaviddias.dev/images/articles/outils-astuces-rendre-accessible-performante-application-react/featured.jpg", + "date_modified": "2018-12-24T02:34:11.000Z", + "author": { + "name": "David Dias", + "url": "https://twitter.com/thedaviddias" + } + } + ] +} \ No newline at end of file diff --git a/apps/blog/public/rss/fr/feed.xml b/apps/blog/public/rss/fr/feed.xml new file mode 100644 index 00000000..e75749da --- /dev/null +++ b/apps/blog/public/rss/fr/feed.xml @@ -0,0 +1,253 @@ + + + + The David Dias | Développeur Front-End, podcasteur & créateur de contenu + https://thedaviddias.dev + Salut toi! Je m'appele David Dias. Je suis développeur Front-End, podcasteur, créateur de contenu numérique passioné pour résoudre les problèmes digitaux et humains! J'aime rencontrer de nouvelles personnes, bâtir des communautées et parler de tech, d'expatriation et de web. + Wed, 19 Jul 2023 02:35:37 GMT + https://validator.w3.org/feed/docs/rss2.html + https://github.com/jpmonette/feed + fr + + The David Dias | Développeur Front-End, podcasteur & créateur de contenu + https://thedaviddias.dev/favicons/android-chrome-144x144.png + https://thedaviddias.dev + + Tous droits réservés 2023, David Dias + Technologie + + <![CDATA[Mes astuces d'expat pour faciliter vos démarches administratives]]> + https://thedaviddias.dev/fr/articles/astuces-dexpat-pour-faciliter-demarches-administratives + https://thedaviddias.dev/fr/articles/astuces-dexpat-pour-faciliter-demarches-administratives + Fri, 21 Jun 2019 00:01:00 GMT + +
La main d'un homme tenant une plume prêt à signer un document.
+Toute préparation à une possible expatriation passe par une phase inévitable: celle de rassembler tous les documents requis pour avoir la possibilité d’accomplir son rêve. C’est la phase que redoute toute personne qui ne souhaite pas se retrouver avec un refus de visa ou de permis de travail simplement à cause d’une « feuille de papier ». Pour vous faciliter cette phase et vous permettre de sereinement vous préparer, j’ai rassemblé toutes mes astuces et habitudes qui m’ont permis de vivre sereinement mes 3 expatriations: au Brésil, à l’Île Maurice et au Canada.

+

Listez tous vos voyages sur un carnet de voyage / vol

+

Un carnet de voyage ouvert et vide posé sur un vieux mappemonde marron. Entouré par une vieille loupe, de vieilles cartes postales, des lunettes et un appareil photo. +Photo by Dariusz Sankowski on Unsplash +Ce n’est que récemment que j’ai pris le temps de rassembler toutes les informations concernant mes précédents voyages, j’aurais préféré avoir pu le commencer avant. Aujourd’hui, pour beaucoup, les vols sont réservés en ligne: il est donc assez facile de retrouver la trace de ses voyages dans ses emails. Mais étant donné que dans mon cas, j’avais la volonté de lister tous mes voyages depuis 2003, et qu’à cette époque, la réservation en ligne n’était pas extrêmement courante, la tâche n’a pas été simple.

+

Un carnet de voyage ouvert et vide posé sur un vieux mappemonde marron. Entouré par une vieille loupe, de vieilles cartes postales, des lunettes et un appareil photo.
Photo de Dariusz Sankowski sur Unsplash

+

Heureusement pour moi, les photos (à l’aéroport ou de mon billet d’avion), les numérisation des pages de passeports (avec les tampons d’entrée et de sortie) m’ont permit de pouvoir lister les 22 vols en avion que j’ai effectués depuis 2003.

+

Je vous partage d’ailleurs un simple modèle de feuilles de données Google que j’ai utilisé pour répertorier mes voyages (vous pouvez le dupliquer et l’enregistrer dans votre propre Google Drive). Avoir un carnet de voyage / vol est indispensable et vous sauvera de nombreuses heures de recherche lorsque votre futur pays d’expatriation vous demandera où vous êtes allez vous promener ces dernières années. Souvent, pour une demande de résidence, on peut aussi vous demander vos voyages sur les 10 dernières années (c’est le cas pour les USA). Je vous conseille de vous y préparer.

+

Vous pouvez aussi trouver un modèle de journal de voyages sur le site du Canada, à imprimer si vous le souhaitez.

+

Numérisez et sauvegardez en ligne vos documents importants

+

La couverture d'un passeport américain ainsi qu'un billet d'avion.
Photo de Nicole Harrington sur Unsplash

+

Numériser ses documents régulièrement devrait être une habitude et une pratique enseignée à l’école! Depuis des années, j’ai l’habitude de numériser tous mes documents sur un espace de stockage en ligne comme Google Drive, totalement gratuit et simple à utiliser quel que soit votre âge. Vous pouvez de nos jours utiliser facilement votre téléphone pour la numérisation de n’importe quel document. Des applications gratuites comme Adobe Scan (que j’utilise), Microsoft Office Lens ou même Evernote Scannable uniquement pour iOS, vous permettent d’identifier le type de document et de le sauvegarder ou de le partager facilement.

+

Passeports (toutes les pages écrites), carte d’identité (recto-verso), justificatifs de domicile, factures, notes du baccalauréat, diplômes, certificats de travail, fiches de paies, billets d’avions, feuilles d’impôts, les documents se trouvant dans votre portefeuille (en cas de vol, cela peut s’avérer pratique)… Tous ces documents sont importants, et je dirais que même si vous ne vous expatrier pas ou plus, prendre l’habitude de stocker ces documents peuvent vous faciliter beaucoup la tâche pour de futures démarches administratives.

+

Si vous habitez en France et que vous avez un compte sur le site « Service-Public.fr » (si vous n’en avez pas, aller tout de suite en créer un!), vous avez une catégorie « Mes documents » vous permettant facilement de stocker des documents importants liés à votre état civil, un endroit en plus pour ne pas avoir à chercher ailleurs. Lors de votre l’enregistrement sur les Registres des Français établis hors de France, votre carte consulaire est automatiquement sauvegardée dans cette rubrique. Je pense que c’est le cas pour d’autres démarches également.

+

![Capture d'écran du site Service-Public.fr montrant la catégorie "Mes documents"](/images/articles/astuces-dexpat-pour-faciliter-demarches-administratives/service-public-capture.jpeg 'Capture d'écran du site Service-Public.fr montrant la catégorie "Mes documents"')

+

Apprenez les bases de fonctionnement d’un éditeur de fichiers pdf

+

Le format PDF est un format électronique permettant le partage assez simple de documents. Souvent vous avez aussi la possibilité de télécharger des documents aux formats JPEG, PNG qui sont des formats d’images. Mais il est toujours plus simple, surtout pour celui qui reçoit les documents de recevoir les fichiers au format PDF. S’il n’est pas déjà installé sur votre appareil, vous pouvez utiliser le logiciel gratuit Acrobat Reader ou trouver la panoplie d’autres logiciels gratuits qui vous permettent de convertir un format image en PDF, d’y insérer une image, d’écrire dans le document…

+

Il m’arrive très souvent, au lieu d’imprimer des documents (et par faute d’imprimante), de les ouvrir dans un lecteur / éditeur de fichiers PDF et d’écrire sur les formulaires comme si je le faisais à la main. Une photo de ma signature importée dans ce document et me voilà avec un document entièrement rempli, que je peux facilement envoyer et sauvegarder sur mon ordinateur et en ligne.

+

Les quelques astuces que vous pouvez apprendre comme remplir un formulaire (s’il n’est pas déjà prêt à être rempli) ou ajouter une image (votre signature par exemple) vous seront souvent utiles et pourront vous faire gagner un temps précieux (en plus de contribuer à protéger la planète en imprimant moins)

+

Prenez-vous en photo tous les 3-4 mois

+

Un homme montrant une photo d'identité qui cache son visage.
Photo de [Kyle Glenn](https://unsplash.com/@kylejglenn?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) sur Unsplash

+

Dans la majorité de vos démarches, il vous sera demandé une photo au format d’identité. Et quoi de plus embêtant que de vous apercevoir que vous n’en avez pas pris avant d’accidentellement vous raser un côté de la tête (ne rigolez pas, cela peut arriver à tout le monde). Si vous prenez l’habitude de prendre des photos au format identité (sans sourire et sans chapeau s’il vous plaît), cela vous permettra deux choses:

+
    +
  • en avoir une sous la main si vous en avez besoin,
    • +
  • pouvoir faire un joli montage sur plusieurs années de votre évolution physiologique. Oui, ça se fait beaucoup de nos jours…
    • +
+

Vous n’avez pas besoin d’aller à chaque fois chez le photographe (sauf pour une demande de résidence permanente), mais tâchez de respecter les consignes pour éviter de voir votre dossier refusé à cause d’une photo floue ou de dimensions incorrectes.

+

Anticipez vos futures démarches

+

Préparer tous vos documents pour une demande de permis de travail ou de visa étudiant c’est super! Mais pouvoir anticiper vos futures démarches c’est encore mieux. Et cela a été mon erreur très récemment: en plein processus de demande de résidence; j’ai la possibilité de faire valoir ma première année d’université et ainsi pouvoir peut-être avoir les points nécessaires pour une demande d’Entrée Express.

+

Mais voilà, mon numéro d’étudiant est soigneusement rangé dans une pochette cartonnée en France et mes parents étant en vacances, ils n’ont donc pas la possibilité de m’envoyer mon identifiant. Je dois donc attendre pour pouvoir faire ma demande de relevé de notes, juste parce que je n’avais pas suffisamment anticipé ces démarches.

+

Jeter un œil sur la liste des documents nécessaires pour de futures démarches peut s’avérer essentiel. Pour ceux qui ont habité dans d’autres pays comme moi, il faut considérer que certaines démarches prennent aussi plus de temps dans certains endroits. Par exemple, en France, faire une demande d’extrait judiciaire se fait en ligne, et vous recevez votre acte par la poste en moins de deux semaines (selon la destination bien sûr). A l’Île Maurice, cela peut prendre entre un à deux mois et vous devez avoir une personne sur place pour s’en occuper. Deux mois, c’est très long…

+

Ne stressez pas, il y a souvent une solution à tout

+

Il se peut que vous ayez beaucoup voyagé, ou que votre appartement ai pris feux un jour (je vous le souhaite pas) et que vous ayez perdu vos documents importants. Ne paniquez pas!

+

Les démarches administratives font parties de tout processus d’immigration, et la majorité des personnes savent cela. Il vous manque un document? Voyez un moyen de pouvoir en récupérer une copie: il y a toujours en règle générale une alternative ou possibilité de récupérer ou avoir accès à un document important. Ne vous mettez pas davantage de pression inutile et essayer de suivre les astuces que je vous partage. Je vous assure que vos démarches n’en seront que moins stressantes et plus simples à affronter.

]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[9 réponses aux questions que vous vous posez sur Toronto et le Canada]]> + https://thedaviddias.dev/fr/articles/9-reponses-questions-vous-vous-posez-toronto-canada + https://thedaviddias.dev/fr/articles/9-reponses-questions-vous-vous-posez-toronto-canada + Mon, 17 Jun 2019 00:01:00 GMT + + Régulièrement, beaucoup de personnes me contactent pour me poser des questions sur le Canada et Toronto : parfois des jeunes qui souhaiterai s’expatrier pour la premiere fois, des couples qui souhaitent changer de vie. J’essaye autant que je peux de leur répondre avec ma petite expérience (bientôt un an) de vie dans la grande métropole.

+

Une femme avec le doigt sur le menton et un point d'interrogation sur un mur blanc.

+

Que vous viviez en France ou dans un pays francophone, les questions que j’ai rassemblé dans cet article sont sûrement celles que vous vous posez. Il n’est pas toujours évident de pouvoir dénouer le vrai du faux en ligne, car les expériences sont toutes différentes. Il se peut même que mes réponses ne soient pas parfaites mais elles sont des pistes qui je l’espère vous permettront d’y voir plus clair.

+

Quelles sont mes options pour venir m’installer au canada?

+

C’est LA question que vous verrez le plus un peu partout, sur les forums, dans les groupes de discussions Facebook. Et la réponse ne tiendra jamais en quelques lignes tellement le Canada offrent des possibilités pour légalement venir habiter ou déménager sur le sol nord américain. Entre le Programme Vacances Travail, le programme mobilité francophone, le visa d’affaire, le parrainage… Un petit tour sur la rubrique « Autres visas et procédures » peut être un bon début si vous voulez en savoir plus.

+

Quel que soit votre situation, vos compétences, il est presque certain qu’il existe un programme ou des démarches qui peuvent vous permettre de venir vous installer ici.

+

Pour les plus jeunes, de manière générale, même s’il vous est possible de venir sans forcément avoir fait de longues études, j’ai de plus en plus tendance à fortement recommandé d’avoir un niveau Master, peu importe la filière (je vous recommande toutefois vous renseigner pour vous assurer que votre Master possède des équivalences au Canada). Le fait d’avoir un diplôme de niveau Master est un facteur qui vous favorisera toujours que ce soit pour habiter au Canada, aux États-Unis, en Nouvelle-Zélande…

+

Si vous décidez de faire une demande de résidence permanente, beaucoup d’éléments sont pris en compte pour vous attribuez un certain nombre de points, avoir des études supérieures est un plus à ne pas négliger sur le long terme.

+

Quelles sont mes options pour travailler à toronto?

+

Beaucoup d’entreprises, notamment dans le secteurs des services ou de l’informatique, ont recours au sponsorship. Cela peut être coûteux et long pour une entreprise, mais certains ont compris l’avantage d’avoir des employés aux expériences et provenances diverses.

+

Le programme mobilité francophone par lequel je suis venu au Canada est assez simple, peu coûteux et rapide (j’ai reçu mon visa de travail en 4 semaines environ). Travailler en étant sous visa du PVT est aussi une autre possibilité. J’entends parfois certaines personnes me dire que les employeurs n’aiment pas trop le PVT, je ne pourrais pas le confirmer ou le nier. Je pense simplement que si un employeur a besoin de main-d’oeuvre, il ne s’arrêtera pas à cela. C’est après à vous de le convaincre de vous embaucher.

+

Changer d’emploi tous les 2 ans et demi est assez courant au Canada. Cela n’est pas forcément vu ou synonyme d’instabilité professionnelle comme cela l’est parfois en France. Votre futur employeur n’a en général aucun moyen de savoir si vous avez été licencié ou si vous êtes parti de vous même.

+

Il faut aussi savoir que lorsqu’une entreprise établis votre contrat d’embauche, elle peut être amenée à vous demander le téléphone / contact de votre précédent responsable. Les vérifications existent, elles ne sont pas non plus trop poussées (ils ne demandent pas si vous êtes un gentil employé) mais simplement pour vérifier vos dires. Ne chercher donc pas à mentir à votre futur employeur, il y a de fortes chances qui le découvre.

+

Comment trouver du travail au canada?

+

LinkedIn. Ma première réponse est que quel que soit votre secteur, vous devez absolument avoir un profile sur LinkedIn (en anglais et actualisé). Comprendre comment les recruteurs utilisent les filtres de LinkedIn pour trouver de possible candidats est très important et vous permettra de vous différenciez.

+

Mais ce n’est pas suffisant. Glassdoor, Indeed et Kijiji sont aussi des plate-formes que je vous recommande. Certaines entreprises ont souvent une rubrique sur leur site où elles postent leurs offres. Ne pas oublier aussi que les pages Facebook et comptes Twitter des entreprises qui vous intéressent peuvent aussi vous permettre de ne pas manquer une opportunité.

+

Être visible est d’une importance primordiale, montrer ce que vous savez faire permet de rassurer un futur employeur. Et c’est quelque chose que vous devez mettre en place bien avant de venir au Canada. Si vous faites partie d’une association, voyez si un journal en ligne ne serait pas intéressé de vous interviewer, si vous êtes expert dans un domaine, n’hésitez pas à écrire sur un site ou votre propre articles, pensez aussi à lancer une chaîne Youtube… Il existe de nombreux moyens aujourd’hui qui peuvent vous permettre d’être visible et donner un aperçu de vos compétences à un employeur.

+

JE N’AI PAS UN BON NIVEAU D’ANGLAIS, VAIS-JE POUVOIR ME DÉBROUILLER DANS LA PARTIE ANGLOPHONE DU CANADA?

+

C’est certainement l’une des plus grandes craintes, et la raison pour laquelle beaucoup de français choisissent la région du Québec, plutôt que le reste du Canada. Et très honnêtement, bien que ce soit une appréhension normale, elle n’a pas forcément lieu d’être. Oui, vous serez certainement amené à beaucoup douter de vous et de votre choix lorsque pendant les premières semaines, vous n’arriverez pas forcément à vous exprimer et à tout comprendre. Mais c’est un processus temporaire et tout à fait normal: tout le monde passe par cela et s’en sort.

+

Je ne peux que vous recommander de vous plonger dans la langue anglaise bien avant votre arrivée. Des années avant de venir habiter au Canada, je commençais déjà à visionner des séries en anglais (avec sous-titre d’abord en français puis après en anglais). Travaillant dans le web, tout le contenu que je suis amené à lire est le plus souvent en anglais. Aujourd’hui, avec Youtube et les podcasts, il ne manque pas de contenu en anglais pour pouvoir vous y plonger.

+

Si vous souhaitez venir un mois à Toronto et pouvoir améliorer votre anglais, je ne peux qu’hautement vous recommander le cours de « English for effective communication » de l’Université de Toronto. Oui, le cours est assez cher, mais vous serez forcer de parler pendant toutes vos matinées pendant 4 semaines. Vous vous sentirez beaucoup plus à l’aise après cela et vous apprendrez énormément sur d’autres cultures.

+

COMMENT EST LE SYSTÈME DE SANTÉ EN ONTARIO?

+

Le système français est je pense l’un des meilleurs au monde. Et l’on s’en rends bien compte en venant ici. Le système n’est pas mauvais et mon expérience est assez limité dans le domaine, heureusement. Basé sur mon expérience personnelle: la difficulté réside surtout pour trouver un médecin de famille, obligatoire si vous souhaitez voir certains spécialistes. A ce jour, je n’en ai toujours pas.

+

Par contre, ce qui est assez surprenant c’est que si vous avez une carte de santé appelé OHIP (qui est effective 3 mois après votre installation, à demander bien avant la fin des 3 premiers mois), vous sortez de chez le docteur sans rien payer. Dans mon cas, il m’est arrivé deux ou trois fois d’aller dans des walk-ing cliniques ouvertes quasiment tous les jours, et je n’ai jamais rien eu à régler. C’est un peu déroutant au début.

+

Il est indispensable toutefois d’avoir une mutuelle, car certains frais peuvent vite vous coûter cher. Selon votre profession, vous pourriez avoir la chance d’avoir une bonne mutuelle. Certaines même vous allouent une somme de 1000 dollars par an pour l’utiliser à des fins médicales et couvrir certaines dépenses non pris en charge par la carte de santé ou le plan de base de votre mutuelle. Ne dépensez pas tout dans de nouvelles jolies paires de lunettes Channel!

+

Combien coûte la location d’un appartement à toronto?

+

Un appartement d’environ 35m2 dans le centre de Toronto peut coûter aux alentours de 2200 dollars canadien. Un appartement dans la périphérie (la GTA), plus spacieux peut vous coûter mensuellement aux alentours de 1800 dollars. Les prix peuvent varier, bien sûr, mais c’est une moyenne basé sur le témoignages des gens que je rencontre.

+

Il ne faut pas commettre l’erreur de comparer avec les loyers en France (notamment Paris) ou même se dire qu’il est mieux de payer 1800 que 2200 car d’autres coûts doivent être pris en considération avant de faire son choix.

+

Si vous êtes deux et que vous prenez un abonnement mensuel pour le TTC (Toronto Transit Commission société qui gère les transports de la ville), il faudra rajouter environ 150 dollars par personne, ce qui fait un total de 300 dollars par mois. Il faut aussi prendre en considération votre possible lieu de travail, les frais liés à la dépense d’eau, le chauffage etc… Dans certains condominiums, vous n’aurez à payer que l’électricité, pas la climatisation et l’eau. Il est donc important d’avoir une liste de tous les frais possibles afin de déterminer le loyer acceptable dans votre situation.

+

Pour donner un exemple de mon cas personnel, pour ce qui est de l’électricité, je suis amené à payer aux alentours de 60 dollars, 100 pour l’abonnement internet et environ 150 pour deux abonnements cellulaires avec données. Avec aux alentours de 200–250 dollars de dépenses, toutes les deux semaines pour des courses au supermarché, vous avez ici un exemple de dépenses pour un couple vivant dans le centre de Toronto.

+

Comment sont les torontais vis-à-vis des français? sont-ils mal / bien vus?

+

Ce qui est formidable à Toronto, c’est qu’il est très difficile d’y vivre et d’y avoir des préjugés. Bien sûr, il existe des personnes qui en ont, mais le fait que la ville de Toronto soit cosmopolite rends difficile d’y vivre si on possédent des a-priori sur les personnes et les nationalités..

+

J’ai récemment organisé une petite fête entre amis, où sur 20 personnes, 14 nationalités étaient représentées: de quoi vous donner une idée de la pluri-culturalité qu’il peut y avoir à Toronto.

+

Comment décrire le niveau de vie?

+

J’ai tendance à trouver que les prix sont plus ou moins comparables à ceux que vous pouvez trouver en France. Certaines enseignes affichent des prix un peu plus élevés que d’autres. Loblaws est considéré par certains comme étant le plus cher mais la viande et les fruits de mer y sont de qualité. Vous avez Walmart, Costco, Sobeys sont d’autres enseignes répandues au Canada.

+

Bien sûr, le fromage, le vin et autres spécialités françaises restent plus chers qu’en France, mais c’est le cas de tous les pays importateurs de produits français. Oui souvent, lorsque l’ont passe des vacances France, nos familles et amis ne comprennent pas forcément pourquoi certains repas se résument à plusieurs fromages, du pain et une bonne bouteille de vin rouge… On peut pas leur en vouloir, mais n’espérer pas qu’ils comprennent.

+

Qu’est est la plus grosse difficulté qu’on peut avoir en s’expatriant à toronto?

+

L’expatriation en règle générale a son lot de haut et bas (voir le schéma ), des phases qui peuvent durer plus ou moins longtemps selon les personnes et les événements. A chaque expatriation, les phases sont les mêmes. Il ne faut pas faire l’erreur de croire que plus on vit d’expatriations plus cela est facile, ça ne l’est pas.

+

Etant certainement dans la phase « acceptation » maintenant, il a fallu affronter des moments de doutes et de crise, personnelle et professionnelle. Pendant ces moments, le replis sur soi est souvent perçu comme une solution, mais je vous en décourage fortement. Le Canada étant un pays d’immigrants, vous pouvez être assuré qu’il existe juste à côté de vous une personne qui est passé par les mêmes phases et qui sera là pour vous aider.

+

Le plus gros défi, que j’ai personnellement dû affronter récemment concerne la manière dont certains Canadiens (attention toujours à ne pas généraliser) ont pour communiquer lorsqu’il y a des problèmes. J’ai été surpris, dans le cadre professionnel, de passer du tout va très bien à tout va très mal, en l’espace simplement de quelques semaines. A ma grande surprise, tous les francophones, immigrés à Toronto que je connais, m’ont témoigné être passer par là, souvent durant leur première année au Canada. C’est rassurant de savoir que mon cas n’est pas isolé.

+

Il existe un certain non-dit parfois, qui peut parfois être une bonne chose mais qui lorsque nous n’avons pas l’habitude peut aussi être déroutant. C’est quelque chose à avoir en tête, mais qui fait partie du jeu.

]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[Comment le Canada est devenu ma maison après 4 ans de tentatives?]]> + https://thedaviddias.dev/fr/articles/comment-canada-devenu-maison-4-ans-tentatives + https://thedaviddias.dev/fr/articles/comment-canada-devenu-maison-4-ans-tentatives + Tue, 02 Apr 2019 00:01:00 GMT + + C’est en 2014 que je pose les pieds au Canada pour la première fois. Depuis cette année, j’ai tenté de tout mettre en œuvre pour que ce pays, et spécialement la ville de Toronto, devienne ma maison. En juin 2018, après deux tentatives de PVT, un déménagement de deux ans à l’Île Maurice, je pose enfin les pieds au Canada avec ma femme et mon permis de travail en poche. Ce n’est que le début de l’aventure!

+

Un drapeau du Canada sur le dos d'un couple de dos regardant la tour CN de Toronto

+

UN PARCOURS PAS COMME LES AUTRES

+

Aucun parcours n’est jamais le même. Celui que j’ai eu au cours des dernières années n’a pas toujours été facile, faire face à l’inconnu de savoir si un jour je pourrais vivre au Canada… Mais je me suis toujours dis que si certains pouvaient y arriver, il n’y avais pas de raison que moi-même je ne puisse pas y arriver non plus.

+

Tout a commencé à mon retour du Canada en 2014: j’ai passé beaucoup de temps à lire des articles, des livres et des témoignages de personnes en ligne ou même à discuter de l’expatriation au Canada avec des personnes que je rencontrais. Je souhaitais avoir les pour, les contre, tout ce qui pouvait m’aider à faire les choix qui me correspondent le plus. Malgré mes tentatives de PVT en 2015 et en 2016, je n’ai pas renoncé pour autant à trouver un moyen de commencer une nouvelle vie future au Canada.

+

Étant développeur web (Front-End) depuis déjà plusieurs années, je n’étais pas sans ignorer que ma profession est en forte demande un peu partout dans le monde, le Canada ne dérogeais pas à la règle. Mais même avec cet avantage dans les mains, il faut parfois se rendre plus visible car au milieu de tous les potentiels candidats, il faut pouvoir savoir prouver sa valeur et montrer à son futur possible employeur l’avantage que l’on peut représenter face à un candidat Canadien.

+

SOYEZ VISIBLE AVANT TOUT

+

C’est notamment grâce à un de mes projets informatique open-source (dont la fameuse Front-End Checklist) que j’ai pu me faire connaître. Grâce à ces plus de 33 000 étoiles (l’équivalent des j’aimes de Facebook), j’ai eu la chance de gagner une visibilité internationale qui a certainement joué pour pouvoir alors décrocher des entretiens dans plusieurs startups de Toronto avant même de venir sur place.

+

Après avoir passé beaucoup temps sur LinkedIn et Glassdoor, j’ai eu la chance de pouvoir passer plusieurs entretiens via Skype, à chaque fois avec différentes personnes. Les 3-4 entretiens pour une même entreprise étant assez courants au Canada. Il faut s’y préparer et être relax: tous les recruteurs que j’ai pu rencontrer ont vraiment été supers et transparents. Celles-ci ont été des expériences différentes de celles que j’avais pu avoir par le passé.

+

LE PROGRAMME MOBILITÉ FRANCOPHONE

+

C’est aussi en grande partie grâce à l’existence du programme mobilité francophone que j’ai pu assez facilement, ayant une proposition de travail, décrocher mon permis de travail et venir m’installer au Canada.

+

Contrairement à un sponsorship, le programme mobilité francophone ne coûte qu’aux alentours de 230 dollars canadien pour l’employeur. Après avoir remplir un formulaire en ligne sur le portail de l’employeur canadien, il reçoit un numéro correspond au dossier et que vous aurez à indiquer dans les documents que vous devrez réunir et transmettre en ligne. Il faut noter que le Canada est vraiment exemplaire, de mon point de vue, en ce qui concerne leur le site officiel du gouvernement du Canada et tous les services à destination des futurs immigrés.

+

TROUVER UN TRAVAIL N’EST PAS TOUJOURS LE PLUS COMPLIQUÉ

+

Grâce à mon expatriation au Brésil de 2006 à 2009 et puis celle de l’Île Maurice entre 2015 et 2018, j’ai vécu mon expatriation au Canada de manière plus sereine. Cela n’empêche cependant pas les remises en questions et les manques de repères, ce qui au début est toujours une phase quelque peu déroutante. La clé pour moi et ma femme a certainement été de ne pas trop regarder en arrière mais plutôt en avant. Trouver des solutions aux problèmes qui pouvaient possiblement se manifester et accepter le choix que nous avions fait de venir au Canada.

+

La recherche d’un logement a été beaucoup plus compliquée que nous l’avions anticipé. L’absence d’un historique de crédit (un document permettant de montrer que vous remboursez correctement vos crédits et dettes) rends plus difficile pour de nouveaux arrivants d’être accepté par les bailleurs. D’autant plus, que nous recherchions dans le centre-ville de Toronto, là où la demande est très élevée et les places rares.

+

Grâce à l’aide d’une « broker » française: Nelly de Breze, après un mois et demi de Airbnb, nous avons finalement pu trouver un petit appartement (environ 35 mètres carrés) dans un condo à 15 minutes à pied de mon travail, et 5 minutes à pied du travail de ma femme. On ne pouvait vraiment pas rêver mieux.

+
+

Un an s’est presque écoulé depuis notre arrivée au Canada. Il n’y a pas un jour qui se passe où nous regrettons notre choix. Nous commençons à nous préparer pour notre demande de résidence via l’Entrée express. Une autre étape confirmant notre volonté de faire partie de ce merveilleux pays qui nous permet de connaître de nouvelles personnes chaque jour, souvent eux aussi expatriés au Canada!

]]> + thedaviddias@gmail.com (David Dias) + + + + <![CDATA[Outils et astuces pour rendre accessible et performante son application React]]> + https://thedaviddias.dev/fr/articles/outils-astuces-rendre-accessible-performante-application-react + https://thedaviddias.dev/fr/articles/outils-astuces-rendre-accessible-performante-application-react + Mon, 24 Dec 2018 02:34:11 GMT + + L’accessibilité et la performance sont deux (vastes) sujets qui m’ont toujours passionné et qui sont devenus ces dernières années au centre de nombreux meetups et conférences auquels j’ai pu assister (petit clin d’oeil à A11yTO). Récemment expatrié au Canada, j’ai eu l’opportunité, dans ma nouvelle entreprise, de dédier mon temps à la refonte d’un project avec React et de devoir du coup, rendre cette application accessible et performante. (Youpi !)

+

Que vous connaissiez React ou pas, que vous utilisiez un framework JavaScript ou que vous développiez un simple site web en HTML et CSS, les outils et astuces que j’ai rassemblé dans cet article vous permettront de mieux appréhender ces problématiques et d’y répondre correctement dans vos projets (présents et futurs).

+

Tout le monde a besoin d’accessibilité

+

L’accessibilité (aussi appelée a11y) est un sujet qui a toujours été présent depuis le début du web.

+

Encore de nos jours, certaines entreprises et même développeurs continuent pourtant de penser que l’accessibilité est un sujet à part… tout comme certains pensaient il y a quelques années que l’UX (Expérience Utilisateur) n’était pas importante… Hum hum. Je vais prendre un exemple très simple pour vous démontrer l’importance de rendre un site internet ou une application web accessible.

+

Imaginons que vous deviez en urgence acheter un billet d’avion ou de train de chez vous. Vous êtes sur votre PC, vous naviguez tranquillement sur le site d’achat quand soudain… votre souris fonctionnant sur batterie, n’a plus de jus (et non vous n’avez pas de piles de rechange ni même le câble USB pour la connecter à votre ordinateur, et votre iPhone 5s vient juste de s’éteindre). Imaginons donc que vous n’ayez plus que votre clavier pour finaliser votre achat. Et maintenant imaginez que le développeur n’ait absolument pas eu envie de tester la navigation par clavier. On peut même imaginer qu’il ait gentiment mis un outline: 0; parce que le client n’aimait pas voir ce contour bleu autour des liens et boutons.

+

Je ne pense pas avoir besoin d’aller plus loin. J’ai beaucoup d’autre exemples aussi simple que celui-ci, qui ne mettent aucun doute sur le fait que l’accessibilité n’est pas une thématique limitée aux personnes avec des handicaps ou problèmes physiques. L’accessibilité est une thématique actuelle et universelle.

+

La documentation de React consacre toute une page concernant l’accessibilité et vous y trouverez des éléments complémentaires au contenu de mon article.

+

Mes outils de base pour « mesurer et analyser »

+

Que vous veniez de commencer à développer votre application ou que vous deviez optimiser un projet existant, il y a certains outils que vous pouvez utiliser pour vous donner un aperçu du statut de votre projet.

+

Lighthouse

+

Que ce soit l’accessibilité, la performance, le SEO ou tout autre domaine front-end, il est important de pouvoir mesurer régulièrement l’état de votre application avant d’y apporter des améliorations ou corrections. L’un des outils que j’utilise quotidiennement et que vous connaissez peut-être est Lighthouse.

+

Résultats d’analyse de Lighthouse sur 24joursdeweb.fr.

+

Beaucoup mis en avant lors du dernier Google Dev Summit en novembre 2018, Lighthouse est l’outil que vous trouverez soit dans l’onglet « Audit » des outils de développement de Chrome, ou maintenant intégré dans la page résultat de Google PageSpeed Insights. Vous pouvez ainsi analyser n’importe quel site en utilisant n’importe quel navigateur.

+

Webhint

+

Webhint est aussi un outil (open-source) qui a été créé par deux connaissances travaillant chez Microsoft. La documentation présente sur leur site est une des plus complètes que j’ai vu à ce jour, je vous recommande d’y jeter un œil.

+

Vous pouvez soit utiliser leur site ou analyser n’importe quel site utilisant la ligne de commande. Webhint vous génèrera un rapport en HTML que vous pourrez partager avec vos équipes ou votre client.

+

… et les autres

+

Dareboost (entreprise française) et Calibre sont d’autres services que j’utilise selon les projets et que vous pouvez tester gratuitement pour une durée ou un nombre de fois limité.

+

Repérer les erreurs et optimiser l’accessibilité

+

Au delà des outils précédents qui vous donnent un aperçu global de l’état de votre site internet ou de votre application web, il m’arrive de travailler avec des packages ou modules plus spécifiques que je couple avec mon workflow de travail. Mais avant de vous les présenter, voici par quoi vous devez commencer : activer l’inspecteur d’accessibilité.

+

Dans Google Chrome:

+
    +
  • Depuis certaines récentes versions de Chrome, vous pouvez maintenant trouver l’onglet accessibilité dans la partie « styles » de l’onglet « Éléments » des outils de développement de Chrome.
    • +
+

+

Dans Mozilla Firefox:

+

Ouvrez la boîte à outils du développeur dans Firefox: depuis la version 63 de Firefox, vous devriez avoir un onglet « Accessibilité » comme sur la capture suivante. Il suffit de cliquer sur le bouton pour l’activer. +

+

ESLint-plugin-jsx-a11y

+

Si vous travaillez avec JavaScript depuis quelques temps, vous devez certainement utiliser ESLint dans votre workflow (vous pouvez lire cet article pour une complète présentation d’ESLint). ESLint-plugin-jsx-a11y, qui fonctionne avec ESLint) est un simple plugin qui va vous alerter dans le cas où votre code présente une erreur en terme d’accessibilité. Un simple outil mais efficace pour détecteur une erreur pendant le développement ou au moment du build.

+

stylelint-a11y

+

Récemment sorti, stylelint-a11y, est à utiliser si bien sûr vous utiliser Stylelint de base. Le plugin vous alerte sur des possibles erreurs d’accessibilité dans votre CSS / Sass. +Si par exemple, vous utilisez une taille de texte trop petite ou des display: none, stylelint-a11y vous le dira.

+

Permettre à un utilisateur d’accéder au contenu de votre website ou application en prenant en compte tous ces facteurs est important. Addy Osmani, ingénieur chez Google, a récemment publié un article sur le « Coût du JavaScript » et présente les problématiques et les solutions pour améliorer les performances de son site ou application.

+

react-a11y

+

react-a11y est un autre module qui vous alerte de possibles problèmes d’accessibilité directement dans votre console.

+

react-axe

+

react-axe, similaire à react-a11y, mais est basé sur axe-core développé par Deque et qui permet aussi de prendre connaissance de possibles erreurs d’accessibilité. Vous pouvez aussi télécharger l’extension aXe qui rajoute un onglet à votre Google DevTools et vous donne la même chose que react-axe mais pour n’importe quel site.

+

D’autres plugins à explorer

+

Malheureusement, il serait trop long de vous parlez de tous les plugins que j’ai pu tester depuis le début de mon projet, et qui m’on permis de construire une application React plus accessible. Je vous partage toutefois une petite liste de plugins (régulièrement mis à jour) auxquels je vous recommande de jeter un œil :

+ +

Rien ne vaut le test manuel

+

Bien sûr, après avoir testé et optimiser votre code à l’aide de ces outils, le seul vrai moyen de tester votre application et d’inviter des personnes avec des difficultés d’accessibilité différentes à la tester manuellement. Ils pourront ainsi vous faire des retours utiles basés sur leurs expériences et leur manière de naviguer le web.

+

+

Après avoir traiter assez rapidement certains outils et astuces pour davantage d’accessibilité, nous allons nous pencher sur la performance.

+

Mais au fait, c’est quoi la performance ?

+

Que vous viviez en France ou au Canada, de nos jours, les connexions internet sont ici et là extrêmement rapides. Mais Internet n’est pas limité à la France, ou même à l’Europe ou à l’Amérique. Internet est accessible de n’importe où dans le monde et à travers n’importe quel appareil (téléphone, smartphone, TV, montre, réfrigérateur, tableau blanc tactile…).

+

Savoir détecter les problèmes de performance

+

Améliorer les performances de son site ou plus particulièrement de son application React demande l’utilisation de certains outils que nous pouvons utiliser dès le début, au milieu ou même en fin de projet.

+

Commencer par analyser vos bundles

+

webpack-bundle-analyser n’est pas un outil spécifique à React : c’est un plugin qui permet de visualiser le poids de vos modules et fichiers JavaScript présents dans vos bundles générés par Webpack. C’est un bon moyen de découvrir un potentiel module qui serait trop lourd. Il est tout à fait possible de l’utiliser dès que vous commencer à importer des packages pour votre projet.

+

Choisir une meilleure alternative

+

Si webpack-bundle-analyser a mis un évidence certains modules qui pourraient impacter vos performances, vous pouvez alors utiliser Bundlephobia pour choisir d’autres modules équivalents (et plus léger). Un simple exemple avec la fameuse librairie Moment.js qui en général est utilisée à tort et à travers et qui pourrait très souvent être remplacée par d’autres librairies beaucoup plus petites.

+

Avant de choisir d’utiliser quelqueconque plugin, n’hésitez pas à vous demander si celui que vous souhaitez utiliser est vraiment utile, s’il n’existe pas d’autres alternatives ou une alternative plus légère…

+

Analyser vos props pour éviter le rendu inutile

+

Le module why-did-you-update peut vous permettre de vous alerter lorsque vos props sont re-rendu inutilement.

+

+

Il vous suffit d’installer le package dans votre projet et insérer ce bout de code dans votre app.js :

+
import React from 'react'
+
+if (process.env.NODE_ENV !== 'production') {
+  const { whyDidYouUpdate } = require('why-did-you-update')
+  whyDidYouUpdate(React)
+}
+
+

Astuces pour améliorer les performances de votre application react

+

Utiliser le tree-shaking

+

Le « tree-shaking » est une technique qui permet, à la création de votre bundle, de ne pas inclure du « code mort » dont vous n’avez pas besoin. Vous vous retrouvez donc avec un bundle plus léger.

+

Pour cela, vous devez utiliser :

+
    +
  • Les ES2015 Modules (import, export…)
    • +
  • Webpack 2 ou version supérieure
    • +
  • Un minifier qui supporte le tree-shaking (UglifyJS ou Babel)
    • +
+

Un exemple de bonne pratique à adopter :

+
// Au lieu de
+import * from 'package'
+
+// Préférer cela
+import { module } from 'package'
+
+

N’oubliez pas la mise en cache

+

La mise en cache n’est pas forcément utile dans la phase de développement mais est indispensable pour une web application en production. Cela consiste tout simplement à rajouter un hash (série de chiffres et caractères) qui change à chaque fois que le contenu du fichier est modifié.

+

Ce que beaucoup font consiste à créer au moins un bundle (à l’aide de Webpack) « main » avec votre propre code et un fichier « vendor » qui contiendrait tous les fichiers des libraries externes que vous seriez amener à utiliser. (en production, préférer l’utilisation de contenthash).

+

Ce n’est qu’un début…

+

Bien sûr dans cet article, je n’ai fait que gratter la surface (il y aurait beaucoup d’autres points à traiter), l’accessibilité et la performance web sont des spécialités à part entière qui demande beaucoup de pratique avant d’être appréhendé correctement. Mais aujourd’hui, plus que jamais, si vous n’en avez pas fait vos domaines d’expertises, ce sont définitivement des sujets qu’il est impossible d’ignorer. Le Web a toujours été un moyen de partage et de communication ouvert à tous, c’est à nous, architectes de faire en sorte que cela puisse continuer de la sorte.

+

Je vous laisse quelques ressources complémentaires qui vous permettront d’approfondir un peu plus ces 2 thématiques !

+

Accessibilité :

+
    +
  • 24a11y: c’est comme 24 jours de web mais pour l’accessibilité.
    • +
  • Deque University: Deque est une entreprise de consulting qui offre des certifications et ressources sur l’accessibilité.
    • +
  • Accessibility sur Tuts+: une série d’articles sur l’accessibilité (en anglais)
    • +
+

Performance :

+
    +
  • Front-End Performance Checklist: mon open-source checklist pour ce qui concerne la performance (vous y trouverez tous les liens possibles pour approndir le sujet).
    • +
+

Et bientôt, j’aurais le plaisir de publier la « Front-End Accessibility Checklist » sur GitHub, restez attentif !

]]> + thedaviddias@gmail.com (David Dias) + + + + \ No newline at end of file diff --git a/apps/blog/public/sitemap-0.xml b/apps/blog/public/sitemap-0.xml new file mode 100644 index 00000000..5ac128f0 --- /dev/null +++ b/apps/blog/public/sitemap-0.xml @@ -0,0 +1,84 @@ + + +https://thedaviddias.dev2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/about2023-07-19T02:35:38.262Zweekly0.7 +https://thedaviddias.dev/articles2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/dashboard2023-07-19T02:35:38.262Zweekly0.7 +https://thedaviddias.dev/notes2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/projects2023-07-19T02:35:38.262Zweekly0.7 +https://thedaviddias.dev/tags2023-07-19T02:35:38.262Zweekly0.7 +https://thedaviddias.dev/uses2023-07-19T02:35:38.262Zmonthly0.7 +https://thedaviddias.dev/fr/articles2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/categories/side-project2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/categories/web-development2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/categories/productivity2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/categories/user-experience2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/categories/expatriation2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/categories/management2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/categories/reflexion2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/fr/dashboard2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/fr/about2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/fr/notes2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/fr2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/github2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/user-experience2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/front-end-development2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/open-source2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/front-end-checklist2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/best-practices2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/security2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/user-testing2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/canada2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/travel2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/usa2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/new-zealand2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/dev-journal2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/collaboration2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/user-interface2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/morning-routines2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/self-improvement2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/aws2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/github-actions2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/netlify2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/nextjs2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/raycast2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/vercel2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/visual-studio-code2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/life-lessons2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/coding2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/npm2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/steam-deck2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/gaming2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/audio2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/application2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/pnpm2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/product2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/business2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/tags/html2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/fr/tags2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/fr/uses2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/fr/projects2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/articles/9-best-practices-ux-for-two-factor-authentification2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/fr/articles/9-reponses-questions-vous-vous-posez-toronto-canada2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/fr/articles/astuces-dexpat-pour-faciliter-demarches-administratives2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/articles/beyond-user-testing-leveraging-frontend-experience2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/articles/choose-city-country-front-developer2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/fr/articles/comment-canada-devenu-maison-4-ans-tentatives2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/articles/decade-web-development-personal-journey-showcase2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/articles/front-end-checklist-just-tool-everything-depends-on-you2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/articles/front-end-performance-checklist-speeds-up-web-developments2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/articles/how-front-end-developers-ui-ux-could-better-collaborate-together2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/articles/how-morning-routine-can-positively-change-your-life-forever2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/articles/how-my-open-source-project-earned-6000-stars-on-github-in-just-5-days2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/articles/how-to-deploy-your-nextjs-app-on-netlify-using-github-actions2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/articles/learned-presenting-side-project-europe2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/fr/articles/outils-astuces-rendre-accessible-performante-application-react2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/articles/raycast-applications-super-developer2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/articles/you-have-something-in-you-the-world-needs2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/notes/finally-received-steam-deck-confirmation-email2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/notes/how-to-convert-mp3-to-m4b-for-audiobooks2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/notes/how-to-fix-post-pre-build-pnpm2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/notes/how-to-fix-set-output-nvmrc-github-actions2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/notes/methodology-principle-user-first2023-07-19T02:35:38.262Zdaily0.7 +https://thedaviddias.dev/notes/stop-using-thematic-break-to-design-horizontal-line2023-07-19T02:35:38.262Zdaily0.7 + \ No newline at end of file diff --git a/apps/blog/public/sitemap.xml b/apps/blog/public/sitemap.xml new file mode 100644 index 00000000..03e127c9 --- /dev/null +++ b/apps/blog/public/sitemap.xml @@ -0,0 +1,4 @@ + + +https://thedaviddias.dev/sitemap-0.xml + \ No newline at end of file diff --git a/apps/blog/scripts/publish-blog.js b/apps/blog/scripts/publish-blog.js new file mode 100644 index 00000000..c9370e88 --- /dev/null +++ b/apps/blog/scripts/publish-blog.js @@ -0,0 +1,109 @@ +#!/usr/bin/env ts-node +/* eslint-disable no-console */ +import dotenv from 'dotenv' +import fs from 'fs' +import matter from 'gray-matter' +import fetch from 'node-fetch' +import path from 'path' + +import { CONTENT_DIR } from '../constants/paths' + +dotenv.config({ path: path.join(process.cwd(), '.env.publish.local') }) + +export {} + +const MEDIUM_USER_ID = process.env.MEDIUM_AUTHOR_ID + +const generateBlog = (slug) => { + const source = fs.readFileSync(path.join(CONTENT_DIR, 'articles', `${slug}.mdx`), 'utf8') + const { data, content } = matter(source.trim()) + const canonicalUrl = + data.locale === 'en' + ? `https://thedaviddias.dev/articles/${slug}` + : `https://thedaviddias.dev/fr/articles/${slug}` + + return { + ...data, + canonicalUrl, + content: replaceRelativePath(content), + } +} + +const replaceRelativePath = (content) => { + const withoutRelativeImage = content.replace( + /\]\(\/images(?!https?:\/\/)/gi, + '](' + 'https://thedaviddias.dev/images' + ) + return withoutRelativeImage.replace(/\]\((?!https?:\/\/)/gi, '](' + 'https://thedaviddias.dev') +} + +;(async () => { + if (process.argv.length !== 3) { + console.log('Should only have 1 argument') + process.exit(1) + } + const slug = process.argv[2] + const exist = fs + .readdirSync(path.join(CONTENT_DIR, 'articles'), 'utf-8') + .find((b) => b === `${slug}.mdx`) + if (!exist) { + console.log(`${slug} article does not exist`) + process.exit(1) + } + const blog = generateBlog(slug) + + // Medium API + fetch(`https://api.medium.com/v1/users/${MEDIUM_USER_ID}/posts`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: `Bearer ${process.env.MEDIUM_TOKEN}`, + }, + body: JSON.stringify({ + title: blog.title, + content: blog.content, + // tags: blog.tags, + canonicalUrl: blog.canonicalUrl, + contentFormat: 'markdown', + publishStatus: 'draft', + }), + }) + .then((res) => res.json()) + .then((data) => { + if (data.errors) { + data.errors.forEach((error) => console.log('Medium:', error.message)) + } else { + console.log( + 'Medium: Success in publishing the draft article at https://medium.com/me/stories/drafts' + ) + } + }) + .catch((error) => console.log(error)) + + // Dev.to API + fetch('https://dev.to/api/articles', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'api-key': process.env.DEV_TOKEN, + }, + body: JSON.stringify({ + article: { + title: blog.title, + body_markdown: blog.content, + description: blog.description, + // tags: blog.tags, + canonical_url: blog.canonicalUrl, + }, + }), + }) + .then((res) => res.json()) + .then((data) => { + if (data.error) { + console.log('Dev.to:', data.error) + } else { + console.log('Dev.to: Success in publishing the draft article at https://dev.to/dashboard') + } + }) + .catch((error) => console.log(error)) +})() diff --git a/apps/blog/sentry.client.config.ts b/apps/blog/sentry.client.config.ts new file mode 100644 index 00000000..8615f42a --- /dev/null +++ b/apps/blog/sentry.client.config.ts @@ -0,0 +1,13 @@ +// This file configures the initialization of Sentry on the browser. +// The config you add here will be used whenever a page is visited. +// https://docs.sentry.io/platforms/javascript/guides/nextjs/ + +import * as Sentry from '@sentry/nextjs' + +const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN + +Sentry.init({ + dsn: SENTRY_DSN || 'https://0823630951cd4283831b65772dc9ed58@o515454.ingest.sentry.io/6601262', + tracesSampleRate: 0, + denyUrls: ['localhost'], +}) diff --git a/apps/blog/sentry.edge.config.ts b/apps/blog/sentry.edge.config.ts new file mode 100644 index 00000000..f94e2f1b --- /dev/null +++ b/apps/blog/sentry.edge.config.ts @@ -0,0 +1,15 @@ +import * as Sentry from '@sentry/nextjs' + +const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN + +Sentry.init({ + dsn: SENTRY_DSN || 'https://0823630951cd4283831b65772dc9ed58@o515454.ingest.sentry.io/6601262', + tracesSampleRate: 0, + denyUrls: ['localhost'], + ignoreErrors: [ + // ignore hydration issues + 'Minified React error #418;', + 'Minified React error #423;', + 'Minified React error #425;', + ], +}) diff --git a/apps/blog/sentry.properties b/apps/blog/sentry.properties new file mode 100644 index 00000000..9a5f084d --- /dev/null +++ b/apps/blog/sentry.properties @@ -0,0 +1,4 @@ +defaults.url=https://sentry.io/ +defaults.org=thedaviddias +defaults.project=the-david-dias +cli.executable=../../.npm/_npx/a8388072043b4cbc/node_modules/@sentry/cli/bin/sentry-cli diff --git a/apps/blog/sentry.server.config.ts b/apps/blog/sentry.server.config.ts new file mode 100644 index 00000000..75848909 --- /dev/null +++ b/apps/blog/sentry.server.config.ts @@ -0,0 +1,13 @@ +// This file configures the initialization of Sentry on the server. +// The config you add here will be used whenever the server handles a request. +// https://docs.sentry.io/platforms/javascript/guides/nextjs/ + +import * as Sentry from '@sentry/nextjs' + +const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN + +Sentry.init({ + dsn: SENTRY_DSN || 'https://0823630951cd4283831b65772dc9ed58@o515454.ingest.sentry.io/6601262', + tracesSampleRate: 0, + denyUrls: ['localhost'], +}) diff --git a/src/components/AdjacentPosts/AdjacentPosts.tsx b/apps/blog/src/components/AdjacentPosts/AdjacentPosts.tsx similarity index 79% rename from src/components/AdjacentPosts/AdjacentPosts.tsx rename to apps/blog/src/components/AdjacentPosts/AdjacentPosts.tsx index 26be1bc0..f42dcaea 100644 --- a/src/components/AdjacentPosts/AdjacentPosts.tsx +++ b/apps/blog/src/components/AdjacentPosts/AdjacentPosts.tsx @@ -1,5 +1,4 @@ import useTranslation from 'next-translate/useTranslation' -import { FC } from 'react' import { CustomLink } from '@/components/CustomLink' @@ -13,28 +12,28 @@ export type PreviousNext = { next: AdjacentPosts | null } -type AdjacentPostsProps = { +export type AdjacentPostsProps = { posts: PreviousNext } -export const AdjacentPosts: FC = ({ posts }) => { +export const AdjacentPosts: React.FC = ({ posts }) => { const { t } = useTranslation('common') return ( -
-