blank template

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Python Developer

Dit ga je doen Als Python Developer ben je verantwoordelijk voor: Het ontwikkelen van Stuurprogramma's in Python zodat er verbindingen kunnen worden gelegd tussen besturingssystemen en (AV) hardware; Het testen en debuggen van Stuurprorgamma's; Het communiceren met noodzakelijke partijen in gevallen waar extra technische details nodig zijn om een Stuurprogramma te ontwikkelen of problemen op te lossen; Het maken van de nodige technische documentatie (in het Engels); Het participeren in een Scrum/Agile omgeving. Hier ga je werken Deze internationale organisatie is wereldwijd een succesvol producent en leverancier van professionele AV hard- en software. Klanten gebruiken de producten o.a. voor het

Bekijk vacature »

Fullstack developer

Functie omschrijving Ben jij toe aan een nieuwe uitdaging en zou jij graag bij een platte maar informele organisatie werken? Voor een mooi softwarebedrijf in omgeving Alblasserdam zijn wij op zoek naar versterking op de afdeling Software Development! Als Fullstack react.js developer wordt je bij dit bedrijf onderdeel van de volledige ontwikkeling van requirement tot oplevering! Jouw focus ligt op de front end en alles wat daarbij komt kijken. Je gaat ontwerpen, ontwikkelen, testen en valideren. Je zult voornamelijk werken met React.js en Typescript. Maar ook Javascript, HTML en CSS komen aanbod. Daarnaast zal je ook regelmatig met de back

Bekijk vacature »

Backend Developer Integraties API HBO REST

Samengevat: Deze werkgever is een IT-consultancy. Wil jij werken als Backend Developer Integraties? Heb jij kennis van gangbare berichtformaten? Vaste baan: Backend Developer Integraties API HBO €3.100 - €4.400 Zij bieden innovatieve oplossingen die bedrijven efficiënter en wendbaarder maken, waardoor onze klanten zich net zo snel kunnen ontwikkelen als de business van hen vraagt. Bij bij hun werk je aan onze eigen bedrijfsapplicaties. Je ontwikkelt met ons de meest nieuwe software. Wij blinken uit als het gaat om de inzet van technologie. Deze werkgever staat open voor elke nieuwe trend. Onze systemen zijn groot en ingewikkeld. Hou jij van diepgang

Bekijk vacature »

Senior Java Ontwikkelaar

Dit ga je doen Werken aan uiteenlopende interne projecten voor grote (internationale) organisaties; Ontwikkelen van diverse (web)applicaties en platformen met technieken als Java, Azure en ASP.NET; Complexe vraagstukken tackelen met jouw expertise en ervaring; Waar nodig help jij je collega's om samen tot de juiste oplossing te komen. Hier ga je werken Als Java Developer kom je te werken bij een internationale organisatie in regio Amsterdam die zich richt op procesoptimalisatie door middel van zeer complexe IT oplossingen. Dit doen zij op het allerhoogste niveau met vestigingen over heel de wereld en met een groot aantal aansprekende, maatschappelijk betrokken klanten.

Bekijk vacature »

Senior/Lead Python developer

Functie Samen met je team, bestaande uit een senior, 2 mediors en één junior ontwikkelaar ga je op een Agile-gebaseerde aanpak werken aan hun software. Je hebt oog voor kwaliteit, risico’s en klantbelang. Communicatie met je collega’s en waar nodig ook met klanten speelt een belangrijke rol in het bereiken van een succesvol resultaat. Als persoon ben je slim, krijg je dingen voor elkaar en ga je resultaatgericht te werk. Binnen het development team is er veel zelfstandigheid, los van de stand-up (10:00 uur) en zo nu en dan pair-programming sessies. Technieken die zij gebruiken zijn o.a. Python, Django, MySQL,

Bekijk vacature »

Gezocht: .Net ontwikkelaars met een maatschappelij

