Cloning HTML and CSS Designs
Extracting the Most Optimal CSS Rules
Pulling all relevant CSS for a node
PageRip
PageRip is only for Chrome, yet it operates solidly and possesses a range of advanced features. It also functions fully offline and automatically transitions to JSX. It’s completely free and the only downside is its method of element selection, which isn’t the most precise. On the upside, it works quite speedily. It seems to generate an optimally small CSS compared to others.
Web Design Pirate, mostly unusable
is unusable for JS heavy sites but for classic is very good.
Web Design Pirate is a cross-browser and wholly open-source extension that doesn’t do a bad job at all. It isn’t perfect, but it does significantly reduce CSS.
Ima lepu opciju da biraš iz kojih fajlova će da pokupi CSS a iz kojih neće, a tu je i “CSS Stats” where you can check how big part for original CSS was used at all. Kod klasičnih HTMl sajtova, vrlo lepo radi but on sites that are loading CSS dynamically using javascript, it fails miserably.
SnappySnippet, completly unusable
SnappySnippet only for Chrome performs oćajno iako je UI odličan i stabilan sa baš taman količinom podešavanja. A očajan je zato što literally records the size of elements and creates a style for each in a somewhat simplistic and nonsensical manner što kao posledicu ima da to izgleda identično ali da je rezultujući kod ustvari jedna supa od govana.
SnipCSS
SnipCSS has a truly repugnant UI, but the results are actually quite decent. For something better, an annual fee is required. It’s handy in that it also collects images and even fonts mentioned on that element, all of which is neatly included in a Zip archive.
CSS Used
CSS-Used is another one that works, albeit not exceptionally, and it’s quite a “fresh” extension That is still actively developed and supported. Your eye is the one that should be expected to this kind of extension. So no problems there.
Ima samo jednu opciju “Convert URL to absolute path in CSS rules” a i to je prvenstveno zbog CodePen preview and it’s possible that you should turn off this sometimes.
Transfer HTML and CSS into CodePen for preview is just one click away.
Scan CSS
Scan CSS se ispostavilo kao dosta dobra, za besplatne. Pokreće se sa Alt-S a ume da iskopira stilove za sve children i to radidosta korektno, a HTML ipak moraš da izvučeš ručno.
CSS Peeper
Iako nije extractor za CSS, CSS Peeper sam stavio ovde jer je besplatna a ima vrlo lep export nested assets, slika i fontova i slično, čak i na nivou celog dokumenta. Samo za Chrome na CSS Peeper
Takođe mi se dopalo kako su implementirani ruleri odnosno merenje domenzija elemenata.
SuperDev Pro
Ni SuperDev Pro nije extractor već inspector, ali ima Export Element i Extract Images koji je čak i besplatan, kao i image replacer, dok je Export Element u Pro verziji koja košta $49 što nije preskupo. Dalje od toga nisam analizirao.
CSS Scanner
CSS Scanner je skoro, u februaru 2023 što se vidi po Product Hunt, predstavljen po ceni od $49. Sajt je moderan ali kada je skineš sa Chrome Web Store i kad instaliraš, ama baš ništa nema ništa bez plaćanja - tako da to ne obećava a i nisam mogao ni da probam.
CSS Scan (Expensive)
CSS Scan je verovatno najozbiljna extenzija ali je vrlo skupa. Na sajtu piše da je smartest - no unuseful as it runs hundreds of real-time optimizations. U svakom slukaču, ubedljivo najviše podešavanja ima i autor je samo tome posvećen a postoji godinama, makar od 2018. Svašta je dodavano godinama CSS Scan changelog pa je vrlo ispolirana a najmodernija verzija je CSS Scan 3.0 postavljena krajem 2022.
Isti autor održava i CSS Pro | A re-imagined Devtools for web design tako da definitivno živi samo od toga.
Pošto je vrlo skupa i nema money-back, nisam smeo da je kupim kako bi probao.
Windy, CSS To Tailwind (paid)
Windy is a browser extension, available both on Chrome and Firefox, that allows you to copy elements from any website as a Tailwind CSS component. Same company sells bundle with DevTools for Tailwind CSS, and it is not extremely expensive. Ovo je izgleda vrlo exclusive tool pošto nema stvarne alternative. Kupio sam i dosta korektno radi, iako sam odmah pronašao mali bug, što ne obećava.
CSS To Tailwind (free but barely working)
CSS To Tailwind Chrome extenszija je prava alternativa. i ustvari je bila highly advanced extension, performing the same function as Windy. It’s incredibly slow while processing, and I only managed to get it working after a considerable struggle as it wasn’t functioning. Thus, you’ll need to do a custom install for a while until it updates.
I’ve posted my fix for the CSS To Tailwind extension on a Gist at this URL here cvladan/ css-to-tailwind-2.0.0.0-fixed.zip.
Dobro je da sam je snimio ako nestane sa Chrome store-a
DivMagic (open-source)
DivMagic | Effortless Tailwind CSS Conversion | Copy & Convert Web Elements and Code with Ease je cross-browser što je već super, a uz to je open-source sa potpšuno novim repo DivMagicCom/DivMagic: Copy Elements from any website as Tailwind CSS components iz May 14, 2023 godine. Skini je sa Chrome Web Store odnosno sa DivMagic i uporedi sa Windy.
Simply put, they are not comparable because DivMagic is the most basic, but let’s wait and see how it will turn out.
CSS Steal
CSS Steal na repo GitHub - krasimir/css-steal: Given DOM element returns styles applied to it and all its children., ali ne radi nikome i matora je.
Converting CSS to SCSS
This one is fairly easy.
CSS to SCSS
Here is the Best CSS to SCSS Converter. Uopšte nije svejedno. Taj gore je sranje. Najbolje mi radio: css2sass | Convert CSS to SASS / SCSS code
Converting CSS to Tailwind
-
Transform.tools CSS to TailwindCSS sa repo miklosme/css-to-tailwind je dosta solidan i podržava arbitrary properties, a ako se isključe onda lepo prezentira klasičan CSS rule, dakle nije loš, i ipak je najbolji od “ekipe”
-
Chengdu Css To Tailwind na repo hymhub/css-to-tailwind: Convert CSS code to Tailwindcss syntax in real time mi se lično sviđa i korektan je sa rezultatima a podržava i JIT arbitrary properties.
-
Steven Jin TailwindCSS Converter na repo stevezease/tailwind-converter: Website for converting css to tailwind na lep način prikaže šta ne može da konvertuje i iako ne radi arbitrary properties meni je nekako “clean” i solidan.
-
Lembdadev CSS to TailwindCSS Converter is unusable, but for record’s sake, here it is.
-
Devzstudio Tailwind To CSS at repo Devzstudio/tailwind_to_css: Convert tailwind class to css pokušava nešto da radi ali vrlo loše jer mu ništa ne uspeva.
-
bendigiorgio/css-to-tailwind-converter sam navezo samo zato što ima kod u kome je sve taksativno pobrojano, nema tu neke “pameti” a nisam ga ni probao.
Converting from Tailwind CSS back to CSS
Vanilla Breeze
thespicyweb/vanilla_breeze is a tool that converts Tailwind CSS to Semantic CSS and is hosted online here Vanilla Breeze.
CSS to Inline CSS
Iako ovo izgleda kao vrlo jednostavno, što i jeste u odnosu na ostale taskove, ipak nije banalno. A evo i zašto.
CSS Inliner
Naprimer, fontove ne možeš inline a ne možeš ni media queries jer ni jedan ni drugi ne mogu da uđu i inline. Oba mogu da inline u Tailwind pa je i to njegova prednost.
Iako, fontove slobodno mogu da izignorišem jer je to definicija fontova a ne nešto što ima veze sa elementima na strani.
Inače, odličan CSS inliner je Juice CSS Inliner Online i ne radi loše jer indirektno izvuče par stvari napolje - fontove i media queries jer oni ostanu napolju, ali je problem je što prikaz posle ipak nije identičan
Automattic/juice: Juice inlines CSS stylesheets into your HTML source. Vid ko je autor za to, a Tailwind obe stvari ustvari rešava uspešno.
Fore i fazoni:
Odvojeno skidaš za desktop i za mobilni
Kako detektujem šta je externo ostalo da “vuče” odnosno koje slike? Skinem Zip verziju, reimenujem baš u Zip i onda samo iz arhive gledam, jer onda ne prikazuje ama baš ništa sa diska. Znači sve što vidim - to je online. Savršeno!
Extract Data URI embedded into HTML
It is Base64 encoded or URL-encoded
Savršeno objašnjeno šta je Data URL i tehnički kakav je format. Teoretski bi trebalo da postoji jednostavan Regex koji ujedno radi i Base64 a i URL encoding. Npr: php - Regex to extract multiple base64 encoded image from string - Stack Overflow
Base64 Encoding
base64 encoded string can (not always) have an ‘=’ sign at the end, multiple. It servers just for padding because Base64 encoding takes each three bytes (a character=1 byte) and represents them as four printable characters in the ASCII standard. Znači, base64 je uvek za jednu trećinu veći od UTF8. You will not have an = sign if your string has a multiple of 3 characters Source: encoding - Why does a base64 encoded string have an = sign at the end - Stack Overflow
Ovaj baš i nije se preterano potrudio: https://github.com/ragingwind/data-uri-regex
URL Encoding
URL Encoding | Google Maps Platform | Google for Developers
TOOOOO! https://github.com/ivopisarovic/embedded-images-extractor ali ne radi dobro baš…
još lakše: https://selim13.github.io/datauri-extractor-app/ i ovaj sam generalno unapređivao jer je jednostavan
unembed - to je tool koji extractuje inline images
Remove embedded image data from HTML with BeautifulSoup https://stackoverflow.com/questions/70878701/remove-embedded-image-data-from-html-with-beautifulsoup
Može i kodom, ali može i neki editor koji kapira copy-paste, pa iz njega normalno sniimti.
Finally, years later, I’ve written a script to correctly extract all images from an SVG file, using a proper XML library to parse the SVG code.
https://github.com/denilsonsa/small_scripts/blob/master/extract_embedded_images_from_svg.py https://www.mudbath.com.au/insight/how-to-extract-base64-images-from-an-exported-svg/
Remove embedded image data from HTML Base64 Image decoder base64 image extractor datauri extractor
https://jaredwinick.github.io/base64-image-viewer/?ref=tiny-helpers
email CID https://hpop.sourceforge.net/exampleEmbeddedImage.php
Čim ima malo više, u CSS je jednostavno predugačko! Zato mora Tailwind. Inače, Windi skroz skine custom classes, ali to je i logično. Čak može tailwind na ulazu pa zatim on da prebaci u “ne-tailwind”
Ne vredi, ne ume da extractuje custom style a da ne dire tailwind.
I found a great resource to develop an extension if I want to:
Jebiote!!!
javascript - Find all CSS rules that apply to an element - Stack Overflow
[brothercake] CSSUtilities ali možeš da iskopaš sa sajta? napisao “ozbiljan igrač” - https://www.brothercake.com/site/portfolio/books/
[brothercake] CSSUtilities Developer’s Guide - Functions Reference https://llamalab.com/js/selector/ imaš na mom githubu kao gist od nekog lika https://www.brothercake.com/scripting/cssutilities-demo.js https://www.brothercake.com/scripting/cssutilities-init.js Updated Selector.js and CSSUtilities to work in latest Chrome (v85)
https://www.google.com/search?q=js+determine+list+of+css+rules+that+apply+to+the+element&start=10
Ima ludilo stvari još: [brothercake] Dust-Me Selectors [brothercake] CodeBurner
Kako iskopati staru ekstenziju? https://github.com/JustOff/ca-archive