[HTML, CSS, JS] Frontend #38: Wrapper

quote:

Op woensdag 5 maart 2014 10:21 schreef KomtTijd... het volgende:

[..]

Volgens mij ben je dan echt veel te veel functionaliteit in je stylesheet aan het stoppen. Kun je beter je CSS door smarty halen, kun je ze tenminste écht dynamisch opbouwen.

Het wordt tijd dat CSS iets van dynamiek krijgt. Dat is waar de community al jaren tegenaan loopt te schoppen. Nu zal je dat voor een simpele html pagina niet echt nodig hebben. Maar als je bijvoorbeeld Bootstrap Themes wilt maken is het erg handig. Voorbeeldje:

Bovenstaande geneert onderstaande:

Wat maakt Smarty dan meer dynamisch dan Sass?

Daar heb je tenminste écht iets aan, ipv dat je alsnog handmatig een array met users in je CSS/Sass moet gaan zetten.

Oh en voor iedere mogelijke style een class maken en vervolgens elementen als <a class="block roundtop col-md-2 margin-3 txt-blue bg-red"> is wat mij betreft nog ranziger dan inline-styles gebruiken, dus wat je precies met die for-loops moet is me ook niet duidelijk.

[ Bericht 9% gewijzigd door KomtTijd... op 05-03-2014 10:42:20 ]

quote:

Op woensdag 5 maart 2014 10:36 schreef KomtTijd... het volgende:

[ code verwijderd ]

Daar heb je tenminste écht iets aan, ipv dat je alsnog handmatig een array met users in je CSS/Sass moet gaan zetten.

Oh en voor iedere mogelijke style een class maken en vervolgens elementen als <a class="block roundtop col-md-2 margin-3 txt-blue bg-red"> is wat mij betreft nog ranziger dan inline-styles gebruiken, dus wat je precies met die for-loops moet is me ook niet duidelijk.

Ooit met een Bootstrap theme gewerkt?
De col-md-* is alleen maar om aan te geven hoeveel kolommen breed het huidige element moet zijn. Daarmee komt dus ook de margin, padding en dergelijke mee. Er komt in een goede theme dus nergens een margin-3 of txt-blue aan te pas.

Hier word ik dus blij van Kan volgens mij met LESS en SASS beiden wel.

quote:

Op woensdag 5 maart 2014 11:16 schreef Catch22- het volgende:

[ code verwijderd ]

Hier word ik dus blij van Kan volgens mij met LESS en SASS beiden wel.

Enige plus die Sass heeft zijn de loopfuncties. Verder kan je met Sass ook nog zonder brackets werken zoals in Python. Maar verder is het praktisch hetzelfde als Less.

Zolang je maar geen Stylus gebruikt. Die kan je zo ranzig maken.

quote:

Op woensdag 5 maart 2014 11:13 schreef Maringo het volgende:

[..]

Ooit met een Bootstrap theme gewerkt?

Jup. Vreselijk.

quote:

De col-md-* is alleen maar om aan te geven hoeveel kolommen breed het huidige element moet zijn. Daarmee komt dus ook de margin, padding en dergelijke mee. Er komt in een goede theme dus nergens een margin-3 of txt-blue aan te pas.

Kortom, het nut is dus beperkt Je zult nooit 100 kolombreedtes in één CSS hebben.

Ik vind het voorbeeld van Catch22- dan beter.

quote:

Op dinsdag 4 maart 2014 22:34 schreef Crutch het volgende:

[..]

Mixins en nested selectors thats why!

Haha, ja ik bedoelde tegenover SASS.

quote:

Op woensdag 5 maart 2014 11:24 schreef KomtTijd... het volgende:

[..]

Jup. Vreselijk.

Dan kan ik je helaas niet verder helpen.

Ik vind het geweldig om te gebruiken in webapps waar de functionaliteit belangrijker is dan het design. Met Bootstrap heb je makkelijk en snel een goede en overzichtelijke layout. Maar goed, verder gebruik ik het ook niet. Websites krijgen nog steeds een custommade layout met Less erin.

quote:

Op woensdag 5 maart 2014 19:36 schreef robin007bond het volgende:

[..]

Thanks! Nee, niet gedaan. Bedankt.

Graag gedaan! Erg goed imho en nuttig voor iedereen die écht iets van JS wil leren.

Ik vind bootstrap wel bazig hoor. Scheelt me veel tijd

quote:

Op woensdag 5 maart 2014 19:50 schreef Catch22- het volgende:
Ik vind bootstrap wel bazig hoor. Scheelt me veel tijd

Ik vind het een beetje als seks met een dronken vrouw. Makkelijk en snel, maar achteraf voel je je alleen maar smerig.

quote:

Op woensdag 5 maart 2014 20:19 schreef KomtTijd... het volgende:

[..]

Ik vind het een beetje als seks met een dronken vrouw. Makkelijk en snel, maar achteraf voel je je alleen maar smerig.

Ik vind boilerplates en frameworks wel handig. Als ze een beetje fatsoenlijk in elkaar zitten zie je er niet meer vanaf dat je een boilerplate hebt gebruikt.

quote:

Op woensdag 5 maart 2014 11:50 schreef boem-dikkie het volgende:

[..]

Haha, ja ik bedoelde tegenover SASS.

Dan liever SASS

quote:

Op woensdag 5 maart 2014 20:19 schreef KomtTijd... het volgende:

[..]

Ik vind het een beetje als seks met een dronken vrouw. Makkelijk en snel, maar achteraf voel je je alleen maar smerig.

