shagon1k/ahurynovich-cv

Aliaksei's curriculum vitae

AH Curriculum Vitae project

based on my React Universal Boilerplate

My personal CV Web Application written on TypeScript.

Generally Application follows Static CSR approach deploying final build to AWS S3. Than it is hosted using AWS S3 Static Web Hosting + CloudFront + Route 53.

1. Technology Stack
2. Run tasks
3. Project structure
4. Additional documentation
5. UI Components Library
6. Issues
7. License

Technology stack

Project Bundling

💡 Note (TypeScript tranpiling using Babel)

Transpiling TypeScript using Babel (with Webpack 'babel-loader', NOT 'ts-loader') was chosen: 1) faster compilation (no types check); 2) having single source of compilation - Babel.

On the other hand, using Babel compilation results in completely lose of type safety and TypeScript checks during this phase. That's why additional test script (tsc) were presented to check as pre-commit(push) hook + in scope of CI/CD.

Application

Code Styling

Testing

Unit/Integration Testing

E2E Testing

Performance testing

💡 Note (Performance Testing usage)

Performance Testing is only set up on CI/CD pipeline level. For manual performance testing you can use Chrome built-in Lighthouse DevTool.

Tests Reports

Other

⬆️ back to top

Run tasks

💡 Note: Default development Client host port: 1337

Start:

• npm start (npm run build:and:start:dev) - Application development build task -> start with Webpack Watcher (port 1337)
• npm run build:and:start:prod - Application production build task -> start hosting (using http-server)

Build:

• npm run build - Application general build task (development is default)
• npm run build:dev - Application development build task
• npm run build:prod - Application production build task
• npm run build:prod:pwa - Application production build task (with PWA support)

Deploy:

• npm run deploy:s3 - Application deploy to AWS S3 task (used for Static Site Hosting)
• npm run build:and:deploy:s3 - Application production build -> deploy to AWS S3 task (used for Static Site Hosting)

Clean up:

• npm run build:clean - Clean build ("dist") folder

Test:

• Unit/Integration Testing
  • npm test (npm run test) - run Application Unit/Integration Tests (Common + A11y)
  • npm run test:with:reports - run Application Unit/Integration Tests (Common + A11y). Reports (results and coverage) enabled.
  • npm run test:ci - run Application Unit/Integration Tests in CI mode (used for CI/CD pipeline level testing)
  • npm run test:ci:with:reports - run Application Unit/Integration Tests in CI mode (used for CI/CD pipeline level testing). Reports (results and coverage) enabled.
• E2E Testing
  • npm run test:e2e (npm run test:e2e:dev) - run All (Common + A11y) E2E Tests (development build used)
  • npm run test:e2e:dev:open - open launcher of All (Common + A11y) E2E Tests (development build used)
  • npm run test:e2e:common:prod - run Common E2E Tests (production build used)
  • npm run test:e2e:a11y:prod - run A11y E2E Tests (production build used)
• Performance Testing
  • npm run test:perf:ci - run Application Performance + Insights testing (Lighthouse CI, used for CI/CD pipeline level testing)
• TypeScript Types checking
  • npm run test:tsc - run Application Typescript's types checking (no Libraries level checking)

Lint:

• npm run lint:scripts - lint JS/TS files
• npm run lint:scripts:fix - lint JS/TS files with autofix
• npm run lint:styles - lint Styles files
• npm run lint:styles:fix - lint Styles files with autofix
• npm run lint - lint all (JS/TS+Styles) files
• npm run lint:fix - lint all (JS/TS+Styles) files with autofix

Code vulnerabilities scan:

• npm run sca:test - scan for vulnerabilities for known issues (with disrupting processes) - CI/CD integration.
• npm run sca:test:dev - scan for vulnerabilities for known issues (with disrupting processes), include dev dependencies
• npm run sca:monitor - scan for vulnerabilities with exposing and storing results snapshot (without disrupting processes)
• npm run sca:auth - SCA tool (Snyk) authenticate (auth token required)

Components Library maintaining:

• npm run storybook:start - start Components Library application (localy)
• npm run storybook:build - build Components Library (dist folder: 'storybook-static')
• npm run storybook:build:clean - clean Components Library build
• npm run storybook:deploy:s3 - Components Library deploy to AWS S3 task for (used for Static Site Hosting)
• npm run storybook:build:and:deploy:s3 - Components Library build -> deploy to AWS S3 task (used for Static Site Hosting)

⬆️ back to top

Project structure

