Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Cist css protiv Less-a

[es] :: Web dizajn i CSS :: Cist css protiv Less-a

[ Pregleda: 2951 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

Rodja_ki
Kikinda

Član broj: 297407
Poruke: 63
*.dynamic.sbb.rs.



+4 Profil

icon Cist css protiv Less-a15.07.2014. u 09:18 - pre 118 meseci
Da li zaista pomaze koliko pricaju? Iskreno, ne vidim svrhu ovoga, pa bih vas molio da mi pojasnite malo. Znaci, znas css, uradis sve u njemu sto treba, i onda se pojavi less, sass i slicno, i sad je kao jednostavnije? Sta to? Kako to less pomaze? Pored toga, moras da imas kompajler da prebaci iz less u css i slicno, po meni ovo sve deluje komplikovanije, od kucanja css-a. Ako moze neko ko ima iskustva u ovome da mi objasni sta dobijam sa less-om i vredi li zaista?
 
Odgovor na temu

ser_nicky
BI Developer

Član broj: 307062
Poruke: 97
194.145.153.*



+32 Profil

icon Re: Cist css protiv Less-a15.07.2014. u 11:01 - pre 118 meseci
Pogledaj ovde:
http://www.webinsation.com/ben...ing-sass-over-traditional-css/

Doduše, u pitanju je sass, ali manje-više ista priča važi i za less, osim što se less kompajlira na strani klijenta (node.js).
Pozdrav
 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2247 Profil

icon Re: Cist css protiv Less-a16.07.2014. u 00:22 - pre 118 meseci
Javaskriptu, ne treba opterećivati - stilom. Takve stvari se dopremaju sažvakane na serveru direkt u memoriju klijenta sa - mnogo više prostora - za dalju manipulaciju sa klijentom. Sve to što sass i less rade, sve to može da se odradi sa bilo kojim na neki način "native-html server-side" jezikom.. spakuje, pripremi, na osnovu petlje i niza koji ima 7 ili 6 stavki.. pa onda tu gde je prelom ili tab da bude ' ' , napravi se takoreći "dinamička" kaskada na osnovu parametra iz url href vrednosti, foreach( .. ) .. if (bla, bla) .. $fill.=file_get_contents(once $array[$this]) endforeach; i onda se "ispljune" na jedan jedini -> echo preg_replace $fill .. ( načina milijardu ).. iskeširan na sledeći poziv. A istovremeno u samom .htaccess-u fontovi iskeširani na.. godinu dana. Slike na malo manje, na koliko god da treba... nebitno. I onda ostaje samo http html request. U php-u (pre nego li uopšte bilo šta stigne do pretraživača) odraditi sve što nova sass i less fashion style ideja drlja kasnije, jeste praktično neosetno, a samim tim, ultra - brzo. Kasnije, za vizuelnu (stil) manipulaciju te i velik broj efekata, od js-a vam je neophodna samo jednostavna instant zamena klasa na određeni event, fino i kulturno bez ijednog inline css stila. Oni koji hoće intezivnije da se zezaju sa client side jezicima, a znaju js ili ih strahovito interesuje, neka se bacaju na webGL i tome slično.
Ja sam ipak više za 'style.css.php + javaScript.js.php' vs ( (sass vs css) + (less vs css) )

about:networking
 
Odgovor na temu

svepomalo

Član broj: 306404
Poruke: 196



+21 Profil

icon Re: Cist css protiv Less-a16.07.2014. u 00:37 - pre 118 meseci
Interesantno objasnjenje plus_minus.
Konkretno me zanima ovo mada mozda nije za ovaj deo foruma (ako treba otvoricu temu u php forumu).

http://site.com/js?files=jquery.js,main.js,util.js
Ovo je verovatno mnogo brze nego:
<script type='text/javascript' src='http://site.com/assets/jqueru.js"></script>
<script type='text/javascript' src='http://site.com/assets/main.js"></script>
<script type='text/javascript' src='http://site.com/assets/util.js"></script>

Kako ovo uraditi u php-u a da se kesira?
Kontam ja preko petlje npr: (na brzinu napisano)
Code:

header("content-type: application/javascript");
$files = $_GET["files"];
foreach($file as $file){
 echo file_get_contest("assets/" . $file);
}


A ovo je .htacces:
[code]
<FilesMatch "\.(jpg|jpeg|png|gif|js)$">
Header set Cache-Control "max-age=990304000, public"
</FilesMatch>
[code]

Dobro, mozda sam ga preterao sa max-age ali mislim da je jasno pitanje :)

Da li je ovo sve ili treba jos nesto ili sam negde omasio?
Verujem da je isti princip i za css?
 
Odgovor na temu

plus_minus

Član broj: 289459
Poruke: 2242
*.dynamic.isp.telekom.rs.

Sajt: https://hardcoder.xyz


+2247 Profil

icon Re: Cist css protiv Less-a16.07.2014. u 02:58 - pre 118 meseci
Npr..

Zamislimo da je url request zapravo -> http://site.com/javaScript.js

A pre toga u .htaccess-u

Code:

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.+)$ /$1.php [L,QSA]

RewriteCond %{REQUEST_FILENAME}.css -f
RewriteRule ^(.+)$ /$1.css [L,QSA]

RewriteCond %{REQUEST_FILENAME}.js -f
RewriteRule ^(.+)$ /$1.js [L,QSA]

</IfModule>

# Naravno, kasnije ide expires, deflate etc ...




--------

Pozivaš ručno pisane ili generisane delove <head> request-a, nebitno je.

Code (html):


<script type="text/javascript" src="http://site.com/assets/javaScript.js"><!-- .php --></script>

 