Bedrijfsomschrijving Zoek jij als medior .Net ontwikkelaar een inspirerende werkplek bij een bedrijf met maatschappelijk verantwoordelijkheidsgevoel? Dan is deze vacature je op het lijf geschreven. De organisatie bestaat ruim 20 jaar en ze ontwikkelen in house applicaties waarmee de zorgsector enorm mee gebaat is. Jouw applicaties worden gebruikt door duizenden gebruikers waardoor je echt een waardevolle bijdrage kan leveren aan de maatschappij. Het bedrijf is zeer innovatief en vindt een goede werk/privé balans belangrijk. Je krijgt alle mogelijkheden om jezelf verder te ontwikkelen, je werktijden in te delen en daarnaast is het ook mogelijk om deels thuis te werken. Het

Bekijk vacature »

Medior Java developer (fullstack)

Wat je gaat doen: Of beter nog, wat wil jij doen? Binnen DPA GEOS zijn we dan ook op zoek naar enthousiaste Java developers om ons development team te versterken. Als Java developer werk je in Agile/Scrum teams bij onze klanten en daarbij kun je eventueel ook andere ontwikkelaars begeleiden in het softwareontwikkelproces. Verder draag je positief bij aan de teamgeest binnen een projectteam en je kijkt verder dan je eigen rol. Je gaat software maken voor verschillende opdrachtgevers in jouw regio. Je bent een professional die het IT-vak serieus neemt en kwaliteit levert. Je leert snel vanwege je diepgaande

Bekijk vacature »

Front-end Developer

Dit ga je doen Je komt in een DevOps-cultuur te werken waarbij je met je team werkt aan de front-end van diverse brand websites; Het ontwerpen van functionele en grafische ontwerpen die worden geïmplementeerd; Draagt zorg voor het maken van analyses; Je werkt nauw met je collega’s samen en geeft elkaar feedback en suggesties waar nodig; Het uitwerken van vraagstukken die afkomstig zijn van verschillende klanten; Hier ga je werken Deze marktleider op gebied van fietsen en fietservaring is gevestigd in twee provincies, verspreid over meerdere locaties. Jij zult voornamelijk in regio Joure aan de slag gaan. De organisatie doelt

Bekijk vacature »

REMOTE - Front-end Angular developer

Functie Het IT-team bestaat momenteel uit de IT Manager, 2 back-end developers, 1 fullstack developer, 1 designer en een DevOps engineer. Ze zijn momenteel op zoek naar een ervaren Front-end developer die autonoom en gedisciplineerd aan de slag gaat, en bij aanvang als enige developer met hun Front-end applicaties bezig is. Wel hebben ze de ambitie om hier snel een 2e developer bij te vinden die jij dan ook zal kunnen aansturen/begeleiden. Je zult aan de slag gaan met het doorontwikkelen van hun bestaande UI in Angular. Maar ook het ontwikkelen van een mobiele app. Hierbij hechten ze veel waarde

Bekijk vacature »

Ambitieuze Junior/Medior Low-code Developers gezoc

Bedrijfsomschrijving Transformeer bedrijven met jouw expertise in innovatieve technologie Ben je een bedreven softwareontwikkelaar met ervaring in Low-code platformen, of sta je te popelen om je in deze baanbrekende oplossing te verdiepen? Wij zijn op zoek naar jou! Ons klantenbestand groeit en we willen ons team uitbreiden met deskundige en leergierige Low-code specialisten. Is het jouw passie om organisaties te ondersteunen in hun digitale transformatie en maatwerkoplossingen te bieden met behulp van geavanceerde software? Wij zijn een vooruitstrevend bedrijf dat dagelijks werkt aan het oplossen van complexe vraagstukken om de digitale ambities van onze klanten te realiseren. Functieomschrijving Ontwikkel op

Bekijk vacature »

PHP Developer

Functie Middels Scrum en sprints bouw jij in deze functie mee aan complexe webapplicaties en ons SaaS platform. Hierbij hoort ook architectuur tot een van je taken. Daarnaast ben je één van de leden van het Scrum team. Dat betekent dat je naast je kerntaken ook in contact staat met de product owner. Oftewel, je bent bij het gehele ontwikkelproces betrokken. Tools die hierbij gebruikt worden zijn o.a. PHP, Symfony en Git. Eisen • Minimaal HBO werk- en denkniveau • Minimaal 3 jaar aantoonbare ervaring met PHP • Kennis en ervaring Symfony (Laravel is pré) & Lando • Kennis van

