Un proiect de front end presupune mai multi pasi ce trebuie lauti inc alcul pentru a optimiza

timpul de executie.

Unii pasi presupun proiectarea alti pasi presupun utilizarea anumitor software-uri pentru
crearea anumito componente ale proiectului.

La partea de proiectare nu-ti pot spune prea multe:

se ia legatura cu clientul, se face o macheta apoi se executa psd-ul.

Nu stiu daca se poate lucra si in alt soft pentru executarea template-ului in afara de
photoshop.

Aici am gasit cateva alternative la photoshop...dar nu stiu daca pot deschide fisiere .psd
http://www.hongkiat.com/blog/photoshop-alternatives-windows/

si ai urmatoarele:
-Adobe Photoshop Express
-PC Image Editor
-Magix Photo Designer
-Funny Photo Maker
-Picasa HD
-PhotoPad Image Editor
-Photopus
-Pos Free Photo Editor
-SuperPhoto
-PhotoEffects
-Photo Booth Pro
-Viscom Photo

https://www.sitepoint.com/5-free-web-based-photoshop-alternatives/
-Pixlr
-Sumopaint
-Photoshop Express
-Lunapic
-FotoFlexer

Dar toata lumea lauda GIMP

https://www.sitepoint.com/linux-design-tools/
-Could You Use GIMP to Replace Photoshop?
-Could you use Inkscape to replace Illustrator?
-Could You Use Scribus Instead of InDesign?
-Other High Quality Linux Graphics Tools
https://www.gimpshop.com/ asta e photoshop looklike

http://blog.capterra.com/top-7-free-photoshop-alternatives-for-social-media/
-Canva
Pros
Canva has an easy-to-use drag-and-drop function throughout the software.
It also has several pre-sized social media templates from which to choose.
Cons
Canva has many templates, but not all templates are free. The one you want will probably need you
to cough up some moolah.
Do you have branded colors and a style sheet for your marketing? Using Canva to customize your
social media posts can be cumbersome for some projects in some branding respects like color and
fonts.

-GIMP
Pros
Its open source, so you can add all the plugins you want to suit your needs.
It operates a lot like Photoshop, making the transition to GIMP for seasoned designers a cinch.
Cons
GIMP is open source, so it can be buggy at times because everyone can put their fingers in the
code.
GIMP is not for beginners. Peace says it has a steep learning curve the documentation is not
nearly as thorough as Photoshop.

-Pixlr
Pros
Pixlr has several one-click options for quick edits to photos before you publish.
The menus are very similar to Adobe Photoshop, so its easy to navigate for prior Photoshoppers.
Cons
For those of us who are tech inept, the number of tutorials Pixlr offers is small, but growing.
You might not be able to find help with certain tools because the Help articles are missing.

-Aviary by Adobe
Pros
Aviary has tutorials galore, youll never need to ask for help if you dont mind reading. The video
tutorials are sadly not free.
You can license your images directly on Aviary, which means you maintain ownership if youre
sharing an image everywhere.
Cons
Sadly, Aviary is not as easy to learn and use as some of the other free options.
Aviary watermarks your images with their branding which can only be removed if you pay for the
Pro version. Lame.

-Photoscape
Pros
Photoscape has a batch editing option to change several images at once.
It has a RAW converter in the software.
Cons
Photoscape does not have enough options to fulfill your needs for every social media outlet.
While Photoscape is great for Gifs, it is just so-so for everything else in social media.

-SumoPaint
Pros
SumoPaint has a lot of Photoshops functionality for free such as layering tools, selection tools and
paint brushes.
There is a large online community of fellow photo editors that are there to help and critique your
images before you post them.
Cons
There is a paid version of SumoPaint that has many of features that youll want to try. Its still
cheaper than Adobe Photoshop at $19.99 and $1.99 for the iPad app.
SumoPaints set-up makes it a little difficult to work on your previously-posted images.
-PicMonkey
Pros
PicMonkey works directly with Facebook, Dropbox, and Flickr.
It is incredibly easy to learn how to use, especially for a tech-challenged marketer looking for
Photoshop alternatives.
Cons
PicMonkey does not save an editable version of your image. Once youve pressed save, thats it,
theres not going back.
Theres a weird two-step process to creating new social media images with similar backgrounds.
You can save your background as a separate image, and then go back and re-edit that same image to
create your images, or start from scratch every time. It seems a little labor-intensive to me.

