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.

How to Make Icons Accessible to the Widest Range of Users? 10 Best Practices
Material icons, flat icons, thin icons, ready-made or fully custom, on-brand icons... No matter what type of web icons you opt for, the same rule applies: the need to be visible to all users. So, you ask yourself: "How to make icons accessible to... everyone?". For, in vain you go with an eye-catching web icon design if its color contrast is so low that some users just don't see it. Or if it's interactive, but only when... mouse clicked. See my point? Therefore, in today's post I'll tackle aspects like:   what accessible icons are what goes into making icons accessible: most effective approaches and best practices what are the different types of web icons and the specific techniques for making them accessible    Let's dive in:   1. What Are Accessible Icons More Precisely? What makes an icon accessible to screen reader users? What requirements should it meet to be fully inclusive? Here are the 6 most important things to consider when you're designing accessible icons:   1.1. Make Them Noticeable For, it's pretty logical:  If an icon's not instantly perceivable to all visitors, it becomes inaccessible. And by "instantly perceivable", I mean that users shouldn't be constrained to perform some sort of action in order to make the icon... visible. 1.2. If It's Purely Decorative, It Shouldn't Be Read Out One of the best practices for designing accessible icons (decorative icons) is to skip the part where the ALT text gets read out to screen reader users. That's because, in the case of a decorative icon, informing the user about its existence on the page (e.g. "There is a key icon!") is just... superfluous. Which leads us to the next requirement that all "wannabe accessible" web icons should meet:   1.3. Always Add a Text Label The magnifying glass icon is universally recognized as a "search" tool. But that's the only universally recognizable icon... Therefore, it's best to play safe if you want your icons to be accessible to the widest range of visitors. Whether you have a hamburger menu icon or a house-shaped one, accompany it with a text label to prevent any ambiguity.   1.4. Keep in Mind the Color Contrast  This is one of the recommendations on top of any "How to make accessible icons" list that you might stumble upon: Make sure there's enough foreground-background color constrat in your icons, so that visitors with different levels of visual imparirment can easily notice them.   1.5. Make Sure They're Properly Sized And by "properly sized" I mean somewhere around 44x44 pixels. Pay particular attention to the size in the case of icon links: Any smaller than 44x44 pixels and they become inaccessible on smaller devices: some users won't be able to click on them.   1.6. Make Sure They're Mouse, Touchscreen, AND Keyboard Accessible Have you decided to "sprinkle" some interactive icons across your website?  Then make sure that users can easily click on them whether they use their mouses, they tap on their touchscreens or they depend on their keyboards for that. 2. How to Make Icons Accessible: 10 Approaches &amp; Best Practices  Now that we've gone through "what" makes an icon accessible, let's get to the "how-to" part: How can you make your web icons more accessible for screen readers users? Here's a list of simple approaches and valuable tips to consider:   2.1. Consider Pixel Measurements and Square Dimensions  Most icons have square dimensions.  And if you're curious which are some of the most frequently used sizes for web icons, here are some popular examples:   128x128 16x16 512x512 64x64 256x256   2.2. The Easiest Way to Make Your Linked Icons Accessible Is to... ... add an ALT-text that lets the user know what the link does. What its destination is. For instance, you can add "Email us" as the ALT-text accompanying your "@" email icon. 2.3. When In Doubt, Choose an SVG or a PNG File Format  Even if some prefer the SVG icons systems, while others choose to go with PNGs (making icons accessible is easier with that file format), all web designers agree on this: Icon fonts should be the very last option to consider.   2.4. Make Sure Your Document and Your Icon Are The Same Size    2.5. See that There's Enough Icon-Background Color Contrast Will you be adding your web icon to a background?  If it's a yes, then check and adjust the color contrast.   2.6. Check Your Icon's Size Before Exporting It The 6th tip on our "How to make icons accessible" is pretty... predictable: All web icons should be properly sized prior to export, making sure they're not too large.   2.7. Hide the Text Accompanying the Icon, but Keep It Visible to Screen Readers Let's say that you've inserted an explanatory enough copy text within your link icon, but you don't want it to be visible to all users.  You want it to be visible to screen readers only. For this, you can use a visible-hidden class selector.   Word of caution! Going with this solution does call for 2 compromises:   the click/touch area is smaller screen reader users might not understand what that icon does (the VoiceOver will then read something like: "internal link, home"). 2.8. Accompany Your Semantic Icons with Visible Text to Avoid Ambiguity "What's a semantic icon?" you ask?  A standalone icon that has meaning.  Now, if you want to make sure you'll prevent all situations where users might just overlook it, just add a visible "Menu" text next to it. This way, its meaning will be 100% clear to anyone.   2.9. The Simplest Way to Make Icon Fonts Accessible Is... ... to add aria-hidden="true" to the element. Note: again, whenever possible, avoid icon fonts and opt for inline SVGs instead.   2.10. Skip Adding ALT-Text to Text-Based Icons Let's say that you have an "Email Us" linked icon.  Now, it would be quite superfluous to have an ALT text added to, saying the same thing to the screen reader user, wouldn't it? In this case, the icon is purely decorative, since the copy text around it already conveys the meaning on its own.   The END! Now you have at least 10 different answers to your "How to make icons accessible to the widest range of users" question. But maybe you need help choosing the best approach and implementing these best practices in order to make your brand icons more accessible.  We're here to help! Just drop us a line and let's find the most suitable solution for making your web icons available to everyone visiting your website. Image by Виктория Бородинова from Pixabay  ... Read more
Adriana Cacoveanu / May 06'2020
How Does Using Component-Based Development in Drupal 8 Benefit Your Team More Precisely?
With the Twig templates replacing the old PHP templates, Drupal has been brought to a whole new “era”. We can now leverage the advantages of a component-based development in Drupal 8. But what does that mean, more precisely? How does this (not so) new approach in software development benefit you? Your own team of developers... And everyone's talking about tones of flexibility being unlocked and about the Twig templates' extensibility. About how front-end developers, even those with little knowledge of Drupal, specialized in various languages, can now... “come right on board”. Since they're already familiar with the Twig engine... Also, we can't ignore all the hype around the advantage of the streamlined development cycles in Drupal and of the consistent user experience across a whole portfolio of Drupal apps/websites. But let's take all these tempting advantages of component-based UI development in Drupal 8 and point out how they benefit your team precisely.   1. But First: What Is a Component? It's a standalone piece of software that can appear in multiple places across your Drupal website/application. One of the most relevant examples is that of a content hub. One displaying teasers of the latest blog posts, events... You could set up a component that would determine how each item in that content hub should look like. In short:   one single component can be used by several types of content any update to its template/style would automatically reflect on all those content types, as well   Accessible via an API, this independent piece of software explicitly defines all its application dependencies.| Your team could then easily architect a new interface by just scanning through and selecting from the library of components.   2. What Is Component-Driven Development? What Problems Does It Solve? A succinct definition of component-based software engineering would be: A software development technique where you'd select off-the-shelf, reusable components and put them together according to a pre-defined software architecture. “And what challenges does it address?” It streamlines and lowers the level of complexity of otherwise intricate, time-consuming development and design processes. As the author of given components, your role is to get them implemented. No need to worry about how they'll get “assembled”; this is what the well-defined external structure is there for. Word of caution: mind you don't get too... engrossed in putting together the right components, in architecting the best component-based structure, for you then risk investing too little time in... building them properly.   3. Component-Based Development in Drupal 8 Now, if we are to focus our attention on the component-based UI approach in relation to Drupal 8 software development, here are the key aspects worth outlining:   with the Twig engine in Drupal 8, you're free to “joggle with” extensible templates; once you've defined a Twig template in one place, we get to reuse it across the whole Drupal website/app   the Component Libraries module allows you to set up template files (storing all their needed JS and CS), assign a namespace for them and place them pretty much anywhere on your Drupal filespace (not just in your themes' “templates” directory)   you then get to use the KSS Node library and define a living style guide; it's where you'll store all the component templates built for your Drupal website (styles, markup, JS behaviors, etc.)   By filling in your toolboxes with all these tools — the results of a joint effort of the Drupal and the front-end communities  —  you're empowered to design themes that are more modular. And, therefore, more efficient... 4. The Top 6 Benefits of the Component-Based UI Approach   4.1. It Ensures UX Consistency Across All Your Drupal 8 Websites Take your library of components as the “headquarters” for all the teams involved in your Drupal project: QA, business, development, design teams... It's there that they can find the pre-defined standards they need to keep the consistency of the features they implement or of other tasks they carry out across multiple projects. A consistency that will bubble up to the user experience itself, across your whole portfolio of Drupal 8 websites/applications...   4.2. It Accelerates the Process of Turning Your Visual Design into a UI  Embracing the component-based development in Drupal 8 you'd avoid those unwanted, yet so frequent scenarios where the front-end developer gets tangled up in the wireframe he receives and:   he/she translates parts of it the... wrong way he digs up all types of “surprise” issues     By using a component-driven UI approach translating a visual design into a user interface gets much more... event-less.  With:   a pre-defined component architecture to rely on well-established standards to follow a whole library of component templates at hand   … there are fewer chances of discrepancies between the UX defined in the visual design and the one delivered via the resulting user interface. Not to mention the reduced delivery timelines...   4.3. It Streamlines the Whole Development Process  “Sustainability” is the best word to define this approach to Drupal software development. Just think about it:   whether it's a particular grid, navigation or layout that your front-end developer needs when working on a new project, he/she can pull it right from the component library at hand   … and “inject” it into the app/website that he's working on   in case that element needs further updating, the developer will already have the baseline to start with   … there's no need for new components to be designed, from the ground up, with every single project: the already existing ones can always get further extended   And that can only translate into significant savings of both time and money.   4.4. It Reduces the Time Spent on Setting Up the Functionality &amp; Defining the UX And this is one of the key benefits of using component-based development in Drupal 8. Your various teams would no longer need to define the UX requirements and the functionality every single time during the design process. With an easily accessible library of components, they can always pull a component standing for a specific requirement (display of complex data, filtering, pagination in grids, etc.) and just define its extensions. And the business logic, as well.   4.5. It Enables You to Systematically Reuse Your Components And “reusability” goes hand in hand with “sustainability”. I would even say that it's a synonym for “future-proofing”, as well... Just think about it: by having a Drupal 8 website in a component-based format you can always rearrange components as technologies grow outdated and new ones emerge... In short, embracing a component-based development in Drupal 8 enables you to remove the need of rebuilding your website every time its underlying technologies “grow out of fashion”. With your component library at hand, you'll be able to swap your guidelines, design patterns and various content templates in and out, keeping your Drupal app or website up to date.   4.6. It Integrates Seamlessly into the Development Process  By leveraging a component-based development in Drupal 8, you'd also gain better control over the whole development cycle. The update process here included... Since you'd then build your components and manage your production quality user interface code in a repository like GitHub, every update that you'd make will be displayed in there. And be easily accessible to everyone in your team. In short, your developers get to pull pieces of code from the repository to further extend them, then re-submit them to GitHub (or to another source code repository) for review. With the ability to version your component library, your team can keep a close track of all your Drupal applications with their corresponding versions of the approved UX.   The END! This is how the component-based development in Drupal 8 would benefit you and your team. Have we left out other key advantages of using this approach? Image by Arek Socha from Pixabay ... Read more
Silviu Serdaru / Apr 11'2019
How to Create an Angular Project with Angular CLI in 5 Simple Steps
About to build your very first Angular app? Then you must be planning to create an Angular project with Angular CLI, right? The much-acclaimed tool that the Angular team built precisely to jumpstart the whole development process. … to have a simple app scaffolded, generated and deployed in no time, by entering just a few commands (so they say, at least).  And since I'm sure that you don't want to waste these bundles of convenience by letting yourself tangled up in overly complex explanations instead, I've kept things simple with this guide. So, here's how you create and run your first Angular project via the Angular command-line interface:   1. But How Precisely Can Angular CLI Jumpstart Your App's Development Process? Take this command-line interface as a starter kit “present” that the Angular team has nicely wrapped for you:   it's practically geared at empowering you to get up and start developing a new Angular app in no time it takes just one short command to generate a default Angular project that would include all the needed dependencies (in the node_modules folder), as well as testing files for each component   Now, this is what I call a major kickstart! It's got you covered from the stage of setting everything up, to creating the Angular project itself, to testing it and finally deploying it. Other key usages of the Angular CLI that we're not going to focus on in this tutorial here are:   real-time server maintenance and support building applications for production adding new features to your existing app  running tests on your application units    2. Setting It Up: Install Angular CLI Globally Before you jump to the part where you create an Angular app using Angular CLI, you need to install the command-line interface itself. Globally! And this is the “power” command to enter in your terminal with the npm installed: npm install -g @angular/cli Notes: if you already have the CLI installed, make sure it's the latest version if you need to update it, these are the commands to enter: npm uninstall -g angular-cli npm uninstall --save-dev angular-cli And there's more! A few more must-have dependencies that you need to make sure that are already installed and upgraded to their latest versions: Node.js: v6.9.x + npm: 3.x.x +   3. Create an Angular Project With Angular CLI With your command line interface ON, use it to enter THE one and only command that will generate a new Angular project for you. One incorporating, by default, all the needed dependencies: ng new ng-yourproject Tada! A “yourproject” named directory has just been generated. That's where your new Angular project — along with all the requested dependencies — gets stored. Eager to test it out? Just run the following command in your terminal: ng serve   Your Angular app will then get built and served up to localhost:4200. Feel free to open this URL in your browser and it's the here-below screen that you should be able to see: Basically, it's the default application shell itself rendered by the CLI.   4. “Deconstructing” Your New Angular Project: What Does It Include? Now, before you go ahead and do your “tweaking” on your newly created app, let's see what you've got in there! What are the elements that the CLI has generated for you to help you jump to development right out of the box? For this quick “scan”, open your Angular project in your IDE of choice and start “exploring” your src/folder:   src/*    styles.css any styles that you'll plan to apply globally, it's this file that you can add them to; and it's here, as well, that you can import new .css files (Bootstrap or any other styling frameworks of your choice)   index.html  where your Angular app gets started   src/app/*    app.component.ts this is where your app's one and only (for now at least) component gets stored   app.module.ts  the modules Angular needs for managing your app's components note: @NgModule marks the class file as a module and this is what makes it similar to @Component   5. Create a New Component  Remember your “one and only component” that I mentioned during the previous “inventory” of all the “bunch of stuff” that CLI has generated in your project? Well, how about creating a new one now? One that would load under that root component? Just run the following command to generate it: ng generate component the-quote Next, time to “show it off” in your browser: &lt;h3&gt;{{myQuote.quote}}&lt;/h3&gt; &lt;small&gt;- {{}}&lt;/small&gt; Add the app-the-quote selector to the root component that the CLI generated in your Angular project: &lt;h1&gt; {{title}} &lt;/h1&gt; &lt;app-the-quote&gt;&lt;/app-the-quote&gt; 6. Apply External Styling  Now you do agree that when you create an Angular project with Angular CLI applying styling is a key step. So, let's add your favorite CSS framework to your new application! Me, it's Bulma that I'll be using in this tutorial here: npm install bulma --save With our CSS framework installed, we'll need to enable it to load the CSS file into our Angular app. For this, just place the relative path within the .angular-cli.json file., to the file in the styles array more precisely. ... "styles": [ "../node_modules/bulma/css/bulma.css", "styles.css" ], ...   “Tempted” to display some icons now, as well? Then go ahead and add the font-awesome library as cdn link. For this, just include the stylesheet right into your index.html: &lt;link rel="stylesheet" href=""&gt; Et voila! This is how you create an Angular project with Angular CLI! What do you think? Is the Angular command-line interface an extremely useful tool to jumpstart your project with or did you expected your “starter kit” to include, right out-of-the-box, more elements to get you started? ... Read more
RADU SIMILEANU / May 25'2018
How to Use Bootstrap with Angular 4? Here Are 3 Ways to Add It To Your Project 
Here you are now: your Angular 4 front-end app ready to... wow its users! “Almost ready” actually! For it still needs styling... And what better HTML and CSS framework to go for than Bootstrap, right? But how to use Bootstrap with Angular 4 more precisely? How do you properly integrate it into your Angular 4 CLI project? Great news: you have not just one, but 3 options at hand for adding it! Let me get into details:   On Using Bootstrap in Your Front-End Development Process Is there any need to list here the reasons why it's precisely Bootstrap that you're planning to implement into your Angular CLI project? Angular 4, to be more specific. After all, it's the most popular framework for styling websites built in HTML, CSS and modern web &amp; mobile JavaScript frameworks (like Angular here): It's an open source, feature-rich framework that turns front-end development into a such a “breeze”. Basically, it empowers you to build responsive layouts without the need to be a CSS “expert”. And now, let's break down further with the step-by-step “tutorial” on how to use Bootstrap with Angular 4:   Step 1: Create a New Angular Project Using Angular CLI  The very first step to take is obviously setting up a brand new project. Use the Angular Command Line Interface to generate it. But first, install it to on your system: $ npm install -g @angular/cli It's only then, once you've installed its NPM package, that you can go ahead and... generate your new project.  For doing this, just type the following command in your CLI: $ ng new myproject Next, feel free to change into that specific directory and to turn on the web server: $ cd myproject $ ng serve “App works!” This is the message that you should be seeing in your browser right now.   Step 2: Install Bootstrap to Your Project Now that you've launched your new Angular project, it's time to add your Bootstrap library, as well. And you sure aren't nickel and dimed in options. There are 4 ways to add Bootstrap to Angular 4.   Step 3: How to Use Bootstrap with Angular 4 — 3 Different Ways to Integrate It Option 1: Install Bootstrap from CDN And there are 2 particular files that you'll need to install from CDN into your project:   the Bootstrap CCS file the Bootstrap JavaScript file    Note: keep in mind to add the jQuery JavaScript library file, as well! Next, open the src/index.html file and insert the following:   the &lt;link&gt; element to add the Bootstrap CSS file at the end of the head section a &lt;script&gt; element for adding jQuery at the bottom of the body section a &lt;script&gt; element for inserting the Bootstrap JS file at the bottom of the body section   Eager to see “Bootstrap in action” in one of your project's component templates? Then give it a try:   open the src/app/app.component.html enter the following code there:   &lt;div class="container"&gt; &lt;div class="jumbotron"&gt; &lt;h1&gt;Welcome&lt;/h1&gt; &lt;h2&gt;Angular &amp; Bootstrap Demo&lt;/h2&gt; &lt;/div&gt; &lt;div class="panel panel-primary"&gt; &lt;div class="panel-heading"&gt;Status&lt;/div&gt; &lt;div class="panel-body"&gt; &lt;h3&gt;{{title}}&lt;/h3&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; And it's the following message that this HTML template code should trigger in your browser: “app works!” Note: go for a Bootstrap theme of your choice; once you've downloaded it (from for instance), its bootstrap.min.css file will get instantly opened up in your browser. Just copy the file's URL and use it to replace the string assigned to the href attribute of the &lt;link&gt; element, in the index.html file. And voila! It's precisely those colors, defined by your chosen theme, that get displayed in the browser now!   Option 2: Install Bootstrap using NPM And here's another valid answer to your “How to use Bootstrap with Angular 4” dilemma! Simply enter: $ npm install bootstrap@3 jquery –save It's this command that will integrate Bootstrap and jQuery into the node_modules folder of your Angular 4 project directory. Moreover, it will include these 2 dependencies in the package.json file, as well. Once properly installed, you can find both packages at:   node_modules/bootstrap/dist/css/bootstrap.min.css node_modules/bootstrap/dist/js/bootstrap.min.js node_modules/jquery/dist/jquery.min.js   Note! You have 2 options for integrating those files into your Angular 4 project:   add the file paths to the script array and to the file path of the angular-cli.json file add the corresponding &lt;script&gt; and &lt;link&gt; elements to your index.html file   Option 3: Add NG-Bootstrap to Your Project The great thing about this method is that you'll no longer need to add jQuery and Bootstrap dependencies. Ng-Bootstrap comes packed with a set of built-in native Angular directives which are already CSS and Bootstrap's markup-based. Now, getting back to our initial “How to use Bootstrap with Angular 4” question, let's see how we install this NPM package.  For this, just enter the following command in your Angular 4 project directory: npm install --save @ng-bootstrap/ng-bootstrap Next, make sure you also install Bootstrap 4 to your project: $ npm install bootstrap@4.0.0-alpha.6 And, the final step is to add the following files:   jquery.min.js bootstrap.min.js bootstrap.min.css   … to your .angular-cli.json file Now you still need to import the Ng-Bootstrap’s core module — NgbModule — from its @ng-bootstrap/ng-bootstrap package. To do this, just type the following import statement into app.module.ts: import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; All there's left for you to do now is to add the NgbModule to the @NgModuledecorator's imports array.  And since we're here, you'll find some more than “enlightening” info (chunks of code here included!) on the 2 different options at hand for importing the NGBModule: either in your project's child modules  or in your the root module itself … in this article here on Using Bootstrap with Angular.   Using The NG-Bootstrap Components: Which Are They?  With the NgbModule installed into your Angular 4 project, you're now able to use the Ng-Bootstrap components. To leverage them in your app.component.html. Speaking of which, here are the components at hand:   Accordion Alert Rating Tabs Carousel Progressbar Collapse Datepicker Buttons Pagination Typeahead Popover Timepicker Dropdown Modal Tooltip   The END! Does this answer your “How to Use Bootstrap with Angular 4” question?  Which method of adding this front-end framework to your project is more suitable for you? ... Read more
Silviu Serdaru / Apr 30'2018
How to Use Gulp To Streamline Your Theme Development Process in Drupal 8
Automate all site-building tasks and streamline your theme development process! In short: reduce development time and boost your productivity as a Drupal 8 themer with Gulp! But how to use Gulp to automate your workflow? How do you set it up and run its toolchain in conjunction with Drupal? How do you move away from the old practices of the “good old days”,  when you had to write your themes in pure CSS? Since you had no alternative... How do you “harness Gulp's power” to automate tasks that are crucial for your Drupal 8 theming process such as:   compiling SASS and LESS watching/generating CSS files from SASS testing generating static design pattern pages reloading the browser  optimizing assets: images, JavaScript, CSS   Well, keep reading and “thou shalt find out”!   But What Is Gulp, After All? I confess I couldn't come up with a better definition for Gulp, than the one on the official site: "… a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something." More often than not referred to as “build tools”, Gulp is a front-end automation tool aimed at streamlining your theme development process. Basically, it enables you to have all those tasks that are critical (and time-consuming) for your workflow run... automatically! And thus to give your productivity as a Drupal themer a significant boost!   Why Use Gulp over Other Theme Development Streamlining Tools? Here are 3 of the strongest reasons why:   because Gulp configurations are conventionality simpler, shorter because using Gulp you get to capitalize on a wider community support because it runs faster, as well   How to Install Gulp A word of caution: since Gulp is a node module, make sure you install Node.js (this, of course, if you haven't installed it already) first things first. Needless to add that:   you should go for the latest version of Node.js the installation process depends (and may differ) greatly on the Operation System that you're using   Install Homebrew, then run the following command: $ brew install node Now, for installing Gulp, type the following command: npm install gulp-cli -g Where “npm” stands for the “Node Package Manager” used for installing Gulp on your PC. And where the “-g” flag signals that Gulp should be installed globally on your PC.   Creating Your Gulp Project: Set Up Your Package.json File As you well know, Node.js uses “npm”, a package manager “in charge” with downloading and installing all the modules required for a given project. And all these modules get defined in a “package.json” file.  So, this is the step you, too, should take now: setting up your package.json file in the very root of your Drupal 8 installation. For this, just run the following command inside that directory: npm init It's inside this newly created package that all the key information about the node packages required for your specific project gets stored! Therefore, make sure to fill up all the needed information as you put together your package.json. Note: still, you should also know that all the prompts are ideally intuitive and that even if you leave those fields blank, you can always come back later and change the default values. Remember to set the entry point to “gulpfile.js” and, once you add the required information for your project, keep in mind to specify your git repository. An Important Word of Caution! Your “How to use Gulp to automate my theming tasks in Drupal 8?” question should be accompanied by: “How to prevent triggering a segmentation fault?” One that you might involuntarily trigger once you run Drush. Since Drush will consider the node package's own .info file files as part of Drupal and since it doesn't recognize their format... trouble happens. Here's how you avoid segmentation fault: add a script to the package.json file, whose main role will be to remove all the .info files from the node_modules folder And now, let's go back to our package.json setting up process! One last piece of advice that I'd like to add: if you've run the “npm init” command for creating your package.json file, remember to identify the “scripts” section and to replace the following line: "test": "echo \"Error: no test specified\" &amp;&amp; exit 1" … with this one: "postinstall": "find node_modules/ -name '*.info' -type f -delete" And one more thing: set up the following .npmrc file in your theme folder's root: unsafe-perm = true Here's how the “intro” of your package.jso file' structure will look like: "name": "...",   "version": "...",   "description": "...",   "main": "...",   "author": "...",   "private": true,   "devDependencies": {     "browser-sync": "...",     "gulp": "...", Once you have your package nicely set up, go ahead and install Gulp into your project by running this command: npm install gulp --save-dev  Note: you might be wondering why you need to install Gulp... again. The answer is simple: first, you installed Gulp globally and now you're installing it into your Drupal project! In this respect, it's  “--save-dev” which will let your PC know that Gulp needs to be added as a dev dependency in your packgage.json. All Gulp files and dependencies associated with it will get downloaded and a “node_modules” folder will get created.   Set Up Your Gulpfile.js You're not yet done with setting everything up! There's still one important step to take before you discover how to use Gulp to create and to automate your site building tasks: setting up the gulpfile.js! For this, just:   go to your custom theme directory manually create a gulpfile.js file by either using the cmd/terminal or just by right-clicking to create a new file   Note: keep in mind to change the config variable so that it should match your paths! Also, make sure that all your CSS gets stored in the same “CSS” directory in your theme (for example: sites/all/themes/my_theme/css/application.sass)    How to Use Gulp to Create and Automate Key Tasks for Your Workflow And finally, we've reached our “destination”!  The very goal of this blog post after all: determining which site building tasks are crucial for my/your own workflow, creating them and then automating them all with Gulp! Do you fancy automated:   Sass compiling into CSS? cache clearing “detection” of all the changes you will have applied to your .scss files? page reloading?   And your “wishlist” might go on...  Well, the answer to your “How to use Gulp to automatically run task “x” or “y”?” is simple:   Just run the gulp [task_name] “magic formula” in your terminal!    Here are some examples:    gulp.task('watch', function () which will watch for all the changes applied to your scss files and automatically recompile  gulp.task('reload', ['clearcache'], function () which will clear cache, then automatically reload the page  gulp.task('browser-sync', function() which will automatically run the BrowserSync server In order to get the whole process started, simply type “gulp” in your terminal. The END! Your turn now! Time to use Gulp to its full potential and to automate all those key (and time-consuming) aspects of your theme development process in Drupal 8!  ... Read more
Silviu Serdaru / Feb 28'2018
5 Ways to Build Out a Well-Organized CSS Architecture 
Would we be wrong if we stated that the very “easiness” of writing CSS code is this language's “Achilles' heel”, too? It “lures” you in, it boosts your confidence as a programmer and than... nasty surprise... your web projects gradually turn into unmanageable messes! This is why the need of building out a CSS architecture, that we can organize and structure our CSS codebases by, has rapidly gained importance in developers' community! And where do you add that there are multiple well through-out methods for you to use for neatly and effectively structuring your CSS files! We've hand picked just 5 of them, “la crème de la creme”. But before we go on with our CSS organizing techniques, let's “look our enemy in the eye”! Let us highlight the challenges that we're currently facing while trying to effectively managing our CSS projects:   it uses global namespaces, leading to inevitable collisions and leaking styles   it's purely declarative: zero logic and no well structured workflow which would let all the other developers working on the same project know about the state of the project itself   it operates with inheritance: meaning that everything is interdependent and, therefore, highly “fragile”, prone to getting broken     And the list can go on.  So, now that we've pointed out the obstacles that we need to overcome when it comes to “taming” our load of CSS files into a scalable, easy to maintain CSS architecture (suitable for long-running, large projects, needless to add) let us point out to you the 5 “chaos proofing” methods:   1. OOCSS Which stands for “Object Oriented CSS”. The whole “philosophy” behind this CSS structuring and planning method revolves around the idea of creating pages/views by putting together multiple CSS objects! CSS objects which are independent from one another (see, the CSS's interdependence issue that we've just pointed out in our list of “drawbacks”). And when we say “independence” from a CSS code's standpoint, we can only imply that:   design and structure are separated  container and content are independent of each other, as well    And this whole “separation of concerns” driving principle has 2 major results:   the entire “load” of code gets considerably lighter (and this is a tremendous asset if we take large, code-packed web projects into account)   yet things get trickier the moment one of your Toronto developers tries to apply a change to a certain element's style: not only that the CSS will need to be modified, but classes will have to be added to the markup, as well    2. SMACSS “Scalable and Modular Architecture for CSS”, a style “guide” (rather than a strict framework) developed by Jonathan Snook. Now this approach to organizing your CSS code is more than “tempting”: it promises you a lighter code “cargo” and simplified code support. What more could you ask of a CSS organizer, right? Moreover, this technique operates with 5 sets of rules:   base rules: targeting a site's main default elements such as body, HTML, a:hover, input, button etc. They target your CSS assets, too, and “constrain” you to use attribute selectors and HTML tags mostly (and classes, too, but extremely rarely)   layout rules: which segments a web page into multiple sections including global elements such as header, footer, sidebar, article, defining each one's style too.    modules rules: includes reusable blocks, modular elements that you get to use several times on the same web page. Keep in mind, though, to avoid using tag selectors and id for module classes!   state rules: define the various statuses of those modular elements (e.g. hidden, active, inactive etc.). Moreover, you should know that all these variations get prefixed as following: is-active, is-hidden.   theme rules: define the design styles, how your modules will look like and they're particularly useful in case of larger sites with shared modules having different layouts throughout the websites.   Note: take the SMACSS approach as a guideline rather than as a strict method, or a set of rigid “rules”. As a web developer who'll use this method to build a well-structured, maintainable CSS architecture, you'll still be free to use your own namespaces for your class categories, to display them to your liking and so on. The only “common sense” rule is that of documenting your CSS code, so that all the other developers in your team should easily follow you along. But this “rule” stands irrespective of the CSS structuring approach that you might decide to adopt, right?   3. BEM, An Increasingly Popular Methodology for Building Out a CSS Architecture  … or “Block Element Modifier”, if you prefer, developed at Yandex! Expect it to be more prescriptive than SMACSS (for instance). BEM is more than just a set of basic guidelines: it delivers a strict method for you to structure your CSS classes into independent modules! And speaking of this method, although you'll find multiple variations on it, the basic structure looks like this: .block {} .block__element {} .block--modifier {} .block__element--modifier {}   It's only just “fair” that we presented each one of this structure's components right?    a block: any object on your site (a menu, a person, a login form)   an element: part of a block performing a certain function in the context of that block only: a login button, a menu item...   a modifier: the way you'll represent the variations of a given block (a search input field having a particular button style, a menu “tailored” to adjust itself to a footer or a sitemap etc.)   Key Advantages to Using the BEM Method as a “Backbone” for your CSS Architecture:   it's perfectly scalable, being a perfect fit for both small and large projects   it keeps you from nesting selectors (a well-known drawback when it comes to Sass codebases) thanks to its long, descriptive class names   it enables you to reuse your code: basically it works as a “code container” for you, which turns out to be a major asset especially if you're working on a large project where your team has to move “clusters” of CSS, JS and HTML code from one project to another   it's ideally suited for large, modular web development projects   4. Atomic CSS … or maybe you prefer “Functional CSS” instead? As for this CSS “organizer's” philosophy, so to say, we could formulate it like this: creating one separate, single-purpose class for each and every reusable property, while naming it according to its visual function! The undeniable advantages of such an approach to organizing your CSS code are:   a significantly lighter load of CSS code, since you'll get “empowered” to reuse your declarations an easy way to modify code (it makes applying changes to your modules less complex, for instance)   Yet, this method does come with its own flaws, too. Here are some of the most “painful” ones:   the class naming conventions come along with a high learning curve, too   it makes the style code closely linked to the Atomic CSS framework used for generating the classes   the class names aren't semantically linked to the elements, but rather describe property names    the display settings are in the HTML   as new CSS modules get added to the specifications, everything gets overly complex    Note: Atomic CSS has “succeeded” to split developers' community into 2 major groups: those that keep highlighting this methodology's major flaws and those that, on the contrary, qualify specifically these flaws as benefits instead:   the “semantic nature” of the elements are, in their opinion, already properly described by the element tags and your components' names   the fact that the settings are displayed in the HTML might turn out to be more convenient: this way you won't need to go through your entire maze-like CSS codebase to find out what settings are defined there   5. ITCSS: Build Your Manageable CSS Architecture for Large Projects Harry Roberts' “Inverted Triangle CSS” implies, as the name suggests: visualizing and structuring your project as a triangle. An upside-down one! This triangle-shaped structure would include the following “layers” of CSS code:   Settings Tools Generic Elements Objects Components Trumps   Practically, the IRCSS technique “constrains” you to order your CSS codebase not by the usual human-oriented patterns, but by those metrics defined by the programming language (along with its particularities) itself! Ordered this way, your code will get better “understood” and “exploited by both browsers and by the specific design of the programming language itself. It will no longer get organized by how a person thinks, but rather adapted to the language's own features and to the way browsers perceive it. This way, your ITCSS-based CSS architecture will end up to be:   easily scalable logical manageable  predictable rule-based   ... instead of an “untamed mess”!  Which one of the above presented 5 methods better suits your team's coding style? Your current project's specific needs and requirements? Go for the one that you find more suitable for your own team's specific workflow, coding style and for your web project's particularities and get your own “unmanageable CSS mess” ideally structured, too! ... Read more
Adrian Ababei / Jul 20'2017
Blog Placeholder
How many times haven't you heard this line: “There must be a CSS for that!”. You might have said to yourself: “yeah, right, like CSS could be the answer to any coding dilemma”.   You'd be surprised: in way too many cases it actually turns out to be that “magic formula” you need. And it would be a pity not to make use of CSS's helpful resources. With only one or a few more lines of code CSS works its magic for you, lifting a heavy weight off your shoulders!   Enough beating around the bush now: we'll go ahead and share with you our top favorite CSS tips that will help you improve and thus speed up your workflow:   1. Center Your Content Vertically   A bit frustrated for there is no “official” method (yet) for centering content within its container in CSS?   We've been there, too, you know. And here is the solution that we're happy to share with you after our own experience of striving to align text in CSS: the line-height property.   Let's use it in an example:   .nav li{ line-height:50px; height:50px; }   Note: make sure that your line-height value is (almost) the same as your container's height!   Furthermore, you need to keep in mind that this method applies only to single line texts. If you're dealing with a multiple lines text, going for this solution will only add too much white space to your website (it's logical if you consider that the same line-height value will be applied to the space between those lines).   So, stick to single line texts such that of navigation menus when applying this CSS trick.    2. Dealing With CSS Tables    We'll just have to accept it now: there's nothing we can do to turn back the hands of time and make up for all the time “wasted” when we didn't use display: table for handling CSS layout.    So, let's sum up our “findings” regarding this CSS “trick”.   First, you can use display: table for efficiently:   setting equal heights for neighboring columns (it's true, you can also use JavaScript for that, but: oh boy! isn't JS a lot heavier and packed with its own particular drawbacks!) centering an item, vertically, next to a larger one     And now if you're still a big hesitant to replace the conventional “table layout” with this new “formula”, let us add that unlike it, this “new” (although it's been specified in CSS even from its 2.1 version) can quickly be turned responsive: you just need to add a breakpoint for removing the display: table.    There' more! Here are other 2 “great things” that you can achieve with this CSS solution:   float-less grids tables without the &lt;table&gt;   3. A Few Words About Transition   How are you responding to the challenge of puling of hover effects on the websites that you're building these days (for gradually changing the menus or the images' colors)? Admirably? OKish? Or really badly?   Well, if you've been having trouble creating really smooth effects, CSS is ready to lend you a hand. Just take a look at this example here:   .entry h2:hover{ color:#f00; transition: all 0.3s ease; } Why should you replace the old JavaScript technique for creating hover effects? Because you're in a highly competitive world (the online world), where you simply can't afford not reaching for “perfection” (instead of "second best").   In other words: why should you stick to jarring jQuery animations (or to the much heavier JavaScript) when you could go for a more time-effiecient (just an additional line of code, no need for you to learn a new language if you're a coding newbie) smoother hover effect?   So, it's a win win situation: for you and for your website's future visitors!   4. Aim for The Absolute Positioning   Centering in CSS is probably the ultimate source of “frustrations”!   With all those different elements, requiring different CSS properties before they can be “tamed”/centered, “absolute positioning” sure sounds like a beautiful utopia, wouldn't you agree?   But it can become reality: you just need to start using the position property. Like in this example here:   position:absolute; top:20px; right:20px   Just type in bottom, top, left and right and add a pixel value to each one of them, thus keeping a steady control of where your element will be positioned on your website.   For instance, in the above example we've set that the element should be positioned at 20x from the top.   Note: this CSS trick works wonders when you're dealing with a single child element (otherwise the other element within the same container will get affected)   5. Pull Off the “Storybook” Effect   You love it, we love it, they (your website's visitors) sure love it!   The storybook effect, you know, the one focusing on capitalizing the first letter of a page/paragraph is still so loved since it reminds everyone of all those old story books brightening up their childhood memories.   So, why not recreate this attention-grabbing typographical effect on your website? Especially, when it's so quick and easy to do it in CSS?    The :first letter pseudo element is the CSS “trick” you need to use for puling off this "traditional printed book" effect.   p:first-letter{ display:block; float:left; margin:3px; color:#f00; font-size:300%; } You can just see, in the example above, how you can use :first letter, plus specific pixel values, for targetting the very first letter of the first line of the selected element on your website: here it makes it 3px wider than the rest of the letters in the text.   And these are just 5 CSS tricks that can help you create better looking websites. They “aim” for guaranteeing both a better user experience and less sleepless nights and moments of frustration for you and your team, too.   Give them a try, run some tests and find our if they'll boost your efficiency as web developer/s, too! ... Read more
Adrian Ababei / Dec 07'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: ... Read more
Adrian Ababei / May 11'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