Bekijk vacature »

Lead developer

Functie Als lead developer wordt jij verantwoordelijk voor een van onze development teams. Samen met de Software Architect bewaak jij de kwaliteit en uitvoering van onze complexe vraagstukken. Daarnaast ben jij verantwoordelijk voor het inschatten, designen en ontwikkelen van middelgrote tot grote veranderingen in de software. Ook coördineer jij het proces rondom complexe technische vraagstukken. Verder bestaat jouw takenpakket uit het volgende: – Het aansturen van jouw development team; – Het begeleiden van Junior Software Engineers; – Het maken van technische analyses m.b.t. nieuwe aanvragen en het tijdsbestek inschatten voor de uitvoering hiervan; – Het uitvoeren van de ontwikkeling van

Bekijk vacature »

Ontwikkelaar MS Dynamics 365 Projecten

Samengevat: Deze werkgever is de kwaliteitsdienst in de tuinbouwsector. Ben jij een ervaren ontwikkelaar? Heb jij ervaring met Ms Dynamics 365 BC? Vaste baan: Ontwikkelaar Ms Dynamics 365 BC ICT MBO 3.500 - 5.000 Ontwikkelaar Ms Dynamics 365 BC Ons bedrijf bewaakt en bevordert de kwaliteit van producten, processen en ketens in de tuinbouw. Wij kenmerken zich door openheid, ruimte voor initiatief, collegialiteit en zelfontplooiing. Deze werkgever is een veelzijdige organisatie. Je werkt voor de eigen IT organisatie. Zij werken met moderne technologie en staan open voor innovatie. Functie: Voor de vacature als Ontwikkelaar Ms Dynamics 365 BC Roelofarendsveen MBO

Bekijk vacature »

Senior PHP Developer

As a Senior PHP Developer at Coolblue, you ensure that our webshops work as optimal as possible and you choach other colleagues on the hard and soft skills. How do I become a Senior PHP Developer at Coolblue? As a PHP Developer you work together with other development teams to make our webshop work as optimal as possible and to make our customers happy. Although you are a PHP Developer, you are not averse to a little TypeScript or other technologies that might be used. Would you also like to become a PHP Developer at Coolblue? Read below if the

Bekijk vacature »

Senior Front end developer Digital Agency

Functie Jij als Front end developer komt te werken in een van de 8 multidisciplinaire teams binnen de organisatie. Deze teams werken op basis van Scrum agile in 2 wekelijkse sprints. De grootte van de teams varieert van 9-14 collega’s en bestaan altijd uit één of meerdere project managers en een project manager. Samen met je team werk je aan verschillende projecten voor uiteenlopende klanten zoals grote multinationals tot het kleine mkb. De stack waarmee gewerkt wordt is voornamelijk Javascript, ES6, Es.next, HTML, CSS, React.js en Node.js. Wat deze organisatie onderscheid is dat ze echt langdurige partnerships aangaan met hun

Bekijk vacature »

Pagina: 1 2 volgende »

Ozzie PHP

Ozzie PHP

24/09/2019 01:12:09
Quote Anchor link
Hallo,

De meesten van ons kennen wel bootstrap. Ik vroeg me af of er tegenwoordig eigenlijk nog meer/andere/nieuwere (???)handige tools zijn (gratis of betaald) om makkelijk een responsive template te maken.

Ik denk dan aan een situatie waarbij je gewoon begint met een volledig wit scherm, maar waar je op de een of andere manier makkelijk componenten aan kunt toevoegen die dan ook gelijk al responsive zijn.

Ja, het klinkt een beetje vaag wellicht wat ik zeg, maar hopelijk begrijpt iemand wat ik bedoel.

Je begint dus met een leeg canvas, maar in plaats van dat je ieder element zelf aan de html-code moet toevoegen en via css moet positioneren, hoef je bijv. alleen dit in te voeren:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div class="header-200px"></div>


