Every expert from every field has his or her own tools of the trade and web development is no different – web development tools are one of the most important factors to every project and these tools could mean the difference between finishing your project on time or passing multiple deadlines. Luckily enough, plenty of top web development tools are available for just about every platform. Here is our list of OS X apps which you should include in your web development tools box:
Browsers for web development
One of the most important tools for web development is a browser – you’ll need to view your website after you created it right? But it’s not so simple – you will need to test your website for many browser versions, including beta and nightly builds. With that taken into consideration, you’ll most likely need Opera Next, Chromium, Chrome Canary, Firefox Aurora, and Firefox Nightly.
Koala
Koala, apart from its cute name, is another nifty web development tool which is used to compile CoffeeScript, Compass, Sass, and LESS into a browser-compliant format. If you’re using any of these techs, Koala is definitely a must.
Anvil for web development
Anvil is an interesting free app which allows web developers to create .dev domains. You’ll see it as a new icon in the OS X menu bar and you can turn it on or off, create domains or add your projects to it. If you’re looking for a tiny web development tool to manage or work on your local websites with, Anvil is perfect.
Keka
When handling multiple files, you need a reliable compression service to help you along. Most web developers may use ortar, rar or zip but Mac has its own built-in feature to extract and manage these formats – this service is rather limited so you’re better off with Keka. Keka is a free open source OS X app for file compression and extraction.
Keka supports zip, rar, ortar, ISO, DMG, Tar, Gzip, 7z and it can extract to PAX, CAB, EXE and RAR formats. Keka allows you to split compressed files into different parts of specified sizes, apply password restrictions or automatically delete source files after extraction or compression.
Web development & Web Sharing
Since Apple removed the Web Sharing option from the OS X system preference, you might want to install the Web Sharing plugin. This little plugin will allow you to host local websites under the local host address. Once you install it you’ll be able to see a new panel in System Preferences – here you’ll be able to switch web sharing off or on.
File compression, One of The Very Top Web Development Tools for Mac OS X
We talked about Keka before but there are two ways you can use it to compress files. You can either download this small web development tool and install the services contextual menu or you can drag and drop your files directly into the Keka app window.
Sequel Pro
MySQL is one of the most popular databases in the world – plenty of websites rely on MySQL for storing and managing databases. If you are using OS X, Sequel Pro is a must-have for web development. It’s a native OS X app built in Cocoa and it also features a nice and friendly GUI. With Sequel Pro you can create, filter databases, import, export, remove, create users and execute MySQL queries.
The iPhone Emulator
All web developers need to take mobile users into account when building their websites, hence the need for a web development tool that can be used to test websites for specific platforms. Devs can use physical tablets or phones or they can go for the easier option – a simulator like iPhone Simulator. All you need to do is just install Xcode from the AppStore and you’re done – you have another web development tool in your little toolbox.
Icons8
If you’re looking to use icons, Icons8 is one of the top web development tools that you can use. Just install Icons8 and you’ll be able to search through its over 2800 collections of icons. Once you find something you like, you’ll be able to copy it to Finder, Xcode or Photoshop.
Github and SourceTree
Even if you’re building a small website or a presentation website, you’ll need a control version system to track your revisions and changes to the project’s code. Github is the most popular service for version control and you can install it on OS X as well. SourceTree is another mentionable service – both of these services are the backbone of any respectable web development agency.
Poedit
Poedit is the best web development tool you can use for translating websites into multiple languages. Not only that but you can translate plugins and Wordpress Themes as well with this little app.
Automator
Automator is a web development tool that’s pre-installed with OS X. This little app allows users to automate tasks such as cropping multiple images at once, creating thumbnail images, changing file extensions and renaming files in batch.
Dash
Dash collects documentation for a lot of the popular programming languages, including LESS, Sass, jQUery, CSS3 and HTML5. Users can search through code snippets, functions, syntax, and other valuable information.
Adrian Ababei / Apr 28'2016
As we all know, programmers and designers don’t have a lot in common in terms of workflow or the software used to complete their tasks. Communication and synergy between programmers and designers can either make or break a project.
How can you improve your work with a programmer? Implementing a clear workflow and respecting it is crucial – both parties need to provide feedback as work continues and a clear plan of action needs to be set in place for the current project.
Start planning your project
Simply shipping your design work over to the programmer may work on very small tasks or smaller projects but for larger, more complex projects it could turn into a disaster. The workflow needs to be accompanied by careful planning.
Your average plan should include a schedule estimate and an approximate cost. If you’re building the project for a client, cost estimates are mandatory. Project planning needs to also account for how an optimal collaboration can be reached – the small details count in this phase.
Prepare your design for coding
Instead of simply handing over your design work along with a few requirements to the programmer and waiting for the results to appear, designers need to also focus on things which will enable the programmers to help them in the long run.
Here are a few aspects and tips you need to take into consideration when producing your design:
Your key objective is Pixel Perfect – If you want your programmer to implement your design work properly, you need to provide him with exact details – elements such as colours, style, fonts, margins and padding need to be specified exactly before the programmer can begin his portion of work.
Keep in mind that by doing this you eliminate the need for future changes or revisions – as a result the overall cost of your project will be reduced.
Follow Photoshop Etiquette – Designers should properly name layers and structure their files accordingly. Images need to be aligned and the programmer needs to be provided with plenty of information – it goes a long way in building your project and speeding up your workflow.
Keep in touch with the coder – It’s a good idea to maintain contact with the coder on a regular basis and ensure he has all the information he needs to properly do his portion of the project. Developers really appreciate it when you provide your support.
Designs for interactions are important – These designs can be a great help to your coder as well. Examples can include the intended use of sliders, button hover states, dropdown menus and others.
Research on the technology used – You’ll get a better understanding of what’s feasible from a programming point by keeping up to speed with the latest tech trends. Sometimes designers may ask for features which are simply impossible to implement.
Don’t rush, time is plenty
Planning ahead, coordinating your work and providing clients with meaningful estimates will save you a lot of time in the long run. Transparency will help all people involved to get a better understanding of the overall project and speed up the workflow.
Adrian Ababei / Apr 25'2016
I’m not a fan of color theory. But the theory has always eluded me, and, truthfully, I’ve never found it useful when trying to use color in my projects. Somewhat ironically, I’ve been finding that the better I get at choosing and using color, the better I become in the theory behind it. Of course, that doesn’t really help when you’re just starting out, does it? That’s why, in this article, you won’t see a single color wheel. Instead I’m going to show you a simple color workflow that you can use in your next web project. You will, of course, subconsciously be learning the theory along the way. So, I recommend coming back in a few months time and giving the theory another go.
Choosing A Base Color
We can see something like 10 million colors at any given time, that’s a huge amount of colors. And out of those, we need to choose one — just one color — to be the base of our website, for our brand. Everything will stem from this one color, so it’s kind of important.
How to choose a starting color
Now, picking a color out of the blue (pun intentional) would be quite easy, but we’re not going to do that. For any project in which you’re having contact with clients, you should try to justify as many of your choices as you can. If you don’t, it’ll be a case of your favorite color versus their favorite color. They’re the client. They’re paying you. They will win. Don’t think too much about it. Just make sure you have some kind of reasoning behind your color choice (and every choice, for that matter). It’ll make you look good.
Tips on choosing a starting color
• Use what you have. If the client has a logo with an established color, that will usually be your starting color. • Eliminate your competitors’ colors. If one of your main competitors has a strong brand color, don’t copy it if you can help it. Find your competitors’ colors to eliminate them from your own color schemes. • Think about your target audience. The colors of a website for a pizza shop would sure be very different from the colors for a kids club. Think about who will be using the website and how you want them to feel (excited, serious, taken care of, etc.). • But don’t default to stereotypes. If you’re designing a website for young girls, you don’t have to use pink. Avoid clichés to gain credibility. • Play a word game. If you’re struggling, write down any words that you associate with the client’s business. This list should give you some ideas for colors. If you’re really struggling, hop on any website about color meanings and see which fits best. You should now have a base color in mind for the design. It should be something simple like red, green, blue, yellow or pink. We’ll get to the exact shade next. Let’s say you choose blue.
Choosing A (Nice) Base Color
Instead of messing about with Photoshop’s color-picker to find a nice shade of blue, we’re going to steal like an artist and use other people’s design choices to help us out. First, go to Dribbble.com and Designspiration.com and click on the “Colors” link in both. You can use this as the next step to find the right shade of blue. For a fresh and energetic brand, go for one of the lighter, brighter blues (one of the top five options). For something a bit more corporate and serious, the bottom five should be a better fit. Choose a shade from each website to see actual designs that use that color. You can then use any of CSS-Tricks’ color-picking techniques to grab the exact colors right in the browser. Not only will you see different versions of your base color, but you will easily see colors that match.
Creating A Strong Color Palette
All right, you should now have a HEX value for your color. Now we’re going to make a palette out of that color. And it’s easier than you think. The problem with this kind of color palette is that applying it to a real design isn’t very practical. Most palettes have way more colors than you’d ever need, especially considering that we need to add an average of three neutral colors to every scheme: • white, • dark gray, • light gray (optional). If you tried to add five or six colors to the neutrals, it would be a mess. All you really need are two colors: • a base color, • an accent color (we’ll get to this in a jiffy). If you can create a website using only these five colors, you’ll get a much better result than if you were to go overboard with complementaries, split-complementaries, triads and the rest.
Finding your accent
Your accent color will be used in very small amounts on your website, usually as a call to action. So, it needs to stand out. Your next step is to go to Paletton.com and type your HEX code into the color box. From here, you can find your accent in two ways. First, you could click the “Add Complementary”! That yellow there? That’s your accent. Alternatively, if you don’t like the color it has generated, you can click around the icons at the top to find something more suitable. Personally, I quite like the red that comes up under the triad icon, so I’m going to use that for our scheme. There is, of course, science and stuff behind what Paletton is doing; but, for now, let’s put a pin on it. You’ll learn the theory a bit later, and all will become clear. So, below is our color scheme as it is now. We’ve got a nice base color and a shot of an accent. Let’s add white to the mix, because white is always good. All that’s missing now are some grays.
Adding the gray
For most of my web projects, I find having two shades of gray to be infinitely useful — one dark, one light. You’ll use them a lot. The dark is usually used for text, and the light for when you need subtle differentiation against all that white (usually for backgrounds). You can choose your grays in one of two ways: • You could use Dribbble.com and Designspiration.com again to find a nice gray from your previous results that matches your base color. But usually it’s easier to type blue website in the search bar, which will show more grays in the results. • If you have Photoshop or the like, you could use Erica Schoonmaker’s technique to harmonize your grays with the base color.
Creating harmonious grays
To get our shiny new harmonious grays using Erica’s method, we’ll start by picking two default grays out of a hat. Then, follow these steps: 1. Create two shapes and fill them with #4b4b4b and #f5f5f5. 2. Insert a color fill layer above your two shapes. 3. Change that fill to your base color. 4. Set the blending mode to overlay, and bring the opacity right down to between 5 and 40% (in the example below, it’s set at 40%). 5. Use the color picker and copy your new values. I should point out that this method works exceptionally well when your overlay color is blue. For any other color, you will want to either bring the opacity right down to 5 to 10% or stick with your original grays. Our color scheme is complete.
Applying Your Color Scheme
Now that we’ve got our color scheme, it’s time to apply it. This is a whole other article unto itself. Tip: If you struggle with color, a good trick is to create your website layout in grayscale first. Figure out the hierarchy, and then experiment with the color later. Our accent, red, stands out beautifully against the base color. This is used in very small areas, for buttons and in the icons. The less you use this color, the more it will stand out. The dark gray is used for the text, logo and icon outlines. (Don’t skip putting the colors in your icons. It’s a small detail but makes a big difference.) The white and light gray form the background. The light gray doesn’t have to be here at all, but I find it is another small detail that really makes a website look polished.
Conclusion
As you can see, we really don’t need much more than the palette we’ve created today. But that doesn’t mean you are limited to these colors! As you’re designing, you might decide it’s appropriate to introduce some more colors to your palette. That’s totally fine! As long as you’re attentive, you can use the steps above to find more colors that work with your scheme. The beauty of this is that the more you do it, the better you’ll become at choosing colors. You’ll get to know what works together and what doesn’t. Sometimes, the method above will yield results that are less than desirable, so feel free to tweak things. Play around and have fun learning color theory, without the theory!
Source: https://www.smashingmagazine.com
Adrian Ababei / Apr 07'2016
Most web developers use CCS on a daily basis – This can be a good thing or a bad thing, depending on the organization of your codebase. Larger projects can be a CSS nightmare when not properly organized.
Good CSS etiquette requires well thought out coding principles, a good foundation and a large selection of tools to make your work easier. Each project, individual or team is different so the resources and tips below may or may not apply to your project but most of them can be incorporated into your workflow.
Coding Principles
Usually before starting your project you need to get together with your team members and decide on why and how you will do things. This will lead to a better and longer lasting CSS codebase. You can do this in different ways and styles, according to your needs and preferences. For example, you can use a text file or Google doc that’s shared between team members. It can also be its own website – it all depends on the scale and importance of your project. It’s a good idea to take a look at GitHub, it might help you get started.
CSS Preprocessors
CSS preprocessors can be a huge benefit to your project, if they are used correctly. Less and Sass are some of the most popular CSS preprocessors available. Preprocessors can be very helpful due to their features: limited nesting, multiple files, mixins and variables. Before implementing or using a CSS pre-processor, ensure that all team members are on the same page.
Starting resources
When working on a greenfield project, it’s a good idea to use Normalize.css. Normalize.css helps browsers to render all elements consistently. You can also check Jonathan Neal’s Sanitize.css. Another useful little resource is Bass.css, which is a collection of utilities and base element styles.
Grids
Generally speaking, sites that start of small will continue to grow bigger over time – without a solid grid foundation in place things can become very complicated very quickly. Hence it’s recommended to have simple or complex grid systems within your CSS which will spare you a lot of work in the long run.
Tools
A good foundation and solid principles is the base to creating good CSS. Let’s take it to the next level by using tools to improve our workflow. The most popular tools nowadays are Gulp and Grunt – each of these tools has a selection of features which we can use to provide feedback, manipulate the code and help enforce rules.
Other useful plugins include:
Recess – Developed by Twitter, it is a simple yet attractive code quality tool for CSS
CSS Lint – As the name states, this plugin helps you lint CSS files
PostCSS – One of the most popular CSS processors, currently used by Shopify, Twitter and Google
Page Speed Insights – You can run desktop and mobile performance tests for your site with reporting to help you with building the website.
Gulp and Grunt offer plenty of plugins that not only help your CSS but other aspects of your project as well – it’s highly recommended to spend time and familiarize yourself with these two.
Performance is very important for any online project, so you should definitely check out these tools and speed up your website: SpeedCurve, WebPageTest and Calibre.
The EditorConfig plugin is great when you’re working on a codebase with other developers. This little plugin aligns the coding standards set out by the team leader and ensures everyone is on the right track.
Conclusions
Experience always helps when creating CSS but keep in mind that nothing will ever be perfect. Keep analysing your code in order to ensure proper results and if you ever get stuck simply ask a friend for help.
Adrian Ababei / Mar 30'2016
The concept is simple: you can use more complex CSS files that could contain variables, functions, “mixins” and other things, too. These files would be compiled after development into normal CSS files supported by all the web browsers out there. First, you would ask yourself: “Why should I use a more complex CSS, if the old and simple CSS works just fine?”. The main answer for this question is quite simple: because it simplifies your work, you will write less. For a more detailed answer, I will write some reasons why a preprocessor is better: - regular CSS is a very simple language: you have selectors for targeting elements and you style these elements with different properties; yes, this would make the language more friendly for amateurs and designers (even if they don’t have experience with computer programming), but this forces you to do things the long way - with CSS preprocessing you can start using variables and functions, this will allow you to reuse parts of your code over and over again - you wouldn’t repeat yourself anymore CSS example: .simple { font-size: 20px; font-weight: 600; line-height: 1.3em; text-transform: capitalize; } .simple-red { font-size: 20px; font-weight: 600; line-height: 1.3em; text-transform: capitalize; color: red; } .simple-blue { font-size: 20px; font-weight: 600; line-height: 1.3em; text-transform: capitalize; color: blue; } The same code using Less: .simple { font-size: 20px; font-weight: 600; line-height: 1.3em; text-transform: capitalize; } .simple-red { .simple; color: red; } .simple-blue { .simple; color: blue; } - as you can see, nothing is repeated, that means you will save a lot of time and you can use this time for other things - you will update your code easier (besides the fact that you don’t need to remember some things) For example, you can define variables for colors like this: $red: #FF0000; $blue: #0000FF; After that, you can use them for different elements, for example: h1 { color: $red; } h2 { color: $blue; } If you decide that $blue is not ok and you want to change it, you only modify it once at the beginning and it will work for all your code. - your CSS code will be more organized, both LESS and SASS support nested definitions; for example: Normal CSS: p { color: red; font-size: 15px; font-weight: 600; } p span { color: blue; font-size: 16px; font-weight: 300; } p span:hover { color: #FFF; text-decoration: underline; } Using a preprocessor: p { color: red; font-size: 15px; font-weight: 600; span { color: blue; font-size: 16px; font-weight: 300; &:hover { color: #FFF; text-decoration: underline; } } } - it’s easy to use; for example, for SASS you would write a simple command line to watch for your SASS files and compile them automatically if you would modify anything - you will spend more time to make your website prettier (using the time you saved) - it’s easy to use, you will learn it faster than you think - you can use frameworks, the most popular one, Compass, automatically generates vendor-specific CSS properties and has lots of useful functions
Adrian Ababei / Feb 16'2016