De aici treci la codare efectiva si ai urmatoarele:

JavaScript Libraries
jQuery: A fast, small, and feature-rich JavaScript library.
BackBoneJS: Give your JS app some backbone with models, views, collections,
& events.
D3.js: A JavaScript library for manipulating documents based on data.
React: Facebooks Javascript library developed for building user interfaces.
jQuery UI: A curated set of user interface interactions, effects, widgets, and themes.
jQuery Mobile: HTML5-based user interface system designed to make responsive
web sites.
Underscore.js: Functional programming helpers without extending any built-in
objects.
Moment.js: Parse, validate, manipulate, and display dates in JavaScript.
Lodash: A modern utility library delivering modularity, performance, & extras.

Front-end Frameworks
Bootstrap: HTML, CSS, and JS framework for developing responsive, mobile first
projects on the web.
Foundation: Family of responsive front-end frameworks that make it easy to design
beautiful responsive websites, apps and emails that look amazing on any device.
Semantic UI: Development framework that helps create beautiful, responsive layouts
using human-friendly HTML.
uikit: A lightweight and modular front-end framework for developing fast and
powerful web interfaces.

Web Application Frameworks

Ruby: Ruby on Rails is a web-application framework that includes everything needed
to create database-backed web applications, with the MVC pattern.
AngularJS: Lets you extend HTML vocabulary for your web application. AngularJS is a
framework, even though its much more lightweight and sometime referred to as a
library.
Ember.js: A framework for creating ambitious web applications.
Express: Fast and minimalist web framework for Node.js.
Meteor: Full-stack JavaScript app platform that assembles all the pieces you need to
build modern web and mobile apps, with a single JavaScript codebase.
Django: High-level Python Web framework that encourages rapid development and
clean, pragmatic design.
ASP.net: Free, fully supported Web application framework that helps you create
standards-based Web solutions.
Laravel: A free, open-source PHP web application framework to build web
applications on MVC pattern.
Zend Framework 2: An open source framework for developing web applications and
services using PHP.
Phalcon: A full-stack PHP framework delivered as a C-extension.
Symfony: A set of reusable PHP components and a web application framework.
CakePHP: A popular PHP framework that makes building web applications simpler,
faster and require less code.
Flask: A microframework for Python based on Werkzeug and Jinja 2.
CodeIgniter: Powerful and lightweight PHP framework built for developers who need
a simple and elegant toolkit to create full-featured web applications.

Task Runners / Package Managers

Grunt: JavaScript task runner all about automation.
Gulp: Keeps things simple and makes complex tasks manageable, while automating
and enhancing your workflow.
npm: Pack manager for JavaScript.
Bower: A web package manager. Manage components that contain HTML, CSS,
JavaScript, fonts or even image files.
Languages / Platforms
PHP: Popular general-purpose scripting language that is especially suited to web
development.

NodeJS: Event-driven I/O server-side JavaScript environment based on V8.

Javascript: Programming language of HTML and the web.
HTML5: Markup language, the latest version of HTML and XHTML.
Python: Programming language that lets you work quickly and integrate systems
more effectively.
Ruby: A dynamic, open source programming language with a focus on simplicity and
productivity.
Scala: Scala is a pure-bred object-oriented language allowing a gradual, easy
migration to a more functional style.
CSS3: Latest version of cascading style sheets used in front-end development of sites
and applications.
SQL: Stands for structured query language used with relational databases.
Golang: Open source programming language that makes it easy to build simple,
reliable, and efficient software.
Rust: Systems programming language that runs blazingly fast, prevents segfaults, and
guarantees thread safety.
Elixir: Dynamic, functional language designed for building scalable and maintainable
applications.

Databases
MySQL: One of the worlds most popular open source databases.

MariaDB: Made by the original developers of MySQL. MariaDB is also becoming very
popular as an open source database server.
MongoDB: Next-generation database that lets you create applications never before
possible.
Redis: An open source, in-memory data structure store, used as database, cache and
message broker.
PostgreSQL: A powerful, open source object-relational database system.
CSS Preprocessors
Sass: A very mature, stable, and powerful professional grade CSS extension.