en dan komt er op het scherm een header te staan van 200px hoog. En als je daar dan bijv. 2 kolommen in wil plaatsen doe je:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
<div class="header-200px">
  <div class="col-80%"></div>
  <div class="col-20%"></div>
</div>


en wil je er een menu in dan doe je:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<div class="header-200px">
  <div class="col-80%"></div>
  <div class="col-20%">
    <div class="menu-horizontal">
      <li>Home</li>
      <li>Contact</li>
    </div>
  </div>
</div>


Bestaat zoiets? Of kom je dan toch automatisch op Bootstrap uit?
 
PHP hulp

PHP hulp

18/02/2025 23:50:26
 
- Ariën  -
Beheerder

- Ariën -

24/09/2019 08:43:21
Quote Anchor link
Zoiets noem je CSS Grid Frameworks. Naast dat Bootstrap een enorm populair is, heb je nog een hele hoop anderen, zoals: Foundation, Skeleton, Responsive Grid System 2 en nog meer onbekenderen. Mogelijk zijn er wel een paar die met procenten werken.

https://colorlib.com/wp/html5-css3-grid-frameworks/

Ik vermoed wel dat ze bijna allemaal wel een stuk lichter zijn.
Gewijzigd op 24/09/2019 08:52:21 door - Ariën -
 
Ozzie PHP

Ozzie PHP

24/09/2019 10:36:20
Quote Anchor link
Thanks voor je reactie Aar. Heb je zelf ervaring met (een van) deze systemen toevallig? En zijn er ook systemen waarmee je bijv. makkelijk een drop down menu maakt?
 
- Ariën  -
Beheerder

- Ariën -

24/09/2019 10:39:27
Quote Anchor link
Wat heeft een dropdown met responsive-ness te maken?
Ikzelf gebruik overigens de Bootstrap.
 
Ward van der Put
Moderator

Ward van der Put

24/09/2019 11:19:17
 
Richard Hansma

Richard Hansma

24/09/2019 11:25:46
Quote Anchor link
Ik gebruik zelf https://tailwindcss.com/. Een zogeheten utility-first framework dat mobile-first geschreven wordt. Dit maakt het gelijk "responsive". Het zal ongetwijfeld wennen zijn, je ziet immers heel veel classes, maar door gebruik te maken van componenten (bijv. met Vue of React) zorg je dat elk element maar één keer bestaat.

Er zijn een hoop projecten waarin ik geen enkele regel CSS heb hoeven schrijven.
 
Ozzie PHP

Ozzie PHP

24/09/2019 11:53:59
Quote Anchor link
- Ariën - op 24/09/2019 10:39:27:
Wat heeft een dropdown met responsive-ness te maken?

Meer in de zin van ... een goed layout systeem waarin zaken als (bijv.) menu's en de mogelijkheid voor modals/pop-up boxen al zijn opgenomen. En dan bedoel ik niet zozeer qua layout. Het liefst zijn het allemaal grijstinten en pas je alles zelf naar wens aan. Maar dat het vooral werkt qua responsiveness/positionering, zodat je dat niet zelf allemaal nog hoeft te doen.

Het gaat me er vooral om om tijd te besparen. Ik kan zelf een responsive css layout schrijven, maar als die er gewoon al zijn, volledig uitgekristalliseerd zodat ze in alle browsers goed werken, dan lijkt me dat wel handig.


Toevoeging op 24/09/2019 12:02:58:

Richard Hansma op 24/09/2019 11:25:46:
Ik gebruik zelf https://tailwindcss.com/. Een zogeheten utility-first framework dat mobile-first geschreven wordt. Dit maakt het gelijk "responsive". Het zal ongetwijfeld wennen zijn, je ziet immers heel veel classes, maar door gebruik te maken van componenten (bijv. met Vue of React) zorg je dat elk element maar één keer bestaat.

Er zijn een hoop projecten waarin ik geen enkele regel CSS heb hoeven schrijven.

Interessant. Wat betekent bijv. deze regel?

