jyri-droid Goto Github PK

answer-responses

Generic user flow for going through a quiz

cats

css-monster-chase

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.

input-auto-correct

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

levels

lightning-talk

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

new-app

react-graph

Learning React: a graph component

responsive-line-graph

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

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.

select-package

User flow prototype for a complex product package selection

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!

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.

tricky-form

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

web-accessible-table

A responsive table. Try narrowing the browser screen.