Lehet-e túl sok ingyenes eszköz a webes tervezési folyamat gyorsítására / korszerűsítésére? Természetesen nem, mikor az új technológiák úgy szaporodnak, mint a gomba. A webes fejlesztők mindennap találnak valami érdekeset és eredetit. De időbe telik a megfelelő tartalom megtalálása.
Időt és energiát takaríthatsz meg az alkotáshoz. E blogbejegyzés szerzője már felfedezett 137 ingyenes fejlesztőeszközt és tervezési forrást, amelyek érdekelhetik a lelkes webes tervezőket és fejlesztőket. Lefogadom, hogy az ingyenes webes tervezési eszközök valóban le fogják egyszerűsíteni a munkádat, a legjobb webfejlesztési eszközök kellemes meglepetést fog okozni, néhány pedig naprakészen fog tartani.
Az ebben a bejegyzésben szereplő összes eszköz, cikk, oktatóanyag, bővítmény, tipp és trükk nem fog egy forintodba se kerülni. Csapatunk arra törekszik, hogy pénzt takarítson meg neked, így az első fordulóban ingyenes anyagokat gyűjtöttünk össze (természetesen nagy odafigyeléssel). Ha valamilyen eszköz nem teljesen ingyenes, akkor mindenképpen ingyenes próbaidőszak jár hozzá. Ez alatt az idő alatt képes leszel tetszésed szerint csűrni-csavarni, tanulmányozni, amíg rá nem jössz, hogy valóban megéri-e a pénzét. Néhány termék ingyenes és fizetős terveket tartalmaz, amelyek lehetővé teszik, hogy megismerkedj az innovációval, anélkül, hogy elővennéd a pénztárcád.
A bejegyzés angol verziója itt tekinthető meg: New Free Web Design Tools & Resources Shortcut. Design is Easy if You Do it Smart!
Ez az összefoglaló a következő szakaszokat tartalmazza:
- Webdizájn eszközök
- Néhány freebie Sketch és Machez
- UI / UX + hasznos olvasás
- Kódolás és webfejlesztési eszközök
- Webfejlesztőknek kötelező
- CSS
- JavaScript
- ES6
- Bővítmények
- Játssz és tanulj meg kódolni
Webdizájn eszközök
- Macaw - egy webdizájn eszköz, amely lehetővé teszi a kód írásának abbahagyását és rajzolásának megkezdését. A Macaw ugyanazt a rugalmasságot nyújtja, mint a kedvenc képszerkesztőd, de ezenkívül szemantikus HTML-t és a rendkívül tömör CSS-t is ír.
- Gravit - A Gravit egy professzionális webalapú dizájn eszköz a tervezők számára. Könnyedén létrehozhatsz gyönyörű logókat, névjegykártyákat, weboldalakat, szórólapokat és közösségi média borítókat.
- Lucidpress - Lenyűgöző vizuális tartalom létrehozása és megosztása: brosúrák, szórólapok, hírlevelek, jelentések, digitális kiadványok, online szórólapok, digitális magazinok és egyebek. Ez kiküszöböli a hagyományos elrendezés és design szoftver tanulási görbéjét, így mind az új, mind a tapasztalt tervezők otthonosan érezhetik magukat.
- Sparkle - Vektoros rajzeszköz, amely végtelen lehetőségeket biztosít az önkifejezéshez. A Sparkle nem zár merev sablonok keretei közé, az elrendezés szabad formában van. Az eszköz fizetett, de ingyenes próbaverzióval rendelkezik.
- LogoGala - A tervezők bemutathatják egy galériában munkájukat vagy inspirációt keresve böngészhetnek a galériában.
- Fabricator - Szervezd meg a dizájn rendszeredet a kívánt módon. Hozz létre egy stílus útmutatót az eszköztár kódodból. Írj dokumentációt a markdown-ban, hogy az eszköztár könnyen használható legyen a többi fejlesztő számára. Prototípus gyorsan.
- Uilang - Az Uilang kiváló egyéni felhasználói felület összetevők készítéséhez, hozzáadva némi interaktivitást a webhelyedhez, prototípusok építéséhez és így tovább. Nem igényel programozási tapasztalatot.
- Anijs - Egy könyvtár webdizájn készségeid fejlesztésére kódolás nélkül. Jobb integrációt biztosít a kóderek és a tervezők között, könnyű használni, gyors, jól működik iPaden, iPhone-n, Androidon és a modern böngészőkön.
- ColorFavs - Ez az a hely, amely megkönnyíti az új színek és paletták létrehozását és felfedezését minden projektedhez.
- Froont - Hozz létre egyedül reszponzív oldalakat fejlesztő bevonása nélkül. A FROONT-tal létrehozott minden oldal egy könnyen létrehozható és gyorsan betöltődő statikus oldal.
- STATNUT - A STATNUT az összes webstatisztikád központi helyszíne. Az alkalmazás szép és színes.
- Designfeed - Csak mondd meg a Designfeednek, hogy mit akarsz, az pedig automatikusan létrehoz egy végtelen számú dizájn variációt, melyből kedvedre választhatsz. Az eszköz automatikusan létrehozza dizájnod tökéletesen méretezett verzióit minden közösségi média platformon való megjelenéshez.
- Bonsai - Fedezd fel a szabadúszók díjazását a Bonsai-jal. Segít a top 10.000 + szabadúszó időben történő kifizetésében. A regisztrációkor 5 ingyenes számlát kapsz.
- The Pattern Library - Az elképesztő Pattern Library egy olyan folyamatos projekt, amely egyet jelent a legtehetségesebb tervezők által megosztott mintákkal, hogy te azokat szabadon felhasználhasd dizájnjaidhoz. A minták gyűjteménye és minősége a csúcsok csúcsa.
- Write a Book - Szeretnéd megosztani tudásodat egy könyvben vagy terveznél egy könyvet harmadik felek számára? Ez a gyönyörű gyártási eszköz gondoskodik a formázásról és a konverzióról, még mielőtt befejeznéd az írást.
- Hack - A Hack túlmutat minden modern betűtípus-szerkesztő eszközön, ráadásul testre szabhatod az igényeid szerint. Magában foglalja a többrétegű rendszeres, merész, ferde és merész ferde készleteket, amelyek lefedik az összes szintaxiskiemelési igényt. Több mint 1500 szimbólumot tartalmaz, amelyek közé tartozik a kibővített latin, a modern görög és cirill karakterkészlet.
- Desygner - A Desygner segítségével szerkeszthetsz számítógépről, táblagépről vagy telefonról, képeket és szövegeket importálhatsz az Adobe PDF-ből, a PSD-ről és a Microsoft Powerpointból. Több millió ingyenesen kínált, nyilvános kép áll készen a felhasználásra, amellett több ezer ingyenes háttér, matrica és szöveg. Oszd meg online, vagy töltsd le ingyen PDF, JPG vagy PNG formátumban.
- CMD space - Minden tervezőnek szüksége van portfolióra. Az eszköz kapcsolódik a Dribbble fiókodhoz, amely lehetővé teszi egy azonnali dizájn portfólió létrehozását.
- WeVideo - A WeVideo egy felhőalapú együttműködő videóalkotó platform. Nem kell szakértőnek lenni a kiváló minőségű videók létrehozásához. Azonban a videód kinézetét szabályozhatod, ideértve az átmeneteket, a gyors / lassú mozgást, a zöld képernyőt és egyebeket. A WeVideo lehetővé teszi, hogy megkíméld a merevlemezed. Töltsd fel alkotásaidat a felhőbe. Kezd el a munkát az egyik számítógépen és folytasd egy másikon ott, ahol abbahagytad.
- Semplice - Az első, teljesen reszponzív portfóliórendszer, amely fejlett funkciókkal rendelkezik a kis stúdiók és induló vállalkozások számára.
- Build it with Me - Ez egy olyan eszköz, amely segít a hasonló gondolkodású tervezők és fejlesztők összekapcsolásában, akiknek egyazon célja van: szuper és hasznos alkalmazások létrehozása.
- Visage - Sok vizuális tartalmat kell létrehoznod? A Visage egy olyan dizájn eszköz, amely minőségi tartalom létrehozását egyszerűvé teszi, így nincs szükség egy lassú és költséges támogatásra.
- Ezgif - Az Ezgif.com egy egyszerű online gif készítő és eszközcsomag animált gifek alapvető szerkesztéséhez. Itt létrehozhatsz, átméretezhetsz, vághatsz, optimalizálhatsz, ráadásul alkalmazhatsz bizonyos hatásokat is a gifekhez. Ezt az online eszközt szinte bármilyen más típusú képhez is (jpeg, png, bmp, tiff) használhatod.
- Imgix - Az imgix segítségével átméretezheted és feldolgozhatod a képeket valós időben egyszerű URL parancsokkal. Adj meg egy imgix URL-t, vagy kattints egy példára, és megkapsz minden képátalakítást az új műveletek szerkesztése és hozzáadása közben.
Néhány freebie Sketch és Machez
- Craft - A Craft az új referenciaérték a Sketch bővítmény felhasználói felületekhez. Lehetővé teszi a közvetlen manipulációt, WYSIWYG-szerű kezelést a mock adatokhoz. Ezenkívül egy egyszerű, beépített interfészt is tartalmaz, amely a mintaadatokat a lapos szöveges fájlok másolásával és beillesztésével növeli. A meglévő webhelyek tartalmának blokkjára kattintva az adatok saját tervezésűvé tétele egy másik praktikus megközelítés.
- Mobile Wireframe Kit - A Mobile Wireframe Kit egy Sketch dokumentum, amely a mobilalkalmazások tervezéséhez leggyakrabban használt UI elemekből áll.
- Sketch Plugins - Harmadik fél fejlesztők által létrehozott Sketch bővítmények gyűjteménye.
- Sketch Toolbox - Egy egyszerű bővítmény menedzser a Sketch számára. Lehetővé teszi a Sketch számára elérhető legnépszerűbb bővítmények böngészését. Egyetlen kattintással letölti és telepíti az új bővítményeket és azok mindegyikét naprakészen tartja.
- Sketch Land - A leghasznosabb források listája azok számára, akik a Sketch-t használják.
- Craft - A Craft egy plugin-csomag a Sketch és a Photoshop számára, amely lehetővé teszi a valós adatokkal történő tervezést, a gazdag adatok importálását és a tervezési eszközök gyors duplikálását.
- Bjango - Alkalmazás ikon sablonok átfogó csomagja a Photoshop, az Illustrator, a Sketch és az Affinity Designer számára. Android, iOS, OS X, Apple TV (tvOS), Apple Watch (watchOS), Windows, Windows Phone és webes favicon. Plusz Photoshop-műveletek , Photoshop-parancsfájlok, Hazel szabályok, OS X munkafolyamatok és egyéb véletlenszerű dolgok a képernyő-tervezők és a fejlesztők számára.
- Sketch Palettes - Sketch plugin, amely lehetővé teszi a színek betöltését a színválasztóba.
- Marvel - A Marvel egy plugin a Sketch számára mobil és webes prototípusok létrehozásához.
- Cognitom - Sablonok készlete szimbólum betűtípus vagy ikon betűtípus készítéséhez.
- Devices - A népszerű eszközök kép- és Sketchfájljainak gyűjteménye.
Eszközök csak Mac számára
- RapidWeaver- Tervezd meg, készítsd el és tedd közzé saját honlapod ezzel a kiváló eszközzel a Mac számára.
- Cactus for MAC - Egy gyors és egyszerű statikus webhely generátor, amely a legjobb webdesign technológiát alkalmazza egy elegáns megoldásban.
- iOS 9 GUI - Ez a készlet lehetővé teszi az iOS 9 felhasználói felületének 100% -os vektoros formátumban történő elemzését. Használd nagyszerű alkalmazások tanulmányozásához, bemutatásához és tervezéséhez.
UI / UX eszközök
- UI - Napi ihletés az UI archívumból és azon túl. Több mint 2200 dizájn 117 kategóriába szedve.
- Heat Map - A Heat Map segíteni fog megérteni, a weboldalak mely elemei kapnak több vagy kevesebb figyelmet. Az eredmény átlag kevesebb mint 20 másodperc alatt elérhető. Nem kell külön kódot vagy szkriptet beilleszteni. Az algoritmus tudományos kutatásokon alapul.
- Usability Square - Ez az a hely, ahol a használhatóság szerelmesei összegyűlnek, hogy teszteljék egymás elképzeléseit és termékeiket, neked pedig lehetőséged van arra, hogy valódi emberektől elfogulatlan visszajelzéseket kapj. A Heatmaps azonnal elérhető.
- Marvel - Változtasd a dizájnokat és vázlatokat IOS prototípusokká drag and drop módszerrel a Marvelben. Küldd el prototípusodat a felhasználóknak és láss hozzá a teszteléshez. Nézd meg, hogy pontosan mi történt a prototípusod minden pontján, majd oszd meg az eredményeket csapatoddal.
UI / UX olvasás
- URX - Adj hozzá "Vásárlás" gombot az alkalmazásodhoz URX kódolás nélkül.
- Chinese Mobile UI Trends - Még több kínai mobil UI trend - egy cikk Dan Grovertől.
- Animation Principles - Öt alapelv a hatékony animációért UX-ben Linn Vizard által.
- UX Design Steps - UX design 14 egyszerű lépésben Alan Coopertől.
- Using Micro-interactions - Stephen Moyers webhelyén végzett mikrointerakciók használatának módszerei.
- Mind Control in Web Design - 9 módja az intellektuális ellenőrzésnek a webes tervezésben egy egyszerű infografikában.
- Prototyping Tips - A prototípusok létrehozása kevésbé fájdalmas Charles Costa tippjeivel.
- Content Wireframes for Responsive Design - Tartalomszöveges drótvázak készítése a reszponzív tervezéshez - Tom Green bemutatója.
Kódolás és webfejlesztési eszközök
- Im Creator - Ez több mint egy tipikus weboldal készítő. Nem kell kódolni, az eredmények pedig teljes mértékben reszponzívak és Google-barátok. E-kereskedelmi és blogolási lehetőség.
- StackHive - A StackHive lehetővé teszi a reszponzív és pixeltökéletes weboldalak kialakítását drag and drop interfésszel, és automatikus létrehozza a HTML, CSS és JS gyártási minőségi kódokat. Széles körű formatervezési és animációs paneleket biztosít a tervezés és az interakciók minden aspektusának irányításához.
- RAML - A RAML segítségével láthatod, hogy az API hogyan néz ki tervezés közben, hála a könnyen olvasható szövegnek. Nem kell egyetlen kódsorozatot se írni. Nemcsak tökéletesíthetied API-dizájnodat, hanem teljes körű funkcionális mockot hozhatsz létre az ügyfelek, a partnerek és a mérnökök számára az átvizsgáláshoz és a kiépítéshez.
- Design Research Techniques - Ez egy online tárház a részvételi tervezési technikákhoz. Ezek a technikák segítenek egy projekt életciklusának fejlesztésében több érdekelt részvételével, beleértve a potenciális felhasználókat vagy közönségeket, partnereket vagy belső csapatokat.
- Surreal CMS - A Surreal CMS csatlakozik a weboldaladhoz FTP SFTP vagy Amazon S3-on keresztül a változtatások érdekében. Soha többé nem kell aggódnod a frissítések miatt. Ügyfeleid csak a megadott elemeken belül szerkeszthetik a tartalmat. Minden változás nyomon követhető, így megnézheted, hogy az ügyfelek mit csinálnak. Ingyenes 14 napos próbaidő.
- Brackets - Egy nyílt forráskódú szövegszerkesztő a webes tervezők számára az Adobe által JavaScript, HTML és CSS formátumban írt szöveggel.
- Web Designer - Hozz létre vonzó, interaktív HTML5 alapú dizájnt és mozgóképeket, amelyek bármely eszközön futtathatók. Ez egy teljes körű tervezőcsomag, amely lehetővé teszi, hogy bármilyen víziót éltre kelts. Az eszköz kezeli a HTML5 és a CSS3-at, így szabadon koncentrálhatsz a csodálatos vizuális élmények létrehozására.
- Responsive Web Design Tester - Teszteld dizájnodat bármely eszközön, gyorsan tekintsd meg reszponzív webhely dizájnodat azon paraméterek alapján, amelyek a népszerű kütyükön is látható.
- Browser Shots - A Browsershots képernyőképeket készít webdizájnodról különböző böngészőkben és operációs rendszerekben. Így tesztelheted weboldalad böngésző kompatibilitását egy helyen.
- Fenix Web Server - A Fenix egy egyszerű, statikus asztali webszerver. Jó fejlesztők és tervezők számára, akik statikus webhelyekkel dolgoznak. Lehetővé teszi a helyi webhelyek egymás melletti vizuális kezelését, miniatűrökkel, naplókkal és még sok mással, fejlessz lokális szinten és oszd meg online.
- NW.js - NW.js lehetővé teszi, hogy az összes Node.js modult közvetlenül a DOM-ból hívd, emellett pedig az új alkalmazások írását a modern HTML5, CSS3, JS és WebGL -ben.
- Commerce.js - Az eszköz lehetővé teszi a gyönyörű e-kereskedelmi élmények létrehozását, amelyek néhány sornyi kóddal kezdődnek.
- Valence - A Valence egy kísérleti kiegészítő, amely lehetővé teszi a Firefox Developer Tools számára a böngészők szélesebb skálájának hibakeresését, nem csak a Gecko-alapú Firefoxban, az Androidos Firefoxban és a Firefox OS böngészőjében. A kezdeti hibakeresési célok: Androidos Chrome, Chrome Desktop és Safari az iOS rendszeren.
- Bedrock - Ez egy WordPress boilerplate, modern fejlesztőeszközökkel, könnyebb konfigurációval és jobb mappaszerkezettel.
- MJML - Az MJML olyan jelölőnyelv, amely csökkenti a reszponzív e-mail kódolás nehézségeit. Szemantikus szintaxisa egyszerűvé teszi, valamint a gazdag, szabványos komponensek könyvtára felgyorsítja a fejlesztési időt, és megkönnyíti az e-mail kódbázisát.
- Firebug - A legnépszerűbb és legerősebb webes fejlesztőeszköz, amely lehetővé teszi a HTML-ellenőrzést és a stílus és elrendezés módosítását valós időben. Használj speciális JavaScript hibakeresőt minden böngésző számára, pontosan elemezd a hálózat használatát és teljesítményét, terjeszd ki a Firebug funkciókat a nagyobb hatékonyság érdekében.
- Web Starter Kit - A Web Starter Kit egy könnyű módja az új projekt elindításához. Minden olyan fájlt tartalmaz, amelyre szükség lehet egy új webes projekt elindításához, beleértve a felépítési folyamatot, a boilerplate HTML-t és a stílusokat. A készlet tartalmaz reszponzív elrendezést.
- UserForge - Hozz létre reális reprezentációkat a felhasználói csoportodnak sokkal kevesebb kattintással, mint amennyire szükség lenne egy tervező szoftverrel vagy szövegszerkesztővel.
- Kore - A Kore egy könnyen használható webes alkalmazási keret a skálázható webes API-k létrehozásához C-ban. Fő célja a biztonság, a méretezhetőség és lehetővé teszi az ilyen API-k gyors fejlesztését és telepítését.
- Hoodie - a Hoodie egy komplett backend az alkalmazásokhoz: fejleszd frontend kódodat, csatlakoztasd az API-ba, és élvezd a használatra kész alkalmazást.
- Tumult Hype - Készíts gyönyörű HTML5 webes tartalmat kódolás nélkül. A Tumult Hype-al készült interaktív webes tartalom és animációk asztali számítógépekhez, okostelefonokhoz és iPadekhez.
- WebShell - A WebShell egy bundle webes alkalmazás az OS X alkalmazáshoz kódolás nélkül.
- UberBot - Ha szeretnéd megmérettetni magad és barátaid képességeit, oszd meg a botot és nézd meg, ki tudja megverni.
- WatchPeopleCode - Itt láthatod, mások hogyan kódolnak élő adásban.
- Mobirise - A Mobirise egy offline alkalmazás Windows és Mac számára, amellyel könnyen létrehozhatsz kis / közepes weboldalakat, céloldalakat, online önéletrajzokat és portfóliókat, promóciós oldalakat alkalmazásokhoz, eseményekhez, szolgáltatásokhoz és termékekhez.
- GrapesJS - A GrapesJS egy következő generációs eszköz sablonok építéséhez kódolás nélkül.
- Plyfe - Interaktív kártyák létrehozása: nyűgözd le közönségedet a Plyfe interaktív kártyák növekvő katalógusával. Csak válassz egy interaktív kártyát, töltsd fel a képeket, videókat, gifeket és tedd közzé bárhol.
- Mailmalade - Ez az eszköz lehetővé teszi a kompatibilis HTML e-mailek gyors felépítését tervezési fájljaiddal. Nincs szükség kódolási ismeretekre.
- Challenge Hunt - a Challenge Hunt egy nyílt forráskódú programozó verseny és hackathon aggregátor. Megtekintheted az összes aktív, közelgő kódolási versenyt, a hackathonokat, a felvételi és az adathasználati kihívásokat egyetlen helyen.
- Lytmus - A Lytmus egy élő interjúkészítő eszköz azoknak, akik interjúkat folytatnak le mérnökökkel. Interjúk készítése a back-end, front-end, full-stack, mobil fejlesztés és termékelemzőkkel. Válassz 21 nyelvből, 6 keretből és 10+ eszközből a virtuális számítógépen böngésződben.
- My Tips - időszerű, releváns, képernyőn megjelenő eszköztippek és termékismertetők létrehozása kódolás nélkül.
- Etleap - Az eszköz lehetővé teszi az összes adatforrás összekapcsolását, az adatok gyorsabb feldolgozását. Soha többé ne aggódj az ETL miatt.
- Code Fight Club - Ez egy igazi harcosok klubja kóderek számára. Itt szavazhatsz, kommentelhetsz vagy elindíthatod a saját kódcsatádat.
- Experimental Platform - fejlesztőként szórakoztató lesz számodra ez a platform a következő dolgok létrehozásához. Egy egyszerű levegőminőségi mutató egy intelligens fényt használva, amely a CO₂ szinttől függően zöldről pirosra változik. Hang alapú főzési időzítő. Az ip-alapú biztonsági kamerák bekapcsolnak minden alkalommal, amikor bezárod az otthonodat smartlockot használva.
Webfejlesztési együttműködési eszközök
- Figma - A figmával online tervezhetsz dizájnt, dolgozz együtt másokkal ugyanazon a dizájnon, akár egyidőben. A munkád folyamatosan mentve lesz (a régi verziók egyetlen kattintással elérhetők). Az eszköz bármilyen operációs rendszeren működik.
- Simple Team - Nagyszerű eszköz a fejlesztőknek és a tervezőknek. Összehozza a csapatot egy közös platformra, amely lehetővé teszi tagjai számára a tervezést, fejlesztést és kommunikációt.
- Getting ready for HTTP/2 - Felkészülés a HTTP / 2-re: útmutató webes tervezők és fejlesztők számára Rachel Andrewtól.
- Google Accelerated Mobile Pages - minden, amire szükséged van a Google gyorsított mobiloldalaira. Szerző Christian Cantrell.
- Improve Google Ranking - 5 lehetőség a Google rangsor fejlesztésére SERP-ben CDN-nel. Szerző Brian Jackson.
- A Frame - A keret anatómiája az Aerotwist által.
- Cleaning After Internet Explorer - Tisztítás az Internet Explorer után Adrian Sandu által.
- Jade Tutorial for Beginners - Jade bemutató kezdőknek Sanjay Guruprasad által.
- Remote Debugging - Távoli hibakeresés a front-end fejlesztők számára Panayiotis Velisarakos által.
- Frontend Design - Frontend design Brad Frost által.
- Packt Pub - Itt megtekintheted a legújabb, legizgalmasabb és legelismertebb könyveket és videókat a tervezők és fejlesztők számára, amelyeket a webhelyszerkesztők választottak ki.
CSS eszközök
- HTML Cheat Sheet - Ez az interaktív HTML cheat lap teljes listát tartalmaz az összes HTML elemről, beleértve a leírásokat, a kódpéldákat és az élő előnézeteket.
- Enjoy CSS - Ez egy fejlett CSS generátor gazdag grafikus stílusok létrehozásához kódolás nélkül.
- CSS Typeset - Csak illeszd be a módosítani kívánt szöveget, majd másold és illeszd be a létrehozott CSS-t a stíluslapodba.
- One CSS Feature - Egy CSS funkció, amit nagyon akarok. A bitsofcode által.
- Imperfect Buttons - Kézzel rajzolt határgombok Tiffany Rayside tollából.
- Poor Man's Styleguide - Ezt a frontend styleguide-t úgy terveztek, hogy másolható és beilleszthető legyen a CMS-edbe.
- Sass Placeholders - Sass: Placeholders and @extend-only Selectors - szerző Steven Bradley.
- Penguin - nincs HTML, nincs PS. Abdullah Abusalltól.
CSS olvasás
- Responsive Web Design Tutorial - Reszponzív webdizájn bemutató: kérdések, mítoszok, problémák és valós megoldások Jeff Belltől.
- How to Use Variables in Chrome 49 - CSS egyéni tulajdonságok: hogyan használhatom a Chrome 49-ben?
Ioanni Mitsakis által. - Object Fit and Object Position - Robin Rendle gyors áttekintése az "object-fit" és "object-position" témáról.
- Dynamic Portfolio with CSS Scrolling Snap Points - Készíts dinamikus portfóliót ezzel az eszközzel.
- Pull Quotes
- Theme Switcher - Témaváltó a CSS egyéni tulajdonságainak felhasználásával, szerző Michael Scharnagl.
JS eszközök
- MERN - Az MERN megkönnyíti az izomorf alkalmazások létrehozását a Mongo, az Express, a React és a NodeJS segítségével. Minimálisra csökkenti a beállítási időt, és felgyorsítja a bevált technológiák használatát.
- Ember - Funkcionális programozás Emberben - Jeffrey Biles meginterjúvolja a tehetséges Ember fejlesztőket a világ minden tájáról, megosztva kihívásaikat, szenvedélyeiket és győzelmeiket.
JS olvasás
- Generating PDFs from Web Pages - PDF fájlok készítése jsPDF-vel Massimo Cassandrótól.
- Animating the Unanimatable - Sima átrendező átmenet a React.js-ben Joshua Comeau által.
- Consuming Laravel API with AngularJS - Hogyan használjuk fel a Laravel API-t AngularJS-vel Francesco Malatesta által.
- Angular Styleguide - bevált gyakorlatok révén biztosítja a következetességet.
- Rest Service in AngularJS - hívd a szolgáltatást, hála Gul Md Ershadnak.
- Building SPAs with AngularJS - Alapvető eszközök a SPA-k építéséhez a AngularJS-szel, Nora Georgieva által biztosítva.
- Animations in React - Sima játék animációk a Reactban Jen Liu által.
- ES6
- ES6 Library - Egy minimális indító az ES6 könyvtár számára.
- Descartes - A Descartes egy kísérleti könyvtár a CSS JavaScript programozásához.
- Search Index - A keresési index egy tartós teljes szöveges keresőmotor a böngésző és a Node.js számára.
ES6 olvasás
- JavaScript Promises - JavaScript ígéretek - hogyan működnek Matt Behrenstől.
- JS Promise Object - JavaScript: hogyan lehet definiálni és feldolgozni egy Promise Objektumot. Ajitesh Kumartól.
- Emails with Gmail JavaScript API - E-mail küldése a Gmail JavaScript API-val Jamie Shieldstől.
- Ajax/jQuery.getJSON Example - Ajax / jQuery.getJSON egyszerű példa Florian Rappltól.
Bővítmények
- Waka Time - Ez egy plugin a kódolás számszerűsítésére. A programozási tevékenység automatikusan létrehozza a mutatókat, a betekintéseket és az időkövetést.
- Bricks.js - Gyors falazó elrendezés generátor fix szélességű elemekhez.
- okayNav jQuery Plugin - Ez a plugin arra törekszik, hogy a navigációs linkeket fokozatosan bezárja egy off-screen navigációba ahelyett, hogy egyszerre mindegyik linkre kiterjedne.
- jQuery easypin - Egyszerű és gyors plugin odatűzi az objektumokat a képekre.
- Sticky Elements - Hozz létre sticky elemeket és sticky linkeket.
Játssz és tanulj meg kódolni
- Hour of Code - A Box Island speciális Code of Time kiadásánál a gyerekek megtanulják az algoritmusok, szekvenciák, hurkok és feltételrendszerek alapjait. A bemutató diákvezető és minden korosztály számára alkalmas.
- Codingame - Tanulj és fejleszd kódolási készségeidet játék közben.
- Hopscotch - Fedezd fel a CS alapjait, például az absztrakciót, a változókat, a feltételeket, a hurkot és egyebeket.
- MeteorToys - Őrülten praktikus fejlesztői eszközök, amelyek segítségével nagyszerű alkalmazásokat készíthetsz.
- ScratchJr - A ScratchJr segítségével a kisgyermekek programozhatják saját interaktív történeteiket és játékukat. A folyamat során megtanulnak problémákat megoldani, tervezési projekteket alkotni és kifejezni kreativitásukat a számítógépen. Alkalmas 5-7 éves gyerekeknek.
Épp most böngésztél végig 137 webdizájn-fejlesztői eszközt és hasznos forrásokat. Hasznosnak találtad valamelyiket? Ha a válasz "igen", kérjük, oszd meg velünk véleményedet egy hozzászólásban.
Ne felejtsd el lájkolni és megosztani a bejegyzést barátaiddal és kollégáiddal.