./
│
├───.circleci   // application CI/CD configuration (using CircleCI)
│
├───.github   // GitHub templates for Projects
│
├───.husky   // Git Hooks configuration
│
├───.vscode   // VSCode Workspace configuration (additionally for .editorconfig)
│
├───config   // configurations folder
│   │
│   ├───application
│   │
│   ├───environment
│   │
│   ├───test
│   │   │
│   │   ├───jest   // Unit/Integration Tests configuration folder
│   │   │   │
│   │   │   ├───mocks   // Jest setup mocks (e.g. no-JS pattern files mock)
│   │   │   │
│   │   │   ├───test-utils   // Testing utils enhancement (e.g. RTL custom "render" util)
│   │   │   │   │
│   │   │   │   ├───custom
│   │   │   │   │
│   │   │   │   │   test-utils.js
│   │   │   │   │   index.js
│   │   │   │   └───
│   │   │   │
│   │   │   │   jest.setupAfterEnv.js   // Jest pre-setup execution (after installed to environment)
│   │   │   │   jest.setup.js   // Jest pre-setup execution (before installed to environment)
│   │   │   └───
│   │   ├───cypress   // E2E Tests configuration folder
│   │   │   │
│   │   │   ├───downloads
│   │   │   │
│   │   │   ├───e2e
│   │   │   │
│   │   │   ├───fixtures
│   │   │   │
│   │   │   ├───support
│   │   │   │
│   │   │   │   cypress.config.a11y.json   // E2E A11y Tests override configuration
│   │   │   │   cypress.config.e2e.json   // E2E General Tests override configuration
│   │   │   └───
│   │   │
│   │   │   cypress.config.js   // E2E Tests (Cypress) main config file
│   │   │   jest.config.js   // Unit/Integration Tests (Jest) main config file
│   │   │   lighthouse.config.js   // Performance Tests main config file (used for CI/CD pipeline)
│   │   └───
│   │
│   ├───lint
│   │   │
│   │   ├───eslint
│   │   │
│   │   └───stylelint
│   │
│   ├───prettier
│   │
│   ├───webpack
│   │   │
│   │   ├───app   // Webpack Application configuration
│   │   │
│   │   ├───helpers
│   │   │   │
│   │   │   ├───loaders   // Webpack loaders (babel-loader, sass-loader, etc.)
│   │   │   │
│   │   │   ├───plugins   // Webpack plugins (Favicon plugin, HTML plugin, etc.)
│   │   │   │
│   │   │   └───resolve   // Webpack resolves (aliases, etc.)
│   │   │
│   │   └───storybook   // Webpack Components Library (StoryBook) configuration
│   │
│   ├───storybook   // UI Components Library configuration
│   │   │
│   │   ├───docs
│   │   │
│   │   ├───helpers
│   │   │   │
│   │   │   ├───argTypes   // StoryBook global argTypes and args (e.g. device type)
│   │   │   │
│   │   │   └───decorators   // StoryBook global decorators (e.g. Providers wrapper)
│   │   │
│   │   │   constants.js   // StoryBook sharable constants
│   │   │   main.js   // StoryBook main config file
│   │   │   preview.js   // StoryBook global stories setup (decorators, parameters, args, etc.)
│   │   │   webpack.config.storybook.es5.js   // StoryBook Webpack config loader (use Babel transpiler to provide ES6 Webpack config usage)
│   │   └───
│   │
│   ├───robots
│   │   │
│   │   │   robots.txt   // Robots configuration to enhance Web crawlers search
│   │   │   sitemap.xml   // SiteMap configuration
│   │   └───
│   │
│   │   README.md   // Config folder info
│   └───
│
├───src
│   │
│   ├───api
│   │
│   ├───services    // device detection, i18n, etc.
│   │
│   ├───utils   // reusable utils
│   │   │
│   │   ├───functions
│   │   │
│   │   ├───objects
│   │   │
│   │   ├───strings
│   │   │
│   │   └───user
│   │
│   ├───assets
│   │   │
│   │   ├───fonts
│   │   │
│   │   ├───images
│   │   │
│   │   │   preload.config.js
│   │   └───
│   │
│   ├───components   // React components folder
│   │   │
│   │   ├───base   // base components (Button, Icon, etc.)
|   |   |
|   |   ├───common   //common components (Header, Footer, etc.)
│   │   │
│   │   ├───pages   // general pages components (MainPage, etc.)
│   │   │
│   │   └───routes   // application routes setup
│   │
│   ├───reusables
│   │   │
│   │   ├───custom-hooks
│   │   │
│   │   ├───hocs
│   │   │
│   │   │   services.context.tsx   // Services context for components injection using specific Custom Hook/HOC
|   |   |   skip-to-content.context.tsx   // Skip To Content (A11y enhancement) context for components injection using specific Custom Hook/HOC
│   │   └───
│   │
│   ├───store   // Redux's Store
│   │   │
│   │   ├───middlewares
│   │   │
│   │   ├───slices
│   │   │
│   │   │   store.ts   // main Store setup file
│   │   │   store.reducer.ts   // main reducer setup file
│   │   │   store.saga.ts   // root saga setup file (main init + watch sagas)
│   │   │   store.types.ts   // general Store types
│   │   └───
│   │
│   ├───styles   // main styles folder
│   │   │
│   │   ├───base   // base styles (mixins, functions, variables, etc.)
│   │   │
│   │   │   main.scss   // main styles file
│   │   │   font-declarations.scss  // fonts declarations main file
│   │   │   reset-normalize.scss   // reset & normalize basic styles
│   │   │   scrollbar.scss   // scrollbar styles
│   │   └───
│   │
│   │   Application.component.tsx   // main application Component
│   │   Application.module.scss   // entry styles file
│   │   application.tsx   // main Create App file
│   │   application.types.ts   // application types models file
│   │   declarations.d.ts   // non-TS files declarations and globals
│   │   index.ts   // main entry file
|   |   index.html   // source HTML file
│   │   README.md   // Source folder info
│   └───
│
├───dist
│   │
│   ├───assets
│   │   │
│   │   ├───favicons   // favicons collection folder (generated by Webpack Favicon plugin)
│   │   │
│   │   ├───fonts
│   │   │
│   │   └───images
│   │
│   ├───css
│   │
│   ├───js
│   │
│   │   robots.txt
│   │   sitemap.xml
│   │   index.html   // result HTML file
│   └───
├───
│
│   .editorconfig   // editor basic setup for IDE
│   babel.config.js   // Babel configuration
│   commitlint.config.ts   // Commit linting configuration
│   jsconfig.json   // JS configuration file for indicating directory root, aliases setup, etc.
│   tsconfig.json   // TS configuration file for indicating basic setup, including directory root, aliases setup, etc.
│   package.json
│   package-lock.json
│   .gitignore
│   LICENSE
│   README.md
└───

⬆️ back to top

Additional documentation

Folders README

Name	Description
Config README	general configuration setup
Source README	major source of truth for Source folder

Project Docs

Name	Description
Branching Strategy & CI/CD	Project's branching strategy info and CI/CD approach description
TypeScript	Project's TypeScript usage details and general Code Convention
PWA	Project's PWA support information (tech stack, build process, etc.)
Testing	Project's testing approaches (Unit+Integration, E2E) + according CI/CD quality gates description
Typography	Project's typography configuration and conventions

UI Components Library