Less: As an extension to CSS that is also backwards compatible with CSS. This makes
learning Less a breeze, and if in doubt, lets you fall back to vanilla CSS.
Stylus: A new language, providing an efficient, dynamic, and expressive way to
generate CSS. Supporting both an indented syntax and regular CSS style.

Text Editors / Code Editors

Atom: A text editor thats modern, approachable, yet hackable to the core. One of our
favorites!

Sublime Text: A sophisticated text editor for code, markup and prose with great
performance.
Notepad++: A free source code editor which supports several programming
languages running under the MS Windows environment.
Visual Studio Code Beta: Code editing redefined and optimized for building and
debugging modern web and cloud applications.
TextMate: A code and markup editor for OS X.
Coda 2: A fast, clean, and powerful text editor for OS X.
WebStorm: Lightweight yet powerful IDE, perfectly equipped for complex client-side
development and server-side development with Node.js.
Vim: A highly configurable text editor built to enable efficient text editing.
Brackets: A lightweight and powerful modern text editor; written in JavaScript, HTML
and CSS.
Emacs: An extensible, customizable text editor with built-in functions to aid in quick
modifications of text and code.

Markdown Editors
StackEdit: A free online rich markdown editor.

Dillinger: An online cloud-enabled, HTML5, buzzword-filled Markdown editor.

Mou: Markdown editor for developers on Mac OS X.
Texts: A rich editor for plain text. Windows and Mac OS X
Icons
Font Awesome: Scalable vector icons that can instantly be customized size, color,
drop shadow, and anything that can be done with the power of CSS.

IconMonster: A free, high quality, monstrously big and continuously growing source
of simple icons. One of our favorites!
IconFinder: Iconfinder provides beautiful icons to millions of designers and
developers.
Fontello: Tool to build custom fonts with icons.

Git Clients / Services

SourceTree: A free Git & Mercurial client for Windows or Mac. Atlassian also makes a
pretty cool team Git client called Bitbucket.

GitKraken (Beta): A free, intuitive, fast, and beautiful cross-platform Git client.
Tower 2: Version control with Git made easy. In a beautiful, efficient, and powerful
app.
GitHub Client: A seamless way to contribute to projects on GitHub and GitHub
Enterprise.
Gogs: A painless self-hosted Git service based on the Go language.
GitLab: Host your private and public software projects for free.

Local Dev Environments

XAMPP: Completely free, easy to install Apache distribution containing MariaDB, PHP,
and Perl.

MAMP: Local server environment in a matter of seconds on OS X or Windows.

WampServer: Windows web development environment. It allows you to create web
applications with Apache2, PHP and a MySQL database.
Vagrant: Create and configure lightweight, reproducible, and portable development
environments.
Laragon: A great fast and easy way to create an isolated dev environment on
Windows. Includes Mysql, PHP Memcached, Redis, Apache, and awesome for working
with your Laravel projects.
Diff Checkers
Diffchecker: Online diff tool to compare text differences between two text files. Great
if you are on the go and quickly need to compare something.

Beyond Compare: A program to compare files and folders using simple, powerful
commands that focus on the differences youre interested in and ignore those youre
not.

Code Sharing / Experimenting

JS Bin: Tool for experimenting with web languages. In particular HTML, CSS and
JavaScript, Markdown, Jade and Sass.

JSfiddle: Custom environment to test your JavaScript, HTML, and CSS code right inside
your browser.
codeshare: Share code in real-time with other developers.
Dabblet: Interactive playground for quickly testing snippets of CSS and HTML code.

Collaboration Tools
Slack: Messaging app for teams that is on a mission to make your working life simpler,
more pleasant, and more productive. One of our favorites, we use this at KeyCDN!

Trello: Flexible and visual way to organize anything with anyone. We also use this as
KeyCDN.
Glip: Real-time messaging with integrated task management, video conferencing,
shared calendars and more.
Asana: Team collaboration tool for teams to track their work and results.
Jira: Built for every member of your software team to plan, track, and release great
software or web applications.

Inspiration
CodePen: Show off your latest creation and get feedback. Build a test case for that
pesky bug. Find example design patterns and inspiration for your projects.

Dribble: A community of designers sharing screenshots of their work, process, and

projects.
Website Speed Test Tools
Website Speed Test: A page speed test developed by KeyCDN that includes a waterfall
breakdown and the website preview.

