LATEST FROM OUR BLOG

Take your daily dose of (only) relevant news, useful tips and tricks and valuable how to's on using the latest web technologies shaping the digital landscape. We're here to do all the necessary information sifting for you, so you don't have to, to provide you with content that will help you anticipate the emerging trends about to influence the web.

Swift - „first class” language for Android?
When Swift was going open source, representatives for three major brands — Google, Facebook and Uber — were in London discussing the new language. Sources said that Google is considering making Swift a “first class” language for Android, while Facebook and Uber are also considering Swift. Google’s Android operating system now supports Java as its first-class language, and sources say Swift is not meant to replace Java, at least initially. While the ongoing litigation with Oracle is likely cause for concern, sources say Google considers Swift to have a broader “upside” than Java. Swift is open source, which means Google could adopt it for Android without changing its own open source mobile structure. Could Google do it? Born at Apple as a replacement to Objective C, Swift quickly found favor with developers as an easy-to-write language that shed much of the verbosity and clumsy parameters other languages have. Swift can’t be copy-pasted for any platform, though. Specifically, Android would need a runtime for Swift — and that’s just for starters. Google would also have to make its entire standard library Swift-ready, and support the language in APIs and SDKs. Some low-level Android APIs are C++, which Swift can not currently bridge to. Those would have to be re-written. Using Swift for Android is not impossible, though. Late last year, developer Romain Goyet toyed with Swift for Android — and had some success. While that project was completed well ahead of Swift being open source, it nonetheless proved that it can be done. That project used the Android NDK, which allows other languages to be loosely implemented into Android. With an open source Swift and support from Google, Android apps wouldn’t require that toolkit. All told, Google would have to effectively recreate its efforts with Java — for Swift. Facebook and Uber Facebook’s interest in Swift appears to be completely founded in technological advancement. A benefit of Swift is that it can serve as both a forward-facing language as well as a server-side one. For a product like Facebook, that’s beneficial; apps and servers can speak to one another seamlessly, and it potentially gives the company a wider scope to write APIs for services. And work may have already begun. A Github pull request in the Swift repository named ‘Port to Android’ was made by a Facebook employee. It’s not clear if his work was official Facebook business or not, though we have confirmed Facebook is already working with Swift internally — it’s just not known how thoroughly. Uber’s road to Swift is probably a bit cleaner than either Google or Facebook. When could a move to Swift happen? We think that this won’t happen anytime soon, mainly because of Android. But Swift is quickly finding its way. Several studies suggest it’s one of the fastest growing languages around, and has blown up since going open source (GitHubtells The Next Web the language is currently its 11th most popular). Demand for developers who know Swift is also exploding, which could be all the indication these three companies need to at least explore using Swift more thoroughly. Google’s onboarding for Swift would be long; it essentially has to rewrite every Android service, app and API. Google would also have to spearhead Swift support for Android — which is still only being poked and prodded at by clever developers in the Swift community. In a way, Google has already begun moving away from bits of Oracle-flavored Java. It’s now using the Open JDK for Android rather than the proprietary Java API, and may be considering a post-Java life altogether. Talks in London were said to be exploratory; Google is not yet pushing to move on from Java. While it would be a big undertaking, Swift is meant for speed and safety, and Swift’s roadmap suggests it won’t be quite as difficult to use it for other platforms in the future, specifically when it comes to C++. Facebook and Uber face similarly daunting tasks when it comes to using Swift throughout, but can –and should — wait for Google to shoulder the load with Android. If the use of Swift is going to be as deep as our sources indicate (that is, all companies want to be using it for server side and forward-facing use cases), Android support is integral. Moving to Swift for any of the companies also makes little sense unless it’s a thorough re-do, but it’s probably not quite as hard as it sounds. Services like Perfectprove that server-side Swift is ready, and it’s worth considering that Facebook’s engineers (perhaps from the Parse team) may already be working on this. IBM is also working to make Swift ready for server-side functions. But don’t expect Google, Facebook or Uber to announce Swift-y plans anytime soon. Facebook and Google both have developer conferences on the horizon, and there’s no indication that Swift will play a major part at either. Source: http://thenextweb.com ... Read more
Adrian Ababei / Apr 08'2016
Color Guide
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 ... Read more
Adrian Ababei / Apr 07'2016
What Are the Essential UI Design Principles that You Should Stick To? Top 7
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. ... Read more
Adrian Ababei / Apr 06'2016
How to Create Your Own Icon Font: 6 Free Tools that Allow You to Generate Custom Fonts
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.     ... Read more
Adrian Ababei / Apr 05'2016
What’s New in PHP7? Top Features that Will... Rock Your World
PHP has been the fourth most popular coding language in the world for seven years straight. More than 200 million websites and around 82% of public websites are powered by PHP. PHP 7 Released PHP took a huge leap forward with the release of the first major update since 2004. PHP 7 boasts massively improved performance – up to three times better performance than PHP 5.6 when running WordPress. PHP 7 boasts other changes as well - return type declarations, reduced memory usage, the spaceship operator and many more. PHP also features some breaking changes such as the removal of magic quotes and the PHP safe mode as well as a number of new reserved keywords. Web apps such as WordPress needed a few touches in order to be able to support PHP 7 but now it’s fully compatible with the new programming language. While PHP 7 has been released very recently, it may take a few years until it’s widely adopted by the majority of websites. Most applications tend to take a few years to adapt to upgrades but we hope that the increased performance will make these upgrades come sooner. PHP 7 comes with a new and improved version of the Zend Engine, featuring numerous perks such as: General performance: The new PHP 7 is up to three times as fast as the older version Zero cost asserts Anonymous Classes Return and Scalar Type Declaration The null coalescing operator Removal of old and unsupported SAPIs and extensions Secure random number generator Many fatal errors converted to Exceptions Improved Exception hierarchy Consistent 64 bit support Abstract Syntax Tree Memory usage is significantly reduced ... Read more
Adrian Ababei / Apr 05'2016
New Modules Released to Improve Drupal’s Content Workflow
Drupal recently released a new set of foundational modules which can improve Drupal development and Drupal’s workflow. The modules range from full-site preview, user experience improvements, auditability, multi site content staging, content staging and more. Here’s a few tips and examples on improving your overall drupal development workflow:   When to use these drupal modules Here’s when and why you should use these modules for your drupal development projects. Coss site content staging – You may want to synchronize content from one site to another. The first website can be a staging site where your content editors make certain changes and the second one can be the live production site. Content changes can be previewed on the stage site and then published on the second website. Content branching – If you want to launch a new product you might want to create a new version of your site with a section dedicated to featuring your new product. With this new section you can introduce new menu items, upgrade pages and introduce new pages. Previewing your website – When building a new section on your site, you’ll want to preview it before going live with it – this is content staging on a single site. Offline browse and publish – Sites should be functional even in offline mode and record any forms or changes – when the connection is restored everything can be syncronized. Content recovery – People often delete things they really didn’t want to delete, you should give users the ability to recover any content that has been deleted. Audit logs – Certain companies or organisations may want to have all content revisions to be logged in order to be reviewed. Certain revisions or actions can be linked to specific users, thus making employees accountable for their actions within the content management system.   Drupal development technical details The cases above have some similar traits: Content needs to be synchronized between two spaces – from site to site or from backend to frontend Revision history is kept for all changes Content revision conflicts are tracked These features started off as a single module called Deploy. Nowadays Drupal development makes use of a large number of different modules: Deploy Multiversion Replication Workspace RELAXed Web Services Trash   Multiversion for Drupal development The Multiversion module keeps track of any conflicts in the revision tree, introduces the concept of parent revisions and adds revision support for all content entities built in Drupal, not just block content and nodes.   Replication module for drupal development The replication module is built on top of the multiversion module – it will help users with revision informations in order to determine which revisions are missing for a certain location. This model also allows drupal developer to replicate content between a source and a target location.   Workspace for drupal development This light module allows full site previews and single site content staging. The user interface allows your average drupal developer to create special workspaces and to switch between them as needed.   RELAXed Web Services The RELAXed Web Services module allows cross-website content staging. This is a more extensive REST API for Drupal development with full support for UUIDs, parent revisions, file attachments and translations. These features are essential for content staging.   Deploy module for Drupal development Before the release of Drupal 8, the Deploy module took care of everything related to content staging – top to bottom. After Drupal 8’s release, Deploy was rewritten to provide a user interface on top of the Workspace and Replication modules. This user interface allows your average drupal developer to manage content deployments between different workspaces on a single website or across multiple websites.   Trash module The Trash module is used to restore content related entities marked as deleted. It basically works like a recycle bin, displaying all entities from all supported content types where the default revision is flagged as deleted.   Synchronizing your websites with an API If a Drupal website has RELAXed Web Services installed and enabled, it will behave and look like the REST API from CouchDB. This allows a drupal developer to use CouchDB tools such as PouchDB.   Conclusions All of these great improvements that can boost your drupal development workflow, effectively allowing you to create better products faster. Check them out! ... Read more
Adrian Ababei / Apr 04'2016
What is Drupal?
Drupal is a popular open-source content management system written in PHP. Having been created in the early 2000s by a Belgian student, it now powers some of the most prominent websites on the web (WhiteHouse.gov, Weather.com, etc.). It is often regarded as a competitor of CMSs such as WordPress and Joomla. One of the most important components of the Drupal project is its community of supporters (contributors, developers, evangelists, business owners, etc.). Prominent within this community stands the Drupal Association, responsible for "fostering and supporting the Drupal software project, the community and its growth". A giant leap from its predecessor, the 8th major release of the Drupal project has just hit the shelves. It brought about a serious modernisation of its code, practices and mentality. Many regard this shift as a real move away from the traditional notion of a CMS to more of a Content Management Framework (CMF) that provides a great platform for building complex applications. In this article, I'm going to answer some of the more frequent questions people have about Drupal when starting up for the first time or considering doing so: • Is it right for me? Who is it aimed at? • How can it be installed, and where can I host it? • How can I start working with it as a developer? • What options do I have for extending functionality or styling it? Who Is Drupal Aimed At? Since the beginning of the project, Drupal has evolved from being mainly a tool for building smaller sites to one that can now power enterprise-level platforms. Especially with Drupal 8, site builders and developers can easily scale up from small websites to large platforms with many integrations. For example, the adoption of Composer allows you not only to bring external libraries into a Drupal project, but also to use Drupal as part of a bigger project of applications and libraries. It's safe to say that Drupal is flexible enough to meet the needs of a wide range of projects. When it comes to development, Drupal has always had a relatively closed community—not because people are unfriendly, quite the contrary, but mainly because of the code typically being written in a Drupal way (resulting in what sometimes is referred to as Drupalisms). This has meant a learning curve for any developer starting up, but also less interest from developers of other PHP projects to jump in and contribute. This is no longer the case. Especially with the release of Drupal 8, the community now promotes a new mentality of code reusability and best practice across different open-source projects. Active participation in the PHP Framework Interoperability Group is part of this effort, and using a number of popular Symfony components in Drupal 8 core is a testament to this commitment. With this move, the Drupal community has gotten richer by welcoming many developers from other communities and projects, and it is sure to grow even further. So if you are a Laravel developer, looking at Drupal code will no longer be so daunting. How Can I Install Drupal, and Where Can I Host It? Traditionally, Drupal has had a relatively easy installation process, particularly for people who at least knew their way around a Linux environment. The project simply needs to be dropped into a folder your web server can run (which needs to be using PHP and have a MySQL or MariaDB database). Then pointing your browser to the/install.php file and following the steps takes care of the rest. The most important screen you'll see is the one in which you select a specific database to use. In terms of requirements, the LAMP stack (Linux, Apache, MySQL and PHP) environment has always been a favourite for Drupal to run in. However, it is in no way restricted to it. Solutions exist for installing it straight on Windows or Mac (e.g. using the Acquia Dev Desktop) but also on a Linux system that runs other web servers. The easiest approach, if you go with your own setup, is to use a LAMP server for hosting. For a bit more performance you can replace Apache with Nginx, but you'll then have to take care of some specific configuration that otherwise is handled in the.htaccess file Drupal ships with. However, if you don't want the hassle of maintaining your own hosting server, there are three main providers of specialised Drupal managed hosting: Acquia, Pantheon, and Platform.sh. These also provide a workflow for easy updates and development flow. Past that, you are looking at fully managed hosting with a Drupal development company. How Can I Get Started Developing for It? Developing Drupal websites has typically been the kind of thing you either liked a lot or didn't like at all. This is because when you were first introduced to Drupal, you encountered very many specificities that you didn't see in other projects. So if those tickled your fancy, you loved it forever. With getting off this island in Drupal 8, this is no longer the case as much. You still have plenty of Drupalisms left that you can love or hate, but you now also have external components like Symfony or Guzzle and, most importantly, a more modern way of writing code in general (OOP, design patterns, reusable components, etc.). So your PHP skills from building websites with Zend will come in handy. A good way of getting into Drupal development is to follow some online video courses. There are a couple of resources that are excellent for this purpose, most notably Drupalize.me. If, however, video is not your favourite medium, there are also many written tutorials and guides available to get you started. Since Drupal 8 is brand new, you'll find significantly more learning content for Drupal 7. Nevertheless, the focus in the community has been shifting recently towards Drupal 8, so you can expect more and more of these resources to crop up. And if you have no experience with any version of Drupal, it's best to focus exclusively on Drupal 8 as the changes between the two are big and perhaps you'd be facing unnecessary challenges. How Can I Extend Drupal? The main extension point of a core Drupal installation is its module system. Modules are used to encapsulate bigger chunks of reusable functionality that can/should work on different sites. Aside from the core modules, there are a large number of contributed ones, available for installation. Granted, most are still only for Drupal 6 and 7, but the community is catching up also for the newest version. This problem is also mitigated by the incorporation in Drupal 8 of a few popular contributed modules as well as extending the scope of what core can do out of the box (compared to Drupal 7). Lastly, custom modules (the ones that you write yourself) are the primary way you can add any functionality that you want and that is not available via a contributed module. Installing modules can allow you to plug in various pieces of functionality, but you should not treat this as a green light for adding too many. It's always better to stick to the ones you actually need, and don't be afraid to be critical in this respect. You can also work on finding a good balance between contributed code and the custom oneyou write yourself. Additionally, since we are talking about open-source software, you should always evaluate the modules you install. The following indicators are good examples to pay attention to: number of downloads and usage, commit frequency, maintainer engagement, state of the issue queue. And do keep security in mind as well. It's highly recommended you keep both Drupal core and any contributed modules up to date as this will significantly help you keep your site and server secure (though it doesn't ensure it). What About Styling? The styling layer of a Drupal site is handled (in large part) by its theme. Themes are similar to modules in that they are an extension point, but they have different responsibilities. They contain the styles, front-end libraries and in most cases template files that are used to output data. There has been great progress in Drupal 8 compared to the previous version: the popular Twig engine has been adopted for templating, theming has been limited to Twig template files, debugging and overriding templates has been made much easier, etc. Similar to the advances in back-end development experience (DX), the theming layer has been made more appealing to the non-Drupal crowd. Front-end developers can now easily work with Drupal themes without having to understand the ins and outs of the back end. Drupal core comes with a number of themes that can provide you with examples but also which you can extend from. There are also contributed themes similar to how there are modules. Popular front-end frameworks such as Bootstrap or Zurb Foundation have mature Drupal theme implementations for Drupal 7, which are also readying for Drupal 8. These work very well as base themes but also for quickly scaffolding a website and making it look decent. Paid themes are also available to try out. Usually they are very cheap and quick to set up. The problem with them is that they are worth exactly as much as you pay for them and usually have gaping holes in their flexibility. As a beginner, these themes can seem like a great way to set up a site, and they very well may be. However, as you progress, you'll learn to avoid them and build your own, based on external designs or even plain HTML/CSS/JS templates. Conclusion Drupal is a powerful tool for building websites and platforms of any kind. With each new major release, Drupal has shown a commitment to better itself, become more robust and flexible, and embrace outside communities as well. Source: http://code.tutsplus.com ... Read more
Adrian Ababei / Mar 31'2016
How to Improve Your CSS Skills: 5 Tips on Writing Better CSS
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.   ... Read more
Adrian Ababei / Mar 30'2016
When it is okey to use TypeScript?
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... Read more
Adrian Ababei / Mar 28'2016