Na prvi http request negde u toku obrade tog zahteva smestio si u neku sesiju ili gde ti je zgodno, nebitno,
ajde nek' bude sesija

$_SESSION['files'] = 'jquery.main.util';

I tu će sesiju da vidi i "maskirani .js" fajl,
koji treba da izgleda otprilike ovako..

javaScript.js.php
Code (php):


<?php namespace
{
     if(!isset($_SERVER['HTTP_REFERER'])):
     header('Content-Type:text/javascript; charset=utf-8');
     exit('/* Mices are sleeping now ..*/');
     else: define('positive', TRUE); endif;

     if(!defined('positive'))
     {
          die('/* There is no content here. */');
     }
     else
     {
          if(!isset($_SESSION)) session_start();

          $timeH = (60 * 60 * 24 * 7);

          function fileSpit()
          {
               $fileSpit=null;
               $preg1=array('!/\*.*?\*/!s','/\s+/');
               $preg2=array(' ',' ');

               $whatever = $_SESSION['files'];
               $whatever = explode('.', $whatever);

               foreach($whatever as $n=>$v)
               {
                    $needThis = __DIR__ ."/$v.js";

                    if(file_exists($needThis))
                    {
                         $fileSpit.=preg_replace( $preg1, $preg2, file_get_contents($needThis) )."\n\n";
                    }
                    else
                    {
                         $_halT__ = TRUE;
                         break;
                    }
               }

               # $_halT__  je možda totalno nepotreban deo.. nebitno..

               if(isset($_halT__) && $_halT__ )
               {
                    print('Content file is missing...');
               }
               else
               {
                    return $fileSpit;
               }
          }
         
          ob_start();

          echo fileSpit();
         
          $fileSpit=
          ob_get_clean(); # <-- komplet svi .js fajlovi u jednom stringu.

          session_write_close();

          ob_start('ob_gzhandler');
          header_remove('ETag');
          header('Pragma: public');
          header('Cache-Control: maxage='.$timeH);
          header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$timeH) . ' GMT');
          header('Content-type:text/javascript; charset=utf-8');
          header_remove('X-Powered-By');
          echo $fileSpit;
          ob_end_flush();
          exit;
     }
}

 


Dakle, princip je isti i za css, s' tim što treba izmenjati Content-type header-e ... i tu gde piše .js promeniti u .css ( $needThis = __DIR__ ."/.$v.js" )
I baš tako kako si i zamislio (kroz url parametar, umesto $_SESSION['files'], $_GET['files']) i možeš da dobiješ keširanu, dinamičnu kaskadu, da zaobiđeš ponavljanje istog request-a (ostaje samo negotiation) i da se ono što je jednom učitano, do daljnjeg čita 100% sa klijenta, gZipovano.

Url bi onda izgledao ovako. .. http://site.com/assets/style.css?files=file1.file2.file3.file4
... ili ako ti volja (možda još lepše), stanradrni index.php fajl zadužen za kaskade u određenom slobodno vidljivom direktorijumu, bez .css.php, sa css 'Content-type'.

http://site.com/assets/?files=file1.file2.file3.file4

Međutim, kada se radi o 30 kila javaskripte, pa onda još 15 kila javaskripte.. pa onda još 100 kila javaskripte.. (pa tako po još 10 puta, klasičan "džumla/WP" pristup),
ako su skripte kompatibline.. (nisu sve pisane rukama, nego neke i nogama i uz pomoć "clipboardCopyPaste" tool-ova, itd.. ) i u njima se bukvalno ništa ne pipa, nikad..
onda ovaj primer php skripte gore jeste izvanredno rešenje.

ps: nisam testirao kako konkretno taj šablon gore, radi.

[Ovu poruku je menjao plus_minus dana 16.07.2014. u 04:41 GMT+1]
about:networking
 
Odgovor na temu

Damiao

Član broj: 272354
Poruke: 13
*.dynamic.isp.telekom.rs.



+69 Profil

icon Re: Cist css protiv Less-a19.07.2014. u 23:24 - pre 117 meseci
Citat:
Rodja_ki:
Da li zaista pomaze koliko pricaju? Iskreno, ne vidim svrhu ovoga, pa bih vas molio da mi pojasnite malo. Znaci, znas css, uradis sve u njemu sto treba, i onda se pojavi less, sass i slicno, i sad je kao jednostavnije? Sta to? Kako to less pomaze? Pored toga, moras da imas kompajler da prebaci iz less u css i slicno, po meni ovo sve deluje komplikovanije, od kucanja css-a. Ako moze neko ko ima iskustva u ovome da mi objasni sta dobijam sa less-om i vredi li zaista?

Kompajler LESS-a sve radi automatski u pozadini kad ga postavis, ti samo kucas, on prepoznaje sinaksu LESS-a i kompajlira je u cist CSS. Mozes naravno da kucas i cist CSS, ako te mrzi da pravis mixine i slicne dzdza-bidze, rezultat ce uvek da bude cist CSS, koji koristis kao i obicno. Ovo, naravno, sve pod uslovom da si odabrao da se kompajliranje vrsi na tvojoj masini u toku rada, a ne na serveru. Ja ga bar tako koristim. Meni je, recimo veoma korisna opcija koju pruza ova skripta za LESS, koja automatski dodaje prefixe za browsere, pa ne moram stalno da kucam -webkit-, -moz-, -ms-...trt-mrt...
 
Odgovor na temu

[es] :: Web dizajn i CSS :: Cist css protiv Less-a

[ Pregleda: 2951 | Odgovora: 5 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.