Adrian Ababei

Adrian Ababei

Adrian is our CEO, a full stack Drupal web developer with no less than 14 years of experience in designing, implementing and supporting interactive websites and applications. Completing his Drupal expertise with project management skills, as well, he's the one ensuring that we deliver all the Optasy's projects on time, within budget with no compromise on quality whatsoever.

Back to Blog Posts
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
What Is ARIA in HTML? And How Do You Use It?
WAI-ARIA or simply ARIA is a set of attributes which can be added to various HTML elements. These attributes are used to communicate property semantics, state and role to assistive technology through the accessibility APIs which are implemented in browsers. W3C HTML specifications provide information regarding which ARIA attributes can be used on each HTML element. Developer (un)friendly information WAI-ARIA’s 3.2.7 section specifies certain requirements but these are not web developer friendly. These requirements take the form of two large tables which include features with constraints – if you can use an ARIA attribute, the element is not listed. The reason behind this is that the purpose of this information is to be read by conformance checker implements and browsers, not developers. ARIA attributes can also be used on a particular element – in the past one would have to go to the ARIA section and then go through the tables to find the desired attribute or element in order to locate its ARIA rules. Developer friendly information W3C HTML specifications have recently been updated to include ARIA information as well, which until then was absent. Each introduction section of each element definition now features ARIA information such as property attributes or allowed ARIA roles. This means that developers can find the information they need with ease, without having to search for it in the spec. If an element can have roles set to it, it’s stated in the intro – a button element intro for example includes all possible ARIA role values and indicates the default role of the element, which does not need to be set manually. Each role is also liked to a description within ARIA’s reference section of the HTML spec which also includes a list of allowed aria attributes for each role value with other links to properties states and roles. The idea behind this is to help developers get all the information they need in order to produce accessible things with HTML.     ... Read more
Adrian Ababei / Mar 27'2016
Twitter Turns 10: Here Is a Look Over the Most Memorable Moments in Its History
In just 10 short years the microblogging platform revolutionized how the world communicates by using just short 140-character snippets. Twitter became practically omnipresent in just 10 short years but it wasn’t a smooth ride. Twitter built a platform that’s useful for everyone – celebrities, politicians, marketers, designers and writers. Let’s take a look at some of Twitter’s key moments in history.   Twitter’s First Tweet Jack Dorsey, the current Twitter CEO sent his first tweet on the 21th of March 2006, back when the company was simply known as “twittr”. Jack’s 2006 tweet started a snowball effect and soon enough twitter became one of the most popular social networks in the entire world, catering to people from all walks of life.   Twitter’s Logo Makeover The Twitter bird is one of Twitter’s most iconic aspects. The simple yet expressive logo is immediately recognized and appreciated by users. That being said, the logo has changed a lot since 2006: Initially the bird used to be blue with a light-blue underbelly and a white patch instead of where the eye should be. The company then decided to make it look more cartoonish, giving the bird eyebrows and feet. Perhaps it was a bit too cartoonish because the company then decided that the feed should be removed and the birds colour should be changed as well. The next change saw the bird losing its eye and gaining a darker blue colour complete with its own little wing shape. Twitter’s current version is also the most minimal: a simple blue bird silhouette with no feet, eyes or hair.   Twitter goes public Success can be measured in many things but success for a small tech company is definitely measured by going public on the NYSE. Twitter went public in 2013 and at the time it was the most hyped tech IPO since Facebook. Since then the company’s stock price went down dramatically and now it’s well under $26 a share – the initial IPO price. Only time will tell if Twitter’s CEO will be able to go back to their glory days.   Twitter’s Homepage Makeover All tech companies undergo many design changes over the years – twitter is no different. Twitter’s current homepage features plenty of white space, card based design and a central column. Back in 2007 the homepage had an aquamarine border and a larger service description. By 2008 the homepage switched to landscape orientation and eliminated random user feed updates entirely. Between 2009 and 2011 the interface became more and more minimalized and forms became more highlighted.   Twitter’s future? What will happen in the next 10 years of Twitter’s life? We don’t know. Most likely it won’t turn into another MySpace even though it’s currently struggling to make a profit and find its own identity in a market dominated by Facebook and Linkedin. ... Read more
Adrian Ababei / Mar 26'2016
PHP for Web Development Startups
Most web development start-ups have the same problem – What programming language to pick? Which language should we specialize in? Technology selection can be a real drag, especially when dealing with larger teams of specialists with different favourites in mind. Here’s food for thought: do successful companies become successful because of the technology they used or the technology itself becomes popular because it’s used by a successful company?   Currently, PHP is not a popular choice for web development start-ups – most web development teams opt for Django or Ruby on Rails but in recent years PHP technology has evolved substantially - even to the point of becoming a direct rival for Ruby on Rails or Django.   PHP is actually an incredible tool for web development start-ups – it offers all the functionality of RoR at a much lower cost. PHP is great for web development projects which involve multiple components and rely on multiple tech solutions. Here is a list of reasons why PHP is a great tool for web development start-ups:   PHP allows fast web development PHP is actually one of the fastest programming languages which you can use to code, deploy and execute. The whole language was designed on finding the fastest and shortest solutions to any web development problems. Apart from that, PHP’s lovely community has been moving it towards modular design.   PHP frameworks offer libraries and bundles which are ready to use, mouldable and easily configurable. If you’re interested in using PHP for web development you should definitely check out the Sonata Project for the Symfony framework – it offers ecommerce tools, content management features, technical utilities and admin bundles which in turn enable web development companies to lower their work load and shorten their path to the finished product.   PHP is cost effective Web development companies won’t have any trouble with finding replacements for their team members, hiring new members or project stuffing. PHP developers are much cheaper than developers specialized in other programming languages – this can lead to a more affordable and competitive finished product. Certain very useful tools are free for use with PHP – these include integration tools like Deployer, Phing Project, Capifony, the PHPUnit framework and the Composer dependency manager.   Programming quality PHP offers plenty of educational materials and best practices materials regarding common or complex programming tasks. While some may voice criticism of PHP unpredictability and inconsistency it’s good to remind users that these are problems of the past. The newest versions of PHP offer great frameworks such as Symfony and Laravel and great efforts have been made to define precise basic coding standards and guidelines.   Conclusions PHP is a great tool for any web development start up, given its guidelines, processes and conventions. A solid team with plenty of experience will get your start up going in no time! ... Read more
Adrian Ababei / Mar 25'2016
Google is testing password-free logins
Google confirmed this morning it’s now testing a new way to sign into your Google account without having to type in a password. Instead, those who have been invited to try this new method of logging in authenticate by responding to a notification sent to their smartphone. The idea is similar to Yahoo’s recently launched “Account Key,” which also offers a password-free means of signing in involving a push notification sent to your phone that then opens an app where you approve the log-in. Passwords are often the weakest parts when it comes to securing users’ accounts, as many don’t use complex passwords or they reuse the same password across services. Two-factor authentication – like using a USB stick with a secret token or entering in a code sent via text method to your phone – can help to increase security, but many users also find this to be a hassle as it introduces an additional step to the login process. This new password-free login option, on the other hand, is about speeding up logins by offering a different way of signing in altogether. You only have to enter your email address when you’re signing into your Google account. Afterward, a notification will appear on your phone asking you if you’re trying to sign in from another device. Approve the login by tapping “yes,” and you’re in. This would be especially useful for those who always have their phone nearby while using Google services on other devices, like their computer, as well as those who have long and complicated passwords that are difficult to type. It could also help to protect against phishing – something that Google addresses today through its Password Alert tool, too. The test was first reported by a Reddit user Rohit Paul, which was then spotted by the blogAndroid Police. According to Paul, he was sent an email invitation to join a test group being given access to try the new technology on their own devices. The group is called “Sign-In Experiments at Google,” and is found here on Google Groups. While the link to the group is public, you can’t view or participate without a direct invitation. A Google spokesperson confirmed that this is, indeed, a new experiment now underway, noting that: “We’ve invited a small group of users to help test a new way to sign-in to their Google accounts, no password required. ‘Pizza’, ‘password’ and ‘123456’—your days are numbered.” After accepting the invite and joining the group, the email explains that you’re then able to sign in without entering a password but you can continue to use your typed password if you choose. In addition, Google says it may choose to ask for your password as an additional security measure if it notices anything unusual about your current login attempt. (And it’s helpful to be able to use your password in case your phone is dead, or goes missing.) In the case your phone is lost or stolen, your screen lock or Touch ID on your smartphone will protect your private data, as the thief or unknown party will not be able to unlock your phone. Google also advises in the case of a lost device, you should sign into your account from another device and remove account access from the device you no longer have in your possession. Google tells testers they are able to turn off this new means of signing in at any time, and, as the email Paul received notes, testers can leave the trial group if they don’t want to offer Google their feedback about the sign-in process. We understand that only a small number of users are being invited to test this new feature for the time being. Google did not comment on when it plans on expanding access to more testers or the broader public. The password-free sign in process works on both iOS and Android at present. Source: http://techcrunch.com ... Read more
Adrian Ababei / Mar 22'2016
Microsoft Edge Is Getting More and More... Tempting: Will It Manage to Compete with Firefox or Chrome?
In the last few months Microsoft’s Edge browser has gained some popularity along with gains in usage and user share but it has a long way to go before becoming a competitor for Firefox or Chrome. Only a tiny minority of users use Window 10’s default browser for their surfing needs. Is Microsoft Edge Becoming Popular? Edge is the default browser for Windows 10 and interestingly enough it grew its user share in recent months. Net applications is a company that deals with vendor analytics – the company’s results state that Edge recently went up by five points, effectively gaining a share of 30.7% of users running Windows 10. Back in January the percentage was much lower, at 26%.   This is the first time since 2015 that Net Applications reported an increase in Edge’s usage for Windows 10 users. Before this sudden increase, Net Applications reported steady decline in use and usage for Windows 10’s default browser. DAP's Report on Edge DAP or the Digital Analytics Program also reported an increase in Edge’s usage but at a smaller percentage than that reported by Net Applications. DAP reported that only 24.9% of Windows 10 users actually use the Edge browser – this is just a five tenths of a percentage increase as compared to Net Application report of 5%. Digital Analytics Program visits over 4000 websites on over 500 domains from the United States. Their report is based mostly on US users even though some visitors access these websites from other parts of the world.   StatCounter is another metrics company based in Ireland – StartCounter also reported an increase in Edge usage in the previous months. Edge’s share of Windows 10 users was set at 17.1, three tenths of a percentage increase from previous months. In the same time, Edge’s global usage share for Windows 10 users did not increase at all and stayed at 13.3%, data showed. Safari Fares Much Better Edge’s inability to attract Windows 10 users has stunned Microsoft as well – the majority of users usually rely on the OS default browser for their surfing needs but this is not the case for Windows. Mac users for example use the default Safari browser at a much higher percentage – two thirds of all OS X users use Safari on a daily basis.   The reason behind Windows 10’s default browser Edge is its incomplete functionality. Microsoft launched it without support for add ons and its appearance hasn’t improved from the old Internet Explorer which was never popular to begin with.   ... Read more
Adrian Ababei / Mar 18'2016
How Do You Create a Landing Page Web Design that... Converts? 5 Easy Tips to Try
When it comes to landing page web design, people tend to make mistakes – a lot of mistakes. Some web designers go for a minimalistic approach and strip the landing page to its bare minimum – just a call to action button without any other distractions. Others opt for a more traditional landing page design with navigation menus, plenty of text and images. Good landing page web design implies removing anything that can lead your potential users from the page’s goal.   Try a landing page design with no navigation menu Just 16% of landing pages are without a navigation menu – that’s quite alarming simply when you think about all the lost conversion opportunities. Numerous studies show that landing pages without any navigation menus fare much better than pages cluttered with links, videos and text. Although you may be tempted to keep certain links on your landing page try to keep in mind your landing page’s ultimate goal: having a high conversion rate.   Avoid stock images in your landing page design Generic images and stock images in general can have a negative effect on your conversion rate simply because they look insincere or for the use of a better word fake-ish. Stock images fail to inspire any trust from your potential customers and your conversion rate will take a dive for it as credibility is one of the main engines that can drive conversion rates up.   Another great landing page design trick is placing images on top of your catchy page headline. Research shows that headlines placed under images are read by 10% more users – this can lead to a snowball effect as when users actually read a headline, they are inclined to continue reading down the page.   If done properly, your call to action is worth its weight in gold One of the most important things on your page is the call to action – ironically, this is also the hardest thing to get right on a page. Think about your call to action’s colour – good colour contrast can help your users find and click your call to action. Another thing you should consider is size – yes, size does matter in landing page web design. Your call to action should be big enough to be easily readable by users but not gigantic. The button’s text should be persuasive, a mix of excitement and urgency all bottled up into one simple red or orange life-changing button.   Remove any other links or make them invisible We already removed the navigation menu but you might still have a footer menu or a company logo. The ultimate goal here is to create a single-action environment that boosts your conversion rate. If you can’t remove links directly, make them invisible to the user – lower contrast, make the link text smaller, tone down anything that’s competing with the call to action for your user’s attention. Fewer distractions equal more conversions.   Too many choices spoil the broth Consumers can get overwhelmed fairly quickly when faced with too many choices. Studies have shown that consumers tend to buy less when faced with a myriad of choices and that’s understandable. If you have 10 products on a page and you want to get the best one you should check all of them right? Who has time to compare 10 different products? Nobody – your visitors will leave your page thinking they will return some days later.   Landing page web design in a nutshell When it comes to landing page web design, think of the one goal of your page – converting users. Everything else is redundant and should be removed swiftly and without regret. ... Read more
Adrian Ababei / Mar 15'2016
What’s New in jQuery 3.0? Top Features and Changes that You’ll Love
Since jQuery’s initial release more than eight years ago, it has grown in popularity among web developers and clients alike – nowadays jQuery is considered to be the foundation of the modern Web. In these past eight years the cross platform library was bundled with countless developer tools, sites and of course, with JavaScript. Now it’s time for jQuery 3.0.   jQuery 3.0 is released jQuery 3.0 was just released – this version of jQuery has been in planning since October 2014. jQuery 3.0 is a much faster, slimmer version of the old one with great attention given to compatibility. All the old IE workarounds have been removed and more powerful modern API’s were implemented.   Upgrading to jQuery 3.0 is easy Upgrading to 3.0 is relatively easy and jQuery even released a neat little guide which you can follow. Not only that but with the use of jQuery’s Migrate 3.0 plugin you’ll be able to see any compatibility issues in your project or code.   The new jQuery 3.0 is slim In the future you won’t really have to use AJAX, you’ll simply be able to use a standalone library that focuses on AJAX requests or a combination of class manipulation and CSS for web animations. The 3.0 version also features a slim version which removes all AJAX and effects modules – this version also excludes any deprecated code. Web developers are of course able to include or exclude any modules they want, thanks to the custom build API used by jQuery 3.0. Since it’s a very fresh release, there are a few necessary tweaks which will be made in the following months – jQuery Mobile and UI currently have some issues.   Changes and features in 3.0   IE workarounds are removed The old workarounds and hacks for IE9 got removed in order to make jQuery 3.0 sleeker and faster. If you still need support for IE 8 you’ll just have to use the 1.12 release because versions such as 2.0 don’t offer full support for older versions of Internet Explorer.   jQuery 3.0 runs in strict mode Since most browsers supported by jQuery 3 also support strict mode the new release has been built with it in mind. Your personal code is not actually required to run in strict mode and you don’t need to rewrite your existing code if you want to migrate to version 3.0. Strict mode can work with non strict mode and vice-versa – the only exception is related to some versions of ASP.NET.   A new API for animations The request AnimationFrame() API is now used for animations, thus making them much faster and smoother. jQuery 3.0’s new API is only used with browsers that fully support it – other browsers such as IE9 will use the older API in order to display animations.   Escaping strings with special meaning got easier The jQuery.escapeSelector() method allows web developers to escape characters or string that have a different meaning in CSS in order to use them in a jQuery-selector. Example: „If an element on that page has an id of „abc.def”, it cannot be selected with $(„#abc.def” ) because the selector is prased as „an element with id ‚abc’ that also has a class ‚def’. However, it can be selected with $(„#” + $.escapeSelector( „abc.def”) ).”   Class manipulation supports SVG Although jQuery 3.0 doesn’t fully support SVG, the methods that manipulate CSS class names such as .hasClass() and .addClass() can be used for SVG documents. Web developers are now able to find and modify classes with jQuery in SVG then style these classes with CSS.   Deferred objects are also compatible with JS promises JavaScript Promises are a special type of objects usually used for asynchronous computations – these have been standard in ECMAScript 6 and their features and behaviours are specified in the Promises/A+ standards. In the new version of jQuery deferred objects are compatible with the Promises/A+ standards. Deferreds are also chainable objects, which means it’s possible to create callback queues. With the new release of jQuery the asynchronous callback functions executions are changed – Promises allow web developers to write asynchronous code that is more similar in logic to synchronous code.   ... Read more
Adrian Ababei / Mar 11'2016