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
Opera Brings Its Free and Unlimited VPN app for iOS
Opera, the popular web browser is launching a VPN or virtual private network client for iPads and iPhones. The launch came just three weeks after the same feature was announced for the desktop browser.   Opera designed the app to be “especially relevant on campuses and workplaces” where Wi-Fi provided by certain institutions or companies has limited access to “social-media and video streaming websites”. You can also set your app to route your internet connection through another country in order to have access to geo-blocked content. The app also blocks trackers and ads. When the VPN/proxy version first appeared a few weeks ago it only supported three virtual locations – Germany, Canada and the US. With the new launch for iOS, you can now pretend to live in the Netherlands or Singapore as well. The new launch also boasts quite a few supported languages including Russian, Portuguese, Japanese, Indonesian, German, French, Arabic and of course English. The Opera VPN app is set to “off” by default, so you need to turn it on manually. The two other options to block ads and block trackers can also be turned on from the “Settings” menu. Although many VPNs were already available to users, most of these services required payment to unlock certain features. Opera offers free and unlimited access in a bid to gain traction with the online community. Why would Opera go through the trouble of creating a new VPN app if it’s given for free? SurfEasy seems to think that Opera “collects anonymous data about how people use their mobile devices” and sells it to third parties who are “interested in better understanding the mobile ecosystem and how it’s evolving.” Opera is also likely to place ads in the app itself in the near future.   If you’re paranoid about being tracked online, you’ll feel much safer by using an app that charges a monthly fee. Individuals who are simply seeking to access websites or content that’s banned in their country, campus or workplace will clearly benefit from Opera VPN. - “With the new Opera VPN app, we help people to break down the barriers of the Web and enjoy the Internet like it should be,” said Chris Houston, president of Opera division SurfEasy. Opera’s upgrade efforts are not limited to VPNs though, as the company plans to create a VPN for Android as well.   ... Read more
Adrian Ababei / May 13'2016
What Are the Essential UX and UI Tools that Shouldn’t Miss From Your Toolbox?
To help you make the right choice or choices, below you can find the most valuable UX and UI tools on the market today. InVision InVision is the world’s leading product design and collaboration tool. It’s equally useful for individuals and small teams, and if you work on multiple projects, or projects involving large numbers of team members, the cloud-based Enterprise version is perfect. InVision Enterprise can accommodate an unlimited number of team members working on an unlimited number of projects. InVision’s unlimited testing capability, which allows you to test your prototypes directly on users’ mobile devices, record their interactions with your prototypes, hear their voices, and even see their faces, is hugely helpful. Feedback doesn’t get much more contextual than that. With such relevant feedback, you’ll have the power to make the right UX and UI decisions quickly, rather than having to rely on days or weeks of serial usability testing activities. Proto.io If you’ve been searching for a high-fidelity prototyping tool with powerful collaborating features, you need to look no further than Proto.io. Some prototyping tools, including many of the more advanced ones, can link screens together, but don’t go beyond that. With this tool, you can create prototypes that are feature-rich, animated, and interactive, and do so in minutes – without having to rely on coding. That’s half the story. The other half is your ability to overcome those pesky communication gaps that can exist between the project manager and the team, between team members, and among other project stakeholders. Proto.io gives you the capability of producing prototypes that are so realistic that your team, or your company, will be able to make the right decisions before investing resources in the final design and development efforts. Appsee Mobile App UX Analytics Appsee’s app analytics platform goes beyond reporting basic, quantitative data by providing mobile teams with visual data. The user recordings and touch heatmaps allow you to see for yourself how users actually behave within your app. These tools can help you pinpoint where you can optimize your user experience and troubleshoot issues from performance to usability. In conjunction with these visualization tools, Appsee supplies mobile teams with insights regarding retention, user journeys, usage, and conversion funnels. These insights can answer questions like: “Which navigation path do my users take the most? “ Or “How many users return to my app after a month?” Overall they can help paint a clearer picture of how your users behave. PowerMockup If you are a PowerPoint user, PowerMockup is a wise choice. This prototyping toolkit enables you to create mockups and wireframes for virtually any website, or for any mobile or desktop application. Select your shapes and icons from the PowerMockup library, drag and drop them onto a PowerPoint slide, and let PowerPoint functionality do the rest. The PowerMockup library is constantly being added to, and you can add your own custom shapes, and share them with other users as well. Pidoco Pidoco offers a better way to create and share beautiful, interactive wireframes. This web app has it all, from making easy sketches to making custom templates, adding interactive elements, and using features that allow quick and easy previews of your work as you progress. Your prototypes feature all of the necessary clicks and touch gestures you’ll need to trigger the system reactions you are looking for. Pidoco offers four different plans, ranging from the Starter Plan (2 projects/ month), to the Platinum Plan (100 projects/month), and you can try any of their plans for free. Lucidchart Lucidchart is an online, cloud-based, multipurpose wireframing and diagramming application that will be an excellent choice if you are looking for an easy way to sketch and share professional-looking wireframes and mockups. Lucidchart employs drag and drop functionality, a variety of useful keyboard shortcuts, and features a large library of icons for the full range of device types. This application can be used on PCs, Macs, and all browsers, and it is fully integrated with Google Apps, Google Drive, Visio, and Jive. Notism Collaboration Notism Collaboration is the ideal choice for creative teams who would benefit from having a real-time design and video platform through which team members can discuss and share their design efforts with others. You can share mockups, videos, interactive web, and mobile prototypes, or any other design-related activity. Notism provides everything needed to ensure that team members and project stakeholders are always able to participate in the feedback loop. You can also use this handy toolkit to support your task management needs, including enhanced data backup and security features. Loop11 Loop11 is the type of usability tool that individuals or teams look for when they need a quick way to perform website, wireframe, and prototype UX testing. Instead of tossing your design over the fence and waiting for a response, Loop11 enables you to carry on a continuous conversation with your customers and users. This usability tool provides heatmaps, clickstreams, task analysis, and other feedback types that enable you to make data-driven design decisions with confidence. It offers the perfect solution for all types of usability testing, including A/B testing. Patternry If you are fortunate enough to have all the UI and UX work you can handle, Patternry might just be one of the most useful tools you can have for storing your design and code assets and sharing them with your team. Patternry gives you the ability to store more than just shapes and icons. Design patterns run the gamut from shapes and icons, to code and screenshots, to guidelines and recorded or documented discussions. You can store all of your valuable design assets in a logical, carefully arranged way that not only supports your deliverables, but gives you and your team a library of reusable design patterns as well. As you can see, there are a number of truly excellent prototyping and UX and UI tools to choose from; and you can feel free to do so without fear of making a poor decision. UI design is one thing, but having an ability to verify the UX performance of that design can be something else entirely. Because of this, we’ve included several usability tools that are easy to use while providing rapid feedback of qualitative results. Whether you are happy with our selections, or you believe we have left something out, we would like to hear from you. Form Analytics by UseItBetter Form Analytics by UseItBetter is an invaluable tool for analyzing user data; particularly with respect to form abandonment, fixing forms, and improving conversion rates. This usability tool may be more specialized than most you could choose from, but it gives you the information you need to fix problems or potential problems on the spot. Form Analytics can also be a tremendous form event tracking time saver. A couple of clicks gives you all of the metrics you might need to determine which form field or fields are causing customers to drop out, and why that is the case. ... Read more
Adrian Ababei / May 12'2016
Bootstrap 4 news
Bootstrap is a giant framework with almost everything you could need for building a site or web app interface. Bootstrap is changing, version four is in alpha release. Naturally, we’re just as curious to know what’s different, so I dived into the documentation to find out. Keep in mind, though, that this is an alpha release. It cannot be considered feature-complete. It could radically change. From Less to Sass This is obviously the biggest and most important change. Heck, you’ve probably already heard of it. People have gone so far as to procliam the “death of Less” due to this switchover. Well, I don’t know if anything’s gone and died because the Bootstrap team decided to do things differently. It is, however, a monumental undertaking, and it will drastically change how people use and customize the framework. Sass is just generally more developer-friendly, with wider support, a bigger community, and yes, more features. It can do some things that, right now, Less just can’t. I say this with sadness. I’ve never made any secret of my love for Less; but it seems that the community at large has spoken, and declared that Sass is just, well, better. New features   Figures   Figures are for showcasing single media objects (usually images), with an optional caption. Support for Bootstrap’s various helper classes is factored in, so you can align and style the image (and its caption) however you like. Images placed in a figure element, given the right classes, become responsive automatically. Flexbox Now, due to lack of support, Flexbox has not replaced the regular grid system. However, it is available to anyone who wants it. Change a variable, recompile the Sass, and boom! You now have a new, modern layout system. Cards Okay, we’ve been seeing the proliferation of card-based design for some time now. Bootstrap now has a specific component for them, with myriad layout options. You can group them up, keep them separate, add headers, footers, buttons, images, and overlay text on those images. Wells, thumbnails, and panels all get replaced by the new card component, so in that way, Bootstrap is a bit more streamlined. Reboot: new customization variables Bootstrap has historically been a bit of a pain to customize, aesthetically speaking: There were a lot of styles to over-write, and individual variables to customize if you wanted to make your Bootstrap-based site look like anything other than a Bootstrap-based site. Heck, remember all of those customization apps made just for changing Boostrap’s look? Well the developers have heard your prayers and Github issues. Change all of the transition animations at once, disable rounded corners, change all the colors, or anything else you like with one big bunch of Sass variables. It’s all there in the Reboot module, and it’s about time. We can expect some more original-looking designs now, with any luck. Rem and em units That’s right, we’re moving away from pixels, to these relational units of measurement. This ties into the whole customization thing, too. Want a tighter design with thinner margins? Change the main text size, maybe a couple of variables, and boom. Everything looks “thinner”. Stuff that’s basically the same As you might expect, everything got re-written and upgraded (because of the Sass move). But still, the basic usage for most of these components will be the same. Do double-check the documentation, though. Certain things will have changed. Take the grid, for example: they added an “extra-large” tier to the grid system, presumably for those ridiculously huge retina screens that we’re seeing these days. · Alerts · Breadcrumb · Button dropdown · Button group · Buttons · Card · Carousel · Code · Collapse · Dropdowns · Forms · Images · Input group · Jumbotron · Label · List group · Modal · Navbar · Navs · Pagination · Popovers · Progress · Reboot · Scrollspy · Tables · The Grid · Tooltips · Typography Other updates   No more IE8 support   It’s about time. There’s not a whole lot more to say about that. Not much will change for most of us. Anybody who really, really needs to support legacy browsers will have to use an older version of Bootstrap. All JavaScript plugins have been re-written The proliferation of ES6 means that a lot of people are re-writing their JavaScript. This means performance improvements for all, the exodus of older browsers, and programmers having fun with new toys. It’s a win-win. Overall impressions Where Foundation is going “smaller” and more streamlined with specialized frameworks, Bootstrap seems to want it all. They have done a lot of work to improve performance, and streamline what they could, but Bootstrap still aims to do just about everything you can think of. Mind you, anyone can configure their version of the framework however they like by dropping unnecessary modules, or adding new ones. It’s not a big deal. Still, there’s definitely a one-size-fits-all mindset in play. And that can be a good thing. There are large, wide-scope projects out there that need the room to expand. In any case, Bootstrap will continue to satisfy its users’ needs. It’s going to be mostly the same, but better. Source: http://www.developerdrive.com ... Read more
Adrian Ababei / May 11'2016
Add Google Fonts to your Drupal 8 Theme
Adding Google Fonts to your Drupal 8 theme can be a bit more difficult than with Drupal 7. This is an example of how to install a font for every page of your website. Here is the method previously used to install Google Fonts on every page of the theme using Drupal 7: function MYTHEME_preprocess_html(&$variables) { // this function is deprecated in D8 drupal_add_css('//fonts.googleapis.com/css?family=Roboto+Condensed', array('group' => CSS_THEME)); }   But in Drupal 8 it’s completely different – we need to use the libraries method, which is a bit more complicated. First things first, we need to add a library in the last two lines of the theme.info.yml file. Remember that when adding the theme name you need to use all lower case for it to work properly. name: Test description: Test theme type: theme base theme: theme name core: 8.x libraries: - test/fonts   After that, a library file needs to be created – the library is defined as themeName/libraryName in the .info.yml. file. The library file is named themeName.libraries.yml. This file opens with a declaration of libraryName: fonts: license: name: SIL Open Font License, 1.1 url: https://goo.gl/UpQhAK /> css: theme: //fonts.googleapis.com/css?family=Roboto+Condensed: { type: external } css/myStyles.css: {}   The YML file will work even without a license section but it’s a good idea to mention it as well. The font’s URL has the HTTP: removed so that it’s agnostic to secure-or-not connections at runtime. If everything is done properly you should be able to view the adjusted lines of code. All you need to do now is implement the font into your CSS through a rule in the myStyles.css file located in your css folder.   ... Read more
Adrian Ababei / May 10'2016
Are Your Using These 20 Useful Git Commands? You Should!
Git is one of the most popular version control systems in the world. Since its release more than 11 years ago it became a must have for web development specialists and web development agencies alike. Here is a list of very handy Git commands which you can use for app development or web development:   Setting details git config --global user.name "John Doe" git config --global user.email john@example.com Use --global to set the configuration for all projects. If git config is used without --global and run inside a project directory, the settings are set for the specific project.   Ignoring file modes cd project/ git config core.filemode false This option is useful if the file permissions are not important to us, for example when we are on Windows.   See current settings git config –list   Clone a remote repository git clone https://github.com/username/somerepo.git This creates a new directory with the name of the repository.   Get help for a specific command git help clone   Create and Checkout a New Branch git checkout -b   Checkout a Remote Branch git checkout -b origin/   See differences between two commits git diff COMMIT1_ID COMMIT2_ID   See recent commit history git log   Abort Changes git checkout --   Modify the Previous Commit's Message git commit --amend   Partial Change Checkin git add --edit   Undo the Previous Commit git revert HEAD^   Temporarily Stash Changes, Restore Later # After changes have been made... git stash # Do some other things here #Re-apply the changes git stash pop   Delete a Remote Branch git push origin :   Pull in the Latest from a Shared Repository # Add a remote branch git remote add # Get changes from that branch git fetch   Pushing, deleting and tagging tags # Create a Tag git tag # Delete the tag git tag -d # Push Tags git push --tags   Making changes and creating patches git diff > some_patch_1.patch   Adding files and creating patches git add newfile git diff --staged > some_patch.patch   Applying patch patches git apply -v some_patch_2.patch     ... Read more
Adrian Ababei / May 09'2016
How to Build a Better Website: 8 Best Practices
Here is a list of 8 tips on building a better website in 2016: Keep your design fresh and simple The homepage is the most important part of your website – it’s the first thing a potential customer sees. Make sure your homepage provides visitors with all the information they requiere in order to make a purchase – what you have to offer, who you are and your contact information. Think about the fact that you have less than 10 seconds to make a good impression and what you want to communicate to potential customers. It’s a good idea to keep your homepage clean and easy to read – your overall text should not be longer than 120 words.   Make sure your website is fast Nobody likes to wait for pages to load. If your page fails to load quickly enough you’ll most likely miss out on a potential customer. There’s a direct correlation between website speed and the conversion rate of a website. Apart from that, Google also takes loading time into account – a slower loading website will rank lower than a fast loading website. So, if you want to have a great website you’ll need to consider your speed. Try getting a better host for your website, minimize HTTP requests, use a CDN, minimize CSS, JavaScript and HTML and you’re good to go.   Image optimization is important One of the most important parts of a website is images – these tend to be very large and take a considerable amount of bandwidth, effectively slowing your website. By using a few tools you can make your website faster and also save bandwidth. Image optimization is based on choosing the right size and format, using images only when it is necessary and finding a balance between weight and quality.   Build a mobile friendly website Mobile browsing recently surpassed desktop browsing so it’s extremely important to have a fully functional mobile friendly website. Luckily enough, it’s not hard to modify your website and make it responsive. You can simply use CSS media queries to get the job done.   Using webfonts instead of icons is a great idea Using webfonts instead of icons is extremely easy. All you need to do is download a font or create your own. Once that’s done, you’ll need to upload your files to your webserver and add the downloaded stylesheet to your website – you can increase performance by copying the stylesheet’s content directly into your website’s style.css file. Now, all you need to do is just drop the markup in the html file. If you prefer SVG icons, you can use those as well in the same way.   Search engine marketing & search engine optimization are important SEM and SEO should be your second priority – search engine marketing or search engine optimization campaigns can either make or break a business, thus they are two extremely important concepts especially for small businesses. When in doubt, always seek professional help – it can help you on your road to success.   Content is critical Bad content will just make visitors leave your website. Pay attention to your headlines as these can be the difference between a visitor leaving your website or staying to read the rest of the content. It’s a good idea to write catchy and relevant headlines so that visitors can quickly scan it and decide if it’s worth the read or not – large blocks of text simply will not do. Keeping your content fresh and relevant will make visitors turn into customers quicker.   Get a high quality hosting service You can’t have a high quality website without a high quality server – if you want a fast and reliable website you’ll have to use a better hosting provider. Look for a hosting provider with unlimited bandwidth, 24/7 customer service and dedicated servers. ... Read more
Adrian Ababei / May 06'2016
Web Development Tools Essentials for any Web Developer
Web development can be a real hassle without any help from tools, friends or services. That’s why we’ve set up a list of web development tools that can save you many hours of work. Shrinktheweb Shrinktheweb.com helps web developers take automatic screenshots from the server they’re working on through server-side languages and complete plugin integration. With as little as 10 bucks a month you’ll get custom size captures, full length captures and the private label service which lets you add your own logo as the placeholder – you’ll be able to use the image for marketing purposes. Muffingroup The BeTheme is a Muffin theme that gets your WordPress website up and going in a matter of minutes, thanks to its lightning fast drag and drop builder which offers plenty of possibilities. The theme also offers a layouts generator which can provide you with unlimited layouts for customizable pages – you can pick between different skins, grids, layouts, headers and logos. Muffingroup is one of the best web development tools out there – it offers over 200 shortcodes which you can use for your pages, a custom font uploader and plenty of template pages for help pages, gallery pages, about us pages and features pages.   Simbla, One of the Must-Have Web Development Tools Simbla is a powerful site-building platform with plenty of features. It’s one of the simplest web development tools available on the market today – it features a drag and drop system which can help you build code free websites in just a couple of minutes. Thanks to Bootstrap3, all websites built in Simbla are mobile responsive. Flyzoo.co Flyzoo is another interesting web development tool – you’ll be able to create embeddable group chats which you can use for different pages or layouts. All you have to do is log in to Flyzoo, click on setup, group chats and then get embedding code – you’re ready to go! Just copy the code into your page and adjust its height and width accordingly. Group chats are a great way for web developers to improve user engagement. Iconfinder for web developers Brand icons can be difficult to create but even so, icons are an important aspect of marketing as well as web development. Iconfinder can help you get in touch with a professional icon creator. Fill out a design brief, some specific details, target audience and other data about your brand or website and you’ll soon start receiving price quotes from designers. Themify Themify is another quick web development tool. You’ll start by importing a layout, replacing images and text and that’s it! Themify only works for WordPress though, for other more complex projects you’ll need to use other tools. Pidoco.com for web development Pidoco is an online prototyping tool and a real time saver any web developer. You’ll have over 400 elements in the library to play with and plenty of communication features such as sharing, commenting and so on. With Pidoco just about anyone can participate in critical design decisions by seeing the prototype in action. Optinmonster Optinmonster is an essential lead generation tool which you can use for your projects. Over 275.000 websites use Optinmonster with its built-in analytics, page level targeting, A/B testing, exit intent technology and the drag and drop builder. Building mobile responsive forms takes just a couple of minutes with Optinmonster, making it one of the most useful web development tools. actiTIME ActiTIME is a great time tracking solution for a small web development team. Users are able to track the time spent on various tasks, record business trips and days off. Team leaders can create projects, assign them and keep track of the project’s costs and deadlines. Thesquid.ink Squid Ink is another web development tool worth mentioning – it offers a huge library of over 2000 icons, divided into three types: solid, line and flat. There are many different formats and categories so you’re sure you’ll find the right icons for your web development project.   Bowtie Database driven websites can have security risks and require constant maintenance to boot. Bowtie offers a faster and cleaner solution which includes all the features required to share and publish content with ease. Web developers can also have access to version control through git.   48hourslogo.com One of the most popular web development tools is the 48hourslogo platform – you’ll get a beautiful looking logo for a reasonable price and in just two days. ... Read more
Adrian Ababei / May 04'2016
Why Use a Content Delivery Network? Because It Boosts Conversion: Here’s How...
What is a CDN?   A CDN or Content Delivery Network will make your website load much faster for users from all around the world. The system is simple – instead of having a single host, the CDN allows for multiple hosts all around the world and when a visitor logs in to your website they will see it through the host that’s closest to them. Starbuck’s website loads very fast no matter where you travel – they use CDNs as well.   Web hosting As you all know, each website requires its own web host in order to work properly. After you build your website, the hosting will hold all of your website’s content on a server in a data centre with other servers. These are large warehouses where companies rent servers to keep data on.   Web hosting with content delivery network The content delivery network is like an add on for your web hosting – it doesn’t replace it fully but it enhances its capabilities, effectively making your website faster. When using a CDN, the network will copy your website and store them in different servers around the globe. When a visitor comes to your website, it will now load from different countries such as the USA, Canada, England, Germany, France, etc. It will automatically load from the server that’s physically closest to your visitor.   How can this help load your website faster? All your website’s scripts and images are loading from different servers located in different countries across the globe but how does this speed up your website? Latency! Think that latency is a piece of string – the longer the string the greater the latency and the longer it takes to get to the end of it. The same concept can be applied to physical distances between data centres – the further the visitor is from the server, the further the data needs to travel and this can create delays in loading. If a user visits your website from Germany but the site’s hosting is in Atlanta, your website will still load very fast because of the data centre in Berlin. This reduces latency by a great deal.   Do you need a content delivery network? This question is often redundant as CDNs offer plenty of advantages including:   Better performance One of the first reasons why you should implement a CDN is the better performance – your website will load much faster to users regardless where they are located in the world.   SEO perks Google loves fast loading websites and takes loading speed into its ranking algorithm. With a faster loading website you’ll also get lower bounce rates and increased conversion rates, as well as higher ranking. Your content will also be indexed much faster by Google.   Higher conversion rates A one second delay in page response can result in 7% lower conversion rate – take that into account for a moment. If you increase your website’s speed by just 3 seconds that means your conversion rate will jump 21%! That’s huge!   Content delivery networks are affordable You might think the system is extremely expensive but that’s not the case at all – CDNs are quite cheap and well worth the investment.   Websites using content delivery networks are reliable Technical difficulties can be a real drag but with a CDN those problems are long gone – If one server goes down, the closest server to it will take its place. This ensures a more pleasurable web experience for your visitors.   It’s easy to switch to a CDN CDNs are not complicated to setup – they can be used on just about any platform in just a couple of minutes – Magneto, Joomla, Drupal, Wordpress, etc   Conclusions Content delivery networks are especially valuable to websites or companies with international clients or visitors – with minimal investment costs and fast returns it’s one of the best ways to grow your business.   ... Read more
Adrian Ababei / May 03'2016
How to Write (More) Predictable and Maintainable CSS: 9 Developer Tricks
CSS is very flexible since it doesn’t impose on how you should write your CSS rules but putting CSS rules in different spots can make your stylesheet less predictable than what you’d want to go for. Maintainability problems will most likely arise when the CSS selectors cascade – this applies to other CSS pre-processors such as Sass and LESS as well. In most projects the SASS code follows the DOM structure – this means that the CSS structure is linked to the DOM. This can result in larger file sizes and the component becomes non-reusable. If the markup needs to be changed or moved, the CSS rule needs to be changed as well. Using ID selectors could lead to maintainability problems. At this point most developers would try to write a stylesheet with very specific rules – since there can be only one single element using the same ID, these are not reusable. Other aspects include ever-longer CSS files – some have over 1000 lines of code.   Think Components Think about the fact that a web page is composed of multiple components. Let’s take a services page as an example. The page is composed out of three components: Services is the entire services section Container is simply a generic container that limits size and adds some padding Service-item is a single service item   Styling VS layouting In order to make a component easily reusable and to make the CSS layout more manageable, the concepts of styling and layouting need to be differentiated. Styling means changing paddings, borders, fonts and colours. All these changes take place inside the component itself and hence do not interfere with the layout or structure of other components. The following elements fall into styling: Text align Padding Font Colour Border Background   Layouting on the other hand implies moving elements around your page and sizing them – this can affect other elements on the page. The following fall into the layouting category: Height and width Left, bottom, right or top Transform Position Margin Float Clear   Do not layout yourself You shouldn’t layout yourself because a component should style itself but give up the task of layouting to its parent. What this means is that the component doesn’t need to float on its own or have its own margins but the parent-component should layout its child components. This makes it much easier to build responsive user interfaces because the layout itself becomes more predictable. There’s no need to worry if two components look good on a screen if the parent component layouts its child component appropriately.   Components should be simple If your components have too many lines of code, you should create a different component to handle it all. In the same time, having too many components can turn into a maintenance burden – hence the option to create sub-components. Nesting subcomponents together is not allowed, so if the subcomponent needs to have its own sub-components then it should become a top level component. These rules are enforced in order to keep components simple and working smooth.   Component inheritance Sometimes a component is a specialization of another component. Adding modifier classes to the HTML markup could make it redundant and not friendly to refactoring. By using Sass we can use @extend in order to extend other components. Eg: The “services” component is a specialization of an inverted section. In this case we use @extend only for component inheritance, which is a valid use case. It’s possible to use either @extend or @mixin as long as both are used in a controlled manner. The bad thing about using @extend is that it won’t necessarily work for generated CSS files and you can’t extend from inside a @media query. If it needs to be done, the CSS structure needs to be reworked.   File structure CSS files with a large amount of lines are very hard to work with. In some cases, depending on the project’s complexity, it may be possible to put all the CSS code in a single file. For larger projects it may necessary to organize assets via controller.   Directory structure Having stylesheets with a large number of files can be very difficult to handle, so grouping them accordingly is crucial – keep in mind that each project is different and each directory structure needs to be different. Try to find a directory structure that fits your current project. Sometimes you can put all the CSS in a single directory but at other times you need to organized them by type, media type or screen size.   Wireframe – Design – Wireframe Sometimes it’s a good idea to draw another wireframe from the already finished design. But why? With the wireframe in place we’re able to look at the page as a whole, not just little portions. Naming and componentization – viewing the whole page in a glance lets you name sections easily Hierarchy and structure – it’s easier to structure your pages into sections or subsections with the wireframe in place Margins – with the wireframe you can plan your paddings and margins more efficiently   Responsive design Breakpoints can be defined for desktop, tablet, mobiles or they can be created based on content. Creating breakpoints based on content means that the site will look good on any screen size. Start with the smallest screen size and resize your window accordingly. When a component looks out of place, modify it and create a breakpoint there. Repeat the process until you reach the largest screen size you want to support.   Conclusions These are the basic ways to write more predictable and maintainable stylesheets – by applying these tips you’ll save yourself a lot of tweak work in the long run. Happy coding!   ... Read more
Adrian Ababei / May 02'2016