<div class="mt-4 md:mt-0 md:ml-6">

Heeft dit systeem een hoge leercurve?

Het gebruikt wel erg veel classes ...

<input class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal" type="email" placeholder="[email protected]">
 
Frank Nietbelangrijk

Frank Nietbelangrijk

24/09/2019 21:31:43
Quote Anchor link
zoals je hier kunt zien:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

Kun je voor vier schermbreedtes aparte opmaak instellen.
waarbij:
sm = small
md = medium
lg = large
xl = extra large

Verder:
m = margin
p = padding
t = top
r = right
b = bottem
l = left.

<div class="mt-4 md:mt-0 md:ml-6">
mt-4 = standaard instelling voor alle schermbreedtes = margin-top: 4 eenheden
md:mt-0 voor de medium schermbreedte = margin-top: 0.
md:ml-6 voor de medium schermbreedte = margin-left: 6 eenheden

Hoe groot een eenheid is is afhankelijk van de instellingen.
Gewijzigd op 24/09/2019 21:33:49 door Frank Nietbelangrijk
 
Ozzie PHP

Ozzie PHP

25/09/2019 00:29:24
Quote Anchor link
@Frank

Dankjewel voor de heldere uitleg. Werk je zelf ook met dit framework?

Als ik het goed begrijp stelt ie die spacing dus in via javascript aan de hand van de class name? Ik ben wel benieuwd of dat allemaal niet heel traag werkt dan.
 
Richard Hansma

Richard Hansma

25/09/2019 14:28:33
Quote Anchor link
Ozzie PHP op 25/09/2019 00:29:24:
Als ik het goed begrijp stelt ie die spacing dus in via javascript aan de hand van de class name? Ik ben wel benieuwd of dat allemaal niet heel traag werkt dan.


Nee. Je houdt zelf bij via een config welke utility-waardes je wilt hebben. Vervolgens worden deze gegenereerd in een css bestand (via gulp/webpack/postcss). Het geeft je de vrijheid om alles uniek te definiëren, binnen je eigen opgegeven restricties.

Ozzie PHP op 24/09/2019 11:53:59:
Het gebruikt wel erg veel classes ...

<input class="bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal" type="email" placeholder="[email protected]">


Klopt. En voor input-velden en knoppen is dit wellicht overdreven. Er zijn hiervoor 2 alternatieven:

1. Een button component maken die je vervolgens kunt gebruiken als "<custom-button></button>"
2. Zelf een .btn class maken in css met de @apply methode. Dit zorgt voor minder mogelijkheden, omdat je meerdere utilities verzameld onder één naam. Maar via @apply kun je blijven gebruik maken van je config waardes. Zie ook https://tailwindcss.com/docs/extracting-components/#extracting-css-components-with-apply
Gewijzigd op 25/09/2019 14:37:08 door Richard Hansma
 
Ozzie PHP

Ozzie PHP

25/09/2019 15:51:01
Quote Anchor link
>> Vervolgens worden deze gegenereerd in een css bestand (via gulp/webpack/postcss).

Ah oké, ik dacht ergens te zien dat je die waardes in een .js bestand moest instellen.

Ik vind deze manier overigens nog wel een beetje 'vaag' eigenlijk. Want als je het op deze manier doet, ben je in feite in de html-code je opmaak aan het regelen. Volgens mij gaat dat in tegen het principe van code en lay-out gescheiden houden. In plaats van al die vele classes zou je ook inline-styling kunnen gebruiken en normaliter is dat niet echt wenselijk. Je wil al je opmaak in je css-file hebben zitten, maar hiermee verplaats je de opmaak juist naar de html-code.
 
Richard Hansma

Richard Hansma

25/09/2019 16:29:59
Quote Anchor link
>>> Ah oké, ik dacht ergens te zien dat je die waardes in een .js bestand moest instellen.

Klopt. Dat is die config, waaruit alles gegenereerd wordt. Maar dit wordt tijdens het builden van je front-end gedaan. Niet tijdens run-time.

