├── .travis.yml └── README.md /.travis.yml: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Front-End Developers Tools 2 | 3 | > All Tools and Technologies Needed for Front-End Developers, Orderd by My Recommendations 4 | 5 | [![Contributions Welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/dwyl/esta/issues) 6 | 7 | ## Contents 8 | 9 | - [Editors and IDEs](#editors-and-ides) 10 | - [Css Preprocessors and Tools](#css-preprocessors-and-tools) 11 | - [HTML Template Engines and Processors](#html-template-engines-and-processors) 12 | - [JavaScript Transpilers and Compilers](#javascript-transpilers-and-compilers) 13 | - [Design Frameworks and UI Kits](#design-frameworks-and-ui-kits) 14 | - [Prototyping and Wireframing](#prototyping-and-wireframing) 15 | - [Grid Only Tools](#grid-only-tools) 16 | - [Task Runners and Build Tools](#task-runners-and-build-tools) 17 | - [Test Performance](#test-performance) 18 | - [Scaffolding Tools](#scaffolding-tools) 19 | - [Websites For Icons](#websites-for-icons) 20 | - [Placeholder Image Services](#placeholder-image-services) 21 | - [Compare Code](#compare-code) 22 | - [Websites to Test Your Code](#websites-to-test-your-code) 23 | - [Version Controls](#version-controls) 24 | - [References](#references) 25 | - [Unit Testing and Automation Tools](#unit-testing-and-automation-tools) 26 | - [Developments Communities](#developments-communities) 27 | - [Websites to Follow](#websites-to-follow) 28 | - [Developments News](#developments-news) 29 | - [Famous CMS](#famous-cms) 30 | - [Courses Websites](#courses-websites) 31 | - [Productivity Tools](#productivity-tools) 32 | - [Maps for web](#maps-for-web) 33 | 34 | ## Editors and IDEs 35 | 36 | All the Famous Editors you need to start working on your projects. 37 | 38 | - [VSCode](https://code.visualstudio.com/) Free 39 | - [Atom](https://atom.io/) Free | [Recommended Packages](#atom-recommended-packages), [Recommended Themes](#atom-recommended-themes) 40 | - [SublimeText](http://www.sublimetext.com/) $$ 41 | - [Coda](https://panic.com/coda/) $$ 42 | - [KomodoEdit](https://www.activestate.com/products/komodo-ide/downloads/edit/) Free 43 | - [Brackets](http://brackets.io/) Free 44 | - [Notepad++](https://notepad-plus-plus.org/) Free 45 | - [Vim](https://www.vim.org/) Free 46 | - [PHP Storm](https://www.jetbrains.com/phpstorm/) $$ 47 | - [Web Storm](https://www.jetbrains.com/webstorm/) $$ 48 | - [AptanaStudio](http://www.aptana.com/) Free 49 | 50 | ## Css Preprocessors and Tools 51 | 52 | Css PreProcessing Tools help you do your work Fast, easy and More Dynamic with a Hard Chance to fail When writing CSS Code. Although Save you Time and Make You Focus on Other Things. 53 | 54 | - [Sass](https://sass-lang.com/) 55 | - [Less](http://lesscss.org/) 56 | - [Stylus](http://stylus-lang.com/) 57 | - [Compass](http://compass-style.org/) 58 | - [PostCSS](https://github.com/postcss/postcss) 59 | - [Myth](http://www.myth.io/) 60 | - [Css Crush](http://the-echoplex.net/csscrush/) 61 | - [Clay](http://fvisser.nl/clay/) 62 | - [Pleeease](http://pleeease.io/) 63 | - [CSS Next](https://cssnext.github.io/) 64 | - [Style Cow](http://stylecow.github.io/) 65 | 66 | ## HTML Template Engines and Processors 67 | 68 | Template Engines help you do your work Fast, easy and More Dynamic with a Hard Chance to fail When writing HTML Code. Although Save you Time and Make You Focus on Other Things. 69 | 70 | - [Pugjs](https://pugjs.org/api/getting-started.html) 71 | - [Slim](http://slim-lang.com/) 72 | - [Haml](http://haml.info/tutorial.html) 73 | - [Mustache](https://mustache.github.io/) 74 | - [Handlebars](http://handlebarsjs.com/) 75 | - [NunJucks](https://mozilla.github.io/nunjucks/) 76 | - [ECT](http://ectjs.com/) 77 | - [Template7](http://idangero.us/template7/#.XJc-pCgzaUk) 78 | - [Squirrelly](https://squirrelly.js.org/) 79 | - [Marko](https://github.com/marko-js/marko) 80 | - [Blade](https://github.com/bminer/node-blade) 81 | 82 | ## HTML Ready Template to Start Projects 83 | 84 | - [Html5Boilerplate](https://html5boilerplate.com/) 85 | - [Html5Bones](https://html5bones.com/) 86 | 87 | ## JavaScript Transpilers and Compilers 88 | 89 | It Gives you the Ability to Write Modern JavaScript Code and use the features of ES6, 7, 8 90 | 91 | - [Babel js](https://babeljs.io/) 92 | - [Caja](https://developers.google.com/caja/) 93 | - [CoffeeScript](https://coffeescript.org/) 94 | - [TypeScript](http://www.typescriptlang.org/) 95 | - [Traceur](https://github.com/google/traceur-compiler) 96 | 97 | ## Design Frameworks and UI Kits 98 | 99 | All Frameworks and UI Kits that help you Create a cool websites and Save you Time and Power. 100 | 101 | - [Bootstrap](https://getbootstrap.com/) 102 | - [Semantic UI](https://semantic-ui.com/) 103 | - [Foundation](https://foundation.zurb.com/) 104 | - [Pure](https://purecss.io/) 105 | - [MaterializeCSS](https://materializecss.com/) 106 | - [HTML Kickstart](http://www.99lime.com/elements/) 107 | - [GroundWork](https://groundworkcss.github.io/) 108 | - [Skeleton](http://getskeleton.com/) 109 | - [Beared](http://buildwithbeard.com/) 110 | - [Bulma](https://bulma.io/) 111 | - [Tachyons](http://tachyons.io/) 112 | - [Tailwind](https://tailwindcss.com/docs/what-is-tailwind/) 113 | - [Milligram](https://milligram.io/) 114 | - [UI Kit](https://getuikit.com/) 115 | - [Kube](https://imperavi.com/kube/) 116 | - [KickOff](http://trykickoff.com/) 117 | - [BootFlat](https://bootflat.github.io/) 118 | - [Base](https://getbase.org/) 119 | - [Concise](https://concisecss.com/) 120 | - [Base ToolKit](http://basscss.com/) 121 | - [Picni CSS](https://picnicss.com/) 122 | - [Spectre](https://picturepan2.github.io/spectre/) 123 | 124 | ## Prototyping and Wireframing 125 | 126 | - [Balsamiq](https://balsamiq.com/) 127 | - [UxPin](https://www.uxpin.com/) 128 | - [WireFrame](https://wireframe.cc/) 129 | - [Axure](https://www.axure.com/) 130 | - [JustInMind](https://www.justinmind.com/) 131 | - [FluidUI](https://www.fluidui.com/) 132 | - [Pidoco](https://pidoco.com/en) 133 | 134 | ## Grid Only Tools 135 | 136 | Only Grids Systems if you don't Want to Use Framework Components. 137 | 138 | - [Grid Guide](http://grid.guide/) 139 | - [960 Grid](https://960.gs/) 140 | - [Jeet](http://jeet.gs/) 141 | - [SimpleGrid](https://thisisdallas.github.io/Simple-Grid/) 142 | 143 | ## Deal with Colours 144 | 145 | Websites to deal with colors and choose combinations and Test colours. 146 | 147 | - [Adobe Kuler](https://color.adobe.com/create/color-wheel/) 148 | - [Material](https://material.io/collections/color/) 149 | - [Coolors](https://coolors.co/161925-23395b-406e8e-8ea8c3-cbf7ed) 150 | - [Clrs](http://clrs.cc/) 151 | - [SipApp](http://sipapp.io/) 152 | - [Palettable](https://www.palettable.io/EDF2CA) 153 | - [WebGradients](https://webgradients.com/) 154 | 155 | ## Task Runners and Build Tools 156 | 157 | - [Gulpjs](https://gulpjs.com/) 158 | - [WebPack](http://webpack.github.io/) 159 | - [Yarn](https://yarnpkg.com/en/) 160 | - [Gruntjs](https://gruntjs.com/) 161 | - [Brunch](https://brunch.io/) 162 | - [Broccoli](https://github.com/broccolijs/broccoli) 163 | - [Parcel](https://parceljs.org/) 164 | - [Taskr](https://github.com/lukeed/taskr) 165 | 166 | ## Test Performance 167 | 168 | Tools to Help You Test Your Website Speed, Performance and Accessibility. 169 | 170 | - [Gtmetrix](https://gtmetrix.com/) 171 | - [Pingdom Tools](https://tools.pingdom.com/) 172 | - [Key CDN](https://tools.keycdn.com/speed) 173 | - [Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/) 174 | - [Web Page Test](https://www.webpagetest.org/) 175 | - [Dot Com Tools](https://www.dotcom-tools.com/website-speed-test.aspx) 176 | - [Chrome Dev Tools](https://developers.google.com/web/tools/chrome-devtools/?hl=en) 177 | 178 | ## Scaffolding Tools 179 | 180 | ## Websites For Icons 181 | 182 | - [The Noun Project](https://thenounproject.com/) 183 | - [Flaticon](https://www.flaticon.com/) 184 | - [FontAwesome](https://fontawesome.com/) 185 | - [Material Icons](https://material.io/tools/icons/) 186 | 187 | ## Placeholder Image Services 188 | 189 | - [Picsum](https://picsum.photos/) 190 | - [LoremPixel](http://lorempixel.com/) 191 | - [ImgPlaceholder](https://imgplaceholder.com/) 192 | - [DummySrc](https://dummysrc.com/) 193 | - [IpsumImage](https://ipsumimage.appspot.com/) 194 | - [PlaceImg](https://placeimg.com/) 195 | - [DummyImage](https://dummyimage.com/) 196 | - [FakeImagePlease](https://fakeimg.pl/) 197 | - [Placeholder](https://placeholder.com/) 198 | - [Place-Hold](https://place-hold.it/) 199 | - [Placehold](http://placehold.jp/en.html) 200 | 201 | ## Compare Code 202 | 203 | - [Mergely](http://www.mergely.com/editor) 204 | - [Diffchecker](https://www.diffchecker.com/) 205 | - [Text Compare](https://text-compare.com/) 206 | - [Diffnow](https://www.diffnow.com/compare-clips) 207 | - [Quickdiff](https://www.quickdiff.com/) 208 | - [FillDiff](https://codebeautify.org/file-diff) 209 | 210 | ## Websites to Test Your Code 211 | 212 | - [Codepen](https://codepen.io/) 213 | - [CodeSandbox](https://codesandbox.io/) 214 | - [JsFiddle](https://jsfiddle.net/) 215 | - [CssDeck](http://cssdeck.com/) 216 | - [LiveWeave](https://liveweave.com/) 217 | - [JsBin](https://jsbin.com/) 218 | - [Plnkr](http://plnkr.co/edit/?p=catalogue) 219 | 220 | ## Version Controls 221 | 222 | - [Git](https://git-scm.com/) 223 | - [GitHub](https://github.com/) 224 | - [BitBucket](https://bitbucket.org/product) 225 | - [GitLab](https://about.gitlab.com/) 226 | - [Phabricator](https://secure.phabricator.com/) 227 | - [Mercurial](https://www.mercurial-scm.org/) 228 | - [Apache Subversion](https://subversion.apache.org/) 229 | 230 | ## References 231 | 232 | - [MDN](https://developer.mozilla.org/en-US/) 233 | - [HTML5Please](https://html5please.com/) 234 | - [CanIUse](https://caniuse.com/) 235 | - [W3Schools](https://www.w3schools.com/) 236 | - [HTML Elements](https://html.spec.whatwg.org/multipage/indices.html#elements-3) 237 | - [HTML Reference](https://htmlreference.io/) 238 | - [CSS Index](https://drafts.csswg.org/indexes/) 239 | - [CSS4](http://css4.rocks/) 240 | - [CSS4 Selectors](https://css4-selectors.com/) 241 | - [CSS Values](https://cssvalues.com/) 242 | - [Css Triggers](https://csstriggers.com/) 243 | - [CSS3 Test](https://css3test.com/) 244 | - [CSS Reference](https://cssreference.io/) 245 | 246 | ## Unit Testing and Automation Tools 247 | 248 | - [Jest](https://jestjs.io/) 249 | - [AVA](https://github.com/avajs/ava) 250 | - [Jasmine](https://jasmine.github.io/) 251 | - [Mocha](https://mochajs.org/) 252 | - [Tape](https://github.com/substack/tape) 253 | - [Cypress](https://snipcart.com/blog/frontend-testing-cypress) 254 | - [WebDriver](https://webdriver.io/) 255 | - [Test Cafe](https://github.com/DevExpress/testcafe) 256 | - [CasperJs](http://casperjs.org/) 257 | - [Nightmare](https://github.com/segmentio/nightmare) 258 | - [Ghost Inspector](https://ghostinspector.com/) 259 | - [BackStop](https://github.com/garris/BackstopJS) 260 | - [BrowserStack](https://www.browserstack.com/) 261 | - [Browserling](https://www.browserling.com/) 262 | - [Gremlins](https://github.com/marmelab/gremlins.js) 263 | - [Night Watch](http://nightwatchjs.org/) 264 | 265 | ## Developments Communities 266 | 267 | - [HashNode](https://hashnode.com) 268 | - [Front End Front](https://frontendfront.com/) 269 | - [Refind](https://refind.com) 270 | - [StackOverFlow](https://stackoverflow.com/) 271 | - [SitePoint](https://www.sitepoint.com/community/) 272 | 273 | ## Websites to Follow 274 | 275 | - [Smashing Magazine](https://www.smashingmagazine.com/) 276 | - [Css-Tricks](https://css-tricks.com/) 277 | - [Codrops](https://tympanus.net/codrops/) 278 | - [Scotch](https://scotch.io/) 279 | - [A List APart](https://alistapart.com/) 280 | - [DavidWalsh](https://davidwalsh.name/) 281 | - [Daverupert](https://daverupert.com/) 282 | - [Brianlovin](https://brianlovin.com/) 283 | - [DevTo](https://dev.to) 284 | 285 | ## Developments News 286 | 287 | - [Front-End Focus](https://frontendfoc.us/) 288 | - [Friday Front-End](https://fridayfrontend.com/) 289 | - [Dev Tips](https://umaar.com/dev-tips/) 290 | - [Fresh Brewed](https://freshbrewed.co/) 291 | - [Web Develop Reading List](https://wdrl.info/) 292 | - [Web Ops](https://webopsweekly.com/) 293 | - [Web Tools Weekly](https://webtoolsweekly.com/) 294 | 295 | ## Famous CMS 296 | 297 | - [ProcessWire](https://processwire.com/) 298 | - [WordPress](https://wordpress.org/) 299 | - [Joomla](https://joomla.org/) 300 | - [Drupal](https://www.drupal.org/) 301 | - [concrete5](https://concrete5.org/) 302 | - [OctoberCMS](https://octobercms.com/) 303 | - [Typo3](https://typo3.org/) 304 | - [Contentful](https://contentful.com/) 305 | - [Adobe Experience Manager](https://www.adobe.com/marketing/experience-manager.html/) 306 | - [PrestaShop](https://prestashop.com/) 307 | - [Sitefinity](https://www.progress.com/sitefinity-cms) 308 | - 309 | 310 | ## Courses Websites 311 | 312 | - [Udacity](https://www.udacity.com/) 313 | - [Lynda](https://www.lynda.com/) 314 | - [Coursera](https://www.coursera.org/) 315 | - [TeamTreeHouse](https://teamtreehouse.com/) 316 | - [Udemy](https://www.udemy.com/) 317 | - [Edx](https://www.edx.org/) 318 | - [EggHead](https://egghead.io/) 319 | - [FreeCodeCamp](https://www.freecodecamp.org/) 320 | - [Pluralsight](https://www.pluralsight.com/codeschool) 321 | - [LevelUpTuts](https://www.leveluptutorials.com/) 322 | - [Teachable](https://teachable.com/) 323 | 324 | ## Productivity Tools 325 | 326 | - [Trello](https://trello.com/) 327 | - [Todoist](https://todoist.com/) 328 | - [WunderList](https://www.wunderlist.com/) 329 | - [Evernote](https://evernote.com/) 330 | - [Asana](https://asana.com/) 331 | - [Slack](https://slack.com/) 332 | - [Discord](https://discordapp.com/) 333 | 334 | ## Maps APIs for web 335 | 336 | - [Google Maps](https://cloud.google.com/maps-platform/) 337 | - [Leaflet](https://leafletjs.com/) 338 | - [Here Maps](https://developer.here.com/) 339 | - [Microsoft bing maps](https://www.microsoft.com/en-us/maps/choose-your-bing-maps-api) 340 | - [OpenLayers](https://openlayers.org/) 341 | - [FourSquare](https://developer.foursquare.com/) 342 | - [MapBox](https://docs.mapbox.com/api/) 343 | 344 | ## Visual Studio Code Editor Recommended Extensions 345 | 346 | - [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 347 | - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) 348 | - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) 349 | - [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass) 350 | - [VSCode icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons) 351 | - [Rainbow Brackets](https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets) 352 | 353 | ## Atom Recommended Extensions 354 | 355 | - [Atom Ternjs](https://atom.io/packages/atom-ternjs) 356 | - [Linter](https://atom.io/packages/linter) 357 | - [Linter Ui Default](https://atom.io/packages/linter-ui-default) 358 | - [Linter JsHint](https://atom.io/packages/linter-jshint) 359 | - [Script](https://atom.io/packages/script) 360 | - [Atom Path Intellisense](https://atom.io/packages/atom-path-intellisense) 361 | - [Atom Live Server](https://atom.io/packages/atom-live-server) 362 | - [Atom Beautify](https://atom.io/packages/atom-beautify) 363 | - [Minimap](https://atom.io/packages/minimap) 364 | - [Pigments](https://atom.io/packages/pigments) 365 | - [CSS Autoprefixer](https://atom.io/packages/autoprefixer) 366 | - [Color Picker](https://atom.io/packages/color-picker) 367 | - [Atom Windows TitleBar](https://atom.io/packages/atom-windows-titlebar) 368 | 369 | ## Atom Recommended Themes 370 | 371 | - [Seti Ui](https://atom.io/themes/seti-ui) 372 | - [Seti Syntax](https://atom.io/themes/seti-syntax) 373 | 374 | ## Gulpjs Recommended Packages 375 | --------------------------------------------------------------------------------