Silviu Serdaru

Silviu Serdaru

SILVIU SERDARU, Front-End & Drupal Developer

Constantly seeking to enrich the "arsenal" of technologies that I already have a hands-on experience in working with (HTML5 to CSS3, JavaScript, jQuery, PHP...) and on a permanent lookout for front-end development challenges with a Drupal-specific flavour.

Back to Blog Posts
3 Essential Steps to Convert Your Website to a Progressive Web App
Thinking to convert your website to a progressive web app? And why shouldn't you? Since the benefits are obvious:   you “end up” with a website behaving like a native web app … one that works offline (and “offline” is the new black these days, right?), having its own home-screen icon  improved user experience: not only that your site goes mobile, but users don't even need to get your site-turned-into-an-app downloaded from an app store and then installed on their devices   Furthermore: Putting together a PWA out of a regular website (or blog) is unexpectedly easy! Basically, any site/blog can be turned into a progressive web app... No need to let yourself discouraged by terms such as:   service workers web app manifest (or “manifest.json)   … for the whole process is actually far less complex than it sounds. Here, see for yourself: go through the 3 essential steps it takes to convert your website to a progressive web app:   But First: All You Need to Know About PWAS— Benefits & Common Misconceptions A succinct and clear enough definition of progressive web apps would be: A PWA is a website that behaves like a native mobile app once visited on a mobile device. Whereas a more detailed and comprehensive one would go something like this: A PWA is a sum of modern web capabilities (and basic mobile capabilities) that enable users to save it on their own mobile devices (thus enjoying a native app-like experience) and access it offline, too. And now, without getting into the old “native mobile app vs PWAs” debate, let me point out to you some of progressive web apps' most “luring” benefits:   as compared to native apps, the setup process, on users' end, is significantly simplified: PWAs get instantly installed on their home screens, with no need to visit an app store for that they can get accessed offline, as well, via the home screen icon (a huge step forward from responsive web design) installation is conveniently lightweight: a few hundred KB essential files get cached locally (needless to say that this makes them faster than the standard web apps) they feature modern web capabilities: push notifications, cameras, GPS updates are run automatically, with no user interaction not only that they work offline, too, but once the network connection is restored, they synchronize the data    And now, before we virtually convert your website to a progressive web app, let's go, briefly, through some of the most common misconceptions about PWAs:   a. A progressive web app is literally an... “application”. Not necessarily: A progressive web app can be a blog, an online shop, a collection of... dog memes, you name it. Do not take the term “application” too literally when referring to PWAs. It's more of a concept, a code optimization technique which, once leveraged, "turbocharges” your app-like website or blog to deliver content faster.   b. Progressive Web Apps Are Developed Specifically for iOS or Android. On the contrary! Probably one of PWAs' “hardest to resist to” advantage is that: They're platform-independent. So, you don't need to:   develop separate codebases comply with platform-specific submission guidelines   c. Your Site Has to Be a JS-Based Single Page One So You Can Turn it Into a PWA. Nothing of that sort! If you're currently running... something on the web (be it a set of static HTML files), then you can easily make a PWA out of it!  And now, let's go straight to the 3-step set up process of a PWA out of your regular website:   Step 1: Go HTTPS to Convert Your Website to a Progressive Web App There's no way around it: the HTTPs protocol is the ONLY way to go when it comes to progressive web apps! All data exchanges need to be served on a secure domain: over an HTTPs connection! And how do you switch from HTTP to HTTPs? You get yourself an SSL certificate from a trusted authority. Now, there are 2 ways to get hold of it:   if your site runs on your own server (or at least you have root access to your server), consider setting up the LetsEncrypt certificate. if your website runs on a shared hosting, then both the process and the cost of your SSL certificate (for yes, there will be a monthly or an annual fee) depends greatly on your provider.   Step 2: Create a Web App Manifest  “But what is a web app manifest?”, you might ask yourself. A JSON text file that contains all the meta data of your PWA: description, scope, start_url, name, images, display, short_name... It's this information that will let browsers know how precisely they should display your app once saved as a home-screen icon. Now, before I go ahead and share a working example with you — one including the must-have entries of any web app manifest — I should also highlight that: A link to this JSON text file should be placed in the <head> of all your PWA's pages: <link rel="manifest" href="/manifest.json"> That, of course, after you've:   entered all the information about your PWA copied the manifest.json created a new “manifest.json” file in the root directory of your site and pasted it there  It should be served with:   Content-Type: application/json HTTP header or a Content-Type: application/manifest+json   And here's a “sample” piece of code: { "name": "My PWA Sample App", "short_name" : "PWA", "start_url": "index.html?utm_source=homescreen", "scope" : "./", "icons": [ { "src": "./android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "./android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#ffee00", "background_color": "#ffee00", "display": "standalone" } Once the “Manifest” section of the Chrome's Development Tools Application tab has validated your JSON file, it will generate an “Add to home screen” link to be accessed on all desktop devices. Tip: as you convert your website to a progressive web app you don't necessarily need to configure the manifest.json file yourself — with all its different images sizes, meta tags etc. Instead, if you want to make it quick, you can just make a 500x500 sized image of your PWA and then rely on Real Favicon Generator to create all the needed icon sizes and a manifest file for you! And this is just one of the generators you could use!   Step 3: Set Up Your Service Worker This is where the “true power” of your PWA lies: A service worker is a JavaScript file, placed in your app's root, that plays the role of a “middleman” between the browser and the host. The one which, once installed in the supported browsers, intercepts and responds to the network request in different ways. Note: in most cases, it's for caching all the static files, so that our PWAs can function offline, too, that we use service workers. Now that we've seen what a service worker is, here's how you create one as you convert your website to a progressive web app:   a. You get it registered first things first. For this, just run this code in the JS file on your site: if ('serviceWorker' in navigator) { // register service worker navigator.serviceWorker.register('/service-worker.js'); } Practically, it will check whether the browser does support Service Workers and, if it does, it registers your Service Worker file. Note: NEVER call this file, inside your website, like this: <script src="./service-worker.js"></script> b. If you do not need your PWA to work offline, too, just set up an empty /service-worker.js file. Users will just be notified to install it on their devices!   c. Once you've registered your Service Worker, generate your Service Worker file, too. For this, just run this command in your terminal: $ npm install --global sw-precache Next, go ahead and run it on your website directory: $ sw-precache Et voila! You will have generated a service-worker.js including the service worker contents.   Test It Out! At this stage of the "convert your website to a progressive web app" process, you should:   check whether your service worker got properly registered and installed on Chrome run a performance audit on your PWA, using Chrome's Lighthouse Extension   For the first operation, go through these 3 basic steps here:   press F12 to open your Chrome Dev Tools click on the “Application” tab next, on the sidebar, select “Service Workers”    Then, check whether your service worker has been properly activated and is running normally: Just tick the “Offline” checkbox and try reloading. Does your PWA-site still display its content, even when there's no internet connection? Now let's run an audit using Chrome's dedicated testing tool, Lighthouse:   press F12 again to visualize the Chrome Dev Tools select the “Audits” tab then select “Perform an audit” check all the suggested checkboxes and finally, run the audit    And here's how the generated report would look like: The END! This is how you convert your website to a progressive web app in 3 steps:   enabling HTTPS configuring your web app manifest creating your service worker   See? Any website can be turned into a PWA and you don't need to be a senior developer to do it. ... Read more
Silviu Serdaru / Jul 24'2018
How to Speed up Your Magento 2 Store on Mobile Devices: 5 Tweaks That You Can Make
What can you do to speed up your Magento 2 store on mobile devices? For let's face it: Magento 2's “ecosystem” of third-party extensions and overall its modular architecture is convenience at its best for any developer! For any eStore owner. It empowers them both to start small and then scale it up to their most daring goals. Yet, all this power placed in your hand does come at a cost: reduced speed. And top speed is crucial if you're determined to deliver a great mobile user experience. So, what are the tweaks that you can make to boost your eStore's performance? Luckily, there are plenty, ranging from:   well-known (and too frequently underrated) best practices, like optimizing your product images to slightly more in-depth “tweaks”, like inlining critical CSS   But, let's dive right in! Here's your “emergency kit“ of 5 solutions to apply to your Magento 2 store for improving its performance on mobile:   1. Reduce Page Size to Increase Page Loading Speed  And it's still those “too obvious to be truly effective” type of techniques that have the biggest impact on an eStore's performance on mobile devices: Lower your web page size and it will make a drastic difference for your mobile users' experience with your online store; especially for those accessing your site from mobile devices with low bandwidth. Now here are a few simple, yet effective tweaks that you can make to reduce page size:   1.1. Use GZIP  to Compress Your Pages A handy “trick” that you can perform is to enable GZIP (if it's not already enabled) and let it “work its magic” on your web page's size. It will compress:   fonts CSS files external scripts JS   … cutting your pages' “weight” down by almost 70%. Note: put any of your front-end pages to the Google PageSpeed Insights “test”; take note of the GZIP-related warnings popping up and ensure that the CSS/JS compression feature is enabled.   1.2. Enable JavaScript/CSS Files Minification Here's another built-in Magento 2 feature that all you need to do is... trigger to speed up your Magento 2 store on mobile devices: CSS/JS files minification. Note: do keep in mind, though, that it works in production mode only (so not in default or developer mode, as well)! Here's how you enable it:   Navigate to the backend menu Stores > Configuration > Advanced > Developer Set your app/site's production mode:   php bin/magento deploy:mode:set production Note: not sure what mode your eCommerce site's running on now? Enter the following command to identify its current mode: php bin/magento deploy:mode:show 1.3. Optimize Your Product Pages  And the more crowded your product catalog is, the more important this solution becomes! “Are you implying that I should take each and every one of my product images and optimize them... one by one?” you might ask yourself. Definitely not! Since there are at least 2 easy solutions that you could go for:   you can use a content delivery network (CDN) as it will take the image optimization “burden” off your back you can leverage the Google PageSpeed (GPS) server extension; it will compress your images in no time, among other “tricks” that it performs to speed up your Magento 2 store on mobile   2. Reduce The Server Response Time to Speed up Your Magento 2 Store  Optimizing your server's response time (or “time to first byte”) is another critical tweak that you can do to boost your Magento 2 store's speed.  Set your “target” to 0.5s, the time a browser would need to wait for your website's server response. “But why bother, since Magento provides me with full-page cache functionality right out of the box”, you might wonder. That's true, but just consider particular pages, such as checkout, customer pages, cart, that this pre-built functionality can't “work its magic” on.   2.1. Run a Throughout Audit on Your Third-Party Extension "Load"  Start reducing your server response time with a basic, yet so very effective step: Audit your entire modules infrastructure! identify any issues with your current plugins and (if any) look for a patch or replace them with more performant ones turn them on and off just to detect any negative impacts on your Magento 2 site's performance    Note: as a rule of thumb, try keeping your Magento 2 third-party extensions to a minimum! Trim down your collection of modules keeping only the must-have ones; otherwise, its weight will affect your eCommerce site's performance!   2.2. Use Magento 2 Profiler to Detect Any Server Performance Issues “What's a profile?” you ask.  A program geared at identifying just how much time a code block needs to execute. Using a profile you'll be actually drilling deep(er) into your Magento 2 store's internals to detect the very root cause of your bad server response time!   2.3. Consider Upgrading Your Hosting Plan Is it time you upgraded your hosting server? More RAM and CPU will always have a huge impact on your eCommerce website's performance, you know. So, how do you know whether it's time to upgrade? Just install a brand new Magento 2 website on your current server. If it's speedier than your live website, there's no need to change your current hosting plan. In this case, you'll only need to focus on the other tweaks included in this list here to speed up your Magento 2 store on mobile.   2.4. Use Varnish as a Full-Page Cache (FPC) Solution Another trick for improving Magento 2's performance is to leverage Varnish, the software that caches and serves content. The good news is that Magento 2 supports it natively. And here's how you trigger its “power”:   navigate to the backend menu Stores > Configuration > Advanced > System > Full Page Cache   Note: you'll need to enter a hostname, port and Varnish export configuration; if in doubt, ask your system admin for a hand to set everything up properly. 3. Load and Render Above-the-Fold Content First  Prioritize the content that appears before scrolling down! It will make all the difference when it comes to your Magento 2 eStore's page loading time! And now, here are the techniques at hand for loading and displaying this content first:   3.1. Defer Loading JavaScript  Moving all your JS code to the bottom of the page (“beneath the fold”) will implicitly make your AF (above-the-fold) content load quicker. You'll basically postpone the time-consuming parsing of JS code and thus speed up your Magento 2 store on all mobile devices! The good news is that there already are Magento 2 extensions that do the job for you. They'll move all your non-critical JS scripts beneath the fold!   3.2. Inline Critical Above-the-Fold CSS “But what about the above-the-fold CSS?” you might legitimately ask yourself.  How do you approach these critical files? For you definitely can't place ALL your CSS at the bottom of the page, now can you? Well, first you:   extract/isolate precisely this “critical” CSS then you inline it straight to the HTML; right between <head> and </head> tags   This way, it will get loaded and rendered first (before the non-critical CSS), along with the rest of the above-the-fold content.  Note: you might be tempted to go for one of those tools “promising” you to extract this CSS for you. Unfortunately for you, manually setting the critical CSS for each one of your pages (homepage, checkout, category etc.) is the right way to do it.   4. Leverage the Power of HTTP/2  By moving your Magento 2 website over to HTTP/2 you'll grant your eStore users a secure and faster-browsing experience. Not to mention the impact that it will have particularly on the experiences of those customers using a slow mobile network to access your online store. The tremendous news is that Magento 2 co-exist with HTTP/2 by default. Yet, there are 2 conditions that you need to make sure your online store meets:   your hosting server should already support HTTP/2 your eCommerce web pages should be served via SSL   Note: run your own "investigation" and look for some suitable extensions providing server pushes.   5. Magento 2 Performance Optimization: Disable JS Bundling But why would you want to disable a Magento 2 feature that actually lowers the HTTP requests made by your browser for loading and rendering a web page? Because it comes with its own side-effects, the main one being the oversized JS file that this feature generates, of about 5-10 Mb. Moreover, it's proven that downloading this huge external file takes more time than the time you'd actually be saving by reducing the no. of HTTP requests. Now that we've tackled the “Why”, let's focus on the “How”, as well. Here's how you disable JS bundling:   go to your website's backend menu Stores > Configuration > Advanced > Developer and apply the following configuration:   Note: there's no need to disable this JS files grouping feature if you're already using HTTP/2! The END! These are but 5 of the handiest solutions that you could use to speed up your Magento 2 store on mobile. As you can see, the list includes nothing more than predictable “tweaks” and well-known best practices that you should stick to.   ... Read more
Silviu Serdaru / May 23'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 & 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 <link> element to add the Bootstrap CSS file at the end of the head section a <script> element for adding jQuery at the bottom of the body section a <script> 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:   <div class="container"> <div class="jumbotron"> <h1>Welcome</h1> <h2>Angular & Bootstrap Demo</h2> </div> <div class="panel panel-primary"> <div class="panel-heading">Status</div> <div class="panel-body"> <h3>{{title}}</h3> </div> </div> </div> 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 Bootswatch.com 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 <link> 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 <script> and <link> 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
Which Are The Best Free Magento 2 Themes and Why? Top 10
Conveniently customizable, ideally flexible and unexpectedly feature-rich... No wonder that you consider moving your site to Magento 2. Or having your brand new e-commerce site built on the latest version of Magento. And now you must be wondering: which are the best free Magento 2 themes to choose from? And let me guess, your “feature wishlist” goes something like this:   responsive (it goes without saying) functionality-rich visually-appealing flexible enough  capable to accommodate both medium and large-sized online store (you need to consider your growth plans, too, when choosing your theme, right?)   Oh, and yes: most probably time is not your best ally, am I right? Therefore, you can't afford to invest too much of it in comparing, weighing pros and cons, setting up a never-ending list, then trimming it down to the very best themes for Magento 2. Well, no need to, for I've got your back! Here's a top 10 for you, including only those themes with the best user reviews, themes that strike the perfect balance between great looks and powerful functionality:   1. Ves Yume Feature-packed, fully responsive and... free of charge. What more could you possibly ask for your theme? And speaking of its features, although they do come with no price tag on, they're unexpectedly powerful. For example:   gallery image product detail off-canvas menu & header link Ajax cart checkout improvements font awesome a handful of static blocks   In short: a full-collection of features and functionalities for providing both rich and convenient online shopping experiences to your customers.   2. F2 If it's a sleek & clean web design, suitable for a professional e-commerce site, that you're aiming at, then F2 is the theme to power your plans with! One which — although designed by the latest web trends — doesn't trade functionality for visually-striking looks.  And speaking if its features, let me point out to you the most tempting ones:   responsive design sticky header drop-down cart multiple product types configurable swatches   Moreover, it's one of those best free Magento 2 themes that are surprisingly flexible, as well. You're free to adjust it to perfectly fit your Magento project's type and size. Tip: where do you add that —  although looks play a major role here—  F2 is NOT overburdened with visual effects. Effects that would negatively impact your online store's performance!   3. Best Free Magento 2 Themes: Ketty, One of the “Oldest” Ones, too “Oldies, but goldies!” For, even if it's one of the “oldest” Magento 2 themes, Ketty's packed with some truly powerful features. And thus capable to “rival” much newer/younger themes. Now, if I am to highlight some of its attention-worthy features:   Ajax cart product zoom user-friendly admin panel with a new design highly customizable configurable swatches improved checkout cross-browser support   Also, F2 is one of the responsive Magento 2 themes, in case you were wondering...   4. Absolute One of Magento's “star” themes for 4 years now, Absolute's now available for Magento 2, as well. A highly professional theme overloaded with options to suit your every feature need. If I were to name just some of these hard-to-resist-to ones:   image slider theme editor featured product slider newsletter subscription my cart and compare product blocks on the homepage quick product overview   A responsive theme that has already earned itself a “reputation” among Magento users, conveniently packed with features to answer all your e-commerce requirements.   5. BizKick BizKick's made it to almost all users' personal lists of best free Magento 2 themes.  And for 3 strong reasons:   it's responsive it “spoils” them with a whole collection of advanced features it “tempts” them with a handful of clean and classy layouts   6. Ves Need Is it health spa services, glasses, beauty products, handbags, shoes or maybe clothes that you'll be selling on your Magento 2 e-commerce site? Then you might want to consider Ves Need.  It comes with an elegant, neat & clean design that will surely appeal to your (mostly) female audience. And where do you add that it's free, too!   7. Ves Fasony Designed with the customer's needs and expectations in mind, Ves Fasony is a responsive theme for Magento 2 built with Bootstrap 3.x. The key reasons behind its listing on this exclusive top here — featuring the very best free Magento 2 themes —  are the following:   it's built with online customers' needs and expectations in mind; it anticipates their requirements and delivers an amazing shopping experience it's optimized for touch drag and drop it comes with an owl carousel controlling the image slider   Moreover, Ves Fasony's ideal for women and men fashion, watches and bags stores. So, do keep this aspect in mind when you're evaluating the themes listing in this top, looking for the one that best fits all your e-commerce requirements.   8. FreeGo, One of the Best Free Magento 2 Themes It has the functionality — since it comes packed with a full set of powerful features — and it sure has the looks: a clean-elegant (almost minimalist) design. Moreover, FreeGo's fully responsive and puts a powerful back-end panel at your disposal. One that you can use for customizing your theme to suit your Magento 2 project in the slightest detail. And now, when it comes to its “load” of powerful features:   sold out label extension touch optimized slideshow child theme ready features product list (showcasing featured products) child theme ready all browser compatibility off-canvas menu   9. Ves Kasitoo A Magento 2 theme with a product-oriented and therefore attention-grabbing design, perfect for the following types of online stores:   glasses equipment fashion...   Moreover, it's turbocharged with a plethora of advanced features to power your e-commerce website with:   retina-ready images featured block on the homepage touch optimized deal products carousel  off-canvas menu social media buttons product tabs carousel    10. Ves Vigoss If you have a “guilty weakness for cutting-edge, clear design, you'll definitely love this Magento 2 theme! Apart from its great looks, it comes with a full set of outstanding features to tap into:   brand logo slider Ajax cart front interesting quick view it's fully responsive checkout improvements   And to this list of features, I cannot but add the Magento 2.0 UI and the Bootstrap 3.x layout components, as well.   The END! So, now that you've scanned through this list of best free Magento 2 themes, which is the perfect fit for your own e-commerce web project? Which one of them supports all your feature needs? ... Read more
Silviu Serdaru / Apr 20'2018
What Is the Best WYSIWYG Website Builder in 2018? A Top 5 List
“Empower... anyone who wants to build his own website!” This is how modern web builders' “motto” could sound like. And how could you not embrace this kind of “liberalization” in web development? Yet, the question that arises now is: with so many options, how do you choose the best WYSIWYG website builder for you? … for your own:   specific feature needs: will you be implementing video content, as well? Is blog functionality crucial for you? Can't imagine your website without an e-commerce plugin? Will you be “juggling” with multiple types of galleries on your site? future plans: dreaming big? Then scalability is a must-have functionality and main criterion for narrowing down your options. budget: facing a shoestring budget? Then you need to make sure that your free WYSIWYG web builder is suitable enough for your feature needs and growth plans   And besides zero coding expertise and no skills as a web designer, time is not on your side either, right? So you can't afford to spend too much of it running your own “investigations”, looking for the best web builder for you... Then, here's a top 5 list of WYSIWYG website builders to choose from and jump-start your site building project with:   But First: What Is a WYSIWYG Website Builder Anyway? And How Does It Work? Before I reveal to you which are the 5 most “irresistible” (meaning “feature-rich”) options for building your own website this year, let me answer these 2 basic questions first:   a. "What is a WYSIWYG web builder?" It's a tool empowering you to go ahead and create that “dream” website yourself. And that quick and easy, with no help whatsoever from a coding “guru” or a highly gifted (and “pricey”) web designer. And here is how this site building process looks like, summed up in just a few simple steps:   select your theme select your template add all kinds of content without the fear that you might mess up your code … along with any available apps, plugins or special widget that you need to integrate   b. "And how does it work precisely?" It uses a graphical interface which shows you how your website will look like in real time. For the “what you see is what you get” driving principle is precisely that: What you see as you drag, drop and customize different templates and as you add content is precisely how your website will look like in the web browser, too.   Jimdo Website Builder I start with a WYSIWYG website builder that slightly drifts from the drag-and-drop “mainstream” approach. Instead, Jimdo “tempts” you with stackable content blocks. Blocks that you can select from and arrange to your liking.  Note: do not expect your “load” of templates to be as heavy as is the case for the following 4 website builders on my list here. Still, do expect high-quality templates only. “Templates” that, moreover, you get to tweak and fine tune to suit your needs and preferences in the slightest detail (colors, fonts, backgrounds, you name it). And that you can replace at any time, with no risk of losing your work. Main strengths:   free plan available (and I'm not talking about just a trial here) free blogging and social media tools HTTP encryption out-of-the-box mobile app “injecting” on-the-go editing functionality low learning curve   Note: speaking of the free plan, you should know that there are 3 pricing plans in total: JimdoFree, JimdoPro and JimdoBusiness. You can upgrade your plan at any time and keep your work intact while doing that. Weak points:   limited scalability it's not really a drag and drop website builder limited styling capabilities   MotoCMS Website Builder  From an “out of the box” web builder, we'll switch to a powerful “beast” loaded with no less than 2500+ templates, suitable for 60 different topics. Therefore, it goes without saying that no matter the size or the complexity of your site building project, MotoCMS can power plans of all “flavors” and sizes. From a simple landing page to a full-featured, powerful e-commerce machine... Strong features:   built-in blog functionality 100% responsive and cross-browser compatible templates integrated SEO and social media tools a rich collection of widgets that you can inject additional functionality into your website with   Note: in addition to these MotoCMS strengths to consider when you're choosing the best WYSIWYG website builder, do consider its loading speed, as well. Tests (the Pingdom website speed test) prove that sites using MotoCMS templates stand out in terms of performance.   Wix: The Best WYSIWYG Website Builder for Absolute Beginners How does it address the needs of a non-experienced & non-skilled (yet enthusiastic) site builder like you?  Through its Wix ADI (Artificial Design Intelligence) feature. It's designed to ask you all the key questions and to draw your “absolute beginner in need of a website” type of profile. This way, it collects the most relevant information that will help it set up precisely that website that you have in mind. Quick and easy: just let yourself interviewed! Moreover, the Wix website builder is the most popular one in the site-builder industry (with no less than 90 million users). And there must be some strong reasons behind its “fame”. It's true, though, that at a very first glance, the interface might be a bit discouraging. Yet, do give it some time, get to familiarize yourself with the environment and you'll discover that:   what scared you at first is precisely what will make you “addicted” to this web builder. meaning that once you've familiarized yourself with this software's UI, its “overload” of customization functionalities proves to be conveniently empowering in fact! they enable you, the complete non-tech-savvy site builder, to put together and tweak every little aspect of your website.   And there's more! What “entitles” Wix to compete for the... title of “the best WYSIWYG website builder in 2018” is the tempting App Market that it provides. You get to choose from a wide range of apps (200+) storing extra functionality to be implemented on your website, such as:   Site Booster (powering your SEO strategy) Wix stores (you'll get empowered to manage your own online store) Wix forum   Some of them are free, while others come with a price tag on. Features “to die for”:   text (and other elements) animating functionality a (really) heavy load of stock images to scan through and to choose from you get a free version, as well, perfect if it's a small, low-budget website that you're building fully customizable, top-notch templates it auto-generates the mobile version of your website outstanding support   Limitations to consider:   there's no option for you to switch templates later on (that Jimdo, for instance, does provide you with) no access to your site's source code you can't export your website   Squarespace Website Builder Squarespace ranks high in two categories:   best WYSIWYG website builder for creating visually-appealing websites most expensive web builder   In other words: if “beauty” is the main criteria when choosing your web builder software, Squarespace should be on top of your list. Pixar is one of its clients... if you know what I mean! A strong enough proof that creating visually-striking websites is what Squarespace aces at. But it does it at a cost! So, don't expect to get a fully-functioning free version. Powerful features:   great analytics and SEO tools full-featured e-commerce support fully-responsive, top-notch templates, with pre-built integrations phenomenal presentation: in-browser image editing, video backgrounds, lightbox presentations   If it's a beautifully designed website that you're dreaming of, Squarespace is the software to “fuel” and shape that “dream” with!   Weebly Website Builder  Weebly seems to be “rivaling” Winx in popularity: It's one of the most-used site builders, with millions of site owners leveraging its functionalities. Therefore, its popularity is a strong enough evidence that its features, design and capabilities are... above the average (to say the least). It's a conveniently easy to use web builder, yet powerful enough for building complex websites. An intuitive WYSIWYG website builder, with an “overwhelming” collection of website templates. And that seamlessly incorporates any 3rd party provider of your choice. This is Weebly in short! Top features:   powerful e-commerce features the option (200+ apps) to implement 3rd part integrations: forms, table elements, FAQs etc. free, responsive, sleek-looking themes to choose from a community of 30 million users worldwide   Note: the newest version of Weebly, Carbon, comes equipped with an even richer collection of templates, a heavier toolbox and revamped UI.  The END! This is the shortlist to keep at hand when you're choosing not the best WYSIWYG website builder, but the right web builder for your own web project! Would you have added (or maybe even excluded some) any other solutions for building a website with no help from an expert — be it developer or web designer? ... Read more
Silviu Serdaru / Apr 16'2018
Adaptive vs Responsive Design: What Is the Difference? Which One Is Better for You?
Adaptive vs responsive design. Is there really a matter of “better vs worse”? What's the difference anyway? For the boundaries sure look blurry enough. Especially since both types of web design provide you with a solution to the same challenge. The one you're facing as a web designer: A design that should cater to all screen sizes. Now, instead of delving into this confusion even deeper, let's shed some light on:   the responsive design key features the adaptive design's particularities each option's advantages and drawbacks key differences between adaptive and responsive design   1. Responsive Design: What Is It?  Using one single layout when designing a web page, that adjusts itself to fit the given screen size. This would have to be a concise, yet comprehensive definition. If I am to add a bit more details to it, I would have to say that: It's a “fluid” layout, a “fluid” grid that we're talking about here, one using CSS, Content (Based Breakpoint) and media queries  … for setting up different style roles for each device/media type Long story short: the responsive design approach enables your site's pages to (more or less seamlessly) adapt to various screen resolutions. Note: implementing a responsive design does call for a website conceptualization phase and a deep understanding of the end user's needs and expectations!   2. Adaptive Design: A Concise Definition Or “progressive enhancement of a website” if you prefer: This approach to web design is centered around “multiple fixed layout sizes”. Basically, you'll need to create different layouts, one for each screen size. Once the website “identifies” the type of device the user's accessing it from, it just triggers the appropriate pre-set layout. A layout that you/your team will need to prepare in advance, needless to add (so, you'll need to plan your time and budget accordingly). Who's leveraging this approach? Apple, About.com, Amazon are just some of the big names. It's an alternative to the “one-size-stretches-to-all” option in modern web design. Note: since we can't be talking about a unique layout being re-sized over and over again, there's no impact on the overall design; no more over-stretching or other inconveniences of the sort.   3. Responsive Design: Why Would You Use It? And What Could Discourage You? Why and when would/should you be “tempted” to go with this approach to modern web design?  Let's go through some of this type of web design's most “irresistible” strong points, shall we?   it's easier to set up and less time-consuming to implement since the same design is being used, seamlessly, on all devices, a certain feeling of familiarity is being instilled, enhancing the overall user experience … we can talk about a unified visual (and operational) end-user experience  the collection of affordable templates at hand, suitable for most CMSs, is ideally rich and particularly “tempting” if it's a brand new website that you need to design a “one size fits all” type of flexibility it's SEO-friendly; since we can't be talking about distinct design versions, there's no negative impact on the SEO strategy either lower maintenance costs no redirection needed for establishing the connection between mobile and desktop sites   And yet, this approach does come packed with certain disadvantages, as well. Limitations that you need to note and ponder on before you make your adaptive vs responsive design decision:   you'll have less control over the screen size design expect longer mobile download times no possibility to fine tune the advertisements showing up on your website expect to have certain elements scattered, moving around the screen once the design readjusts itself to the given screen's width   4. Adaptive Design: Main Advantages & Drawbacks Your “adaptive vs responsive design” dilemma becomes even acuter when you realize that you need to choose between: A seamless design, plus a certain sense of familiarity and a suite of tailor-made design solutions catering to users' specific needs. And how do you choose, since both familiarity and customization have a huge impact on the user experience? Now, let's have a look at some of the adaptive design's strong points:   as mentioned: it enables you to deliver custom-made web design; different layouts created for various screen resolutions (instead of one layout “stretched/shrunk to all of them”) it complies with the requirements of modern user experience: personalization-focused UX and user-centric approach to web design  … meaning you're not creating the best UX, but the best UX for each one of the devices that your users will be accessing your website from by “tailor-made” I do mean “tailor-made advertisements”, perfectly optimized to your relevant user interface and tailored to the user data collected from smart devices in an adaptive vs responsive design debate, the first one will always win when it comes to performance: sites using an adaptive design are just faster … and speed will always be a differentiating factor in Google's eyes coding an adaptive design is more time-efficient implementing it is more cost-effective managing it tends to be easier since you only need to consider few states testing it is much easier (with more accurate results, as well)   And now, are you ready for a list of drawbacks to balance adaptive design's advantages with? Just so you can gain a more objective understanding, evaluating all the pros and cons in full:   it usually requires more work, and therefore it's used mostly for overhauling existing websites, rather than with new websites (considering that “more work” stands for “more time-consuming”) the site configuration being either desktop or smartphone-focused, tablets and notebooks users are... left in the middle it impacts your SEO strategy, since search engines will detect and penalize identical content showing up on different websites (“.com” and “m.com” sites)   5. Adaptive vs Responsive Design: Key Differences to Take Away The most notable differences for you to keep in mind from this comparative analysis of the 2 popular options at hand are the following:   a responsive design is a consistent one: what you get on desktop, you get on a smaller screen size, as well a responsive design might turn out to be easier to maintain on the long run: with every new screen size emerging, it will adapt to it, by default … by comparison, with an adaptive design you'll need to create a brand new layout for every new possible device, with a specific screen width, that might get released on a long-term, we could say that maintaining a site using adaptive design gets more challenging: it's several fixed layouts that you'll need to manage (instead of just one) the adaptive screen size (you'll be using static breakpoint for building adaptive design) is less flexible than the responsive screen design: you'll need to design (from scratch) for every display that you target   The END! Are all these strengths and limitations of the two popular approaches to modern web design of any help to you? For solving your “adaptive vs responsive design” dilemma? ... Read more
Silviu Serdaru / Apr 13'2018
What Are Some of The Best Free Drupal 7 E-commerce Themes?
Building or “redecorating”? Are you putting together your online store from scratch or refurbishing your current one? No matter which one of these 2 scenarios fits your plan, you must be running your own “investigations” right now: which are the very best free Drupal 7 eCommerce themes out there? Having a “top X” selection at hand would definitely speed up your “research”, right? A top including:   feature-rich themes, “loaded” with all those functionalities crucial for any eCommerce business, such as freedom to style your own product pages, checkout forms, custom cart, “add to cart” button, custom login and logout    Drupal 7 responsive themes themes empowering you with plenty of customization freedom   Well here's the selection of 5 Drupal themes for e-commerce that you should start your "investigations" with.   1. Omega Kickstart Jumpstart your Commerce Kickstart theme development using this base theme as a... strong “push”. A responsive subtheme, a “kickoff” to your whole theme development process on Commerce Kickcstart, Omega Kickstart comes packed with all the crucial features:   it's free it's built with Drupal Commerce in mind its layout is fully adjustable to any screen size (desktop, tablet, smartphone) it's conveniently more user-friendly than the pre-built Omega   Therefore, it makes the perfect impetus for kick-starting your theme development plans!   2. AT Commerce, One of the “Feature-Overloaded” Free Drupal 7 eCommerce Themes  A “full-option” Drupal commerce theme we could say! AT Commerce “spoils” you with out-of-the-box support for the Drupal Commerce module and Ubercart and .... “overwhelms” you with a heavy load of great features. Now to name just a few:   it's equipped with support for a lightweight and nonetheless responsive slideshow pre-built support for a Color module (Garland or Bartik); this enables you to go beyond the 3 default color combinations and, using the color picker at hand, to “color up” your theme to your liking heading styles that you're free to customize built-in Superfish module support  custom login block support for 26 regions a custom and configurable responsive grid layout for the front page and the taxonomy pages (that you're free to disable if you want to) Google fonts  mobile support  multiple image field alignment options   And the list is a never-ending one.  As you can see, AT Commerce is a theme that not only that provides you with a wide range of e-commerce-specific functionalities, but with almost unlimited customization freedom, too. You'll get to put together your site's “signature” web design in no time, with no need to “get your hands dirty” in code. From creating your “trademark” color scheme, to “playing” with all the settings that would impact the overall design and layout, your styling power is significant. A word of caution: do keep in mind that this is a sub-theme; before you get to leverage all the above-mentioned AT Commerce features (plus a few more) on your own website, you'll need to install the latest version of the AdaptiveTheme. It's this theme that will provide the needed core functionality   3. Commerce Theme Here's another one of those free Drupal 7 eCommerce themes geared at helping you get a fully functional and attractive online store up and running in no time! Moreover, the theme behind this theme “tempts” you with a Commerce Installation Profile bringing you, right out-of-the-box, all the needed functionalities to start selling your products. A profile coming with built-in Drupal Commerce support and perfectly organized files enabling you to easily customize any eCommerce component you need to.   4. Storefront As its name suggests:   if it's a clean and “inviting” storefront that you need to implement on your eCommerce site, this is the theme to consider! One that “plays well” with Drupal Commerce and that you can easily style up, further, adjusting it to your customer's future preferences. In short: Storefront is that Drupal commerce theme that will implement a clean and appealing interface to your Commerce Kickstart installation. And now if I am to highlight some of its key features:   responsive techniques via media queries various settings to “play with” for customizing your site framing, home grids, your color schemes, layout... an entire collection of template files essential for eCommerce sites: review pane, cart block, product-node options for cleaning up checkout panes, various form elements (specific to add-to-cart links, product attributes) and check-out layouts   Note: since this theme's compatible, out of the box, with the first version of Commerce Kickstart, the team behind it commits itself to making Storefront “play well” with the second version, as well.   5. Metropolis A versatile (“fitting” all site types) and feature-rich theme “praising” simplicity. This is a concise, yet comprehensive definition of Metropolis, one of the most popular free Drupal 7 eCommerce themes. A more detailed definition would need to include “details” such as:   the fact that it's a tableless theme, with a 1-2 column layouts it provides you with a superfish drop down menu comes “equipped” with 10 collapsible block regions an image slideshow, that you get to customize to your liking via the Views Slideshow heading H1 optimization for boosting your SEO efforts primary and secondary links custom login and logout options   The END! These are the top 5 free Drupal 7 eCommerce themes that you should consider evaluating first. To check whether their built-in collections of eCommerce-specific features suit your own needs and goals or maybe just partially.  ... Read more
Silviu Serdaru / Mar 09'2018
PhoneGap vs React Native: Which Platform to Choose for Building Your Mobile App? And Why?
A great developer experience or a great user experience? A familiar web technology for you to code in or native-like performance for your users? And these are just some of the questions “taunting” you right now, while dealing with a PhoneGap vs React Native dilemma, right? Each platform comes with its own “temptations” to... lure you in:   PhoneGap promises you an “easy life” as a mobile app developer, enabling you to use any JavaScript library and framework that you're comfortable working with React Native promises you to inject native-like performance into your app and thus...  to perfect the user experience   So, which one to go with?   PhoneGap: A Brief Overview A compromise! This is, in my opinion, the perfect word/metaphor to describe PhoneGap. A compromise in terms of user experience and performance, since it's hybrid mobile apps that you get to build using this technology:   a JS/CSS/HTML app having a browser-based UI (giving you the freedom to work in any of your preferred web technologies) that exposes native mobile device APIs and data; accessing phone components through the API navigator   While a more “formal” definition would go something like this: PhoneGap is a distribution of Apache Cordova — coming with a few tweaks and custom packages —  that you can use for embedding websites in mobile apps via WebView. In short: more than a website, yet not a fully native mobile app. A hybrid app compromise!   A Few Words About React Native  In a  PhoneGap vs React Native debate, the latter would always have its native components rendering “trump card” up its sleeve: For a React Native-powered app is written in JS, like a PhoneGap one, yet it doesn't just render a webview, but REAL native components instead! And that, my friend, would also win over users: it's better user experience and zero compromises on performance that you get “rewarded” with for using React Native. You could also take this mobile app development platform as the answer to users' becoming more and more demanding: If hybrid, HTML 5 and/or mobile web apps used to be enough to “satisfy” their needs, while being a “blessing” for developers' budgets, as well, mobile users started to crave native-like performance. And so, React Native emerged! It's a convenient “bridge” between JS and native platforms:   React Native apps get written in JavaScript they “play by the rules” and meet the standards of the operating system ... while accessing a big part of the native platforms via this metaphoric “bridge” that React Native creates   PhoneGap: Tempting Benefits vs Discouraging Disadvantages Now in order to get an accurate score to our “PhoneGap vs React Native” debate here, we'd better go “pros and cons harvesting”, right? So, without any further ado, I'll list some of PhoneGap's “irresistible” advantages first:   it “spoils” the developer with a wide range of frameworks/libraries to choose from; if you're a big fan of web technologies, if you enjoy building UIs in HTML and CSS, you'll love the rich collection of choices that PhoneGaps puts at your disposal therefore, PhoneGap is easy to work with and developer-friendly it's not bound to any specific framework  PhoneGap-based apps perform within wrappers targeted to each platform and use API bindings that comply with the all the given standards for accessing each mobile device's data, network status, sensors it's based on the “write once run on every platform” philosophy: you get to “reap” the benefits of cross-platform development; just “work your magic” in any of the web technologies that you're comfortable with and have your app running on all available platforms … with no need to get yourself tangled up in each platform's native development language your app will have a similar UI on all native platforms    And now, the limitations that you need to consider when building mobile apps using PhoneGap:   by far the biggest inconvenience is the sluggish performance (leading to poor user experience, needless to add); and it's a more than predictable drawback considering that the web was created for web pages, not for heavy, animations-loaded, complex apps you risk to get all the issues of the web, as well, right out-of-the-box, along with your PhoneGap hybrid app. Bugs specific to certain browsers or styles that work differently depending on the browser here included!    In short: on one hand, you get to enjoy a great developer experience, on the other hand, you risk to compromise the user's experience!   React Native: Top Pros and Cons In a PhoneGap vs React Native “competition” the former would always fall behind when it comes to performance: React Native is undoubtedly faster. And here are some other benefits to "reap" for using React Native to build your mobile app:   it renders real native components instead of a webview also, since it renders NATIVE views without using webview as an intermediary, expect to face no browser compatibility challenges there's strong social proof, highly relevant evidence for its reliability: Instagram, Airbnb, Uber it's committed to the “learn once, write everywhere” philosophy; once you're familiar with React, you'll be writing native apps in no time, with no need to delve into Java or Objective-C coding, unless you want to extend your app's functionality moreover, React's backed by a huge community, so during your learning time and then during your app development process, you can rely on plenty of “expert” support  the user experience is significantly improved: a React Native app will always have a native look and feel to it compared to a mobile web app  also, since it renders native views, expect smoother, high performant animations, as well   Yet, React Native does come with some drawbacks, as well, that might discourage some (even you!):   you need to be familiar with React, there's way around it you'll need to write an app for every native platform (due to that above-mentioned JS-native platform based structure) since some of the components might be platform-specific don't expect to be able to use HTML: it's native components that you'll need to "juggle with" And The Answer to “Your PhoneGap vs React Native” Dilemma” Is... “It depends!” If you've already used React for the web, so you're definitely not stepping on alien ground, go with React Native! It would be a pity not to leverage your React knowledge and not to benefit from all the top performance that you get to inject into your mobile app! Not familiar with React? And, moreover, you love having an entire “palette” of familiar web technologies at hand, to just “grab and use”? Then you'll love PhoneGap's “developer friendly” approach! The END! Hope I've included all the most relevant pros and cons and managed to pull off some good explanations on why some developers get seduced by Facebook' baby, React Native, while others prefer to tap into familiar PhoneGap's own advantages. How about you? Where do you stand now?  ... Read more
Silviu Serdaru / Mar 01'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\" && 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