>>> Ik vind deze manier overigens nog wel een beetje 'vaag' eigenlijk. Want als je het op deze manier doet, ben je in feite in de html-code je opmaak aan het regelen.

Ik begrijp wat je bedoelt, aangezien dit mijn eerste gevoel ook was. Maar uiteindelijk roep je nog steeds classes aan, enkel zijn ze nu beter te begrijpen en bovendien los te gebruiken. Voor mij het grootste punt is dat ".navbar" voor mij niet hoef te bepalen welke kleur hij moet krijgen.

Want wat nu als je zowel een light als dark-mode wil introduceren, moet je 2x een complete class maken met de namen "light-navbar" en "dark-navbar". En dat terwijl je alleen de kleur wijzigt.

En wat betreft het inline-stylen, je krijgt enkel de opties om te kiezen uit je config. Als je geen oranje kleur wil in je palet, haal je dat uit je config en kun je geen oranje kleur krijgen.

Kortom, je gebruikt nog steeds classes, dus je code en lay-out is nog steeds gescheiden. Je hoeft alleen de css niet zelf meer te schrijven. Zie onderstaand.

<div class="navbar"></div>

.navbar {
width: 100%;
background: black;
padding-top: .5rem;
padding-bottom: .5rem;
}

vs.

<div class="w-full bg-black py-2">

.w-full {
width: 100%;
}

.bg-black {
background: black;
}

.py-2 {
padding-top: .5rem;
padding-bottom: .5rem;
}
Gewijzigd op 25/09/2019 16:30:17 door Richard Hansma
 
Ozzie PHP

Ozzie PHP

25/09/2019 16:52:54
Quote Anchor link
>> Maar dit wordt tijdens het builden van je front-end gedaan. Niet tijdens run-time.

Hm, oké .. maar waarom dan in een .js bestand :-s

Je toont nu eigenlijk precies mijn punt aan (althans dat idee heb ik).

Dit <div class="w-full bg-black py-2"> is in feite gewoon inline styling. Hetzelfde als:

<div style="width: 100%; background: black; padding-top: .5rem; padding-bottom: .5rem;">

Snap je wat ik bedoel te zeggen? Volgens mij ben je nu gewoon aan het inline stylen, alleen is de schrijfwijze wat korter.

Wellicht zit ik er helemaal naast hoor, maar dan hoor ik graag hoe het wel zit :-)
 
Thomas van den Heuvel

Thomas van den Heuvel

25/09/2019 18:11:14
Quote Anchor link
Dat is waarschijnlijk de prijs die je moet betalen als je dit soort dingen generiek wilt maken.
 
Richard Hansma

Richard Hansma

25/09/2019 18:54:39
Quote Anchor link
>>> Hm, oké .. maar waarom dan in een .js bestand :-s

Die wordt gebruikt door tailwindcss om een css bestand te genereren met al jouw voorkeuren.

>>> Snap je wat ik bedoel te zeggen? Volgens mij ben je nu gewoon aan het inline stylen, alleen is de schrijfwijze wat korter.

Ik begrijp wel wat je bedoelt, maar zolang je geen style attribute gebruikt ben je niet aan het inline stylen.

Als dit niet is wat je zoekt, ook prima. Ik weet echter uit ervaring dat frameworks als Bootstrap enorm opiniated zijn. Even makkelijk "header-80%' toevoegen maakt het erg lastig. In tailwindcss is dit geen probleem.

Daarnaast gaan praktisch alle grote frameworks over op het utility first pattern. Zie ook https://www.w3schools.com/bootstrap4/bootstrap_utilities.asp

Uiteindelijk maakt het weinig uit wat anderen vinden, je moet er zelf mee kunnen/willen werken.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

25/09/2019 20:49:04
Quote Anchor link
Ozzie PHP op 25/09/2019 00:29:24:
@Frank

Dankjewel voor de heldere uitleg. Werk je zelf ook met dit framework?

Als ik het goed begrijp stelt ie die spacing dus in via javascript aan de hand van de class name? Ik ben wel benieuwd of dat allemaal niet heel traag werkt dan.


