We Love Web

Inhoudsopgave

Building your own browser, For fun andprofit Door Kylian Valkhof

polypane

hoe het begint

1ste website frontpage gartis internet provider my web. Frontpage is wat je ziet is wat je krijgt.

Frontpages zelfde generation als in word maar niet in een website zien.

12 jaar oud betaald werken

Iedere klik op zijn banner was 15 cent.

16 - 30 jaar oud werken en maken van tools

Web werd beheert door studenten op middelbaar.

16 jaar oud idee om bedrijf te beginnen. 14 jaar lang websites gebouwd voor klanten

Geen mobiele websites in die tijd.

Later responsive design sinds release van de iphone.

Werken met een css framework. Voor vaster srtuctuur in bijv typografie en formulieren.

Plugins maken zoals grafico die charts maken, Trimage (gemaakt met python) optimalizatie voor afbeeldingen.

f.lux is een tool die je scherm geler maakt afhankelijk van de tijd op een dag

Elektron kon je met chrome web aplicaties maken

over polypane 0.0

iets eerder dan from scratch

photoshop to sketch voor design. Veel beter je website op meerdere scherm formaten te kunnen zien.

Scheeld veel tijd. je hoeft niet steeds van schermgrotes switchen sinds het nu op 1 scherm staat

wat had ik nodig?

Nieuwe scherm formaten?

2018

weg gaan naar vorig bedrijf, half jaar geduurd.

2019

februari klaar om de 1.0 versie van polypane te releasen

1.0

14 mei officieel released. Wel bij 0 beginnen omdat het iets nieuws was voor het publiek. Abbonementen aanmaken en overtuigen.

toegankelijkheids features groot en populair sinds dt heel belangrijk is.

tonen van dingen zoals tonen van grid collumns en rows

Controleren van toegankelijkheid kreeg meer prioriteit.

Ook toevoegen van extensies vond men ook belangrijk.

ingebouwde documentatie systeem in polypane

Eigen element inspector die op meerdere websites tergelijker tijd werkt.

technische kant

Electron

Interface van polypane geschreven met react.

Pollypane bestaat vooral uit javascript

tijd voor side-projects?

Polypane geeft veel ideeën voor niewue projecten ook inpiratie en code kan ik meenemen.

Cassie Evans Creative coder at GSAP

what is gsap

Javascript libary voor animations

how does it work in code

  • create gspa timeline
  • select something like color

gsap is like a toolbox

its like you only have a hammer and everything is a nail

methods

matchmedia

gsap functie that triggers based on the media query conndition

prefers-reduced-motion = important

control method

play(), pause(), resume(), restart()

container animation

toegankelijkheid schiphol

Ischa Gast

togankelijkheid

  • Gestructuerde html voor teogankelijkheid.

  • whocanuse voor color contrast.

  • Onder aan website button voor mensen met een beperking

Kalok Yeung, Freelance Creative Director/Designer

oxytocine

gelukshormoon, verbinding maken met componenten en animaties op de websites

hoe?

soft ui

  • rustige sfeer
  • ronde hoeken
  • gebruik van wit ruimte
  • geen overdreven call to actions

motion

  • subtile hover state
  • horizontal line. positiong centered en img change
  • Zorg veel hergebruik voor een fluiede experience

sound

  • passende sounds voor meer gevoel op de website

content

  • visuallyquery
  • chats

Css Day

showcases sanne

  • Showed how you can make a hamburger selection with 9 option elments

  • Back to the future style speed meter from a student

  • Real working painting portraid

  • Air baloon mini game

  • social media simulator

  • cat 3d model

first talk Nils Binder

works at a company with software and web developers

Not active on social media but a big fan of origami

Building a good wrapper

  • old
max-width: 75rem;
margin: 0 auto;
padding: 0 1.5rem;
  • new
margin-inline: min(100% - 3rem, 75rem) auto;

why using a wrapper

answer: Cause developers say whing like we need to use 12 grid collumns.

Things about designing a page: We used adobe ps to create our pages but it became outdated and was a bit complex for something simple. Thats when figma comes in to play. a good example shows how you can create a box shadow between the 2 programs.

Inspiration to create wrappers with griddasruhgebiet.de

second speaker: Miriam Suzanne

First subject is about the so called ai slop on the internet. from deepfake to politics.

World wibe web isnt the world wibe f it doesnt wok on any machine. we for all, web for everything