Labster 2.0🔬
Feel free to ask questions at any time
Why virtual labs
- better learning outcomes
- easy to repeat an exercise
- easy to go back in the exercise steps
- safe environment
- can be accessed from anywhere anytime
- no commuting
- more people can do the same exercise at once
I was impressed by
- how simple the instructions were (I got some questions right!)
- easy to follow
- users' diversity
- variety of topics covered in labs
But what can be improved? 🤔
What can be improved
- loading time
- cache files, use service workers
- make audio optional
- more steps in loading, not all at once
- option to load minimalist interface (if someone has bad connection), different UI based on the speed of network
What can be improved
- loading time
- minimise/compress all files
- remove unused css
- remove unused JS
- too many elements injected at once into the DOM
- prevent multiple loading for the same user, one user, one tab
Large files are loaded
What can be improved
- user interface of the loading component
- the best design is the one that does not need an explanation
What can be improved
- user interface of the loading component
- entertain user while the stimulation is being loaded => interesting/inspirational facts about science => similar to Slack
Performance result by the Lighthouse
- Set an explicit width and height on image elements to reduce layout shifts
- Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads
- Serve static assets with an efficient cache policy
- Avoid large layout shifts
- Avoid enormous network payloads
- ... more in the report
Accessibility issues reported by the Lighthouse
- Buttons do not have accessible name
- iframe does not have title attribute
- Contrast in colors
- Heading elements are not in sequence, from h1 to h6 (levels should not be skipped)
- ... more in the report
Given a wireframe prototype, where/how would you start developing Labster Direct 2.0?
👩💻
Given a wireframe prototype, where/how would you start developing Labster Direct 2.0?
- I would talk to the product owner and/or project manager
- I would discuss UI with designers
- I would talk to other developers about the architecture => sketch it, document it, draw it, discuss it, consult
- I would prepare the jira/trello tasks
- I would prepare the build tool
- I would start with the simplest component
Given a wireframe prototype, where/how would you start developing Labster Direct 2.0?
- I would study the legacy code and try to see if there are some mistakes that can be avoided and if there are good solutions that can be followed
- I would research about the best practices in Vue community
- develop MVP first, adjust product to the market and users' => lean development
Which FE technologies would I use
- Vue.js/React + unity 3d
- Vuex for state management or custom global store
- vue-styled-components or good old scss
- jest unit and integration tests
Development process
- Meeting with a team regularly, everyone should contribute with ideas
- List with new features, prioritise features
- Agreement on the architecture
- how is BE going to communicate with FE
- how are FE components communicating with each other
- state management in FE
- agreement on system design (DDD for example)
- light FE (hide processes from the end user)
- Development methodology
- scrum vs kanaban (I like scrum more)
- jira vs trello
Development process
- Agreement on deadlines: prioritise
-
Agreement on technologies
- JS framework (Vue)
- game engine
- CSS approach (BEM vs Smacss, mobile vs desktop approach)
- HTML architecture
- Documentation:
- clean
- up-to-date
- build tool
- agree on the tool (webpack, gulp, parcel)
- optimise, minimise, clean-up (postCSS)
Development process
-
Setup development standards-
Git flow,-
feature branches -
master branch => production branch -
develop branch => main branch for development -
code reviews
-
-
prettiers, linters -
tdd vs bdd -
automated tests ran on git push-
unit tests, integration tests -
what should be covered
-
-
continuous integration
-
Team roles I would collaborate with
- Designers
- develop pixel perfect layout from delivered designs
- agree on components' interface, like a react's storybook
- minimalistic, simple
- Back end developers
- well written documentation
- well defined api points
- clear division between BE and FE, what is handled by FE or BE
Team roles I would collaborate with
- Other front end developers
- discuss architecture
- write down standards and solutions
- well and simply written documentation
- Product developer
- make sure we are meeting users' needs
- Project manager
- make sure we are respecting the deadlines
Missing features 🔍
Missing features
- remember me on login and signup (local storage?)
- keyboard support for arrow keys
- support for touchpad