Project's UI components library, created with StoryBook, could be found here

Issues

Find a bug or enhancement and want provide help? Please submit an issue.

License

MIT Aliaksei's Curriculum Vitae project

⬆️ back to top

ahurynovich-cv's Issues

!!CRITICAL: Move all issues to GitHub Projects

As issues are not basically used to collecting Project tasks, them should be converted to GitHub Project tasks.

[AH-24] Think about moving out some VSCode/WebStorm settings from .gitignore

Description

Usually some VSCode settings are added to .gitignore.
But probably it is not so worth as it could be used, for example to create some templates for folders creation (NewComponent, etc.) as well as some predefined extensions advising and so on.

Notes

TBD

[AH-27] Create components library

Description

Once active development start it's time to think about components library creation.
Existing solutions: React-Cosmos, StoryBook. Styleguidist, Docz
In scope of this ticket described solutions need to be compared and the best up-to-date solution should be developed.

Notes

Link(s):
https://reactcosmos.org/
https://storybook.js.org/ Note: StoryShot snapshot testing available more info
https://react-styleguidist.js.org/
https://www.docz.site/

[AH-31] Add E2E tests (Cypress) to CI/CD pipeline

Description

Once application will be deployed and hosted on real WEB domain E2E testing hould be reconsidered.
Tool: Cypress

Notes

DON'T FORGET about A11y tests.

[AH-11] Come up with application view structure and design

Description

ALL WAS SETTLE UP IN DESIGNS COPNCEPTS

Design concepts: #38

Obviously site should have it's own unique design.

Notes

Stylistic:

• Cyberpunk?
• Steampunk (Chosen)

Structure:

