Finally, CSS In JavaScript! Meet CSSX

1 Like

Nu se mai pune CSS si JS in HTML ca acum sa incepem sa punem HTML si CSS in JS?

6 Likes

Au furat (copiat) faza (idea) cu html si css in js, de la php, unde poti inchide dagul php si introduce html, css, sau ce fel de document ai nevoie sa returnezi…

</php
    // some
    $code = "here";
?>
<html><head><style>
    * {padding: 0; margin: 0; border: none;}
    body { background-color: rgba(0,0,0,0); }
</style></head></html>
<?php
    $other += $code;
?>
1 Like

Deja o dăm din stupid (JSX) în absurd (CSSX)… :frowning:

7 Likes

Sunt curios ce va urma. Sa refaca CSS-ul de la 0? Defapt, asta nu ar fi chiar asa o idee rea… cu timpul, a devenit din ce in ce mai… plin de chestii nu chiar atat de utile si care nu sunt randate lafel pe toate browserele… Flexbox-ul, cel putin, trebuie sa ramana…

De exemplu?

E vina specificațiilor că vendorii nu implementează cum trebuie sau că utilizatorii nu actualizează browserele.

1 Like

Imi cer scuze, m-am exprimat gresit. Am vrut sa spun ca sunt unele chestii care nu au fost implementate "cum trebuie" (stiu, inca este destul de vag). Spre exemplu, text-align: center; si vertical-align: center;. Sunt folosite pentru aliniere, insa eficienta ultimului este indoielnica (din vina vendorilor, presupun, dar posibil sa gresesc) si ar fi fost mai scurte si mai clare denumirile align (compus din urmatoarele doua, putand primi doua valori separate prin spatiu, una pentru H, alta pentru W), alignH, alignW (sau alignX si alignY, dar am mers pe H si W din cauza existentei vh si vw ca unitate de sizing, in css). Insa trecerea la notatia aceasta nu se poate face din caza de (1) background compatibility si (2) vendor lock-out (adica este posibil ca vendorii sa renunte la implementarea acestui (posibil) standard, din cauza de continut duplicat). In exemplul dat, “text-” si “vertical-” sunt in plus si incurca utilizatorii neexperimentati.

Cat despre vendori, macar in privinta flexbox-ului s-au inteles… cu exceptia numelui… dar declararea de 3 ori a unui singur element este mai eficienta decat declararea de 3 ori a 16 elemente (spre exemplu).
######Gata, am terminat de editat… 

1 Like

Am impresia că faci o mare confuzie. vertical-align nu are aceeași funcție ca align-items din flexbox. Cel din urmă este folosit pentru alinierea copiilor relativ la părinte, pe când cel dintâi e folosit pentru alinierea copiilor de tip inline și inline-block unul față de celălalt [1]. Poate articolul ăsta te va ajuta să înțelegi mai bine.


[1] Un caz special sunt celulele tabelelor, care folosesc vertical-align pentru alinierea pe verticală a conținutului.

2 Likes

Sunt multi băeți care se dau pe Twitter și pe blog-uri developeri cu experiența, și care au găsit iluminarea in React.
Totuși înțeleg ca orice tehnologie noua e o oportunitate de afirmare personala, de făcut training-uri, sa fii invitat la conferințe, target-ul final fiind creșterea hourly rate-ului.

Am citit cum ca expresiile DSL care le puneam in HTML (Angular, Knockout, etc) sunt o MARE GREȘEALA :smiley:
Dar dar daca pui CSS si HTML in JS e OK! facepalm
Am mai citit și tâmpenii de genul ca two-way binding poate produce notificari in cascada infinite! (un individ foarte cunoscut a dezbătut asta).

Web dev-ul continua să se zbată in propriile limitări.
Se merge in continuare pe ideea ca e OK dacă suportul nativ rămâne minimal deși complexitatea aplicațiilor web a crescut foarte mult de multa vreme (complexitatea aplicațiilor web depinde de viteza de internet și puterea de procesare a device-urilor mobile, și ambele au avut o creștere foarte mare in ultimii 10 ani).

Intre timp, industria care scrie zilnic cod ca sa-și câștige pâinea, se chinuie in continuare sa scoată tot felul de framework-uri care s-au dovedit a nu avea viata lunga din diverse motive.
Chestii gen web components sunt încă cutting edge, concepte care in alte tehnologii exista deja de peste 10-15 ani. Faptul ca nu poți izola CSS-ul unei componente decât mimând prin reguli de denumire in class=‘my-component-name-bla-bla’, e trist.

Cat o sa mai dureze ca sa se ajungă la concluzia evidenta ca exista o necorelare intre nevoia imensa de de a scrie aplicații web (rapid și cat mai ușor) și ce oferă web developmentul azi.
Personal mi se pare ca toti platim un technical debt imens in web dev.

Btw. Ma gandeam cum ar fi daca Facebook si-ar face propriul web-browser cu suport nativ pentru React. :smiley:
Dev-ul cu React ar deveni super tare. Asta ca sa faca lucrurile si mai fucked up, ar scinda si confuza lumea si mai mult LOL

6 Likes