Nee Ozzie maar ik herkende de afkortingen al van Bootstrap. En een snelle blik op de docs van dit css framework bevestigde dit.

Bootstrap is wel een behoorlijk pak. Dat zal het wel wat trager maken maar dit lijkt me wel een mooi lightweight pakket.

Er zijn overigens twee snelheden te meten :p

1) Hoe lichter het pakket hoe sneller de webpagina er staat. Maar ..
2) Hoe sneller de developer zijn werk kan doen hoe meer boterhammetjes er op zijn plank liggen. (een opdrachtgever heeft geen oneindig geduld en geld dus moet je meters maken).

Een webapp anno 2019 MOET in mijn ogen gewoon in 99% van de gevallen responsive zijn en daar zit best wel wat werk in. Een framework als deze (ik ben zelf erg weg van het grid systeem van Bootstrap) biedt gewoon de juiste tools hiervoor.
Gewijzigd op 25/09/2019 20:51:50 door Frank Nietbelangrijk
 
Ozzie PHP

Ozzie PHP

25/09/2019 21:01:42
Quote Anchor link
>> Dat is waarschijnlijk de prijs die je moet betalen als je dit soort dingen generiek wilt maken.

Mja blijkbaar ... en de vraag is dan of je dat moet willen.

>> Ik begrijp wel wat je bedoelt, maar zolang je geen style attribute gebruikt ben je niet aan het inline stylen.

Ja, maar het gaat om het principe. Stel we hebben een product. In het geval van tailwindcss zeg je dan: geef dit element een width van x, een hoogte van y, achtergrondkleur z en rond de hoeken af.

Volgens mij is CSS in het leven geroepen om juist te kunnen zeggen: dit element is een product, en vervolgens geef je er de class "product" aan mee. Je stylesheet bepaalt dan vervolgens hoe het product eruit komt te zien. Door vervolgens enkel de stylesheet te vervangen zou je een compleet nieuwe lay-out moeten kunnen maken. Dat kan niet met (een systeem als) tailwindcss.

Of stel ik toon op de homepage een product dat dezelfde opmaak moet hebben als op de productpagina. Normaliter zou je dan aan beide elementen de class "product" meegeven en het is klaar. Maar bij tailwind moet je dan eerst alle classes gaan kopiëren vanuit het ene bestand en plakken in het andere bestand.

Ik denk dat CSS en scheiding van html en lay-out eigenlijk niet zo bedoeld is. Die hele manier van stylen is eigenlijk wel raar als je erover nadenkt. Want eigenlijk stijl je gewoon in het document in plaats van in het css-bestand.
 
Frank Nietbelangrijk

Frank Nietbelangrijk

25/09/2019 21:14:20
Quote Anchor link
>> Ik denk dat CSS en scheiding van html en lay-out eigenlijk niet zo bedoeld is. Die hele manier van stylen is eigenlijk wel raar als je erover nadenkt. Want eigenlijk stijl je gewoon in het document in plaats van in het css-bestand.

Op dit punt ben ik het niet met je eens. Je gebruikt classes. Je css staat gewoon in een css bestand. Je gebruikt misschien meer classes in de HTML maar hierdoor ook minder css (er van uit gaande dat je alles gebruikt in een css bestand). Wil je immers maar één class (of id) per element gebruiken dan krijg je weer voor veel elementen dezelfde css regels. Stel je huiskleur is #ABCDEF hoe vaak moet je dan de regel
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
background-color: #ABCDEF;

wel niet gebruiken? Bovendien moet je dan telkens in je css bestand gaan spitten. Deze wordt al snel minder overzichtelijk ook.

Lees dit nog eens een keer:
Richard Hansma op 24/09/2019 11:25:46:
Er zijn een hoop projecten waarin ik geen enkele regel CSS heb hoeven schrijven.

Heerlijk man. Lekker met je HTML bezig, zonder heen en weer te hoeven van je css <--> html.
Gewijzigd op 25/09/2019 22:23:51 door Frank Nietbelangrijk
 
Richard Hansma

Richard Hansma

