[HTML, CSS, JS] Frontend #42: eval("alert('weer een nieuw deel')");

quote:

Op vrijdag 14 november 2014 11:47 schreef Catch22- het volgende:
Development zonder devtools moet je niet eens willen

fps timeline, audits, shadow dom, paint maps, layer maps. de inspector is echt baas.

quote:

Op vrijdag 14 november 2014 10:52 schreef wobbel het volgende:

[..]

Ja oke, maar firebug staat niet de hele dag open

Hoe kan je dan developen?

quote:

Op zaterdag 15 november 2014 13:27 schreef picodealion het volgende:

[..]

Hoe kan je dan developen?

Ik develop ook niet, ik hobby-bob

Heb bij m'n eerder geposte link het hele eerste request in 12kb compressed gekregen. Heb de afbeelding verkleind en blurred als placeholder base64 er in gezet (7kb). Van het navigatiefont heb ik alle overbodige karakters er uit gesloopt en deze als base64 woff inline gezet (2,5kb) en de rest is inline markup en js. AWW yeah.

Dit is trouwens een superchille site om fonts te converteren https://cloudconvert.org/

De Speed Index is nu 500, de helft van de aanbevolen 1000 (lager is beter)

[ Bericht 6% gewijzigd door n8n op 15-11-2014 16:03:04 ]

Op zich wel tof, maar ik krijg geen tijd voor zulke dingen. Ik heb altijd het idee dat mensen die zulke dingen doen er niet voor betaald worden.

Mijn applicaties hou ik altijd onder de 700kb. Met gulp maak ik twee builds voor JS en CSS (de een minified en de ander niet) voor dev en productie. Doe wel aan optimalisatie, maar wel tot een lonend nivo. CSS en JS frameworks voegen vrij veel kbs toe, maar uitzoeken wat er uit kan, of vanaf scratch beginnen kost me gewoon teveel tijd.

Als ik tegen een klant zeg dat ik drie dagen bezig ben geweest om 200kb op de eerste pageload heb bespaard en de gebruikers dat toch zeker 50ms scheelt, dan heb ik een probleem

Maar dan heb je het over grote applicaties en niet over singlepage sites.

Onder de 1MB is al een hele prestatie tegenwoordig.

Wat ik nu heb gedaan is eerst de landing page gemaakt te hebben met nog wat ruimte binnen de eerste 14Kb voor css prefixes en js polyfills. Toen ik grotendeels 'klaar' was ging ik pas optimaliseren. Straks maak ik ook een gulp aan met de css en js 'modules', die parse ik naar een apart bestand, dat bestand include ik alleen in de voorpagina die ik vervolgens cache. Na de window.onload laadt ik de rest van de externe css en js, eventuele extra fonts zodat deze vast in de cache staan.

Alle pagina’s zo ver optimaliseren gaat inderdaad veel te ver. Ik weet ook niet of de database blij is met 7KB base64-image-strings, anders laat ik deze wel vallen (gedaan aan de hand van jouw tip om placeholder images in te zetten). Werk nu ook onbetaald ja Had wel tijdens een webdesign stage een website in een week van een paar MB naar <1MB gedaan wat alles toch ruim 2 keer zo snel maakte. Snelheid is helaas ook een ondergeschoven kindje waar vrijwel geen budget voor vrijgemaakt wordt (de top 10% van de snelste websites begint bij een Speed index van 1300).

Nog een (tijdrovende, helaas) tip. Maak een style.css en een sketch.css. In de style.css ga je uit van de declaratie ipv de selector. Zo bespaar je uiteindelijk makkelijk 80% op je css-grootte, dit had ik ook bij de mobiele fok! forum template zo gedaan om onder de 25kb-cache limiet van indertijd iOS 4 te komen.

Zie http://n8n.nl/lab/n8n/presentation/style.css

SPOILER: duidelijk voorbeeld

Om spoilers te kunnen lezen moet je zijn ingelogd. Je moet je daarvoor eerst gratis Registreren. Ook kun je spoilers niet lezen als je een ban hebt.

De sketch.css gebruik je dan om elementen old-skool vorm te geven, daarna plaats je de selectors bij de juiste declaraties in je style.css. Ik ga nog onderzoeken hoe dit sneller kan met sass@extend dus wellicht kom ik er nog op terug

[ Bericht 8% gewijzigd door n8n op 15-11-2014 16:50:55 ]

Ik optimaliseer door 1 CSS en 1 JS file te maken die beide gecompressed zijn voor productie. Icons in een font en images worden geoptimaliseerd door gulp en imagemin (maar daar zijn er niet zoveel van in mijn applicaties).

Het feit dat je al niet tien JS en tien CSS files hoeft in te laden, of tien icons in pngs scheelt al onwijs veel.

En base64 strings uit je DB halen lijkt me een slecht idee. Zou ik gewoon in de CSS zetten of als file inladen

quote:

Op zaterdag 15 november 2014 17:19 schreef Catch22- het volgende:
Ik optimaliseer door 1 CSS en 1 JS file te maken die beide gecompressed zijn voor productie. Icons in een font en images worden geoptimaliseerd door gulp en imagemin (maar daar zijn er niet zoveel van in mijn applicaties).

Het feit dat je al niet tien JS en tien CSS files hoeft in te laden, of tien icons in pngs scheelt al onwijs veel.

En base64 strings uit je DB halen lijkt me een slecht idee. Zou ik gewoon in de CSS zetten of als file inladen

Die base64 in de database doen we maar niet nee, die placeholder is op zich ook niet zo belangrijk in mijn geval..

edit: door de base64 placeholder te verwijderen is mn speedindex van 500 naar 400 gegaan. http://www.webpagetest.org/result/141115_H8_SAQ/