• Header (Logo + Title + General info). On the left side from centralized Logo "Search for work" light could be pasted (Red <-> Green light to detect). On the right side - potential language switcher (EN <-> RU)
• Career flow (see details in #25)
• Past Projects section (see details in #25)
• Hobbies & Personal section (with link to detailed info route)
• Footer (Socials section - Name: Get in touch + Email + Copyright)

const Footer = () => (
  <footer>
    <a href={LINK_FROM_CONFIG} target="_top">
      <Icon name="envelope" />
    </a>
    <a href={LINK_FROM_CONFIG} target="_blank" rel="noopener noreferrer">
      <Icon name="linkedin" />
    </a>
    ...
  </footer>
);

Some good examples to inspire:

• https://www.madebydaryl.co.uk/
• https://www.anthonydesigner.com/about/
• https://www.adamhartwig.co.uk/about
• https://movielab.app/ (cursor movement)

Other:

• Hobbies and personal information could be briefly mentioned on main page and detailed one could be moved in to separate route

[AH-3] Manage LF/CRLF config

Description

LF/CRLF config should be finalized and prepared

Notes

How:
https://qna.habr.com/q/257857

Where:
.editorconfig

[AH-26] Add manifest JSON in order to have PWA support

Description

The web app manifest is a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device. A typical manifest file includes the app name, the icons the app should use, and the URL that should be opened when the app is launched.

More info:
https://web.dev/add-manifest/

Notes

Link(s): https://web.dev/add-manifest/

Example(s):
index.html

<!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

manifest.json

{
  "short_name": "AHurynovich CV",
  "name": "My awesome CV",
  "icons": [
    {
      "src": "src/to/favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
     ...
    {
      "src": src/to/"logo_maskable.png",
      "sizes": "196x196",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

[AH-14] Buy domain name and register personal website

Description

WARN: FIRST - Route53 (buy domain name). SECOND - CloudFront (distribution settings - domain name)

https://cloudofthings.net/lightsail-vs-ec2-vs-s3-web-hosting/

Once all work will be close to done, host your site.
Preferable domain name: ahurynovich.com

https://www.youtube.com/watch?v=kvlSep7m7Uk
https://www.youtube.com/watch?v=mls8tiiI3uc

https://www.youtube.com/watch?v=5IfDzpkLlYY
https://docs.aws.amazon.com/AmazonS3/latest/userguide/website-hosting-cloudfront-walkthrough.html
https://medium.datadriveninvestor.com/configurate-route-53-and-adding-ssl-certificate-145d8a317d91

Notes

AWS Guide for domain reqistring:
https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/domain-register.html#domain-register-procedure

⚠️⚠️⚠️ Think about files compression availability (gzip, Brottli)

• REMOVE CURRENT PUBLIC ACCESS AND HOSTING FROM S3 BUCKET.

WARNING
Right now in order to fully serve SPA routing, all 404 error pages are redirected to index.html.

This leads to not fully correct workflow:

1. 404 error still returned to user in Network (even though redirection done)
2. All non-existing pages (e.g. /ololo) also redirects to index.html and do not handled by it (could be fixed with adding 404 page to React Router);
   After completed hosting, this issue should be fixed (potentially through CloudFront). Some details could be found here: https://stackoverflow.com/questions/16267339/s3-static-website-hosting-route-all-paths-to-index-html

Sources of domain name buying:

• https://www.namecheap.com/
• https://www.domain.com/
• https://console.aws.amazon.com/route53/home#DomainRegistration:

Additionally

• set up gzip compressing for files on AWS side (performance, if applicable)
  If you use CloudFront in front of your S3 bucket, there is no need to manually compress HTML ressources (CloudFront will compress them on-the-fly). Please note CloudFront only compress in gzip (no deflate, brotli) and only CSS / JS / HTML (based on content-type). See https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html#compressed-content-cloudfront-file-types . To make it works, you have to forward some http headers from CloudFront to S3 (see doc).
  https://blog.bitsrc.io/aws-speed-up-your-static-web-site-using-gzip-and-cdn-383d458b51a3

[AH-45] Add CV PDF file download ability

Description

This one to add ability to download CV in more convinient sharable view as PDF file.

Notes

• Potentially web app could have "print" view to handle this way. It depends on how web app will look like and pitfalls could be faced based on it's features implemented.
  

Example: https://www.dejan.works/about/
Note: A11y note: use "download" attribute

[AH-5] Add WebPack Provide plugin

Description

In order to not import basic packages like React, WebPack Provide plugin could be used.

Notes

Link:
https://webpack.js.org/plugins/provide-plugin/

Example of usage:

new webpack.ProvidePlugin({
  moment: 'moment',
  React: 'react',
  ReactDOM: 'react-dom',
  PropTypes: 'prop-types',
  localize: [path.resolve(__dirname, '../../src/core/js/app/utils/localizationUtils.js'), 'localize'],
}),

[AH-30] Extend code sourcemaps

Description

Extend code sourcemaps to have ability debug production build.

Notes

(TBD)

Link(s): (...)

Example(s): (...)

Other: (...)

[AH-16] Add README to sub-folders

Description

README files should be added to some subfolders like /server, /client, /etc.
Generally it should be common practice to whole project

Notes

No

[AH-M] General project designed view implementation

Description

In order to not create separate ticket for each of application view creation, this one could be used as common for general project designed view creation.

AHurynovich-Main or simply [AH-M]

[AH-19] Enhance code editing tool with test run

Description

Enhance code editing tool (VSCode) with specific test file run

Notes

Other:
Use 'launch.json' file

[AH-28] Enhance application to follow A11y criterias

Description

!! Work as AHurynovich-Accessibility or simply [AH-A]

Important to start with not "how" and "what" but with "why" and "for whom": check different disabilities types, how users struggle with them, which tools do they use, etc.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion

!! Remember!
The important thing to understand about the TAB key, is that it is used to move from one operable item to the next. Any non-operable content in between will be ignored. So if a paragraph has some links inside a sentence, pressing TAB will just read out the links, not the rest of the sentence. The TAB key also stops at buttons and form inputs.
When the user wants to read the whole paragraph, they will proceed using the arrow keys ("browse" mode of Screen Readers, not "focus" mode). When dealing with a form or application-like UI, they can use the TAB key.
Page elements that are not interactive to mouse or touch users should not be made keyboard focusable (such as by using tabindex).
More details
More details 2

! Do not use tabindex values of 1 or greater to change the default keyboard navigation order. Think about logical TAB order (top-to-bottom, left-to-right) from the beginning, then left the Browser do all the job. Tab indexation change should be done only for exceptional cases.

W3C course with certification

https://www.w3.org/WAI/fundamentals/foundations-course/
https://courses.edx.org/certificates/ff5e044720d34b75922eecaf01440906

Guidelines

Perceivable - ability to find content:

• Text alternatives (all non-text content has it's alternatives, not only images but charts, diagrams, buttons, etc.) Note: Should be described not only based on content inside, but also content which it covers should be kept in mind + image functionality e.g. "My page homepage logo". Some images can have "alt" skipped in case adding it will only increase complexity (e.g. divider image) Remember: skipping alt !== having null one. Alt not null: informative, actionable images, alt null: decorative images.
• Media alternatives (videos\audios has captions, subtitles, text transcripts, audio descriptors, sign language)
• Adaptable (acceptable for different devices and it's orientations without lost information and structure (context) + well-read by Screen Readers (good Semantic, e.g. do not skip headings) )
• Distinguishable (content (text, images) can be separated from it's background - use https://contrast-ratio.com/ OR https://webaim.org/resources/contrastchecker/ OR https://color.adobe.com/create/color-accessibility . Recommended ration is 3-4.5 (based on large/small content))

Operable - ability to use application:

• Keyboard accessible (all parts of app accessible with only a keyboard. Remember: buttons for actions, links for moving to some content. AVOID keyboard traps. Focus locker or similar package could be used for modals\popups\navigation case.) TAB RULE: tab all, tab away, tab order, visual focus, all functionality by focus;
• Enough time (all content should have enough time to be watched)
• Avoid seizures and physical reactions (do not design content in a way that is known to cause seizures or physical reactions) So avoid flash more than 3 times in a second, animation covering large area of the screen, bright ones.
• Navigable (easy to navigate and understand - more about semantic) Note: unique <title> for each page is good practice (dash "|" can be used for complex titles, precise title first: "Contact Us | My Company") -> React Helmet
• Input Modalities (all parts of app accessible with mouse\touch)

Understandable - ability to understand each part of app (semantic):

• Readable (content is readable and easy to understand. Abbreviations could use tag )
• Predictable (app is predictable in how it operate. E.g. base structure is kept over the page and app navigation)
• Input assistance (easy to correct and avoid mistakes - validation and tips)

Robust - be compatible:

• Compatible (working for current and future accesstive technology):
  Write valid, semantic HTML (e.g. H1-H5 matters, HTML tags matters, etc.)
  Use ARIA labels to extend HTML (more applicable for interactive components)
  Use a11y testing tools

More information here

Notes

Tips:

• Once A11y plan created, it is worth to add a11y statement and place it somewhere on your web site (e.g. in Footer) in order to notify users that you follow it. Statement generator link: https://www.w3.org/WAI/planning/statements/generator/#create (additional info link)
• Add a11y to CI\CD pipeline
• Aria labels to check and add (aria-controls, aria-expanded, aria-role etc.)

Details

• Identify inputs and help browser autocomplete

Details

• Zooming (at least 200-300%) should be taken in to a count. Note: having 2 scrolling (vertical + horizontal) are not welcomed as in such way page become not so accessible and harder to read and understand
• Lower zoom (e.g. 50%) also matters for the people with tunnel vision
• Orientation should be taken in to a count
• Think about ability to remove animation (@no-animation mixin could be created)

Details

• New AAA standard is to buttons be at least 44x44
• For ON/OFF switchers or something like examples text notations should be used

Details

• Use "sr-only" elements for explanations. Such elements should also keep semantic (Headers, spans, navs, etc.)

Details

(Simple unseen elements could not be used as browser identifies them as "not needed" and possibly just skip)

• Use "aria-hidden=true" ARIA label in order to Screen Reader to skip content (in case no need to pass)
• Accessible SVG

Details

• Video embeds should not load on page load, only on demand need. Iframe with "srcdoc" attribute settled up could be used to handle this. DO NOT FORGET ABOUT TRANSCRIPTS FOR A11Y

Details

• FireFox browser has much better A11y built-in tools, Web Developer Chrome could be used as alternative
• Wave extension is really good one
• Additionally Chrome Lighthouse could be used to test A11y
• Screen Reader extension
• Sometimes it is worth to add "Skip smth" hidden link (e.g. "Skip navigation")

Details

• Managing programmatically onBlur event it is worth to use setTimeout as wrapper to callback. It is valuable as we need to first check if another child of the element has received focus as the blur event fires prior to the new focus event
• Also worth to add some a11y linters like jsx-eslint/jsx-a11y, stylelint-a11y
• Don't forget to use "role" attribute in addition to ARIA labels

Details

• Test a11y also using testing-library/dom, testing-library/jest-dom, user-event
  Inspire example: https://github.com/denis-biruk/a11y-test-tabs

Details

• Check google.com tabulation for inspiration about skip link and "how to" for people with disabilities

• Tooltips should not contain really important information as it is not always accessible (e.g. for users using Screen Magnification)

• Use a11y anchors to skip over the site for more welcomed interface:
  

• Android TalkBack feature can be also used to check site A11y

• When opening Popup the focus should automatically go to "X" button (close) to provide USER easy possibility to close in case unintentional opening (the only exception happens if there are some focusable items before "X" button, then focus should be set to them in order not to skip when TAB navigate);

• Button for the action, Link for the navigation;

• NO necessity to specify both "ariaLabel" and "title": in such case both will be read by Screen Reader;

• avoid outline: 0`outline: none`. In addition to the default outline, you can use CSS to make the focus indicator more visually apparent and keyboard-friendly by ensuring the focus indicator is highly visible with sufficient contrast, and by adding a background color or other visual focus style to links and other interactive controls. The outline can be styled to match your site design but should be readily detected when navigating with the Tab key.

A11y settings popup

• A11y settings popup could be created as an option. It could be used e.g. for changing text font to more accessible one, remove animations, activate more color-friendly theme, change font size, change basic margins, text line-height and line-spacing, reduced number of images and content etc.
• CSS-specific variables (e.g. preferable font size) could be stored by A11y settings service in CSS variables to automatically work only on CSS basis (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
• Opening popup will display a list of different disabilities people might have (cognitive, low visual, absence of visual, etc.) and application will apply changes based on chosen

A11y CI/CD automation

There are a number of tools. Worth to check and add to pipeline. Example: axe-core
Cypress also could be used to test A11y in a couple with Axe. https://www.npmjs.com/package/cypress-axe

[AH-32] Notification-info-dialog popup

Description

Create notification-info-dialog popup at the bottom right. It could be used as info dialog (e.g. "This site attempts to use all a11y features. For example, you can use keyboard or try to use 50%-300% zoom."), notification or simply imitate conversation with user (e.g. "Oh, you're interested in my hobbies? It's so sweet!").
It could be shown based on some events: page load, element hover, route changing, etc.)
Redux Store OR HOC + React Context could be used as messages mediator in order to set some notification value there based on which popup will be shown.

Notes

Brief designs:

Cases of usage:
Notifications:

• Site is A11y enhanced (on page load)

Info:

• "Is work searched" indicator (on hover)

Dialog:

• "Oh, interested in my hobbies" message (on /hobbies route change)

Keep in mind:

• A11y for popup itself should also be taken in to a count

Notifications on the left-bottom as live talk with User.

Like "Oh, you want to know something about my hobbies? Thank you!

[AH-9] Add internationalization support

Description

As two languages need to be supported (en\ru), some internationalization tool should be added.
Application view should be enhanced with language switcher.

Notes

localize could be added as special app service OR as HOC OR as HOC+service OR as global function (should be considered and check modern solutions)
Default language could be set on the way like:

const DEFAULT_LANGUAGE = 'en' // could be stored on config level fetched from AWS S3
let userLang = navigator.language || navigator.userLanguage || DEFAULT_LANGUAGE;

Other

• Think over "lang" attribute (<html lang="en">)
• Language switcher should be at the top right of Header
• Configuration-based info (titles, descriptions, etc.) are also assumed to be multi-translated, so it should be adapted either
• Think about ESLint plugin writing to control all "text values" translated

Text i18n esling plugin example

• TBD

[AH-44] Add Performance measurement tool

Description

Add performance metrics measurement and their CI/CD automation.

Notes

https://github.com/GoogleChrome/lighthouse-ci

• LightHouse could be used to check issues or e.g. for reports generation on CI/CD
• Nice Checklist to follow: https://github.com/thedaviddias/Front-End-Performance-Checklist

DO NOT FORGET TO UPDATE README

[AH-37] Consider React-Query usage if needed

Description

React-Query provides conviniant way to work with API having some vital benefits as e.g. request status/progress check.

Notes

Link(s):
https://react-query.tanstack.com/

[AH-25] Add robots.txt

Description

https://www.robotstxt.org/

Notes

Think about improving site checking for Google robots (meta tags, e.g. "description", etc.)

Link(s):
Beginner guide

[AH-10] Add Google Analytics to application

Description

In order to have ability to check application statistics Analytics management should be added.

Notes

Preferable option - GTM (Google Tag Management) (https://tagmanager.google.com/)

Example (part of index.html):

  <script async src="https://www.googletagmanager.com/gtag/js?id=GET_ID"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    ...
  </script>

Links:

• https://support.google.com/tagmanager/answer/6103696?hl=en
• https://developers.google.com/tag-platform/tag-manager/web
• https://developers.google.com/tag-platform/tag-manager/web/datalayer

[AH-47] Check CSS Modules; enhance SSR to handle Lazy Loading

[AH-43] Enhance CI/CD

[DESIGN] Application design concept

Inspirations

https://frontend-science.com/advanced/pet-project-links.html

Details:

• https://www.youtube.com/watch?v=rVEZYrC1w4I
• https://dribbble.com/search/steampunk
• https://ru.365psd.com/search/steampunk
• https://freebiesbug.com/
• https://www.pixeden.com/graphic-web-backgrounds
• https://freedesignresources.net/category/free-fonts/
• https://themewagon.com/theme-category/landing-website/
• https://fontstorage.com/category/?alphabets=cyrillic,latin

Nice ideas / TODO (Moved to #45)

• Don't forget to use certificates in skills: https://app.rs.school/certificate/eqtmvr7h , https://courses.edx.org/certificates/ff5e044720d34b75922eecaf01440906

• Feedbacks: You can use ASMT and Feedbacks.

• Career Flow: Do NOT forget about Middle/Senior achievement

• Check google.com tabulation for inspiration about skip link and "how to" for people with disabilities

• Extra: Add "Submit a bug" button to the Footer which opens popup with bug submition form

• USE SVG for icons, NOT icon fonts (better for a11y)

Notifications on the left-bottom as live talk with User.

Like "Oh, you want to know something about my hobbies? Thank you!

Recommended default font-size is 18-20px

Steampunk image

General

Color theme:

DONT FORGET use styles fonts only for decorations (e.g. titles)

Fonts:
Performance tips: https://github.com/zachleat/web-font-loading-recipes

Main page

Header:

Under-Header photo: Photo link


Description block:

Insiration example

Some BG Steampunk image here

Five reasons to work with me

Skills block:

(Flags could be used)

Career flow:

Note: Do NOT forget about Middle/Senior achievement

Past projects:

Some BG image before Footer:

Footer:


Note: Use train windows as Social icons =[(tg)(fb)]--[(t)(ig)]--[(li)(gh)]--[(email)]>
Nice form view to inspire:

Skills page

Skills page

Note: You can use ASMT and Feedbacks here.

Passions page

• #131

Other

Inspires:

First

https://i.pinimg.com/564x/6c/3e/b1/6c3eb116212d76ce4d3d8141e57e306e.jpg

[AH-1] Add LICENSE file

Description

In order to enhance project with license agreement, LICENSE file should be added.

Notes

Info:
https://en.wikipedia.org/wiki/MIT_License

Example(s):

MIT License

Copyright (c) 2021 Aliaksei Hurynovich <[email protected]>

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

package.json:

...
"license": "MIT"
...

How to add:
https://stackoverflow.com/questions/31639059/how-to-add-license-to-an-existing-github-project

[AH-15] Add application config file

Description

In order to collect some application general information, application.config.js file should be added.

Notes

Folder to collect: config/application
Example of stored:

export const ROOT_ID = 'root';

[AH-34] Analyze whether log monitoring needed to be applied and add if needed

Description

Log monitoring could be valuable to detect possible application issues due user usage.
As this particular application is not assumed to have dramatical number of unique usages this thing could be overcome.
Thus such enhancing should be analyzed in order to understand whether it is needed or not.

Notes

Possible solutions could be used:

• NewRelic https://newrelic.com/ (free?)
• Kibana

[AH-35] Add Testing Library and cover with Unit Test

Description

React Testing Library is a common approach in favour of Enzyme as it encourages testing habit (user scenarios) instead of implementation details.
It is based on Testing Library which in addition includes other sort of testing (e.g. integration testing as extension for Cypress)

Notes

Link(s):
https://testing-library.com/
https://testing-library.com/docs/react-testing-library/cheatsheet/

[AH-23] Performance enhancement

Description

This is to save a place and not to forget about performance.

Notes

• check LightHouseCI config to potentialy re-check issues marked as "warn" for now (e.g. uses-responsive-images)
• Nice Checklist to follow: https://github.com/thedaviddias/Front-End-Performance-Checklist

Other:

• lazy load (think about SSR as application also can be used as template)
• (alternative to previous point for images) attribute loading="lazy"
• think about fonts load only if needed (fonts perf optimization)
• set up gzip compressing for files on AWS side (if applicable)
• check "rel" attribute
• TBD

[AH-40] Revise AWS static hosting

Description

AWS S3 Static Hosting seems to be outdated solution.
Think about altrernatives, e.g. AWS Amplify Hosting - https://aws.amazon.com/amplify/hosting/ https://aws.amazon.com/getting-started/hands-on/build-react-app-amplify-graphql/module-one/
https://catalog.us-east-1.prod.workshops.aws/workshops/841ce16b-9d86-48ac-a3f6-6a1b29f95d2b/en-US/step-3/add-hosting
https://levelup.gitconnected.com/aws-react-js-full-stack-development-tutorial-build-a-serverless-tournament-bracket-platform-b6dfbd878d46

Additionaly:
Serverless-finch usage is seems to be potential not best approach (no support anymore).
Moreover Serverless package update potentialy required.

Notes

• In new version of Serverless parameters should be passed according to new approach:
  

[AH-20] Add code security check

Description

To be sure your code is safe it is worth to add some security check as well as add it to CI pipeline stage.
SNYK?

Notes

TBD

[AH-42] Enhance Testing workflow

Description

There are some additional enahcnements which could be added to improve testing:

• Check "user-event" package availability as it is more preferable option against "fire-event" ("user event" is much more closer to real USER interactions - https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#not-using-testing-libraryuser-event)
• Check "jest-dom" to be installed. Using it provides more informative error messages you get + encouurage readability of test cases itself (https://kentcdodds.com/blog/common-mistakes-with-react-testing-library#using-the-wrong-assertion):

const button = screen.getByRole('button', {name: /disabled button/i})
// ❌
expect(button.disabled).toBe(true)
// error message:
//  expect(received).toBe(expected) // Object.is equality
//
//  Expected: true
//  Received: false

// ✅
expect(button).toBeDisabled()
// error message:
//   Received element is not disabled:
//     <button />

• Think about and add if needed test coverage check for application. It could be also added as a part of CI/CD pipeline.
• Update documentation (Test convention) if needed NOTE: UNIT + INTEGRATION (icnluding a11y) - RTL, E2E - Cypress.

[AH-4] Add breakpoint and Mobile/Desktop view support

Note: think about stylelint adding

Description

As application should have ability to change it's view on device basis, Mobile detect AND styles breakpoints media-queries should be added.
Existing libraries could be used for Mobile detection. In order to have support for SSR such libraries use specific request headers (User Agent).

Notes

Link (Breakpoints handling): https://github.com/Necromancerx/media-queries-scss-mixins , http://github.com/rafalbromirski/sass-mediaqueries , dkn

Redux-Saga start saga can be used to collect mobile\desktop information on Redux store.

[AH-29] Create custom scroll view

Description

Design and create custom scroll view

Notes

(TBD)

Link(s): (...)

Example(s): (...)

Other: (...)

[AH-39] Enhance site SEO with Google Verification and better Crawling

Description

After re-deploy:

• Submit SiteMap: https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap

sitemap and robots txt

https://blog.openreplay.com/important-seo-related-tags-in-html-and-how-to-optimize-them/
After application will be completed and hosted on some of domain, there are 2 major things to consider:

1. Google Verification, which enables access to more detailed sensitive data of Google Search: link
2. Update robots.txt for better crawling + add SiteMap.
   In addition, sitemap.xml could be submited to Google Webmaster Tools so more links from other sites pointing to yours => better indexing.

Notes

Link(s):

• https://support.google.com/webmasters/answer/9008080?hl=en
• https://stackoverflow.com/questions/14085492/is-the-google-site-verification-meta-tag-required-for-indexing

Example(s):

<meta name="google-site-verification" content="YOUR_KEY" />
<meta name="description"
    content="This is my website.">
  <meta name="robots" content="index, follow" />

https://search.google.com/search-console/about

[AH-38] Reconsider Reset styles file

Description

Nowadays reset.scss should be overthinked in order to correctly reset common css rules without harm to A11y.

[AH-13] Add Icon component and choose icons to use

Description

When application brief design and stylistic will be finalized, icons collection and special component should be prepared.

Notes

Icons collection which could be used: https://icons8.ru/icons/set/free-icons

Other:

• SVG with PNG alternative files could be used
• Each file could be stored in static and imported as React component (see example below)

Example:

import GH from './icons/github.svg';
import LinkedIn from './icons/linkedin.svg';
import SomePng from './icons/some-png.png';

const ICON_MAP= {
  gh: GithubIcon,
  linkedin: LinkedinIcon,
};

const Icon = ({ name, size }) => {
  const icon= ICON_MAP[name];
  const width = ICON_WIDTH[size];  // could be get based on mobile/desktop view
  const height = ICON_HEIGHT[size];  // could be get based on mobile/desktop view

  return icon ? <img width={width} height={height} src={icon} alt={name} /> : null;
};

[AH-22] Enhance application to have HTTPS hosting support

Description

Enhance application to have HTTPS hosting support
Check whether AWS supports such enhancing for provided domain name.

Notes

TBD

[AH-7] Create Main Config file on AWS S3

Description

AH CV.pdf

Name: content-config
! add "/assets" folder to contain all possible asset files (e.g. project logos)
In order to collect all necessary configuration Main Config file should be created.
The options are:
- AWS S3 + Lambda + API Gateway

• Just S3 (public bucket => check privacy importance)
  

More details

{ "Version": "2012-10-17", "Statement": [ { "Sid": "AllowSpecificDomain", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::your-bucket-name/*", "Condition": { "StringLike": { "aws:Referer": [ "https://www.your-domain.com/*", "https://subdomain.your-domain.com/*" ] } } }, { "Sid": "DenyAllOtherAccess", "Effect": "Deny", "Principal": "*", "Action": "s3:GetObject", "Resource": "arn:aws:s3:::your-bucket-name/*" } ] }

For simple data like "About me" text and "My skills" list, you can use Amazon S3 to store and manage the content for your web application. Here's how you can do it:

Create an S3 bucket: Log in to the AWS Management Console and create an S3 bucket to store your content. Make sure to configure the bucket to allow public access, so that your web application can access the content.

Upload content: Upload your "About me" text and "My skills" list as files to your S3 bucket. You can use the AWS Management Console, AWS CLI, or an SDK to upload the files.

Retrieve content: In your web application code, you can use an HTTP GET request to retrieve the content from your S3 bucket. You can also use the AWS SDK to programmatically retrieve the content.

Display content: Once you have retrieved the content, you can display it on your web application using HTML, CSS, and JavaScript.

By using Amazon S3 to store and manage your simple content, you can take advantage of the scalability, durability, and security features of the service. Plus, it's an easy and cost-effective way to store and serve static content for your web application.

If your content needs to be localized into multiple languages, you can structure your configuration file to include the content in each language. Here's an example of how you can structure your configuration file:

{
  "about_me": {
    "en": "Hi, my name is John and I'm a web developer.",
    "ru": "Привет, меня зовут Джон и я веб-разработчик."
  },
  "my_skills": {
    "en": ["HTML", "CSS", "JavaScript", "Python"],
    "ru": ["HTML", "CSS", "JavaScript", "Python"]
  }
}

- AWS DynamoDB + Lambda + API Gateway (check price)

Notes

Redux-Saga starting saga could be used to fetch config and collect it in Redux store.

List of information to store:

• About me: bla-bla with knowing BE with focus on FE
• Site main title
• Personal message (Header + Message: Hello, I am bla-bla-lba)
• Social links (Professional: GitHub/LinkedIn/etc. , Other: YouTube/TikTok/Instagram/etc.)
• Tech skills (React, Redux, AWS, etc.) and it's leveling (1-5) each should have it's ID to match to specific Icon (default icon if not matched)
• Other skills (Mentoring, Interviewing, etc.) each should have it's ID to match to specific Icon (default icon if not matched)
• Career flow (Education -> RS school -> JS Lab -> Epam) STRUCTURE: BG Image + Title + Description
• Past projects info STRUCTURE: BG Image + Title + Description
• Feedbacks: You can use ASMT and Feedbacks. + ask Anton for feedback after RS end
• Career Flow: Do NOT forget about Middle/Senior achievement
• Don't forget to use certificates in skills: https://app.rs.school/certificate/eqtmvr7h , https://courses.edx.org/certificates/ff5e044720d34b75922eecaf01440906

WARN: "TO_API_" prefix used right now to mark potential cases when data should be moved to fetched config

BFF layer could be used as alternative (should be learned to figure out how to run server part on AWS) - COULD BE MOVED INTO SEPARATE ISSUE IN FUTURE

[AH-46] Prepare potential PWA support

[AH-17] Add COMMON type folder

Description

In order to manage some general purposes (both for client/server) /common folder should be added

Notes

Preferable structure:

/src
__/common
____/services
____/services/i18n
____/utils
____/utils/logger

[AH-33] Add new "Articles" page with number of personal developer articles

Description

Articles page can include articles of personal authorship.
Firstly only development-based articles was assumed, but it also could be some general (e.g. hobby\travel specific ones).
As for now only few of articles are planned to be posted, no filter functionality needed
Articles page could consist of 2 basic topics: Software Development and Other. Second could include for example travel articles (e.g. London 2019 trip feedback)

Important:

• Multi-language and translation should be taken in to a count
• A11y rules should be followed: articles could contain a lot of slangs and abbreviations (use tag), also sentences should be short enough and understandable.
• CMS should be used as resource manager, API gateway service could be written in order to get resources (use AWS if applicable). Resource itself should be HTML markup to place (as images and e.g. abbreviations could be included). As multi-language should be supported, resources should be kept in both RU and EN languages.
• As new articles could be written in future, it is valuable to think about admin level management of application "Articles" page: additional login page could be implemented, which should be unreachable from the application view level (e.g. only by route). In case log in credentials available - additional manage handlers could be seen and used.

Notes

View designs TBD

Example:
Software Development:

• Accessibility basics: based on experience and materials learned and passed: #49
• TBD

Other:

• London 2019 : already written material can be used as basis and enhanced with some photos - do not forget about mails from Walking Tours. As this material will definitely include a number of abbreviations and slang words, A11y should be taken in to a count (e.g. tag)
• TBD

[AH-21] Improve code linting

Description

In order to improve code linting some features could be added.
The most obvious one - stylelint

Notes

Other:

• think about some esling plugins (custom or existing one), at least check
• probably as project start grow it is worth to check only staged changes ( lint-staged )

[AH-8] Add folder to collect static files

Description

Add /static folder to project root in order to add some static content there.

Notes

Example: favicon.ico

(AH should be used instead BY. Favicon should be checked how to be injected. Remember about style Steampunk theme #38 )

Favicon usage example:

  <link rel="apple-touch-icon" sizes="60x60" href="route/to/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="route/to/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="120x120" href="route/to/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="180x180" href="route/to/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="route/to/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="route/to/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="route/to/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="route/to/favicon-16x16.png">
  <link rel='shortcut icon' type='image/x-icon' href='route/to/favicon.ico' />

To think over: https://www.npmjs.com/package/favicons-webpack-plugin

[AH-6] Improve code automatically linting and testing

Description

In order to enhance code quality check, linting and testing should be done automatically on commit/push basis.

Notes

Tool to handle: Husky (https://github.com/typicode/husky)

Example (.huskyrc):

{
  "hooks": {
    "pre-commit": "npm run lint",
    "pre-push": "npm run test"
  }
}

[AH-41] Move boilerplate logic to separate project and finalize it's documentation

Description

Once boilerplate part complete, it should be moved to separate project with documentation enhancing.
Current project should be reduced to have only needed parts, documentation of it should also be updated.

[AH-18] Add typography

Description

Once app design will be finalized, special fonts and typography rules could be defined

Notes

Example(s) (typography.scss file):

@mixin h1 () {
..
}

@mixin h2 () {
...
}
...

!!! think about fonts load only if needed (fonts perf optimization)
https://github.com/thedaviddias/Front-End-Performance-Checklist#fonts

[AH-12] Add Regenerator runtime

Description

In order to support async/await + generators for old browsers, non only babel's "regenerator-plugin" should be used, but polyfill should be added either.

Notes

Links:
babel/babel#9849
https://www.npmjs.com/package/regenerator-runtime

If not, as babel config includes
browsers: [ 'last 2 versions', 'safari >= 7', ],
it will throw "regeneratorRuntime is not defined" once one of listed features will be executed.

[AH-2] Add .browserslistrc file

Description

(probably not needed as "browsers" field in package.json used)
In order to provide some tools like Babel with information about supported browsers and it's versions, special file should be added

Notes

Example(s):

Chrome 70
Safari 12
Firefox 65
iOS 10

[AH-36] Add VideoPlayer component

Description

In order to have ability to render videos from specific resource (e.g. Youtube) - special VideoPlayer component should be created. For example, it could take "videoType" property to select specific player which should be used, "data" to be used for video playing, optional "width"/"height" props or "fitContent" to fit outer container. In order to have unified control across different video types Video Facade (service) could be created, which will use specific adapter (NOTE: THINK ABOUT NAMING as it is most likely not Adapter).
Thus, solution will be extendible and follow SOLID principles.

Notes

https://www.tutorialspoint.com/design_pattern/facade_pattern.htm
https://beta-reactjs-org-git-effects-fbopensource.vercel.app/learn/synchronizing-with-effects