Browser Technologies, a course of the minor Web Design & Development. It is a minor of the third year from the study CMD.
| 🚀 Purpose of Project | 😍 Concept | 🔢 Data | 🤓 Technical summary | ⚙️ Installation | 📁 Sources | 👮 License |
//Robuuste, toegankelijke websites ontwerpen en maken …
Één van de mooiste principes van het web is dat iedereen met een computer en een browser het web kan gebruik. Het web is voor iedereen. Het is geen gecontroleerde (programmeer) omgeving, je kan er gerust van uit gaan dat niemand precies hetzelfde te zien krijgt als wat jij in je browser ziet. Er zijn technische beperkingen, zoals afmetingen van de browser, grootte van het apparaat, manier van interactie, kwaliteit van de hardware, kwaliteit van het netwerk en er zijn mensen, allemaal verschillende mensen ...
In het vak Browser Technologies gaan we onderzoeken wat Progressive Enhancement is en hoe je dit kan toepassen om goede, robuuste, toegankelijke websites te maken. Voor iedereen. Het web is voor iedereen, in dit vak leer je hoe je daarvoor kan zorgen.
Research to Progressive Enhancement
→ Link to live version 🚀
→ More info
Research about features from websites on the web → Research link 🚀
From my squad we gathered all researches and put it in one wiki 🚀 .
iPic is an online photo album where you can upload photos and it generates a photo album for you. You can make photo series from your album and you can see them in a slideshow.
The user can upload/add photos to the online album.
Images
- Add image to global online album
- Add information such as title, description, photographer and location of the image
- Check one image with his info at the detail page
- Check all images at the overview page
Series
- Check all series at the overview page
- Check one serie at the detail page
- Show one serie in a slideshow
- Create new series
Part 1
Part 2
Here is a list of the pages how they can be build by the layers functional, usable and pleasurable.
Part 1
Part 2
With the FileReader API, you can preview the uploaded file. In my case, you can preview the uploaded photo. That's an very enhanced way to the user of presenting the uploaded photo. But when there is no JS available, this feature will be turned off and the default type=file content will be presented. When the file is uploaded, you can see the uploaded file as well in string; the filename will be shown.
The default type=input API feature shows the user the filename. Scanty, but fine.
Example
There is more styling and visual hierarchy. The 'Choose file' button is visually more available.
Example
There is now an img tag created via JavaScript, so when the user has uploaded a file, the file will be shown in the img tag. This is called a File Previewer.
Example
All photos will be shown in from top to bottom. It's usable and you can see the photos too.
Example
All photos are placed in a nice container where you can scroll horizontal through the photos. Altough the styling makes it easier to use. It's a nice way of viewing the photos.
Example
Now there are buttons, created with clientside javascript. With these buttons you can interact and decide if you want to see the previous or next photo.
Example
Although Gridbox is very popular, it's not supported at all browsers (see here). Therefore I created an enhancement for users that use a browser that not supports CSS Grid. This is a feature detection which checks if the browser supports CSS Grid. If so not, then the fallback is CSS Flexbox, because almost every browser supports Flexbox (see here).
Although I used two different layout models, I made them so that they look just alike.
@media (prefers-reduced-motion) voor beweeg-gevoelige (epilepsi)
I wanted to implement an enhancement so browsers can detect if the user prefers a reduced motion on the websites he visits. So the users don't want to be harmed with the (in my experience) cool, fancy, crazy and shaky animations. I did this with @media (prefers-reduced-motion). Check the code here.
Browsers I tested are:
| Device | Browser |
|---|---|
| 1. Desktop | Chrome |
| 2. Desktop | Firefox |
| 3. Mobile - iOS | Safari |
| 4. Mobile - Android | Internet |
Test list:
- Upload image
- File preview
- Grid layout
- Create serie
- Slideshow
Color test
Here I check the contrast of the colors in the buttons/links.
Color - #008071
Contrast ratio - 4:84
First, you see that WCAG AAA has failed. I'll fix that ;).
Color - #006157
Contrast ratio - 7.37
Now I changed the color to slightly darker green and now the WCAG AAA is passed! Also the contrast ratio is improved.
1. Upload image
The upload is fine and the Safari default input behavior works fine too. This default behavior means here that the UI is zoomed in on the focussed input and you can tab through the inputs using the arrows at the left top of the keyboard. However is the input height styling from Safari and not from the linked style sheets, but it's not disturbing the UX so it's okay.
Looks a bit different from the iOS device, but works excellent.
2. File preview
Without JavaScript you see the uploaded file name (default browser feature for the type=file input):
With JavaScript you see the whole implemented feature of the application:
Without JavaScript you see the uploaded file name (default browser feature for the type=file input):
With JavaScript you see the whole implemented feature of the application:
Safari makes his own file preview. That's nice for the user who uses this browser or computer that don't supports JavaScript:
When you turn on JavaScript, the default Safari filepreview remains standing, but the implemented feature of the application comes next to it:
Without JavaScript you see the uploaded file name (default browser feature for the type=file input):
With JavaScript you see the whole implemented feature of the application:
3. Grid layout
It has a nice 1-column view, so it's nice for the mobile user.
4. Create serie
Creating a serie goes fine, but the user needs to scroll down for see each image. That's a bad UX. I want to see all images in one overview.
I have addressed the problem and changed the layout to a grid layout. In this way it is much easier for the user to select the images.
It works fine, but it has the same problem as on desktop; the too long list with images. On mobile however it's harder to use it, so it definitely has to change. Also because you have to scroll all the way down to click the submit button.
I have addressed the problem and changed the layout to a grid layout. In this way it is much easier for the user to select the images.
5. Slideshow
For all 4 browsers is this the result/experience of the three layers:
Functional - When CSS & JS are turned off
It works fine, although the images are very big.
Usable - When CSS is turned off
It looks a lot better now that the design has been applied. It also works a lot better right away, because you can scroll horizontally through the images.
Pleasurable - Fully enhanced way :sprinkles:
This works fantastic, because you can go to the next or previous image by using the buttons.
The styling of the scrollbar is from the default browser, but it's not disturbing.
I used Mongoose data schemas to create schemas before I insert the data.
{
image: String,
title: String,
description: String,
photographer: String,
location: String,
}{
titleSerie: String,
images: Array,
}This app is built, using:
- Mobile First technique
- npm
- Node.js server
- Express router
- EJS Templating engine
- Mongoose
- Heroku deployment
Expand
- Edit photo --> clientside JS makes form inputs not-disabled (by default disabled)
- Delete photo
- Core feature works
- Connection mongoDB
- multer
- pages render data
- upload
- photo overview
- photo detail
- series overview
- series detail
- show
- carousel
- slideshow
- slideshow
- order page 3.4 html tags
- WEB API
- Fancy menu (clientside JS)
- Custom fonts?
- Enhancements / Web API's?
- Test results
- Login, so each user has own pics
- Geo location API to detect where the user is on browser or he can pick a plot on the map
- Drag & Drop API
- "preview in full size (viewport")
⚠️ To use the application in development, you need a MongoDB database and a URI to connect with it! Contact me please if you want to run the project.
- Clone the repository:
git clone https://github.com/ralfz123/iPic-BT-2021.git
- Install dependencies
npm install
- To run the app
npm start
- Go to localhost in the browser and voilà ✨
http://localhost:5000/
Credits to Koop && Peter Paul Koch && Aaron Gustafson && Heydon Pickering && Ischa Gast for giving interesting lectures about Browser Technologies and Progressive Enhancement and how to deal with it.
-
Stackoverflow (n.d.). Searching for answers on dev questions - Stackoverflow. Retrieved 8 March 2021 from https://www.stackoverflow.com
-
npm (n.d.). Package manager with many packages - npm. Retrieved 8 March 2021 from https://www.npmjs.com
-
FileReader API (n.d.). MDN. Retrieved 25 March 2021 from https://developer.mozilla.org/en-US/docs/Web/API/FileReader
-
readAsDataURL (n.d.). MDN. Retrieved 25 March 2021 from https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL
This project from Ralf has a MIT © License