het bespaart mij domme tijd met simpele taken die ik kan besteden aan dingen die er toe doen.

quote:

Op woensdag 5 maart 2014 20:19 schreef KomtTijd... het volgende:

[..]

Ik vind het een beetje als seks met een dronken vrouw. Makkelijk en snel, maar achteraf voel je je alleen maar smerig.

Dit. Ik gebruik Bootstrap wel maar niet met volle overtuiging.

quote:

Op woensdag 5 maart 2014 22:27 schreef picodealion het volgende:

[..]

Dit. Ik gebruik Bootstrap wel maar niet met volle overtuiging.

Dat zeg ik. Net als dronken vrouwen. .

O'Reilly Atlas: The new learning environment from O’Reilly
Volledig te lezen boeken, o.a.:

JavaScript Cookbook
• Create interactive web and desktop applications
• Work with JavaScript objects, such as String, Array, Number, and Math
• Use JavaScript with Scalable Vector Graphics (SVG) and the canvas element
• Store data in various ways, from the simple to the complex
• Program the new HTML5 audio and video elements
• Implement concurrent programming with Web Workers
• Use and create jQuery plug-ins
• Use ARIA and JavaScript to create fully accessible rich internet applications

Programming JavaScript Applications
• AMD
• Asynchronous Operations, Callbacks, Promises and Deferreds
• Code Quality
• Function Polymorphism
• Function Scope, Hoisting and Closures
• Functional Programming and Stateless Functions
• Immediately Invoked Function Expressions
• Interfaces
• JavaScript Style Guide
• Lambdas
• Method Chaining and Fluent APIs
• Method Context
• Named Parameters
• Node Modules
• Object Factories
• Partial Application and Currying
• Plug-ins
• Principles of Modularity
• Prototypal Inheritance, Prototype Cloning and the Flyweight Pattern
• The Module Pattern
• Unit Testing

HTML5 Canvas
The second edition of this popular book gets you started with HTML5 Canvas.
Learn how to draw, render text, manipulate images, and create animation—all in the course of building several interactive web games throughout the book.

This online version of HTML5 Canvas includes 53 interactive examples and exercises. In Chapter 10, you’ll create a canvas version of an arcade classic, Retro Blaster, shown below. Move your ship with the mouse or your finger, and shoot the aliens traveling across the screen.

Node: Up and Running

[ Bericht 0% gewijzigd door Aether op 06-03-2014 20:56:43 ]

Ik heb even niks te doen op mijn werk (tussen twee klussen in) dus ik ben me maar eens gaan verdiepen in wat van die hippe nieuwe tools waar ik nog niks van wist: grunt en bower, en dus uiteraard ook node.js (alleen voor npm eigenlijk).

Nu ik het een beetje begin te snappen zie ik het nut er wel van in, maar wat een gedoe zeg om dat allemaal draaiend te krijgen. Mensen hier die ervaring met die tools en met Yeoman (volgende in het lijstje) hebben? Nog tips/links qua tutorials, use cases etc?

Ik vrees dat ik om echt goed oeferning hierin te krijgen maar gewoon een paar van mijn oude projectjes om moet zetten om hier gebruik van te maken. Dan heb ik alle belangrijke dingen tenminste een aantal keer gedaan en blijft het misschien wat beter hangen.

quote:

Op donderdag 6 maart 2014 09:29 schreef Aether het volgende:
O'Reilly Atlas: The new learning environment from O’Reilly
Volledig te lezen boeken, o.a.:

[ afbeelding ]JavaScript Cookbook
• Create interactive web and desktop applications
• Work with JavaScript objects, such as String, Array, Number, and Math
• Use JavaScript with Scalable Vector Graphics (SVG) and the canvas element
• Store data in various ways, from the simple to the complex
• Program the new HTML5 audio and video elements
• Implement concurrent programming with Web Workers
• Use and create jQuery plug-ins
• Use ARIA and JavaScript to create fully accessible rich internet applications

[ afbeelding ]Programming JavaScript Applications
• AMD
• Asynchronous Operations, Callbacks, Promises and Deferreds
• Code Quality
• Function Polymorphism
• Function Scope, Hoisting and Closures
• Functional Programming and Stateless Functions
• Immediately Invoked Function Expressions
• Interfaces
• JavaScript Style Guide
• Lambdas
• Method Chaining and Fluent APIs
• Method Context
• Named Parameters
• Node Modules
• Object Factories
• Partial Application and Currying
• Plug-ins
• Principles of Modularity
• Prototypal Inheritance, Prototype Cloning and the Flyweight Pattern
• The Module Pattern
• Unit Testing

[ afbeelding ]HTML5 Canvas
The second edition of this popular book gets you started with HTML5 Canvas.
Learn how to draw, render text, manipulate images, and create animation—all in the course of building several interactive web games throughout the book.

This online version of HTML5 Canvas includes 53 interactive examples and exercises. In Chapter 10, you’ll create a canvas version of an arcade classic, Retro Blaster, shown below. Move your ship with the mouse or your finger, and shoot the aliens traveling across the screen.

[ afbeelding ]Node: Up and Running

Oeh, ook interessant dit. Ik heb nog een boel te leren. Je moet wel je floats even clearen .

quote:

Op donderdag 6 maart 2014 20:03 schreef picodealion het volgende:
maar wat een gedoe zeg om dat allemaal draaiend te krijgen

Niet meer dan een simpel commando op de command-line toch?


Veel meer stelt het op de meeste besturingssystemen niet voor.