[ Bericht 7% gewijzigd door n8n op 15-11-2014 17:49:55 ]

hulp gevraagd voor een stukje js waar ik niet uit kom.
ik wil graag als ik over een stuk text hover, dat er dan een image te zien is.
Probleem is, dat ik een template heb gekocht, waarin denk ik al een stukje code zit die dat niet mogelijk maakt...of niet op de manier die ik probeer

heb diverse kant-en-klare oplossingen van internet geprobeerd maar het werkt niet


ik wil graag een image zien als ik hover over de blabla in <li><a href="#" class="link_1 animate">blabla</a></li>

In block_pic gebeurt er al zoiets. Als je over die div hovert dan komt er een image tevoorschijn..volgens mij doet dit stukje code dat


ik denk dat hiermee ook een stukje hover wat ik probeer te doen, niet mogelijk is
maar is dat ook zo??

concrete vraag:
ik wil graag een image zien, bij een hover over een text
die image wil ik graag zien in <div class="block_pic">

Kan je een screenshot erbij voegen wat er moet gebeuren. Volgens mij ben je oeverloos moeilijk aan het doen voor iets dat zonder js met 3 regels css kan.

Screenshot van de layout


Screenshot van de hover over de image met gitaar, dat is de div block_pic
er komt dan een rondje met een plus naar boven


wat ik nu graag zou willen dat als ik hover over bijv track#1, in de code is dat

dat er dan een ander plaatje te voorschijn komt,
bij voorkeur dat die dan zichtbaar wordt in div block_pic, maar als dat niet mocht lukken
dat het dan op de plaats van de hover verschijnt

Die image source wordt nergens aangepast. Ik zie niet in waarom je dat met een simpele hover functie niet zou lukken.

Je kunt een plusje gewoon op de foto positioneren en deze bijv. opacity: 0; geven. Bij een hover over die afbeelding maak je het plusje opacity: 1;

quote:

Op zondag 16 november 2014 20:18 schreef KomtTijd... het volgende:
Die image source wordt nergens aangepast. Ik zie niet in waarom je dat met een simpele hover functie niet zou lukken.

nee precies, dat dacht ik ook
maar
als ik iets simpels probeer als
http://www.w3schools.com/(...)rycss_sel_link_more2
dan krijg ik een gekleurde hyperlink te zien waarin niets gebeurd, als ik er een image aan hang dan komt die direct zichtbaar erbij te staan
vandaar dat ik dus denk dat er al ergens al code in de template staat die dit veroorzaakt

quote:

Op zondag 16 november 2014 20:19 schreef boem-dikkie het volgende:
Je kunt een plusje gewoon op de foto positioneren en deze bijv. opacity: 0; geven. Bij een hover over die afbeelding maak je het plusje opacity: 1;

het plusje zit al in de code, dus dat werkt wel
maar ik wil dus net weer iets anders
als ik hover over track#1 dat er dan een image komt in de betreffende div
dat zit nu nog allemaal niet in de voorbeeldcode, maar dat komt omdat het niet werkt, vandaar mijn hulpvraag...wat ik het beste kan doen

quote:

Op zondag 16 november 2014 20:26 schreef MrNiles het volgende:

[..]

nee precies, dat dacht ik ook
maar
als ik iets simpels probeer als
http://www.w3schools.com/(...)rycss_sel_link_more2
dan krijg ik een gekleurde hyperlink te zien waarin niets gebeurd, als ik er een image aan hang dan komt die direct zichtbaar erbij te staan
vandaar dat ik dus denk dat er al ergens al code in de template staat die dit veroorzaakt

dat is een CSS voorbeeld. Heef niets met jouw case te maken.

quote:

Op zondag 16 november 2014 20:37 schreef KomtTijd... het volgende:

[..]

dat is een CSS voorbeeld. Heef niets met jouw case te maken.

als simpele hover functie?

quote:

Op zondag 16 november 2014 20:40 schreef MrNiles het volgende:

[..]

als simpele hover functie?

Kan toch hetzelfde? Afbeelding in die div zetten en opacity 0. Dan bij de track #1 anchor een hover waarmee je die afbeelding op opacity 1 zet.

Bedenk je wel dat hovers niet op mobiele apparaten werken

quote:

Op zondag 16 november 2014 21:36 schreef Catch22- het volgende:
Bedenk je wel dat hovers niet op mobiele apparaten werken

goed punt
misschien toch ook onclick oid

quote:

Op zondag 16 november 2014 21:19 schreef boem-dikkie het volgende:

[..]

Kan toch hetzelfde? Afbeelding in die div zetten en opacity 0. Dan bij de track #1 anchor een hover waarmee je die afbeelding op opacity 1 zet.

kun je me uitleggen hoe ik een image in een div op opacity 0 kan krijgen vanuit de hover over een li?
heb diverse dingen geprobeerd maar ik kom er niet uit

Li
-A
-Img

li a:hover + img {}

quote:

Op zondag 16 november 2014 22:54 schreef n8n het volgende:
li a:hover + img

en dan hoef ik li of a geen class mee te geven?
Hoe weet ik dan waar de image terecht komt??

quote:

Op zondag 16 november 2014 23:08 schreef MrNiles het volgende:

[..]

en dan hoef ik li of a geen class mee te geven?
Hoe weet ik dan waar de image terecht komt??

de container position relative, de img dan absolute en left 0 etc

quote:

Op zondag 16 november 2014 21:49 schreef MrNiles het volgende:

[..]

goed punt
misschien toch ook onclick oid

Bedenk je wel het nut van zoiets. Ik denk dat mensen raar opkijken als ze op track 1 klikken en alleen de afbeelding veranderd. Nou weet ik de context verder niet maar houd dat in je achterhoofd.