Toată povestea asta mi se pare ridicol de inutilă dintr-un motiv foarte simplu: adaugă încă un layer de complexitate dezvoltării unei aplicații web.

Și, dacă se merge în ritmul ăsta, peste unul-doi ani vom vedea articole de genul „CSS Fatigue” :slight_smile:

3 Likes

@IonutBotizan Sincer sa fiu, nu am dat mare importanta vertical-align-ului (nici google-ire), fiindca nu parea sa faca ce numele indica.
Deci diferenta ar fi doar ca (1) vertical-align merge doar pe inline si inline-block… deci vertical-align este mai limitat decat align-items si functioneaza conform numelui, (2) cu exceptia celulelor tabelelor…

Total deacord! De-asta un CSS nou, rescris de la 0, nu ar fi char asa o idee rea. Pacat ca proiecte gen AXR nu au atins lumina zilei. Ma gandesc ca poate ajuta sa vina (si) cu pluginuri pentru chrome si firefox, la lansare. Dar in nici un caz nu aveau cum sa prinda avant, fara advertising serios.

Doi ani. You called it!

Dude… N-ai înțeles nimic… :confused:

Spot on!

The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.

Source.

More to read.

Plugin-uri? Adica un fel de Flash/Silverlight ? :scream: :sob:
Clar nu la genul asta de “schimbare” m-am referit.

O initiativa e Houdini, care mi se pare science fiction acum, avand in vedere cat de greu le este la web-browser vendors sa cada de acord si sa si implementeze ce au agreat.

3 Likes

Si iar vorbim despre tehnologii noi care sunt probabil inutile: de ce sa scrii CSS in JS cand poti scrie … CSS in CSS si JS in JS? Adica na, separatia asta nu e suficienta, acum trebuie sa facem codul o tocana din care sa nu mai inteleaga nimeni nimic. Si iar nu invatam nimic, suntem tot la nivelul incepator si ne intrebam care e diferenta intre Angular/React/jQuery/Sencha. Ca sa nu mai zic de diferenta intre SQLite/mySQL/mongoDB, ca atunci chiar ca ne prindem urechile in usa.

Tre sa recunosc ca da bine la CV cand folosesti cat mai multe ‘li’-uri pentru fiecare framework pe care ai pretentia ca il cunosti. In timp ce topicul cu proiecte personale … in continuare e aproape gol. E nitel trist, sincer.

Folositi ce librarii/limbaje vreti, e timpul vostru pe care il irositi …

LE:

I dabble in front end development, and every time I have to do a project, I am amazed at how incredibly bad the process is. The tools in fashion change every few months (grunt, gulp, webpack, babel,browserify). Frameworks deprecate and remove stuff every few months (looking at you react). How do full time front end devs keep up with this nonsense? We seriously need a moratorium on this crap.

https://news.ycombinator.com/item?id=11536542

2 Likes

I dabble in front end development, and every time I have to do a project, I am amazed at how incredibly bad the process is. The tools in fashion change every few months (grunt, gulp, webpack, babel,browserify). Frameworks deprecate and remove stuff every few months (looking at you react). How do full time front end devs keep up with this nonsense? We seriously need a moratorium on this crap.

https://news.ycombinator.com/item?id=11536542

Aparent, este vorba de un fel de obsfurcation, folosit pentru a nu isi pastra joburile persoanele care nu invata constant ceva nou. Sau, poate, asa isi asigura creatorii acelor frameworkuri, atat lor, cat si developerilor, un loc de munca, cu o mai mica frica de a fi dat afara.


Daca stai sa te gandesti, multe din proiecte contin abstractizari inutile, doar pentru ca “asa e la moda”, sau developerul nu stie mai bine (related: frameworks vs architecture, vendor lock-in; Deasemenea, angajatorilor nu le pasa ca nu intelegi cum functioneaza, atata timp cat pare sa functioneze corect/corespunzator).

Hahaha! “Finally, CSS In JavaScript !”. Nu stiu cine a asteptat asta :)). Daca ai nevoie de automatizare pentru CSS, foloseste LESS/SASS.

Eu sunt de parere ca era sarcastic…

2 Likes

A citit cineva comentariile la articolul original de pe smashingmagazine? Sunt dezastruase. Oricum ce e la moda acum: React, JSX, Webpack, blablabla, fac cam acelasi lucru adica combina diverse sintaxe in Javascript, unde mai pui ca majoritatea proiectelor folosesc si ES2015.

Eu unul chiar nu am inteles de ce i-au raspuns multi la modul ala, banuiesc ca daca era o librarie dezvoltata de Facebook, era mult mai bine primita.

La fel, nu inteleg de ce sa amesteci html/jsx cu cod javascript. Daca tot e sa amesteci sintaxa WebPack mi se pare ca are o modalitate interesanta, unde considera orice fisier un modul, indiferent daca e css, sass, less, stylus, handlebars, markdown etc.

Alta modalitate ar fi de exemplu templating engines, unde pana la urma se ajunge la acelasi rezultat, dar macar template-urile raman in marea lor majoritate valid html.

1 Like

This is gonna be a real piece of piss …