Google PageSpeed Insights: PageSpeed Insights analyzes the content of a web page,
then generates suggestions to make that page faster.
Google Chrome DevTools: Set of web authoring and debugging tools built into
Google Chrome.
WebPageTest: Run a free website speed test from multiple locations around the
globe using real browsers (IE and Chrome) and at real consumer connection speeds.
Pingdom: Test the load time of that page, analyze it and find bottlenecks.
GTmetrix: Gives you insight on how well your site loads and provides actionable
recommendations on how to optimize it.

Web Development Communities

Stack Overflow: Community of 4.7 million programmers, just like you, helping each
other.

Front-end Front: A place where front-end developers can ask questions, share
interesting links, and show their work to the rest of the community.
Hashnode: Global community for software developers to connect and learn
programming from each other.
Refind: Community of founders, hackers, and designers who collect and share the
best links on the web.
Google+ Web Developers Group: Web developers, web designers, and web coding.
Google+ Web Developers Group: Java, PHP, Ruby, JavaScript and Python Resources
Facebook WordPress Front-end Developers Group: WordPress Front End Developers
is a group for devs to ask questions, share their work, discuss emerging trends, and
collaborate.
LinkedIn Web Design and Development Professionals Group: Networking and
information sharing resource for professional Web Designers, Web Developers and
Web Masters.
LinkedIn Web Site Development Group: Website design & programming.
LinkedIn PHP Developer Group: PHP, Mysql, Drupal, Joomla, Zend, Cake, MVC.
LinkedIn WordPress Developers Group: WordPress Codex. Using WP as CMS and
CMF.
Webdeveloper.com: Where web developers and designers learn how to build web
sites, program in HTML, Java and JavaScript.
Sitepoint Forums: Web development discussion.
/r/perfmatters: The #1 subreddit about web performance and web development.
/r/webdev: Whats new for web developers.

Web Development Newsletters

wdrl.info: A handcrafted, carefully selected list of web development related resources.
Curated and published usually every week.

webopsweekly.com: A weekly newsletter for Web developers focusing on web

operations, infrastructure, deployment of apps, performance, and tooling, from the
browser down to the metal.
web tools weekly: A front-end development and web design newsletter with a focus
on tools. Each issue features a brief tip or tutorial, followed by a weekly round-up of
various apps, scripts, plugins, and other resources.
freshbrewed.co: A weekly reading digest for front-end developers and UX designers.
smashingmagazine.com: Smashing Magazine is an online magazine for professional
web designers and developers. Useful tips and valuable resources, sent out every
second Tuesday.
front-end dev weekly: Front-end developer news, tools and inspiration hand-
picked every week.
friday front-end: Front-end development links tweeted daily, emailed weekly.
/dev tips: Receive a developer tip, in the form of a gif, in your inbox each week.
perf.email: A bi-monthly newsletter bringing you the most interesting studies of all
things web performance and user-experience.

Sa luam pe rand ce inseamna fiecare categorie

JavaScript Libraries
Javascript is one of the most popular programming languages on the web. A Javascript
library is a library of pre-written Javascript which allows easier access throughout the
development of your website or application. For example, you can include a copy of
Googles hosted jQuery library by using the following snippet.
Front-end Frameworks
Front-end frameworks usually consist of a package that is made up of other files and
folders, such as HTML, CSS, JavasScript, etc. There are also many stand-alone
frameworks out there. We are a big fan of Boostrap and the main KeyCDN website is
built on it. A solid framework can be an essential tool for front-end developers.

Web Application Frameworks

A web application framework is a software framework designed to aid and alleviate
some of the headache involved in the development of web applications and
services. KeyCDN actually hosts a version of AngularJS, HTTP/2 and CORS enabled,
that you can use in your projects completely free. See code below. Full documentation
at angularcdn.com.

Task Runners / Package Managers

Tasks runners are all about automating your workflow. For example you can create a
task and automate the minification of JavaScript. Then build and combine tasks to
speed up development time. Package managers keep track of all the packages you
use and make sure they are up to date and the specific version that you need.

Languages / Platforms
Behind all the web development tools is a language. A programming language is a
formal constructed language designed to communicate with a computer and create
programs in which you can control the behavior. And yes we realize some of these
might not always be referred to as a language