26/09/2019 00:10:03
Quote Anchor link
Je hebt het over separation of concerns. Maar uiteindelijk is je eerste vraag om iets als "col-80%" te realiseren. Dit kan met tailwindcss (en tig andere css frameworks), vandaar mijn aanbeveling. Je staat uiteraard vrij om wel of niet voor deze manier van werken te kiezen. Uiteindelijk komt het neer op smaak, niet op het feit of iets "zo hoort".

>>> Of stel ik toon op de homepage een product dat dezelfde opmaak moet hebben als op de productpagina. Normaliter zou je dan aan beide elementen de class "product" meegeven en het is klaar. Maar bij tailwind moet je dan eerst alle classes gaan kopiëren vanuit het ene bestand en plakken in het andere bestand.

Wat ik eerder al zei, dit is een ideaal voorbeeld voor het gebruik van componenten, een include die je kunt hergebruiken en maar één keer hoeft te definiëren. Zie voorbeeld.

custom-button.html
<template>
<button class="heel veel classes die van alles doen">Klik op mij</button>
</template>

homepage.html
<div>blablabla</div>
<custom-button></custom-button>
<div>blablabla</div>

otherpage.html
<div>blablabla</div>
<custom-button></custom-button>
<div>blablabla</div>
Gewijzigd op 26/09/2019 00:11:38 door Richard Hansma
 
Ozzie PHP

Ozzie PHP

26/09/2019 00:33:15
Quote Anchor link
>> Op dit punt ben ik het niet met je eens. Je gebruikt classes. Je css staat gewoon in een css bestand.

Dat snap ik ... wat ik bedoel is dat die classes (ik weet niet of dat voor alle classes geldt, ik chargeer een beetje) een eigenschap met waarde uitdrukken. Een voorbeeld: bg-red is hetzelfde als background-color: red. Volgens mij ben je dan dus gewoon aan het inline stylen. Het wordt anders wanneer je kunt zeggen: bg-primary. Dan beschrijft de class niet zozeer een eigenschap, maar meer een functionaliteit/doel.

Stel ik heb een mooie product layout gemaakt waarbij een product bestaat uit een aantal geneste div'jes en spans. Alles is mooi opgemaakt op de productpagina en in de buitenste div van ieder product staat de class="product". Aan de hand van die ene class kan ik het complete product stylen. Wil ik nu op een andere pagina ook een product tonen, dan hoef ik alleen die class="product" toe te voegen en de lay-out klopt.

Met tailwindcss zou ik dan weer ieder divje en span al die classes moeten meegeven.

>> Wat ik eerder al zei, dit is een ideaal voorbeeld voor het gebruik van componenten, een include die je kunt hergebruiken en maar één keer hoeft te definiëren. Zie voorbeeld.

Ah oké ... kun je zo'n template ook voor een dynamisch product (waarvan het id telkens verschilt) maken?

PS Dit is overigens geen kritiek of aanval op tailwindcss ... ik probeer juist door met jullie te discussiëren uit te vinden of het interessant is om dit (of een vergelijkbaar) systeem voor mezelf toe te gaan passen.
Gewijzigd op 26/09/2019 00:36:24 door Ozzie PHP
 
Marthijn Buijs

Marthijn Buijs

26/09/2019 10:51:13
Quote Anchor link
Ozzie PHP op 25/09/2019 21:01:42:
...

Of stel ik toon op de homepage een product dat dezelfde opmaak moet hebben als op de productpagina. Normaliter zou je dan aan beide elementen de class "product" meegeven en het is klaar. Maar bij tailwind moet je dan eerst alle classes gaan kopiëren vanuit het ene bestand en plakken in het andere bestand.

...

Je zou gebruik kunnen maken van PostCSS of SCSS, hiermee kan je code zoals dit schrijven:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}


Tailwind zorgt er verder wel voor dat de gebruikte CSS properties in meerdere browsers zal werken lijkt me.

Bron: https://tailwindcss.com/docs/extracting-components
Gewijzigd op 26/09/2019 10:51:48 door Marthijn Buijs
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.