DIG Digital Corner
Alles wat je altijd al over computers, hardware, software, internet en elektronische gadgets had willen weten, maar niet op Tweakers.net durft te vragen.
Dit topic is bedoeld voor alle vragen m.b.t. HTML, CSS en javascript, kortom alles wat je nodig hebt om (de frontend van) een website te maken.
HTML: Hyper Text Markup Language is de structuur van een website. Door middel van verschillende html tags geef je aan welke elementen bij elkaar horen (bijv: <div>, <ul>), of wat de betekenis van deze data is (bijv. <p>, <h1>). HTML leent zich ook voor opmaak, maar het is makkelijker en verstandiger om hier CSS voor te gebruiken.
CSS: Cascading StyleSheet is de opmaak van een website. In je CSS specificeer je bijvoorbeeld welke kleur bepaalde elementen moeten hebben, hoe groot ze zijn en hoe je ze wilt rangschikken.
JS: Javascript Javascript (niet te verwarren met programmeertaal Java) is een scripttaal, waarmee het mogelijk is je website dynamisch te maken. Javascript kan bijvoorbeeld HTML-elementen aanpassen, toevoegen of verwijderen.
Vragen over PHP, SQL of andere serverside programmeertalen horen niet in dit topic. Deze kun je stellen in [PHP/MySQL] voor dummies of open zelf een topic.
Voor vragen over webhosting, domeinnamen enz. kun je terecht in Het grote (betaalde) webhosting topic
En voor Wordpress is er ook een speciaal topic, als het om meer gaat dan de HTML/CSS van een theme: [Wordpress]Algemeen topic
Code posten
Het is, als je een vraag stelt, vaak handig om hier een stukje code bij te voegen. Post niet klakkeloos je hele website, maar post alleen het stukje code waar je vraag over gaat. Gebruik bovendien de [code]-tag (
, zodat je HTML, CSS of Javascript code goed leesbaar is. Dus niet [quote] of [spoiler] of wat dan ook.Nog beter is om een snippet in Codepen of JSFiddle te plakken. Hierdoor kunnen anderen je ook makkelijker helpen.
Veel voorkomende problemen
Veel problemen zijn te wijden aan het niet kloppen van HTML of CSS code. Een kleine typfout is snel gemaakt, en de webbrowser kan daar soms erg slecht mee omgaan. Om te controleren of je code technisch in orde is, kun je deze controleren met de W3 validator.
Is je code niet correct? Los dan eerst de fouten op zodat de validator geen foutmeldingen meer geeft. Dit lost niet altijd je probleem op, maar zorgt in ieder geval dat alles werkt zoals het hoort te werken, waardoor overige fouten ook veel makkelijker te achterhalen zijn.
IK SNAP ER NIETS VAN HELLEP! WAT IS CSS?
We helpen iedereen graag in dit topic, ook mensen die er helemaal niets van begrijpen. Maar we verwachten wel dat je je best doet om het wel te gaan begrijpen. Lees eens wat tutorials en probeer het altijd eerst zelf. Je krijgt hier tips waar je zelf iets mee moet doen.
Hier een paar artikelen over CSS elementen die vaak voor verwarring zorgen
• CSS Floats 101
• CSS Positioning 101
Heb je zin om HTML, CSS of Javascript leren, dan zijn deze video tutorials een goede plek om te beginnen
• 30 Days to Learn HTML & CSS
• 30 Days to Learn jQuery
• JavaScript from null
Overige tips & tricks
• jQuery Tips and Tricks
• Hidden Features of JavaScript
Populaire frameworks
• [HTML/CSS] Bootstrap
• [HTML/CSS] Foundation
• [JS] jQuery
• [JS] AngularJS
• [JS] Backbone
• [JS] Ember.js
Mijn laatste vraag
http://codepen.io/anon/pen/OyvmBR
Er zijn vier bolletjes die naar een foto sliden, de rest slide nergens heen. Misschien kan iemand mij helpen?
http://codepen.io/anon/pen/OyvmBR
Er zijn vier bolletjes die naar een foto sliden, de rest slide nergens heen. Misschien kan iemand mij helpen?
1. je bolletjes staan allemaal door elkaar, kijk naar de margin-leftquote:Op zondag 25 oktober 2015 20:19 schreef ikbenrond het volgende:
Mijn laatste vraag
http://codepen.io/anon/pen/OyvmBR
Er zijn vier bolletjes die naar een foto sliden, de rest slide nergens heen. Misschien kan iemand mij helpen?
2. .overflow-wrapper moet 1000% breed zijn bij 10 items, het was 400% voor 4 items
3. .slide img moet 10% breed zijn voor 10 items, het was 25% voor 4 items
4. #Slide10:checked ~ .overflow-wrapper moet -900% zijn
http://codepen.io/anon/pen/Qjmvzq
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
Ohhquote:Op zondag 25 oktober 2015 20:26 schreef mstx het volgende:
[..]
1. je bolletjes staan allemaal door elkaar, kijk naar de margin-left
2. .overflow-wrapper moet 1000% breed zijn bij 10 items, het was 400% voor 4 items
3. .slide img moet 10% breed zijn voor 10 items, het was 25% voor 4 items
4. #Slide10:checked ~ .overflow-wrapper moet -900% zijn
http://codepen.io/anon/pen/Qjmvzq
Thanks man. 
Ze staan ook alle 10 netjes in het midden nu.
Nog een puntje om je code wat leesbaarder te houden. Als je stijlen hebt die op veel elementen terug komen kun je die beter samen in een class zetten die je dan aan al die elementen plakt.quote:Op zondag 25 oktober 2015 20:56 schreef ikbenrond het volgende:
[..]
Ohh
Ze staan ook alle 10 netjes in het midden nu.
In jouw geval kopieer je nu de hele stijl van je labels voor alle 10 de labels. Echter veranderen alleen de margin-left en de bottom. De rest van de regels kunnen dus prima samen een class krijgen.
Daarmee het je minder code, 70 regels minder in dit geval, wat niet alleen leesbaarder is maar ook makkelijker aanpasbaar. Nu hoef je een toekomstige wijziging maar op één plek uit te voeren in plaats van het naar 10 plekken te moeten kopiëren.
http://codepen.io/anon/pen/XmEgJO
Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
Thanks voor de tip, dat is inderdaad wat duidelijkerquote:
[..]
Nog een puntje om je code wat leesbaarder te houden. Als je stijlen hebt die op veel elementen terug komen kun je die beter samen in een class zetten die je dan aan al die elementen plakt.
In jouw geval kopieer je nu de hele stijl van je labels voor alle 10 de labels. Echter veranderen alleen de margin-left en de bottom. De rest van de regels kunnen dus prima samen een class krijgen.
Daarmee het je minder code, 70 regels minder in dit geval, wat niet alleen leesbaarder is maar ook makkelijker aanpasbaar. Nu hoef je een toekomstige wijziging maar op één plek uit te voeren in plaats van het naar 10 plekken te moeten kopiëren.
http://codepen.io/anon/pen/XmEgJO
Volgens mij verandert "bottom" helemaal niet. En als het voor een paar items wel verandert, kun je alsnog de standaardwaarde bij de class zetten en de afwijkende waarde bij de betreffende id's.quote:
[..]
Nog een puntje om je code wat leesbaarder te houden. Als je stijlen hebt die op veel elementen terug komen kun je die beter samen in een class zetten die je dan aan al die elementen plakt.
In jouw geval kopieer je nu de hele stijl van je labels voor alle 10 de labels. Echter veranderen alleen de margin-left en de bottom. De rest van de regels kunnen dus prima samen een class krijgen.
Daarmee het je minder code, 70 regels minder in dit geval, wat niet alleen leesbaarder is maar ook makkelijker aanpasbaar. Nu hoef je een toekomstige wijziging maar op één plek uit te voeren in plaats van het naar 10 plekken te moeten kopiëren.
http://codepen.io/anon/pen/XmEgJO
Helemaal gelijk in, niet goed genoeg opgelet bij het aanpassen. Wat ironisch genoeg mijn punt alleen maar duidelijker maakt. Hou je code zo overzichtelijk mogelijk.quote:
[..]
Volgens mij verandert "bottom" helemaal niet. En als het voor een paar items wel verandert, kun je alsnog de standaardwaarde bij de class zetten en de afwijkende waarde bij de betreffende id's.
Een standaardwaarde opnemen in je class die je bij uitzonderingen overschrijft vanuit een andere class/id is inderdaad makkelijker dan geen standaardwaarde op te nemen.
Uiteindelijk valt het allemaal terug op het principe van Don't Repeat Yourself (DRY). Als je merkt dat je code vaak hergebruikt moet je je afvragen of er niet een betere manier is om diezelfde code vanuit verschillende plekken aan te spreken.
In het geval van CSS kan dat door het in een class te zetten. Bij Javascript kun je het in een functie zetten die je aanspreekt waneer je het nodig hebt.
Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
Nog beter is om een CSS preprocessor te gebruiken (sass of less). Houdt je code netter en beter onderhoudbaar. En je hebt ook minder classes nodig.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Dan had je waarschijnlijk een mixin gepakt in plaats van een class te gebruiken. Dat zou ik juist een nadeel vinden, al was het maar omdat je denkt dat je DRY bezig bent maar de uiteindelijke css dat helemaal niet meer is.quote:
Nog beter is om een CSS preprocessor te gebruiken (sass of less). Houdt je code netter en beter onderhoudbaar. En je hebt ook minder classes nodig.
In plaats van classes toevoegen in je dom, voeg je een mixin toe aan je class. Vind ik persoonlijk netter.quote:
[..]
Dan had je waarschijnlijk een mixin gepakt in plaats van een class te gebruiken. Dat zou ik juist een nadeel vinden, al was het maar omdat je denkt dat je DRY bezig bent maar de uiteindelijke css dat helemaal niet meer is.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Blijft een lastige discussie, of je nou mixins moet gebruiken, extends of gewoon extra classes in je HTML. Ik neig nog steeds heel erg naar extra classes. Misschien dat je het 'composition over inheritance' zou kunnen noemen.
Bleuh.
Afhankelijk van de situatie. Als je uitgaat van de css in de tweede post van dit topic, is het handiger om het eerst op te ruimen zoals BrainOverfloW gedaan heeft. Daarna kun je misschien nog wat doen met een css preprocessor. Als je eerst preprocessors gaat gebruiken, krijg je 10 id's met dezelfde mixin.quote:Op maandag 26 oktober 2015 08:11 schreef Catch22- het volgende:
[..]
In plaats van classes toevoegen in je dom, voeg je een mixin toe aan je class. Vind ik persoonlijk netter.
Ik vind vooral de variabelen en het kunnen uitvoeren van berekeningen van preprocessors erg makkelijk. Dan kunnen dingen ineens logische namen krijgen. Wel zo prettig bij het nalezen van code en het zien van afhankelijkheden.quote:
Blijft een lastige discussie, of je nou mixins moet gebruiken, extends of gewoon extra classes in je HTML. Ik neig nog steeds heel erg naar extra classes. Misschien dat je het 'composition over inheritance' zou kunnen noemen.
Ik schrijf mijn css net anders dan de meeste developers die ik ken. Ben indertijd met de fok lay-out mobiel op zoek gegaan naar een compacte manier om css te schrijven in een tijd dat mobiele browsers niet meer dan 25KB uncompressed wilden cachen.
In plaats van per selector meerdere regels declaraties neer te zetten, doe ik het andersom. Eén declaratie met meerdere selectors waar die van toepassing is. Mijn sheet deel ik dan op in een reset, typografie, layout, en ornamenten. Nog een raw file om dingen uit te proberen - wat je achteraf wel op moet schonen. De variabelen haal ik uit een var.color.scss en var.size.scss waar ik een naming convention - bijna - heb uitgedokterd.
Het ziet er dan als volgt uit:
style.scss
en een deel van layout.scss
Het is wat meer moeite om op te zetten maar je houdt een serieus compacte css over, en zonder je html te vervuilen met allerhande classes overal.
In plaats van per selector meerdere regels declaraties neer te zetten, doe ik het andersom. Eén declaratie met meerdere selectors waar die van toepassing is. Mijn sheet deel ik dan op in een reset, typografie, layout, en ornamenten. Nog een raw file om dingen uit te proberen - wat je achteraf wel op moet schonen. De variabelen haal ik uit een var.color.scss en var.size.scss waar ik een naming convention - bijna - heb uitgedokterd.
Het ziet er dan als volgt uit:
style.scss
en een deel van layout.scss
Het is wat meer moeite om op te zetten maar je houdt een serieus compacte css over, en zonder je html te vervuilen met allerhande classes overal.
“Specialization is for insects”.—Robert Heinlein
Je kunt calc() tegenwoordig ook zonder preprocessor gebruiken.quote:
[..]
Ik vind vooral de variabelen en het kunnen uitvoeren van berekeningen van preprocessors erg makkelijk.
voor mij geen issue meer met border-box, had IE6 het toch bij het juiste eind.quote:
[..]
Je kunt calc() tegenwoordig ook zonder preprocessor gebruiken.
“Specialization is for insects”.—Robert Heinlein
Daar zijn wel wat issues mee.quote:
[..]
Je kunt calc() tegenwoordig ook zonder preprocessor gebruiken.
[ Bericht 29% gewijzigd door Light op 26-10-2015 21:28:39 ]
Ik zit een beetje op de n8n route maar dan met Stylus, ben zelf alleen wel erg van het benoemen van dingen.
Zou bij mij eerder zoiets zijn
En even wat anders, schaam me haast om het te zeggen. Maar ik ben laatst voor de grap eens in flexbox gedoken.
Mijn leven is sindsdien veranderd.
| 1 | header .icon |
Zou bij mij eerder zoiets zijn
| 1 | .Header__icon |
En even wat anders, schaam me haast om het te zeggen. Maar ik ben laatst voor de grap eens in flexbox gedoken. Mijn leven is sindsdien veranderd.
Die .icon heeft nog andere styling die onafhankelijk is van de header context. Met jouw voorbeeld heb je dan - wellicht - ook een .Section__icon (waarom die interpunctie zo?).
Maak er dan .header.icon van, dan kan je ze nog los van elkaar selecteren.
Maak er dan .header.icon van, dan kan je ze nog los van elkaar selecteren.
“Specialization is for insects”.—Robert Heinlein
Bem he. Ik ben er geen fan van
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
Ik doop mijn syntax do:css, declaration oriented. Just do it, zoals ze zo mooi zeggen.
Edit: https://css-tricks.com/bem-101 meh
Edit: https://css-tricks.com/bem-101 meh
“Specialization is for insects”.—Robert Heinlein
Inderdaad, http://getbem.com/naming/quote:
Ik heb hiervoor gekozen omdat de css van bij ons op het werk een grote bende is, en de !importants je om de oren vliegen. Gebruik het nu een aantal maanden en valt me nog niet tegen, en anders is het in ieder geval een consistente bende.
Ik ben geen "frontender" maar ik sta altijd open voor betere alternatieven.
BEM en namespacing, ik ben er groot fan van. Zorgt er IMO echt voor dat je veel beter nadenkt over hergebruik en het opsplitsen van je CSS in herbruikbare stukjes.
Flexbox is inderdaad briljant, hoewel we het nu wel gaan misbruiken voor dingen waar eigenlijk de Grid-module van CSS voor bedoeld is - maar ja, die wordt nog nauwelijks ondersteund.
Flexbox is inderdaad briljant, hoewel we het nu wel gaan misbruiken voor dingen waar eigenlijk de Grid-module van CSS voor bedoeld is - maar ja, die wordt nog nauwelijks ondersteund.
Bleuh.
Ik vind de syntax niet zo geweldig. En CSS is al cascading, om dat dan ook in je naamgeving te doen vind ik niet zo nodig.
Ik ben de enige frontender en je treft in mijn CSS vrijwel nooit important aan. Dus volgens mij doe ik t prima.
Ik ben de enige frontender en je treft in mijn CSS vrijwel nooit important aan. Dus volgens mij doe ik t prima.
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
BEM haalt het hele cascading idee van css weg, en modulair opbouwen kan natuurlijk ook zonder elk uniek friemeltje een naam van 30 karakters te geven met daarnaast nog --uitzonderingen.
Wat zeker helpt is naming conventions maar ook pattern libraries, een mooie catalogus met modules waar van alles uit overgenomen kan worden. Wat ook helpt is 1 persoon verantwoordelijk maken voor de css in de uiteindelijke vorm, daarom heb ik een raw.nathan.scss, dan kan je elk team-lid zo’n bestand geven.
Door de css op te organiseren op property in plaats van selectors is het ook veel makkelijker te identificeren wanneer een waarde overruled wordt, ze passen vaak tegelijk op je scherm.
Wat zeker helpt is naming conventions maar ook pattern libraries, een mooie catalogus met modules waar van alles uit overgenomen kan worden. Wat ook helpt is 1 persoon verantwoordelijk maken voor de css in de uiteindelijke vorm, daarom heb ik een raw.nathan.scss, dan kan je elk team-lid zo’n bestand geven.
Door de css op te organiseren op property in plaats van selectors is het ook veel makkelijker te identificeren wanneer een waarde overruled wordt, ze passen vaak tegelijk op je scherm.
“Specialization is for insects”.—Robert Heinlein
druk eens op f12 en kijk bij net en consolequote:
DIG / Achtergrond
Iemand die me kan helpen?
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
quote:
[..]
Thanks man, hij doet het! Ik heb nog een vraagje:
Sommige websites (denk aan NU.nl, GeenStijl.nl) hebben een pagina indeling met een achtergrond en alleen in het midden inhoud/artikelen, als je begrijpt wat ik bedoel. Ik kende vroeger de code om dit te doen, maar ben na een programmerloze periode de code vergeten.
Enige kans dat jij (of een andere FOK!er) mij kan helpen? Bij voorbaat dank
| 1 2 3 4 | .foo { width: 100px; margin: 0 auto; } |
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
Probleem: (verticaal) menu wil niet onder het logo gaan staan.
Code:
<body> <div class="logo"> <br> <br>
<a href="website"> <img src="logo.png" align="left"> </a> </div> <br> <br>
<div class="menu">
<table> <tr> <th> <a href="overons.menu.php"> Over Ons </a> </tr> </th>
<tr> <th> <a href="contact.menu.php"> Contact </a> </tr> </tr> </table>
Heeft iemand oplossingen?
Code:
<body> <div class="logo"> <br> <br>
<a href="website"> <img src="logo.png" align="left"> </a> </div> <br> <br>
<div class="menu">
<table> <tr> <th> <a href="overons.menu.php"> Over Ons </a> </tr> </th>
<tr> <th> <a href="contact.menu.php"> Contact </a> </tr> </tr> </table>
Heeft iemand oplossingen?
Een table, serieus?
Heel veel groetjes, Catch22
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
En zoals mijn opa zei: "Al is het meisje nog zo mooi, haar poep stinkt ook". Rust Zacht opa..
Met GHB nooit meer nee
Storneren een optie?
• Gebruik de [code][/code] tags (of klik opquote:
Probleem: (verticaal) menu wil niet onder het logo gaan staan.
Code:
<body> <div class="logo"> <br> <br>
<a href="website"> <img src="logo.png" align="left"> </a> </div> <br> <br>
<div class="menu">
<table> <tr> <th> <a href="overons.menu.php"> Over Ons </a> </tr> </th>
<tr> <th> <a href="contact.menu.php"> Contact </a> </tr> </tr> </table>
Heeft iemand oplossingen?
)• Geen tables gebruiken, (behalve voor tabulaire data, wat een menu zeker niet is)
• Witruimte toevoegen doe je in stylesheets, niet door br-tags te gebruiken.
-Met wat voor tag moet ik een menu dan in elkaar coderen?quote:
[..]
• Gebruik de
[ code verwijderd ]
tags (of klik op [ afbeelding ])
• Geen tables gebruiken, (behalve voor tabulaire data, wat een menu zeker niet is)
• Witruimte toevoegen doe je in stylesheets, niet door br-tags te gebruiken.
-Witruimte dmv stijlbladen? Zou je willen uitleggen hoe?
Als je al tables gebruikt zorg dan ook dat de tags goed staan, er staan nu allemaal TR en TH's dubbel en door elkaar 
Maar normaal zet je een menu in een <nav> en <ul>, en stel je de witruimte in met margins. Een table is alleen bedoeld voor tabulaire data.
Maar normaal zet je een menu in een <nav> en <ul>, en stel je de witruimte in met margins. Een table is alleen bedoeld voor tabulaire data.
Op donderdag 2 juli 2009 22:41 schreef RTB het volgende:
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
als ik elk rap"liedje" een kans moest geven was ik aan het eind van dit millennium nog bezig met het tempo waarin die kotshoop uitgebraakt wordt.
👾
Wat dacht je van <nav> met daarin een lijstje met links?quote:
[..]
-Met wat voor tag moet ik een menu dan in elkaar coderen?
Niet echt voor dummies, of wel maar dan voor wiskunde (met JS) 
Ik heb een functie die van een string een sample neemt op random plekken. De lengte van de string is variabel. De hoeveelheid samples zal tussen de 10 en 1000 komen te liggen. Het punt is alleen dat de string lengte kan variëren van een paar duizend karakters tot een paar miljoen.
Nu komt de wiskunde, ik wil de hoeveelheid samples exponentieel laten dalen omdat het bij lange strings qua performance een potentieel drama wordt. Ik heb het geïllustreerd met een curve ter indicatie (geen exacte waarden).
Nu de hamvraag; weet iemand of en - indien mogelijk - hoe dit kan? Is er een wiskunde genie aanwezig?
Bedankt
Edit: had de curve verkeerd om
anyway, heb het nu kwadratisch opgelost met Math.sqrt().
[ Bericht 11% gewijzigd door n8n op 03-11-2015 17:59:29 ]
Ik heb een functie die van een string een sample neemt op random plekken. De lengte van de string is variabel. De hoeveelheid samples zal tussen de 10 en 1000 komen te liggen. Het punt is alleen dat de string lengte kan variëren van een paar duizend karakters tot een paar miljoen.
Nu komt de wiskunde, ik wil de hoeveelheid samples exponentieel laten dalen omdat het bij lange strings qua performance een potentieel drama wordt. Ik heb het geïllustreerd met een curve ter indicatie (geen exacte waarden).
Nu de hamvraag; weet iemand of en - indien mogelijk - hoe dit kan? Is er een wiskunde genie aanwezig?
Bedankt
Edit: had de curve verkeerd om
anyway, heb het nu kwadratisch opgelost met Math.sqrt().| 1 | var i = string.length; var samples = Math.ceil( i / Math.sqrt(i) ); |
[ Bericht 11% gewijzigd door n8n op 03-11-2015 17:59:29 ]
“Specialization is for insects”.—Robert Heinlein
Waarom zou het langer duren om 100 chars uit een string met lengte 1000 te halen dan uit een string met lengte 1000000?
Hij wil het aantal samples doen afnemen naarmate de lengte van de string toeneemt.quote:Op dinsdag 3 november 2015 18:19 schreef Tijn het volgende:
Waarom zou het langer duren om 100 chars uit een string met lengte 1000 te halen dan uit een string met lengte 1000000?
Ik was eerder met dit bezig en had nu wat dingen door de war. Ik wil dat het percentage van samples langzaam omlaag gaat. Dus op 100.000 karakters kunnen er 200 samples gepakt worden, maar met 10.000.000 maar 500, bijvoorbeeld. Dus het aantal samples moet niet lineair omhoog gaan maar binnen de perken gehouden worden.quote:
Waarom zou het langer duren om 100 chars uit een string met lengte 1000 te halen dan uit een string met lengte 1000000?
Volgens mij is m’n code net alsnog lineair
heb in ieder geval een harde limiet van 1000 samples.
“Specialization is for insects”.—Robert Heinlein
preciesquote:
[..]
Hij wil het aantal samples doen afnemen naarmate de lengte van de string toeneemt.
“Specialization is for insects”.—Robert Heinlein
Mits floating point numbers geen probleem zijn (eventueel afronden) kun je dat oplossen met een Briggs logaritme.quote:Op dinsdag 3 november 2015 18:28 schreef n8n het volgende:
[..]
Ik was eerder met dit bezig en had nu wat dingen door de war. Ik wil dat het percentage van samples langzaam omlaag gaat. Dus op 100.000 karakters kunnen er 200 samples gepakt worden, maar met 10.000.000 maar 500, bijvoorbeeld. Dus het aantal samples moet niet lineair omhoog gaan maar binnen de perken gehouden worden.
Volgens mij is m’n code net alsnog lineair
x = String length
y = Aantal samples
z = Basisaantal samples
log(x) * z = y
Dan krijg je bij een length van 10000 (10^4) 2x zoveel samples als bij een length van 100 (10^2), en bij een length van 1000000 (10^6) 6x zoveel samples.
Hoe je dat in code vertaalt, weet ik niet.
Oh, in dat geval is sqrt() wel een goeie, jaquote:
[..]
Ik wil dat het percentage van samples langzaam omlaag gaat. Dus op 100.000 karakters kunnen er 200 samples gepakt worden, maar met 10.000.000 maar 500, bijvoorbeeld.
Nee, hij wil de groei van het aantal samples doen afnemen.quote:
[..]
Hij wil het aantal samples doen afnemen naarmate de lengte van de string toeneemt.
Hou het denk ik bij sqrt ja, had Math.log() wel gevonden maar dat is een stuk minder straight forward. Thanks. Nu m'n code herschrijven want ik had het eerst niet zo handig aangepast met een hardcoded getal.
“Specialization is for insects”.—Robert Heinlein
Met Math.log() kun je het basisgetal wel makkelijker aanpassen als dat nog te groot blijkt.quote:
Hou het denk ik bij sqrt ja, had Math.log() wel gevonden maar dat is een stuk minder straight forward. Thanks. Nu m'n code herschrijven want ik had het eerst niet zo handig aangepast met een hardcoded getal.
x = string.length
b = 10 // basisgetal
y = Math.log(x) / Math.log(b) // aantal samples
Nog een keer naar kijken dan, nu eerst even reactoren anders wordt ik helemaal loco. heb de snippets opgeslagen.quote:
[..]
Met Math.log() kun je het basisgetal wel makkelijker aanpassen als dat nog te groot blijkt.
x = string.length
b = 10 // basisgetal
y = Math.log(x) / Math.log(b) // aantal samples
---
edit: refactored, heb een functie die alle afbeeldingen met .glitch indexeert, de binary met ajax ophaalt, dit omzet naar base64 en op een X aantal locaties een karakter wijzigt. Het resultaat wordt naar een callback gegooid waar het verder afgehandeld wordt.
Het is een glitch in de afbeelding, deze heeft nu een X aantal wijzigingen - nu gebaseerd op Math.sqrt() - en elke poging wordt het resultaat met canvas en een load event gecheckt - soms gaan ze kapot of op zwart/grijs. Na elke mislukte poging gaan ook het aantal wijzigingen omlaag om oneindige loops te voorkomen.
Ben er erg content mee
En zelfs op m'n telefoon is het erg snel, ook met 1MB afbeeldingen dankzij de MathScreen: http://d.pr/i/Y38U+
[ Bericht 18% gewijzigd door n8n op 04-11-2015 00:31:22 ]
“Specialization is for insects”.—Robert Heinlein
Ik heb hetzelfde menu (eerdere post in dit topic) nu in <ul> vorm gemaakt. Echter wil het nog steeds niet onder het logo komen te staan. Iemand tips/opmerkingen?
Zonder de code zoals je die nu hebt kunnen we weinig zeggen over wat het probleem is.quote:
Ik heb hetzelfde menu (eerdere post in dit topic) nu in <ul> vorm gemaakt. Echter wil het nog steeds niet onder het logo komen te staan. Iemand tips/opmerkingen?
Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
