Reactie plaatsen 
 
Waardering:
  • 0 stemmen - gemiddelde waardering is 0
  • 1
  • 2
  • 3
  • 4
  • 5
Zen Coding
Auteur Bericht
Matthijn Offline
Schnabbel
*****

Berichten: 4.956
Lid sinds: 04-2006
Reputatie: 47
Bericht: #1
Zen Coding
Voor de mensen die bekend zijn met CSS selectors, in uiteraard CSS en bijvoorbeeld jQuery.

Zou het niet fijn zijn als je dmv de CSS selectors je html kunt schrijven?

Dit:

Code:
div#menu>ul>li.classname*5>a

Zou bijvoorbeeld dit kunnen opleveren:

Code:
<div id="menu">
    <ul>
        <li class="classname"><a href=""></a></li>
        <li class="classname"><a href=""></a></li>
        <li class="classname"><a href=""></a></li>
        <li class="classname"><a href=""></a></li>
        <li class="classname"><a href=""></a></li>
    </ul>
</div>

Dat kan nu, een aatal mensen hebben voor een scala aan editor seen plugin gemaakt zen coding. Bekijk het filmpje maar eens, en de pagina.

En zie hoeveel tijd het je wel niet kan besparen, immers die ene regel is 10x sneller getyped (wanneer je je een beetje thuis voelt in css selectors) dan elke keer zelf de html typen (zelfs met code completion!)

Ik dacht, dat kan ik jullie niet onthouden.

Heb het zelf nu even op Espresso geinstaleerd, en het is wel even wennen, maar als je het door hebt zal het zeker wel tijd besparen.

Het heeft zelfs wrapping support, zodat je bijvoorbeeld dit:

Code:
About Us
Products
News
Blog
Contact Up

In eenk enkele regel om kan toveren in:

Code:
<div id="header">
   <ul id="navigation">
      <li class="item1"><a href=""><span>About Us</span></a></li>
      <li class="item2"><a href=""><span>Products</span></a></li>
      <li class="item3"><a href=""><span>News</span></a></li>
      <li class="item4"><a href=""><span>Blog</span></a></li>
      <li class="item5"><a href=""><span>Contact Up</span></a></li>
   </ul>
</div>

dmv

Code:
div#header>ul#navigation>li.item$*>a>span

Hier een lijstje met 'html' tags die hij kan bakken. En die kan je allemaal door de CSS selectors gebruiken.

Er is zelfs support voor bijvoorbeeld conditional comments iets als dit:

Code:
cc:ie6>link:css

Levert dus de volgende code op:

Code:
    <!--[if lte IE 6]>
        <link rel="stylesheet" type="text/css" href="style.css" media="all" />
    <![endif]-->

Nou, daar is bijna niet tegen te typen of wel, ook nog een voordeel, je cursor spring in bovenstaande voorbeeld meteen naar de 'href' aangezien de kans het grootste is dat je dat aan wilt passen. Ook moet je sneller door de code kunnen springen naar de verschillende tags, maar hoe dat werkt ben ik nog niet helemaal achter.

Editz:

Wanneer de code is gegenereerd kan je met tab gewoon langs de juiste tabs wandelen, nice! Enkel jammer dat shift-tab dan niet werkt om naar de vorige te springen.

Downloadlink voor diverse editors: Google Code

[Afbeelding: signature.php]
(Dit bericht is het laatst bewerkt op 21-11-2009 om 23:30:21 door Matthijn.)
21-11-2009 23:06:08
De website van deze gebruiker bezoeken Alle berichten van deze gebruiker zoeken Reageren op dit bericht
Cuve Afwezig
Netlog Web Developer
*****

Berichten: 5.377
Lid sinds: 04-2006
Reputatie: 151
Bericht: #2
RE: Zen Coding
Zag hem daarnet ook staan in mn google reader. Looks nice, eens proberen!

21-11-2009 23:16:18
De website van deze gebruiker bezoeken Alle berichten van deze gebruiker zoeken Reageren op dit bericht
Matthijn Offline
Schnabbel
*****

Berichten: 4.956
Lid sinds: 04-2006
Reputatie: 47
Bericht: #3
RE: Zen Coding
Alleen Cuve is de enige die het nice lijkt? Kan het me haast niet voorstellen :P

[Afbeelding: signature.php]
23-11-2009 11:11:15
De website van deze gebruiker bezoeken Alle berichten van deze gebruiker zoeken Reageren op dit bericht
Jasper Online
Ep2 Admin
******

Berichten: 15.056
Lid sinds: 04-2006
Reputatie: 223
Bericht: #4
RE: Zen Coding
ja, leuk. ben net zo snel met uitschrijven denk ik. 90% van mijn HTML komt toch uit PHP loops en dergelijke.

Om de zeven minuten denkt de vrouw dat de man alleen maar aan seks denkt.
23-11-2009 11:56:03
De website van deze gebruiker bezoeken Alle berichten van deze gebruiker zoeken Reageren op dit bericht
Ikke Offline
De enige echte
******

Berichten: 3.123
Lid sinds: 04-2006
Reputatie: 67
Bericht: #5
RE: Zen Coding
Heb er nog geen tijd voor gehad om naar te kijken ;)

- OOP: Make simple things complex to make complex things simple
- Op deze planeet is stompzinnigheid nu eenmaal overvloediger dan zuurstof.
- The most constant factor of software is change
23-11-2009 12:05:02
Alle berichten van deze gebruiker zoeken Reageren op dit bericht
Matthijn Offline
Schnabbel
*****

