Jyri-droid

answer-responses

Experimental quiz user

cats

dynamic-form

A dynamic form for multiple name input. With tag and input field linking and use of WAI-ARIA for screenreaders. The information is picked from the input fields upon save of data, so the user can edit the contents and order without restrictions.

flex-instructor

CSS Flex instructor for responsive layouts

html-color-swatches

I always keep looking for the default html colors names, so I made a little code study that presents them all. The rgb value is copied to clipboard upon click. Text color is decided programmatically based on the luminance of the color swatch.

responsivity-test

A test on responsivity on a section showing tables of three categories that user can expand. A fast and simple study, created mainly with CSS and breakpoints.

shuffling-dots-with-css

Random pairs. Dot are placed inside <div> containers piled in front of each other. The dots are aligned using the left padding of the containers. Try enlarging the font size!

simple-svg-viewer

Simple drag'n'drop SVG viewer for checking how an SVG looks like on thebrowser

table-for-screenreader

Testing <table> structure for NVDA

tabs-with-moving-underline

Four tab systems with smooth transitions. Three for desktop and one for mobile. The underline is moved and sized based on the dynamic width of the tabs. The mobile version is what I had in mind as a perfect UI solution for the mobile-unfriendly tabs. It has stuff I've never tried before, like auto-positioning and dragging.

Jyri-droid/answer-responses

Experimental quiz user

Jyri-droid/dynamic-form

A dynamic form for multiple name input. With tag and input field linking and use of WAI-ARIA for screenreaders. The information is picked from the input fields upon save of data, so the user can edit the contents and order without restrictions.

Jyri-droid/flex-instructor

CSS Flex instructor for responsive layouts

Jyri-droid/html-color-swatches

I always keep looking for the default html colors names, so I made a little code study that presents them all. The rgb value is copied to clipboard upon click. Text color is decided programmatically based on the luminance of the color swatch.

Jyri-droid/table-for-screenreader

Testing <table> structure for NVDA

Jyri-droid/tabs-with-moving-underline

Four tab systems with smooth transitions. Three for desktop and one for mobile. The underline is moved and sized based on the dynamic width of the tabs. The mobile version is what I had in mind as a perfect UI solution for the mobile-unfriendly tabs. It has stuff I've never tried before, like auto-positioning and dragging.

Jyri-droid/cats

Jyri-droid/css-monster-chase

Jyri-droid/input-auto-correct

A friendly, auto correcting input field for buying products that come with limited availability and can only be bought in batches.

Jyri-droid/levels

Jyri-droid/lightning-talk

Nitor Lightning Talks: Simple code samples for getting started with front-end.

Jyri-droid/react-graph

Learning React: a graph component

Jyri-droid/responsive-line-graph

A responsive line graph. Any amount of data points between any range can be fed into the graph.

Jyri-droid/responsivity-test

A test on responsivity on a section showing tables of three categories that user can expand. A fast and simple study, created mainly with CSS and breakpoints.

Jyri-droid/shuffling-dots-with-css

Random pairs. Dot are placed inside <div> containers piled in front of each other. The dots are aligned using the left padding of the containers. Try enlarging the font size!

Jyri-droid/simple-svg-viewer

Simple drag'n'drop SVG viewer for checking how an SVG looks like on thebrowser

Jyri-droid/web-accessible-table

A responsive table. Try narrowing the browser screen.

Jyri-droid/new-app

Jyri-droid/select-package

User flow prototype for a complex product package selection

Jyri-droid/tricky-form

Prototype for a tricky small form. With 4 different selectable layout flavors.