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
Get a Photoshop plugin that will help you perfect your work as a web designer! Here is the list of 10 amazing Photoshop addons:
Codly
Codly can automatically code your Photoshop mobile-design work, saving you lots of time and effort in development. With Codly you’ll have plenty of room for experimentation and new ideas. Codly’s interface is very intuitive, featuring a simple drag and drop system. This platform can generate code for BlackBerry, Windows 10, Android XML and of course iOS.
Random User Generator
Random User Generator is a free open source API which generates placeholder user data for forms and other similar structures. Random User Generator’s tagline is „Like Lorem Ipsum, but for people”. Data can include passwords, phone numbers, addresses, birthdays, emails and names.
Suitcase Fusion 6
Suitcase Fusion 6 is the perfect Photoshop plugin for Google font lovers. This little add-on will keep your fonts perfectly organized in Photoshop. You can compare fonts and preview them before implementing, which can save you a lot of time.
Retinize It
Retinize It allows designers to slice and export from certain groups or layers directly as assets. Not only that but this plugin offers designers the option to magnify smart objects or shapes by 200-300%, making it easier to prepare the image for iOS displays and retina.
PSD Cleaner
PSD Cleaner will organize your PSD files in an instant. Browsing for empty layers or missing names is no longer a drag with this neat little add-on. PSD Cleaner will set you back $19.99 but you can work without any distractions.
LayerCraft
LayerCraft can help you export individual assets to Photoshop layers. You can export directly to Android or iOS, with options such as trimming, duplicating, removing empty pixels and scaling up to 200% or down to 50%.
Photoshop Plugin for Prototyping
Usually, after you create a mockup in Adobe Photoshop you need to build it again from scratch for prototyping purposes. The UXPin app solves this issue by allowing complete integration. Just export your PSDs straight into the platform and then simply add interactions to your mockup for feedback purposes. This platform also preserves all your layers for prototyping.
Oven
Oven is a neat little Photoshop plugin that helps with other plugins – When you want to generate image assets from layers through the use of other plugins for web designers, you’ll need to name them appropriately before export images. Oven speeds up the process by baking your multiple layers properly. You can export in either .png or .jpg for Android or iOS. Oven also features a duplicate option which keeps your original label names intact.
Perspective Mockups
We all know that Photoshop CS6 offers some stunning presentation documents and deliverables. Perspective Mockups can make your PS files even better – this plugin allows you to stack, tilt, rotate or layer the perspective of the file according to your needs and preferences.
GuideGuide
This plugin allows designers to create highly customizable guides extremely fast. GuideGuide is a very popular Adobe Photoshop plugin – you can create guides with multiple options based on the selected layers, artboards and canvases. You can create instant guides for already designed selections – secondary options such as duplicating or sharing are also available.
Adrian Ababei / Apr 22'2016
Picking a programming language for app development can be a real challenge nowadays since there’s an endless choice of software to choose from. Different programming languages have different advantages and disadvantages, especially when it comes to app development, which requires certain specific features. App development specialists can pick from one of the 3-4 more popular programing languages but all these have different approaches to solving problems. As a general rule, you should go with a language that provides good tools for scalability, optimisation and maintainability.
Ruby for App development
Ruby is a favourite programming language for app development and web development – It can be used in many different areas such as writing scripts, apps, games, research, prototyping and administration. HP, NASA, Cisco and many other companies use Ruby for their tech needs. Apart from that, Ruby also works on Apache, nginx and there are even web servers written in Ruby.
Ruby was first created in 1995 by combining different languages such as Smalltalk, Lisp and Perl into one well balanced highly reliable programming language. One interesting aspect is that the program code is stored in plain text, which can be an asset.
Ruby’s a clean app development programming language
Ruby’s praised for its cleanliness and the following of certain principles which make app development easier:
There’s no need to repeat code – by simply writing it and putting it in the right place, Ruby spares developers from unnecessary work.
Conventions over configuration – with Ruby, there are plenty of methods already written and available for use but in certain cases they can be rewritten to fit a different purpose. This makes writing code much easier and clearer.
Objects
With Ruby, everything is focused on the object. This is called object-oriented programming meaning that each piece of code can have its own actions and properties. Here is an example of code in which an action is applied to a number:
10.256.round
# we will get a round number 10
In most languages primitive data types such as numbers are not objects – Ruby allows developers to define object variables and methods for all data types which in turn simplifies Ruby’s use since the rules applied to objects can be applied to the entire Ruby.
Ruby is flexible
Ruby’s owes much of its popularity due to its flexibility – it allows users to modify, override or delete basic parts as needed. Ruby’s main focus is freedom for the programmer – this is one of the reasons why it’s such a great app development language.
Ruby supports only single inheritance and offers the concept of modules where modules are collections of methods. Classes can mix in a module and receive all its methods. Eg: Any class may mix in enumerable module which in turn adds a number of methods that are used to create cycles:
class Collection
include Enumerable
end
Portability
Although it was developed on Linux/GNU, Ruby offers high portability – you can work on Windows XP/7, Mac OS X, UNIX and others. Another benefit is that you can work with the jQuery JavaScript framework, MVC, TDD, design demplates and ORM (ActiveRecord).
Community support
Community support is one of the most important strengths of Ruby. You can publish your own modules in the open access section of Ruby’s website or ask for help with your project. Thanks to Ruby’s community, thousands of solutions and code bits are available for users just one click away. This is a treasure trove for programmers building app development projects. Other useful things include authentication and authorization systems, test data, share buttons for social networks, e-mail sending systems and many others are waiting to be implemented. If you need to modify it, you can do it with ease and share it with the community.
Conclusions
All programming languages have strengths and weaknesses but Ruby is our top favourite due to its ease of use and versatility, especially when app development projects are involved.
Adrian Ababei / Apr 18'2016
Nowadays there are plenty of web hosting companies to choose from, all with different perks and different services available and more importantly, for different budgets. But which one best fits your need? How can you really know?
You need to pick a hosting company that fully supports your business needs and doesn’t hinder your way to success. There are many different factors involved such as bandwidth, your overall site speed, customer support and of course price. Here is a breakdown of the major types of hosting and some basic criteria to help you pick the perfect plan for your enterprise.
Most hosting plans fall into the following categories:
Individual plans
These are the most affordable hosting plans available these days. Most of these plans provide hosting support for only one single domain and limits on data storage, bandwidth and features apply. Individual plans are usually the best choice for webmasters who don’t expect a lot of traffic in their first year of business.
Dedicated servers
Individual plans are often called „shared hosting plans” because they share space on their hosting servers with different clients. Sometimes your business might outgrow the features and services offered by a limited individual plan – then you’ll need to upgrade to a web hosting plan that offers your very own server.
Dedicated server plans obviously cost a little bit more – Hostgator’s dedicated server plans will set you back $139 a month. If you expect you’ll need a dedicated server it’s best to pick a web hosting provider which offers both of these plans and allows transitions between them.
Reseller accounts
Reseller account plans are somewhere between individual plans and dedicated servers – these plans allow clients to set up multiple individual account plans within a single account. Most reseller account plans will set you back between $10 and $20 a month – these are best suited for companies with multiple smaller sites.
If you already decided on a hosting plan type, you need to consider certain aspects before signing up with a certain hosting provider:
If you already decided on a hosting plan type, you need to consider certain aspects before signing up with a certain hosting provider:
Your budget
While looking for more reasonable monthly rates you might come across free hosting services – you should avoid using these services as there considerable drawbacks such as unreliability and on site ads.
Customer reviews
Customer reviews are a great way to evaluate web hosting providers. These days it’s very easy to build a professional looking website full of bold promises so it’s a good idea to search for multiple customer reviews before signing up for a plan.
Customer support
Your host provider’s customer support team is crucial to building an online enterprise. Things often go wrong and you need to know they’re there for you 24/7. Not having a reliable customer support service can mean loss of income for you and your business so it’s a good idea to look for hosting companies that offer 24/7 email support, chat support and phone support before actually committing to a hosting plan.
Bandwidth and storage
Most decent hosting plans offer unlimited bandwidth and disk space, so it shouldn’t really be a concern. Although this is standard, you should be wary of any potential limitations your desired account might have.
Script support
One final thing you need to keep in mind is your hosting company’s support for web scripts. Let’s say you want to build a Word Press website – some web hosts offer built-in script packages that make the installation process a whole lot easier. Also check the number of MySQL databases your host supports – you’ll need more than one if you want to run Word Press and other programs on the same host.
Adrian Ababei / Apr 13'2016
A FTP Client is the software program you use to transfer files to and from your server or web host. Other more secure alternatives can include FTPS and SFTP.
What to look for in a FTP Client:
Having a GUI: This is a big plus when it comes to FTP clients. Some FTP clients offer a regular command-line interface but a graphical user interface is the norm nowadays – it’s also much easier to use and faster.
Supporting secure file transfer protocols: Plain FTP isn’t really secure – it doesn’t encrypt the data you’re transferring. As such, your data can become compromised en route to the server or web host. If that happens, just about anyone can read your username and password.
SFTP or SHH File Transfer Protocol is a more secure alternative to plain old FTP.
1. FileZilla
FileZilla is a free open source FTP client. FileZilla is fast and able to handle multi-threaded transfers or simultaneous transmissions. If security is your thing, FileZilla also supports FTPS and SFTP. This free FTP client is also available on all operating systems – Linux, Mac OS and Windows.
2. Cyberduck
Cyberduck can handle tons of simultaneous file transferring: Amazon S3, WebDav, SFTP and more. This FTP client features a minimalist UI, making it very easy to use. It’s available on Mac OS and Windows.
3. FireFTP
FireFTP is a Mozilla Firefox add-on with a strong SFTP/FTP client right in your browser. FireFTP is available on all platforms which run FireFox, including Linux, Mac OS and Windows.
4. Classic FTP
Classic FTP is free for non-commercial use. It features a very simple and intuitive interface, making it easy to use even for beginners. This file transfer client also features a “Compare Directories” feature which is quite useful – this feature helps you see any differences between your remote files and your local files. Classic FTP is available on Mac OS and Windows.
5. WinSCP
WinSCP is a very popular FTP client simply due to its long list of features. WinSCP can handle multiple file transfer protocols such as WebDav, FTP, SCP and SFTP. You can also make quick text edits with WinSCP’s built in text editor. Scripting support is available for power users on this Windows-only FTP client.
6. Transmit
Transmit is a very popular FTP client used by most developers on Mac OS. Although all of the FTP clients included in this list are free, Transit will set you back around $35 – it might not be the best choice for everyone but it does offer quite a few innovative features along with its user friendliness.
Adrian Ababei / Apr 12'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
User interface, also known simply as UI is one of the most important considerations when designing any product. Graphic designers as well as industrial designers use and implement UI design principles but user interface design is becoming more and more important in the digital world.
By following user interface design principles, web developers can make their websites or apps easier and more pleasurable to use. Nowadays the internet is flooded with engaging websites and apps – competition is very high so if you want to make the best out of your user interface and create satisfying user experience.
For user interface design companies and web developers good UI design means starting with basic elements such as fonts and colours, and ultimately to every component present on the web page or in the app. Here is a list of UI design principles which will help you along the way to create attractive and most of all effective UI design for your projects.
Following UI Design Principles
The idea behind UI design is simple: it should be centred around the future user. Every UI designer’s number one priority is to understand the intended user and his or her expectations.
That being said, it’s a good idea to begin with an analysis of potential users and their expectation. You can begin with either informal or formal research plus a lot of brainstorming. Defining your goals for the user interface itself is paramount to your project’s success in the long run.
Here is a list of questions you should take into consideration before beginning to work on the user interface design:
What does the user want from it?
Is your user comfortable with technology?
How does the user engage with the user interface?
Once the research part of the task is done, the UI designer can begin building it – afterwards real user testing is needed in order to measure results and make alterations.
UI Design Principles Prioritize Clarity
Very clear and specific features are the backbone of creating good UI design. Humans and users tend to ignore things they don’t understand – this allowed us to prioritize on things we consider important instead of wasting time on things we don’t understand.
When it comes to user interface design, the principles are the same – most users will simply ignore certain elements such as icons which they don’t immediately understand. Features without a clear purpose are also ignored. UI designers and user interface design companies need to focus on what the user wants or what the user needs from a website.
One great example of UI design clarity is Google’s decision to collapse the Gmail menu under a general grid icon. Visually speaking, it looks clean and quite appealing but this small change created many problems for certain users – they couldn’t find the features they needed and some of them didn’t even notice the new icon. When clarity is lost, user experience takes a dive!
UI Design Principles Imply Intuitive Layouts
Users need to be able to find the information they need without looking or thinking too hard. Every UI designer needs to create layouts that tells the user how to use the site’s features and how to navigate through it – by doing this you’re creating a better user experience and it also enables users to focus on getting what they need from the web page or app.
UI design companies need to consider the real life end users when building websites or apps. Sidebars, menus and other navigation tools should be easy to use and clear.
User interface design consistency is also important when building intuitive layouts – all elements and features need to be consistent in terms of use, colour, shape, font, etc. This way, users will be able to use them properly time and time again.
Instant Feedback is Important for UI design
Instant-feedback messages can boost your user experience. These messages are essential to keeping your users informed about their actions or what the website is doing – error messages, loading messages or icons, instant updates are essential to providing your users with feedback. Good UI design includes instant feedback for any of the user’s actions.
UI Design Defaults Should be Productive
A lot of users don’t even bother to change default features or settings on their interfaces. The iPhone default ringtone is a great example of this – the default setting is neutral. Auto-fill forms can save your users plenty of time by filling in information on their behalf.
Guided Actions
Instead of simply leaving users to guess on how they should use a feature why not remove all the guesswork by showing them how to complete certain actions? Good UI design always leads users towards a satisfying and productive experience. Features can be emphasized through size, colour, text or even extra buttons.
UI Design & Basic Design Elements
Many user interface designers think basic design elements can’t be innovative or fresh. This is false – good UI design implies using as many basic design elements as possible – these elements have a huge impact on your user experience. Here is a list of basic design elements which you need to keep in perspective:
Text size – Text weight has a great impact on shaping your user interface. For example, static text may require your users to zoom in, which can lead to a frustrating user experience.
Screen resolution – Good UI design works with varying resolutions. Poor resolution choices can have a negative impact on usability and readability.
Distortion – User interface designers need to avoid any disruption or distortion of visuals as it can impede your user from engaging with the user interface properly.
Contrast – Contrast makes all elements easy to engage and read. UI design should be accessible for users suffering for colour blindness for example. Keep in mind that low-contrast visuals can cause people with minor vision loss to struggle before finally leaving your website.
Conclusions on UI Design Principles
We are all becoming more and more engaged in the online experience so UI design is becoming more important for our daily activities. By following these simple UI design principles, UI designers can make a positive impact on most aspects of our lives.
Adrian Ababei / Apr 06'2016
Although many icon font sets are readily available for UI design use, sometimes you might want to get a bit creative and design your own custom icon font. Here’s how you can do it for free.
If you already have some icons designed and you want to turn them into an icon font set or you want to combine icons from different icon font sets just check out our list of 6 free icon font generators:
1. Fontello
Fontello is a really easy to use platform which you can use to generate icon font sets. To create an icon font, all you need to do is drag your SVG files onto the „Custom Icons” area. The best thing about Fontello is that you can also incorporate other icons from free sets with the click of a button.
2. IcoMoon App
The IcoMoon App offers thousands of already designed icons which you can edit, incorporate or build sets with. You’re also able to import your own icons into the app before generating a new set.
3. Icon Vault
In order to generate an icon font with Icon Vault you need to download their template package. Afterwards you can just follow the template’s instructions and when you’re done you can upload your work back to Icon Vault – Simple, easy and fun!
4. Pictonic Fontbuilder
Pictonic Fontbuilder allows you to generate your icon font set from over 2700 free and paid icons available. Around 300 of these icons are free for use but the rest are not very expensive. If you want to try Pictonic Fontbuilder you need to know that an account is required before using the platform.
5. Glypher
Glypher is one of our favourite icon font builders. The UI features an “icon shelf” on the right side of the screen where you can search for free icons to use. This platform also features a drag and drop system which makes building your set a whole lot easier. You can also upload your own SVG icons by simply clicking an empty icon box. Each icon font on Glypher can have up to 88 icons – if you premium accounts allow more than 88 icons in one font.
6. Fontastic
Generating an icon font with Fontastic is easy – simply select your desired icons from the available free icons sets or upload your own SVG icons. Once you’re done, click on the “Publish” tab and you’ll be able to either download your icon font or host it on Fontastic’s Icon Cloud. You’ll first need to sign up for an account with Fontastic before you can use their platform.
Adrian Ababei / Apr 05'2016
Last summer we had to convert a huge code base from Javascript to Typescript. During this transition I learned a lot about the differences and similarities of the two. I developed an idea about what makes a good use case for Typescript and when it doesn’t make sense to use it.
Use cases for Typescript
1. Code size: When the source code is huge and more than one person works on the project, a type system can help avoid the obvious errors. This is specially true for SPAs. When someone can change code that potentially breaks another one’s code, it’s generally good to have some sort of safety mechanism. The TS transpiler reveals the obvious mistakes and is kinda smart (but can’t eliminate the need for debugging of course). If the source code is not huge, it probably doesn’t make sense to make it longer by adding type annotations. I have converted 180+ files from JS to TS and in most cases it added roughly 30% to the code size. 2. Previous baggage: if you or the majority of the team come from a strongly typed language like C# and does’t really want to go JS all the way, TS is a good alternative. Even though I recommend learning Javascript for good, there’s nothing preventing you from using Typescript without knowing Javascript. In fact Typescript is made by the same guy who made C# so the syntaxes are similar. In my company we had a team of C# developers who were coding a sophisticated desktop application in C#/WPF (which is front end in the desktop world) and then they were tasked to join my web project as full stack. So it was relatively a shorter path for them to learn Typescript for front end and leverage their C# knowledge for the backend. 3. As a replacement for Babel: The old Microsoft used to take something that is standard (for example Java) and add proprietary non-standard stuff to it (for example J++) and try to force developers pick one. Typescript is exactly the same thing to Javascript (after another try in 1996 divertingJScript from Javascript). Anyway, since ES6 is basically a subset of Typescript and the Typescript transpiler generates ES5 code, it’s practically possible to transpile ES6 code to ES5 (just as Babel) using the typescript transpiler. Though it’s not a strong use case IMHO. Typescript’s transpiler generates pretty readable ES5 code as output and that was one of the reasons Angular 2 team chose TS over Google’s own Dart language. 4. Promoted by lib/Framework: If you are using Angular 2 or another library that makes it particularly interesting to use Typescript, go for it. Just know that even though Typescript can use all Javascript libraries out of the box, if you want good syntax errors, you need to add the type definitions for those libraries externally. Fortunately the nice guys atDefinitelyTyped have made a community driven repo and tooling for that. But that is one extra step when you’re setting up your project (side note: for the JSX fans I should mention TSX).
When you’re better off without Typescript?
1. Extra transpilation tax: There are no plans to support Typescript natively in the browsers (Chrome did some experiment but cancelled later). This means you will always have to transpile your TS code before running it on the browser. For the standard ES6 it’s a whole different story. When ES6 is supported by most browsers, the current ES6 to ES5 transpilation would be unnecessary. ES6 is the biggest change in the language and I suspect most people would settle there, but those who want to try the experimental features of the next version of the language will transpile anyway. You just modify the file and refresh the browser. That’s all — no “watching” or “transpiling on demand” or build system is necessary. If you choose TS, you probably end up doing some extra book keeping for the keeping the type definitions for Javascript library/frameworks up to date (using Definitely typed or writing your own type annotations). That’s something you wouldn’t do for pure JS projects. 2. Weird debugging edge cases: Sourcemaps make it easier to debug Typescript, but the status quo is not perfect and there are really annoying/confusing edge cases that the browser thinks you are running a certain line of code but you are not. Also there are some problems debugging the `this` keyword and properties attached to it (hint: `_this`works in most cases). That is because Sourcemaps currently don’t have a good support for variables (but that might change in the future). 3. Performance penalty: in our project we had 9000+ lines of ES5 Javascript that delivered pure horse power for a WebGL component but we kept it that way. Typescript transpiler (just like Babel), has features and generates code that no matter how good the transpiler is, can’t surpass the optimisations of a good programmer. So we decided to keep it in plain ES5 for ease of debug and deployment (no transpilation whatsoever). That being said, the performance penalty probably is negligible compared to benefits of a type system and more modern syntax for most projects, but there are cases that milliseconds and microseconds matter and in those cases transpilation of any kind is not recommended (even Babel, CoffeeScript, Dart, etc.). That being said, Typescript doesn’t add any extra code for runtime type checking. All the type checking happens at transpile time and the type annotations are removed in the generated Javascript code. 4. Agility: it’s quicker to set up something in Javascript. The lack of type system makes it super agile and easy to change stuff. Sure you can break things easily but if you know what you’re doing, Javascript is more flexible. Remember one of the main use cases for using a type system is to make it hard to break stuff. If Typescript is Windows, Javascript is Linux. In JS land you don’t get the “helper wheels” of a type system and you’re assumed to know what you’re doing but you can ride faster and maneuver easier. Particularly if you’re in the prototyping phase, don’t waste your time with Typescript because JS is simply more agile and flexible. That being said, if you use a typed language, it might be quicker to write/modify code in an IDE because the type system makes it easier to determine syntax. Source: https://medium.com
Adrian Ababei / Mar 28'2016