PT Brixters have made a conductor portal in react.js that is fully responsive and user friendly !
The Portal is made in React therefore we are claiming the “Client Side Salsa” badge for this.
The Portal also uses 2 module apps to show the train live video feed and a train controller where the train controller uses socket.io to communicate from the frontend to the backend, therefore we are claiming the “Right Now Badge” for this.
We are also claiming the “Glossy Pixels Badge”
for the conductor portal because the portal looks shiny, is easy to read (big text, big buttons). And its responsive, works on mobile devices also, therefore we are also claiming the “Chameleon Badge”
And we wanted to show of our old Dashboard that is now upgraded to the new one 😀
Some pictures of socket.io with flask in action for the “Right now badge”:
Picture of VS Code as proof that we are using React to build our app.
What is HTML5 WEB-COMPONENTS aka custom components.
Custom components is a combination of several standards from the HTML standards.
HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element’s structure.
The thing with web-components is that they can be reused across, sites and installations by referencing the js script.
One way of using them is thinking of each component as a autonomous part/app that will not mess up anything else on the page.
You can can style things inside the a custom-element by using --css-variable
Communication between custom-elements can be done using events, setting attrubutes or calling functions on the element.
This component can be used together with anything else as long as it runs in a browser.
I have created a “super simple” demo component that counts up a number in random time and increment.
Creating a global-pushup-counter custom component using lit-element and lit-html.
Cowders mobil app er utviklet på React Native for å kunne lage en app som kan distribueres gjennom App Store for iPhone/IPad og Google Play for Android telefoner. Vi bruker også Expo som gir oss en rekke vanlige funksjoner og tjenester en bruker i en App. Videre kan også Expo brukes til å deploye apper til App Store/Play Store. Vi sikter på å kunne gi dommerne tilgang til appen slik at de skal kunne installere den på sin egen telefon. Expo er også tatt i bruk for å nå kamera og til pålogging gjennom Vipps.
Videre bruker vi React sit context API for State Management i appen, dette gjelder for en rekke av de ulike løsningene i appen, hittil værdata, notifikasjoner, men her vil sensordata og ikke minst den viktige Cownter funksjonen.