Databases
A database is a collection of information that is stored so that it can be retrieved,
managed and updated.

CSS Preprocessors
A CSS preprocessor is basically a scripting language that extends CSS and
then compiles it into regular CSS. Make sure to also check out or in-depth post
on Sass vs Less.
https://www.keycdn.com/blog/sass-vs-less/
There are three primary CSS preprocessors on the market
today, Sass, LESS, and Stylus. In this post, we will be comparing the two preprocessors
which seem to be the most widely used among developers, Sass vs LESS. By switching
to a preprocessor can help streamline your development process.

What is a CSS Preprocessor?

Writing CSS can become quite repetitive and little tasks such as having to look up hex

color values, closing your tags, etc. can become time-consuming. And so that is where

a preprocessor comes into play. A CSS preprocessor is basically a scripting language

that extends CSS and thencompiles it into regular CSS.

Advantages to Using a Preprocessor

Once you have mastered CSS there are many advantages to using a preprocessor.

One of the biggest is probably not having to repeat yourself. In other words, it makes

your CSS Dry.

Here are some other advantages.

1.Cleaner code with reusable pieces and variables

2.Saves you time
3.Easier to maintain code with snippets and libraries
4.Calculations and logic
5.More organized and easy to setup

Sass Vs LESS
Sass and LESS are both very powerful CSS extensions. You can think of them as more

of a programming language designed to make CSS more maintainable, themeable,

and extendable. Both Sass and LESS are backward compatible so you can easily

convert your existing CSS files just by renaming the .css file extension

to .less or .scss, respectively. LESS is JavaScript based and Sass is Ruby based.
Text Editors / Code Editors
Whether youre taking notes, coding, or writing markdown, a good text editor is a part
of our daily lives!

Markdown Editors
Markdown is a markup language in plain text using an easy syntax that can then be
converted to HTML on the fly. Note: This is different than a WYSIWYG
editor. Markdown editors are sometimes referred to as the in-between WYSIWYG and
simply writing code.

Icons
Almost every web developer, especially front-end developers will at some point or
another needicons for their project. KeyCDN actually hosts a version of Font
Awesome, HTTP/2 and CORS enabled, that you can use in your projects completely
free. See code below. Full documentation at fontawesomecdn.com.

Git Clients / Services

Git is a source code management system for software and web development known
for distributed revision control. When working with teams, using a git client to push
code changes from dev to production is a way to maintain the chaos and ensure
things are tested so they dont break your live web application or site.

Local Dev Environments

Depending upon what OS you are running or the computer you currently have access
to, it might be necessary to launch a quick local dev environment. There are a lot of
free utilities that bundle Apache, mySQL, phpmyAdmin, etc. all together. This can be a
quick way to test something on your local machine. A lot of them even have portable
versions.

Diff Checkers
Diff checkers can help you compare differences between files and then merge the
changes. A lot of this can be done from CLI, but sometimes it can be helpful to see a
more visual representation.
Code Sharing / Experimenting
There is always that time when you are on Skype or Google hangout with another
developer and you want him or her to take a quick look at your code. There are great
team tools for sharing codelike Slack, but if they arent a member of your team there
are some great quick alternatives. Remember not to share anything secure.

Collaboration Tools
Every great development team needs a way to stay in touch, collaborate, and be
productive. A lot of teams work remotely now. The team at KeyCDN is actually spread
across many different continents. Tools like these below can help employees
streamline their development workflow.

Inspiration
We all need inspiration at some point or another. For front-end developers especially,
from time to time, it can be beneficial to check out what other people are doing. This
can be a great source of inspiration, new ideas, and making sure your web application
or site doesnt fall behind the times.

Website Speed Test Tools

The speed of a website can be a critical factor to its success. Faster loading websites
can benefit from higher SEO rankings, higher conversion rates, lower bounce rates,
and a better overall user experience and engagement. It is important to take
advantage of the many free tools available for testing website speed.

Web Development Communities

Every web developer has been there. They have a problem and what do they do? Well,
they go to Google to find a quick answer. The web offers so much content right at our
fingertips that it makes it easy to diagnose and troubleshoot problems when they
arise. Check out a few good web development communities below.

Web Development Newsletters

The last thing you probably need is another newsletter subscription. But these guys
handpick some of the best web development and performance topics from around
the web so you dont have to!