Berichten: 4.956
Lid sinds: 04-2006
Reputatie: 47
Bericht: #6
RE: Zen Coding
(23-11-2009 11:56:03)Jasper schreef:  ja, leuk. ben net zo snel met uitschrijven denk ik. 90% van mijn HTML komt toch uit PHP loops en dergelijke.

Hier is het altijd ontwerp maken --> pagina's volledig omzetten naar html, css --> integreren in een systeem. Dus met punt twee is hier voor mij zeker wel winst te halen dacht ik.

[Afbeelding: signature.php]
23-11-2009 15:42:59
De website van deze gebruiker bezoeken Alle berichten van deze gebruiker zoeken Reageren op dit bericht
Marco Offline
Senior Member
****

Berichten: 614
Lid sinds: 04-2007
Reputatie: 38
Bericht: #7
RE: Zen Coding
gebruik daar hier meestal toch php loops voor.
23-11-2009 20:34:09
Alle berichten van deze gebruiker zoeken Reageren op dit bericht
Matthijn Offline
Schnabbel
*****

Berichten: 4.956
Lid sinds: 04-2006
Reputatie: 47
Bericht: #8
RE: Zen Coding
Voor Zen Coding?

Volgens mij begrijpen sommigen het idee er niet geheel van :P

[Afbeelding: signature.php]
(Dit bericht is het laatst bewerkt op 23-11-2009 om 20:57:40 door Matthijn.)
23-11-2009 20:57:32
De website van deze gebruiker bezoeken Alle berichten van deze gebruiker zoeken Reageren op dit bericht
atimmer Offline
Kwaliteit = Apple + Google
*****

Berichten: 1.240
Lid sinds: 05-2008
Reputatie: 32
Bericht: #9
RE: Zen Coding
(23-11-2009 20:57:32)Matthijn schreef:  Volgens mij begrijpen sommigen het idee er niet geheel van :P
Ik snap het wel, als ik alleen met HTML + CSS bezig ben zou het handig kunnen zijn. Echter ben ik heel vaak met PHP bezig.

[/:D]
Bloooooooging
23-11-2009 21:18:12
De website van deze gebruiker bezoeken Alle berichten van deze gebruiker zoeken Reageren op dit bericht
Matthijn Offline
Schnabbel
*****

Berichten: 4.956
Lid sinds: 04-2006
Reputatie: 47
Bericht: #10
RE: Zen Coding
Ja ik ook, maar jullie doen dus.

Ontwerp in PSD --> Direct integreren naar systeemx?

Kan natuurlijk, had verwacht dat meer mensen de stap PSD --> HTML --> In systeemx deden.

[Afbeelding: signature.php]
23-11-2009 23:05:20
De website van deze gebruiker bezoeken Alle berichten van deze gebruiker zoeken Reageren op dit bericht
MichielV Offline
ep2'er
****

Berichten: 2.322
Lid sinds: 07-2006
Reputatie: 110
Bericht: #11
RE: Zen Coding
Waarschijnlijk dat er hier wel wat mensen (devvers) de stap "PSD" overslaan. (zoals veel designers de stap "integratie met systeemX" achterwege laten)
Vergeet ook niet dat heel wat devvers hier gewoon eigen (hobby-/amateur-/niet-commerciƫle-) projecten maken, waardoor de stap "PSD" vaak niet echt noodzakelijk is.

Persoonlijk zie ik het nut er wel van in, maar of het een enorme tijdswinst geeft weet ik niet goed. Voor zeer "verbose" zaken zoals de conditional commented stylesheets zal het waarschijnlijk wel sneller werken, maar dit voer je meestal maar 1 keer in, binnen je html document. Bij een IDE die automatisch je tags afsluit, zal je voor je aangebrachte list-voorbeeld niet zo heel veel meer moeten typen (misschien wel wat meer copy-paste werk voor die list-items, maar dat scheelt hoogstens 5 secondjes).
Persoonlijk (misschien doordat ik al redelijk lang niets web-achtigs meer heb gemaakt) zou ik het dan ook niet direct gebruiken. Door zelf html in te voeren heb ik 100% controle, weet ik hoe en waar alles staat en doordenk ik grondig de html structuur.
Moest ik echter snel een mock-up moeten maken van hoe een html structuur er uit zou moeten komen te zien (wat ik nog nooit echt snel heb moeten doen), dan zou ik eventueel wel deze manier van werken overwegen.

css selectors zijn uiteraard wel een heerlijkheid om bepaalde elementen (uiteraard binnen css, maar zeker ook binnen javascript) te selecteren, maar om er nu je html mee op te stellen...
23-11-2009 23:53:52
Alle berichten van deze gebruiker zoeken Reageren op dit bericht
Matthijn Offline
Schnabbel
*****

Berichten: 4.956
Lid sinds: 04-2006
Reputatie: 47
Bericht: #12
RE: Zen Coding
Mja, als je in je hoofd denkt. Ik heb een container, header, en content (met een links en rechts vlak) nodig.

Waarom zou je dan niet dit typen:

div#container>div#header>div#content>div#left+div#right

En dan zet hij het automatisch om in het 'basis' skelet. Exact zoals je het zelf zou uittypen. Je hebt niet echt 'minder' controle over de opbouw van het document.

In bovenstaand geval heb je dus al weer wat tijd korter gemaakt. Netzoals een menu, waar je ook wat tijd op winst kan maken e.d, en allemaal kleine tijdswinsten samen, maakt een grotere tijdswinst :)

[Afbeelding: signature.php]
24-11-2009 10:41:58
De website van deze gebruiker bezoeken Alle berichten van deze gebruiker zoeken Reageren op dit bericht
Reactie plaatsen 


Ga naar locatie:


Contact opnemen | Ep2 | Naar boven | Naar inhoud | Archiefmodus | RSS-syndicatie