<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:media="http://search.yahoo.com/mrss/"><channel><title><![CDATA[XenoX]]></title><description><![CDATA[Home of Open Source Heroes 👩🏻‍💻👨🏻‍💻]]></description><link>http://xenox.dev/</link><image><url>http://xenox.dev/favicon.svg</url><title>XenoX</title><link>http://xenox.dev/</link></image><generator>Ghost 2.9</generator><lastBuildDate>Mon, 14 Feb 2022 06:48:45 GMT</lastBuildDate><atom:link href="http://xenox.dev/rss/" rel="self" type="application/rss+xml"/><ttl>60</ttl><item><title><![CDATA[How to use line clamp in Tailwind CSS?]]></title><description><![CDATA[The easiest way to add Ellipsis using Tailwind CSS. Line Clamping makes this task an easy one.]]></description><link>http://xenox.dev/how-to-add-ellipsis-using-tailwind-css/</link><guid isPermaLink="false">Ghost__Post__61f2563479a88f773c7d2554</guid><category><![CDATA[CSS]]></category><category><![CDATA[TailwindCSS]]></category><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Thu, 27 Jan 2022 14:01:34 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2022/01/Add-a-heading-2.png" medium="image"/><content:encoded><![CDATA[<figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2022/01/Screenshot-2022-01-27-at-6.47.00-PM.png" class="kg-image" alt="How to use line clamp in Tailwind CSS?" loading="lazy" width="622" height="451"><figcaption>Tailwind line clamp issue</figcaption></img></figure><img src="https://authors.xenox.dev/content/images/2022/01/Add-a-heading-2.png" alt="How to use line clamp in Tailwind CSS?"/><p>You all may have experienced this issue like we have were you want to add <strong>Ellipsis using Tailwind</strong>. Clear answer there is no such class that you can add currently to achieve that. There is an open issue on the official github account regarding the same. <br><br>So either you can write your own css class for it. <a href="https://www.benmarshall.me/max-character-length-ellipsis-css/">"Max Character Length with Ellipsis Using CSS"</a>, See this article to find some hacks here is my favourite.</br></br></p><pre><code class="language-CSS">p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}</code></pre><h2 id="solution">Solution</h2><p>There is another cool way btw, using a tailwind plugin. <a href="https://github.com/tailwindlabs/tailwindcss-line-clamp"><code>@tailwindcss/line-clamp</code></a>, is plugin to do Multi-line truncation in tailwind. </p><p>To install it</p><pre><code class="language-shell">npm install @tailwindcss/line-clamp</code></pre><p>then add this to your <code>tailwind.config.js</code> </p><figure class="kg-card kg-code-card"><pre><code class="language-javascript">module.exports = {
  // ...
  plugins: [
    // ...
    require('@tailwindcss/line-clamp'),
  ],
}</code></pre><figcaption>Line clamp in TailwindCSS</figcaption></figure><p>after that you can access to all the classes to do line clipping, just use following code snippet to try it out.</p><figure class="kg-card kg-code-card"><pre><code class="language-html">&lt;p class="line-clamp-3"&gt;
  Here's a block of text from a blog post that isn't conveniently three lines long like you designed
  for originally. It's probably like 6 lines on mobile or even on desktop depending on how you have
  things laid out. Truly a big pain in the derriere, and not the sort of thing you expected to be
  wasting your time trying to deal with at 4:45pm on a Friday am I right? You've got tickets to
  SmackDown and you heard there's gonna be a dark match with that local guy from two towns over that
  your cousin went to high school with before the show starts, and you're gonna miss it if you're
  not there early.
&lt;/p&gt;</code></pre><figcaption>Line clamp in TailwindCSS</figcaption></figure><p>All classes you can use now.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2022/01/Screenshot-2022-01-27-at-7.00.27-PM.png" class="kg-image" alt="How to use line clamp in Tailwind CSS?" loading="lazy" width="1032" height="484"><figcaption>Line clamp in TailwindCSS</figcaption></img></figure><p> Now you can create the perfect layouts like we did.</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2022/01/image.png" class="kg-image" alt="How to use line clamp in Tailwind CSS?" loading="lazy" width="810" height="418"/></figure><p>That's it for now. We will see you in our next article real soon. Meanwhile checkout our new product <strong><em><a href="https://www.dollartailwind.com">"Dollar Tailwind"</a>. </em></strong>200+ Tailwind compoments worth 400$ now get it in<strong> just 99$.  <em> </em></strong></p><figure class="kg-card kg-image-card"><a href="https://www.dollartailwind.com"><img src="https://authors.xenox.dev/content/images/2022/01/200--Tailwindcss-Component.gif" class="kg-image" alt="How to use line clamp in Tailwind CSS?" loading="lazy" width="1280" height="700"/></a></figure>]]></content:encoded></item><item><title><![CDATA[My experience learning Tailwind CSS]]></title><description><![CDATA[

Recently I start learning Tailwind CSS, a CSS framework that helps you write CSS
way faster.

Tailwind is a utility-first CSS framework packed with classes like flex, pt-4,
text-centre and rotate-90 that can be composed to build any design, directly in
your markup. Basically, it lets you write CSS in the form of classes within
HTML.



Prerequisites for learning Tailwind CSS 
After testing out Tailwind, below are the things you should have knowledge about
before starting with Tailwind CSS - 

]]></description><link>http://xenox.dev/my-experience-learning-tailwind-css/</link><guid isPermaLink="false">Ghost__Post__612fb05b79a88f773c7d2277</guid><category><![CDATA[HTML5]]></category><category><![CDATA[CSS]]></category><category><![CDATA[WebDev]]></category><dc:creator><![CDATA[Diti Arora]]></dc:creator><pubDate>Thu, 02 Sep 2021 17:49:30 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2021/09/Frame-1.png" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2021/09/Frame-1.png" alt="My experience learning Tailwind CSS"/><p/><p>Recently I start learning <strong><em>Tailwind CSS</em></strong>, a CSS framework that helps you write CSS way faster.</p><p><strong><em>Tailwind is a utility-first CSS framework packed with classes like flex, pt-4, text-centre and rotate-90 that can be composed to build any design, directly in your markup. Basically, it lets you write CSS in the form of classes within HTML.</em></strong></p><p/><h2 id="prerequisites-for-learning-tailwind-css">Prerequisites for learning Tailwind CSS </h2><p>After testing out Tailwind, below are the things you should have knowledge about before starting with Tailwind CSS - </p><ul><li>Basic HTML (especially Classes and Ids)</li><li>Basic CSS</li><li>Mobile and Desktop responsiveness</li><li>NodeJS should be pre-installed</li><li>Little knowledge about npm packages</li></ul><p/><h2 id="how-i-started">How I started</h2><p>Tailwind is very easy to use and to get your grasp on if you have good knowledge about CSS. Since it is that same CSS we are writing but in short, there wasn't anything extra that was needed to learn before I could start learning Tailwind.</p><p>To start with Tailwind, I followed the playlist of <a href="https://www.youtube.com/c/TailwindLabs"><strong><em>Tailwind Lab</em></strong></a><strong><em>'s</em></strong> on YouTube: <a href="https://www.youtube.com/watch?v=elgqxmdVms8&amp;list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0"><strong><em>Tailwind CSS: from Zero to Production</em></strong></a><strong><em>. </em></strong>This playlist really explains everything in a clear-cut and short way. I learnt how to set up a Tailwind project, that is to download all the important files( like package.json, tailwind.config file ) and other handy plugins. After been done learning about how Tailwind pretty much works, I started exploring Tailwind's documentation, which is one of the best docs I came across up till now. While fiddling with documentation and trying to implement things on my own, I learnt how to develop normal web pages with proper styling and responsiveness through Tailwind CSS. Afterwards, I jumped on to some advanced stuff like creating my own classes, how to make and use custom colours and properties!</p><h2 id="difficulties-i-faced">Difficulties I faced</h2><ul><li>To me, the process of setting up your Tailwind project was a little difficult at first, though as time passed everything was clear to be.</li><li>Another problem I faced was since we were styling our code inside our HTML file (classes to be precised), the code started looking very confusing especially when you have to heavily style your elements.</li></ul><h2 id="ease-of-learning">Ease of learning</h2><ul><li>It is not at all difficult to learn Tailwind CSS since as I mentioned it above that there is nothing extra you've got to learn as we are writing that same old CSS</li><li>Tailwind's documentation has got one of the best explanations for the same, that is its core concepts, how it works, and its usage.</li><li>The classes used in tailwind are very easy and straightforward, you wouldn't need to glance back at its docs to see class names!</li></ul><p/><h2 id="bootstrap-vs-tailwind-css">Bootstrap vs Tailwind CSS</h2><p>Bootstrap and Tailwind, both are one of the most used CSS frameworks.</p><p><strong><em>Bootstrap lets you quickly design and customize responsive mobile-first sites. It's the world’s most popular front-end open-source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins.</em></strong></p><h3 id="customizability">Customizability</h3><ul><li>Tailwind according to me is very flexible(customizable). You can decide all the properties and values by yourself, and there is never any need of writing extra CSS. When talking about custom properties, you can easily build your custom colour, use external fonts, etc by making a custom property in your<em> Tailwind config file</em></li><li>Unlike Tailwind CSS, Bootstrap is not very customizable because it have pre-styled elements, and there can be times when you might consider making a CSS file for changing the default styling provided by Bootstrap and adding a bit of your own touch.</li></ul><h3 id="usage-with-css-preprocessors">Usage with CSS Preprocessors</h3><ul><li>Since Tailwind is a PostCSS plugin, it can easily be used with other preprocessors like Sass, Less, Stylus and others, just like you can with other PostCSS plugins like Autoprefixer.</li><li>Bootstrap comes with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. It by default comes with Sass variables and mixins</li></ul><h3 id="removal-of-unused-classes">Removal of unused classes</h3><p>Both Tailwind CSS and Bootstrap uses PurgeCSS to remove all the untouched css classes which are only helping in increasing the file size. </p><h3 id="looks"> Looks</h3><p/><p>Tailwind: </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2021/09/image-2.png" class="kg-image" alt="My experience learning Tailwind CSS" loading="lazy" width="480" height="491"><figcaption>A simple card design with Tailwind 👆</figcaption></img></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2021/09/image-3.png" class="kg-image" alt="My experience learning Tailwind CSS" loading="lazy" width="1150" height="483"><figcaption>Tailwind code</figcaption></img></figure><p>Bootstrap: </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2021/09/image-4.png" class="kg-image" alt="My experience learning Tailwind CSS" loading="lazy" width="435" height="525"><figcaption>A simple card design with Bootstrap👆</figcaption></img></figure><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2021/09/image-5.png" class="kg-image" alt="My experience learning Tailwind CSS" loading="lazy" width="1150" height="456"><figcaption>Bootstrap code</figcaption></img></figure><p>Well, both look good in their own way but then again bootstrap is less customizable and I would have to write extra CSS in order to change its appearance according to my website's theme.</p><p/><h2 id="final-thoughts">Final Thoughts</h2><p>Below are some reasons why I believe that Tailwind is worth using- </p><ul><li>It's very beginner-friendly.</li><li>While building web pages, you won't even need to leave your HTML file!</li><li>Unlike Bootstrap, It is highly customizable</li><li>You don't have to worry about unnecessary code, PurgeCSS will take care of it.</li><li>It has memorable class name. So you won't need to repeatedly go back to the documentation</li><li>You can even make your own classes, so you won't have to repeat the same code again and again.</li></ul><p>Thanks for reading😃. Bye!</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/09/W1ph.gif" class="kg-image" alt="My experience learning Tailwind CSS" loading="lazy" width="500" height="364"/></figure>]]></content:encoded></item><item><title><![CDATA[Websites you need to know if you are a web developer]]></title><description><![CDATA[

Here are some must know websites if you are a web developer!

Haikei [https://app.haikei.app/]
Haikei is an amazing web app which helps you create stunning svg shapes,
beautiful backgrounds and much more which are very difficult to make with css.
They can easily be used in your project by downloading them in either svg or png
format. It has a beautiful dark themed UI with perfect UX ✌️



Dribbble [https://dribbble.com/]
Its a website where some of the best UI/UX designers post their work. Its]]></description><link>http://xenox.dev/websites-you-need-to-know-if-you-are-a-web-developer/</link><guid isPermaLink="false">Ghost__Post__612ba43979a88f773c7d2167</guid><category><![CDATA[HTML5]]></category><category><![CDATA[WebDev]]></category><category><![CDATA[CSS]]></category><dc:creator><![CDATA[Diti Arora]]></dc:creator><pubDate>Sun, 29 Aug 2021 17:49:07 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2021/08/Frame-1.png" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2021/08/Frame-1.png" alt="Websites you need to know if you are a web developer"/><p/><p>Here are some must know websites if you are a web developer!</p><h2 id="haikei"><a href="https://app.haikei.app/">Haikei</a></h2><p>Haikei is an amazing web app which helps you create stunning svg shapes, beautiful backgrounds and much more which are very difficult to make with css. They can easily be used in your project by downloading them in either svg or png format. It has a beautiful dark themed UI with perfect UX ✌️</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/08/image.png" class="kg-image" alt="Websites you need to know if you are a web developer" loading="lazy" width="1920" height="888"/></figure><p/><h2 id="dribbble"><a href="https://dribbble.com/">Dribbble</a></h2><p>Its a website where some of the best UI/UX designers post their work. Its important for a web developer, to not only to know how to turn UI designs to reality but to also have knowledge about  how to make good looking UIs and how can they provide the best experience to the user. Dribbble is the best websites for taking inspiration for your website's UI design. You can even use Dribbble as a source for enhancing your front-end skills!</p><p>Just randomly pick up a design from Dribbble and try to code the exact same thing!</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/08/image-1.png" class="kg-image" alt="Websites you need to know if you are a web developer" loading="lazy" width="1898" height="888"/></figure><h2/><h2 id="adobe-colors"><a href="https://color.adobe.com/create/color-wheel">Adobe Colors</a></h2><p>Now that I have mentioned about UI/UX, It is also very essential to pick up a correct and relevant color scheme for your website design. The color you choose for your website decides the tone of it. Adobe colors is the best place  for work like this. You can decide the colors, explore new trends and even look at some of the beautiful color schemes shared by other people.</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/08/image-2.png" class="kg-image" alt="Websites you need to know if you are a web developer" loading="lazy" width="1898" height="888"/></figure><p/><h2 id="google-fonts"><a href="https://fonts.google.com/">Google Fonts</a></h2><p>Google fonts have thousands of font families which can be very easily used in your web projects as not all the fonts are present in your systems or in your browser. The steps to add a new Google Font in your project is seamless.</p><p>Here is how you can add a new font-</p><ol><li>Click on the desired font.</li><li>Select the font style(google fonts provides the font in all the font weights and styles)</li><li>Copy the HTML code in the right side bar ( you can even use the import function of CSS) and paste it in your code!</li></ol><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/08/image-3.png" class="kg-image" alt="Websites you need to know if you are a web developer" loading="lazy" width="1898" height="888"/></figure><p/><h2 id="humaaans"><a href="https://blush.design/collections/humaaans/humaaans">Humaaans</a></h2><p>Humaaans is the best place for flat human illustrations😃.  You can create your own <em>scenes </em>and can even customize your illustrations however you want.</p><p>What else do you want?</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/08/image-4.png" class="kg-image" alt="Websites you need to know if you are a web developer" loading="lazy" width="1898" height="888"/></figure><p/><h2 id="codepen"><a href="https://codepen.io/">Codepen</a></h2><p>Codepen is the best website for seeking ideas and inspiration for your website. Sometimes you want to look up to some projects similar to what you are trying to make. Codepen is the best place for it.  It is better if you visit the website by your own.</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/08/image-5.png" class="kg-image" alt="Websites you need to know if you are a web developer" loading="lazy" width="1920" height="888"/></figure><p/><p>Hope you found this post helpful. Bye :)</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/08/image-9.png" class="kg-image" alt="Websites you need to know if you are a web developer" loading="lazy" width="480" height="342"/></figure>]]></content:encoded></item><item><title><![CDATA[What is Structured Data for Advanced SEO?]]></title><description><![CDATA[What is structured data and how to implement it on my website to get to the top of google search results?]]></description><link>http://xenox.dev/structured-data-for-advanced-seo/</link><guid isPermaLink="false">Ghost__Post__60f1647479a88f773c7d2072</guid><dc:creator><![CDATA[Rehan Alam]]></dc:creator><pubDate>Mon, 19 Jul 2021 10:05:59 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2021/07/what-is-structured-data--1-.png" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2021/07/what-is-structured-data--1-.png" alt="What is Structured Data for Advanced SEO?"/><p/><p>Have you ever searched for some product online and get a result like this from the google? Do you also want your search results to come up with all this information? This can all be achieved using <strong>Structured Data.</strong></p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2021/07/Screenshot-2021-07-16-at-4.21.40-PM.png" class="kg-image" alt="What is Structured Data for Advanced SEO?" loading="lazy" width="1298" height="354"><figcaption>Results with information like Rating, reviews, price, etc.</figcaption></img></figure><p>Structured data is, giving important information about your website to help search engines show your results at the top with all the important information you want to convey to your customers. This might include the price of your product, discounts, reviews, ratings, etc.</p><figure class="kg-card kg-embed-card"><iframe src="https://tenor.com/embed/10804060" width="600" height="400" frameborder="0"/></figure><blockquote>You can help us by providing explicit clues about the meaning of a page to Google by including structured data on the page. Structured data is a standardized format for providing information about a page and classifying the page content; for example, on a recipe page, what are the ingredients, the cooking time and temperature, the calories, and so on.<br><br> - Google</br></br></blockquote><p>Here is an example of structured data for a product from our platform <a href="https://prototion.com/">https://prototion.com/</a></p><pre><code class="language-javascript">&lt;script type="application/ld+json"&gt;{
  "@context": "https://schema.org/",
  "@type": "Product",
  "name": "Notion Library Template",
  "author" : {
    "@type" : "Person",
    "name" : "Patrick"
  },
  "image": "https://someimageur.png",
  "description": "Use this template to plan all your content in one place, including the channel it is posted on, the type of content it is (photo, video)",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "5",
    "reviewCount": 38,
    "bestRating": "5",
    "worstRating": "5"
  }
}&lt;/script&gt;</code></pre><p/><p>JSON-LD is a format  to create a unified structured data vocabulary for the web. If you want to read more about JSON-LD, then read this <a href="https://json-ld.org/">https://json-ld.org/</a>. But I want to focus here on how you can use it in your projects to use SEO for maximum traction.</p><p>Let us now break down what is happening in this script tag. First, we define the format for content and type. The type may be product, blog, etc. Then we are provided with more information such as name, image, etc. Then we move to provide ratings.  We can also provide additional information depending upon the use case. Here is an amazing tool to generate all sorts of json-ld for free. <a href="https://jsonld.com/">https://jsonld.com/</a>.<br><br>When all set and done, this is the end result. You can test your json-ld before going live using this tool provided by<a href="https://search.google.com/test/rich-results?utm_campaign=sdtt&amp;utm_medium=code"> google </a></br></br></p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/07/Screenshot-2021-07-16-at-4.55.43-PM.png" class="kg-image" alt="What is Structured Data for Advanced SEO?" loading="lazy" width="1288" height="344"/></figure><p>That's it folks. I hope you will now implement the structure data in your projects and make it to the top in the SEO game.</p><p>-<a href="https://twitter.com/relativelyrehan">@relativelyrehan</a></p><figure class="kg-card kg-embed-card"><iframe src="https://tenor.com/embed/5104276" width="600" height="400" frameborder="0"/></figure>]]></content:encoded></item><item><title><![CDATA[How to use React-Axe with Next.js?]]></title><description><![CDATA[Simple and easy solution on how to use React Axe, now @axe-core/react, with a Next.js App. Helps increase your accessibility score.]]></description><link>http://xenox.dev/how-to-use-react-axe-with-next-js/</link><guid isPermaLink="false">Ghost__Post__60a3805a79a88f773c7d1fb4</guid><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Tue, 18 May 2021 09:31:48 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2021/05/Copy-of-Next.js-SASS-3.png" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2021/05/Copy-of-Next.js-SASS-3.png" alt="How to use React-Axe with Next.js?"/><p>If you care about accessibility like we do at <a href="https://skynox.tech">Skynox</a>  you need React-Axe for sure. Though the package name is now <strong>axe-core, </strong>we will use <a href="https://www.npmjs.com/package/@axe-core/react">@axe-core/react</a><strong> </strong>in this example. So let's get started.</p><h3 id="installing-axe-core-to-next-app">Installing Axe-core to Next App</h3><p>Run this command to install the package first</p><figure class="kg-card kg-code-card"><pre><code>yarn add @axe-core/react
npm install --save @axe-core/react</code></pre><figcaption>Installing Axe-core/ React-axe in Next.js Project.</figcaption></figure><p>You might also need to install React-dom (not necessarily) using </p><figure class="kg-card kg-code-card"><pre><code>yarn add react-dom
npm install --save react-dom</code></pre><figcaption>Installing React dom for Next.js to make React-Axe work</figcaption></figure><p>After that go to your <code>_app.js</code> file in <em>pages</em> folder and the following code there after your import statements.</p><figure class="kg-card kg-code-card"><pre><code class="language-Javascript">if (typeof window !== 'undefined' &amp;&amp; process.env.NODE_ENV !== 'production') {
  const ReactDOM = require('react-dom');
  const axe = require('@axe-core/react');
  axe(React, ReactDOM, 1000);
}</code></pre><figcaption>Adding React-axe to <code>_app.js</code> file</figcaption></figure><p>and boom you are good to go. Check console in any browser you should see this. </p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2021/05/image.png" class="kg-image" alt="How to use React-Axe with Next.js?" loading="lazy" width="1920" height="208"><figcaption>React-Axe working for Next.js app</figcaption></img></figure><h3 id="adding-config-for-react-axe-in-nextjs">Adding Config for React-axe in Next.js</h3><p>Well you can add custom configuration for your Project also. We suggest making a util function like this</p><pre><code class="language-Javascript">const config = {
  rules: [
    {
      id: 'skip-link',
      enabled: true
    }
  ]
};

export config</code></pre><p>Now in _app.js file add config as 4th agrument</p><pre><code class="language-Javascript">axe(React, ReactDOM, 1000, config);</code></pre><p>That's it, if you want to learn about more rules in config option visit <a href="https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure"><strong><em>this page</em></strong></a>.</p><h3 id="conclusion">Conclusion </h3><p>Here is another article from Series <a href="https://xenox.dev/tag/next-js"><strong><em>Next.js Station</em></strong></a> 🚋. If you want me write about any other topic or just want to solve any Next.js Specific problem, feel free to reach out to me at <a href="https://twitter.com/sarthology">@sarthology</a> on twitter. Will see you next time.</p>]]></content:encoded></item><item><title><![CDATA[Deploy Static Site on Digitalocean using Github Actions]]></title><description><![CDATA[Easiest Guide to deploy your Static site on Digitalocean using Github Actions. Automating the build and deployment on every push saves tons of time.]]></description><link>http://xenox.dev/deploy-static-site-on-digitalocean-with-github-actions/</link><guid isPermaLink="false">Ghost__Post__6080085b79a88f773c7d1f82</guid><category><![CDATA[DevOps]]></category><category><![CDATA[Github Actions]]></category><category><![CDATA[Beginners]]></category><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Wed, 21 Apr 2021 11:23:50 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2021/04/Action-Series-2-1.png" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2021/04/Action-Series-2-1.png" alt="Deploy Static Site on Digitalocean using Github Actions"/><p>Deploying Static Sites with Digitalocean and Github actions is really easy. Let's see how to achieve that in following few steps.</p><h2 id="getting-server-ready">Getting Server Ready</h2><p>Here, we are taking the case of Digital Ocean. But the process is same for any VPS out there. Let's follow the process step by step:</p><h3 id="1-install-nginx-on-the-new-server">1. Install nginx on the new server</h3><pre><code class="language-bash">sudo apt update
sudo apt install nginx
</code></pre><h3 id="2-generate-the-ssh-key">2. Generate the ssh key</h3><p>First, you need to create one ssh key for the droplet using this command:</p><pre><code class="language-bash">ssh-keygen
</code></pre><h3 id="3-copy-your-public-key-in-available-keys">3. Copy your public key in available keys</h3><p>Use following command to do that:</p><pre><code class="language-bash">cat ~/.ssh/id_rsa.pub &gt;&gt; ~/.ssh/authorized_keys
</code></pre><h2 id="getting-github-ready">Getting Github Ready</h2><p>Now it's time for Github settings. Follow the steps as following:<br><br>1. Adding secret keys </br></br></p><p>Then copy the private key using</p><pre><code class="language-bash">cat ~/.ssh/id_rsa
</code></pre><p>Copy the entire block</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2021/04/image-2.png" class="kg-image" alt="Deploy Static Site on Digitalocean using Github Actions" loading="lazy" width="1038" height="914"><figcaption>Copy your private ssh key from your server&nbsp;</figcaption></img></figure><p>Then go into your <code>Repository Settings &gt; Action Secrets</code> add these two secrets there, <code>SERVER_IP</code> that is IP address of your droplet and <code>SSH_KEY</code> that is the key that you just copied. If you use some other names, do remember to update in the workflow file.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2021/04/image.png" class="kg-image" alt="Deploy Static Site on Digitalocean using Github Actions" loading="lazy" width="2652" height="1430"><figcaption>Github Setting for Deployment of GatsbyJS on Digital Ocean</figcaption></img></figure><h3 id="2-adding-the-githubs-workflow-file">2. Adding the Github's workflow file</h3><p>Now go into your root directory and create <code>.github/workflow/manual.yml</code> and copy this file into that.</p><figure class="kg-card kg-code-card"><pre><code class="language-yml">name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
      - uses: actions/checkout@master
      - name: Deploy
        run: |
          which ssh-agent || ( apt-get update -y &amp;&amp; apt-get install openssh-client -y  )
          which rsync || ( apt-get update -y &amp;&amp; apt-get install rsync -y )
          eval $(ssh-agent -s)
          ssh-add &lt;(echo "$SSH_PRIVATE_KEY" )
          mkdir -p ~/.ssh
          chmod 700 ~/.ssh
          ssh-keyscan $SERVER_IP &gt;&gt; ~/.ssh/known_hosts
          chmod 644 ~/.ssh/known_hosts
          scp -r * root@$SERVER_IP:/var/www/html
    env:
      SSH_PRIVATE_KEY: ${{secrets.SSH_KEY}}
      SERVER_IP: ${{secrets.SERVER_IP}}
      CI: false</code></pre><figcaption>Workflow file for Deployment of GatsbyJS on Digital Ocean</figcaption></figure><p>Now to Actions tab and if everything goes well you will see something like this.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2021/04/image-1.png" class="kg-image" alt="Deploy Static Site on Digitalocean using Github Actions" loading="lazy" width="3552" height="820"><figcaption>Gatsby Project deployed successfully on digitalocean 🚀</figcaption></img></figure><h3 id="conclusion">Conclusion </h3><p>So I hope you liked this article. More articles like this will keep popping on XenoX, as we are starting a new series named<em>"The Action Series". </em>Where we will give you a step by step guide on how to use Github Actions. So Don't forget to subscribe.<br><br>If you have some issues with this, you can reach out to me on <a href="https://twitter.com/Sarthology">Twitter</a> anytime or even if you have a suggestion on what the next post should be. Thanks, see you next time.👋🏼 </br></br></p>]]></content:encoded></item><item><title><![CDATA[Deploy Gatsby on Digitalocean with Github Actions]]></title><description><![CDATA[Easiest Guide to deploy your Gatsby project on Digitalocean using Github Actions. Automating the build and deployment on every push saves tons of time.]]></description><link>http://xenox.dev/deploy-gatsby-on-digitalocean-using-github-actions/</link><guid isPermaLink="false">Ghost__Post__5f76ab0d50c14226c5290577</guid><category><![CDATA[DevOps]]></category><category><![CDATA[Github Actions]]></category><category><![CDATA[GatsbyJS]]></category><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Fri, 09 Apr 2021 10:28:46 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2021/04/Action-Series-2.png" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2021/04/Action-Series-2.png" alt="Deploy Gatsby on Digitalocean with Github Actions"/><p>I feel that Github Actions is the easiest way to launch any project and Gatsby is the easiest way to get a static site out there. So in this tutorial, we will give you a step by step guide to do it. We will automate our workflow so that every time someone pushes to your repo, GitHub actions will build it and deploy it on your server, sweet right? So let's do it.</p><h2 id="getting-server-ready">Getting Server Ready</h2><p>Here, we are taking the case of Digital Ocean. But the process is same for any VPS out there. Let's follow the process step by step:</p><h3 id="1-install-nginx-on-the-new-server">1. Install nginx on the new server</h3><pre><code class="language-bash">sudo apt update
sudo apt install nginx
</code></pre><h3 id="2-generate-the-ssh-key">2. Generate the ssh key</h3><p>First, you need to create one ssh key for the droplet using this command:</p><pre><code class="language-bash">ssh-keygen
</code></pre><h3 id="3-copy-your-public-key-in-available-keys">3. Copy your public key in available keys</h3><p>Use following command to do that:</p><pre><code class="language-bash">cat ~/.ssh/id_rsa.pub &gt;&gt; ~/.ssh/authorized_keys
</code></pre><h2 id="getting-github-ready">Getting Github Ready</h2><p>Now it's time for Github settings. Follow the steps as following:<br><br>1. Adding secret keys </br></br></p><p>Then copy the private key using</p><pre><code class="language-bash">cat ~/.ssh/id_rsa
</code></pre><p>Copy the entire block</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2021/04/image-2.png" class="kg-image" alt="Deploy Gatsby on Digitalocean with Github Actions" loading="lazy" width="1038" height="914"><figcaption>Copy your private ssh key from your server&nbsp;</figcaption></img></figure><p>Then go into your <code>Repository Settings &gt; Action Secrets</code> add these two secrets there, <code>SERVER_IP</code> that is IP address of your droplet and <code>SSH_KEY</code> that is the key that you just copied. If you use some other names, do remember to update in the workflow file.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2021/04/image.png" class="kg-image" alt="Deploy Gatsby on Digitalocean with Github Actions" loading="lazy" width="2652" height="1430"><figcaption>Github Setting for Deployment of GatsbyJS on Digital Ocean</figcaption></img></figure><h3 id="2-adding-the-github-s-workflow-file">2. Adding the Github's workflow file</h3><p>Now go into your root directory and create <code>.github/workflow/manual.yml</code> and copy this file into that.</p><figure class="kg-card kg-code-card"><pre><code class="language-yml">name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
      - uses: actions/checkout@master
      - name: Deploy
        run: |
          mkdir -p ~/.ssh
          chmod 700 ~/.ssh
          ssh-keyscan $SERVER_IP &gt;&gt; ~/.ssh/known_hosts
          chmod 600 ~/.ssh/known_hosts
          touch ssh_key
          (echo "$SSH_PRIVATE_KEY") &gt; ssh_key
          chmod 600 ssh_key
          npm install
          npm run build
          scp -r -i ssh_key ./public/* root@$SERVER_IP:/var/www/html
    env:
      SSH_PRIVATE_KEY: ${{secrets.SSH_KEY}}
      SERVER_IP: ${{secrets.SERVER_IP}}
      CI: false</code></pre><figcaption>Workflow file for Deployment of GatsbyJS on Digital Ocean</figcaption></figure><p>Now to Actions tab and if everything goes well you will see something like this.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2021/04/image-1.png" class="kg-image" alt="Deploy Gatsby on Digitalocean with Github Actions" loading="lazy" width="3552" height="820"><figcaption>Gatsby Project deployed successfully on digitalocean 🚀</figcaption></img></figure><h3 id="conclusion">Conclusion </h3><p>So I hope you liked this article. More articles like this will keep popping on XenoX, as we are starting a new series named<em>"The Action Series". </em>Where we will give you a step by step guide on how to use Github Actions. So Don't forget to subscribe.<br><br>If you have some issues with this, you can reach out to me on <a href="https://twitter.com/Sarthology">Twitter</a> anytime or even if you have a suggestion on what the next post should be. Thanks, see you next time.👋🏼 </br></br></p>]]></content:encoded></item><item><title><![CDATA[How to use Bulma with Next.js]]></title><description><![CDATA[A guide on how to install Bulma with Next.js including a Boilerplate Template to get started with Next.js + Bulma.  ]]></description><link>http://xenox.dev/how-to-use-bulma-with-next-js/</link><guid isPermaLink="false">Ghost__Post__6057389f79a88f773c7d1d87</guid><category><![CDATA[next.js]]></category><category><![CDATA[Bulma]]></category><category><![CDATA[CSS]]></category><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Sun, 21 Mar 2021 13:14:58 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2021/03/Copy-of-Next.js-SASS-2.png" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2021/03/Copy-of-Next.js-SASS-2.png" alt="How to use Bulma with Next.js"/><p>Though using Bulma with Next.js should be a piece of cake, it's not. It still needs few tweaks that we may need to talk in this article but it will short I swear. So let's get started with it.</p><h3 id="installing-dependencies">Installing dependencies </h3><figure class="kg-card kg-code-card"><pre><code class="language-bash">yarn add bulma</code></pre><figcaption>Install Bulma using&nbsp;</figcaption></figure><p>Because Bulma use SASS, you may also have to install <code>node-sass</code>. </p><figure class="kg-card kg-code-card"><pre><code class="language-bash">yarn add node-sass</code></pre><figcaption>Installing node-sass</figcaption></figure><h3 id="importing-bulma-to-global-css">Importing bulma to global CSS</h3><p>Next we have to import bulma to global sytlesheet like this.</p><figure class="kg-card kg-code-card"><pre><code class="language-sass">@import '~bulma/bulma';</code></pre><figcaption>importing bulma to global styles</figcaption></figure><p>Or can either include all of it or whatever is required like this</p><figure class="kg-card kg-code-card"><pre><code class="language-sass">@import '~bulma/sass/grid/columns.sass';


@import '~bulma/sass/layout/section.sass';
@import '~bulma/sass/layout/footer.sass';</code></pre><figcaption>Importing only components that is required</figcaption></figure><h3 id="adding-nextjs-config">Adding Next.js Config</h3><p><strong><em>(not required in Next.js 10.0&lt;)</em></strong></p><p>Now next step is to add config into your next config file as we are using SASS here. I have written another article on handling component level SASS in Next.js check it out</p><pre><code class="language-bash">yarn add @zeit/next-sass</code></pre><p>Create <code>next.config.js</code>, If you already don't have it.</p><figure class="kg-card kg-code-card"><pre><code class="language-JavaScript">const withSass = require("@zeit/next-sass");
module.exports = withSass();

// If you already have some config

module.exports = withSass({
  target: 'serverless',
  env: {
    JWT_SECRET: process.env.JWT_SECRET
  }
});</code></pre><figcaption>add this to <code>next.config.js</code></figcaption></figure><h3 id="tldr">TLDR;</h3><p>Here is the repo to get you started fast:</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://github.com/sarthology/next-js-bulma"><div class="kg-bookmark-content"><div class="kg-bookmark-title">sarthology/next-js-bulma</div><div class="kg-bookmark-description">Boilerplate to use Bulma with Next.js. Contribute to sarthology/next-js-bulma development by creating an account on GitHub.</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://github.githubassets.com/favicons/favicon.svg" alt="How to use Bulma with Next.js"><span class="kg-bookmark-author">GitHub</span><span class="kg-bookmark-publisher">sarthology</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://avatars.githubusercontent.com/u/3650216?s&#x3D;400&amp;v&#x3D;4" alt="How to use Bulma with Next.js"/></div></a></figure><h3 id="conclusion">Conclusion </h3><p>Make sure you subscribe to get your knowledge about next.js up to dated. We publish a new article everyweek. See if you next time then.</p><figure class="kg-card kg-image-card"><img src="https://media.giphy.com/media/xT9IgG50Fb7Mi0prBC/giphy.gif" class="kg-image" alt="How to use Bulma with Next.js" loading="lazy"/></figure>]]></content:encoded></item><item><title><![CDATA[Next-Image with StorybookJS]]></title><description><![CDATA[How to add Next JS Image tag in your storybook JS? ]]></description><link>http://xenox.dev/next-image-with-storybookjs/</link><guid isPermaLink="false">Ghost__Post__605240c6ca97a6743b22a8e6</guid><category><![CDATA[next.js]]></category><dc:creator><![CDATA[Rehan Alam]]></dc:creator><pubDate>Thu, 18 Mar 2021 06:27:49 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2021/03/Copy-of-Next.js-SASS.png" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2021/03/Copy-of-Next.js-SASS.png" alt="Next-Image with StorybookJS"/><p>Last week I have written an article explaining how to configure storybookJS in your Next Js project with Tailwind CSS. If you haven't read it already, give it a read before jumping into this configuration setup of Next Image.</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://xenox.dev/storybook-js-with-next-js-and-tailwind-css/"><div class="kg-bookmark-content"><div class="kg-bookmark-title">How to add storybook in next js with tailwind css?</div><div class="kg-bookmark-description">How to add storybook with Nextjs and tailwind CSS? Complete guide.PostCSS plugin tailwindcss requires PostCSS 8 solved.</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://xenox.dev/icons/icon-512x512.png" alt="Next-Image with StorybookJS"><span class="kg-bookmark-author">XenoX</span><span class="kg-bookmark-publisher">Rehan Alam</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://authors.xenox.dev/content/images/2021/03/story-book-banner.png" alt="Next-Image with StorybookJS"/></div></a></figure><p>Now, let us dive in and add Next JS Image tag support in our Storybook JS project. If you are more interested in knowing about the NEXT JS Image tag, read about it on official docs.</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://nextjs.org/docs/api-reference/next/image"><div class="kg-bookmark-content"><div class="kg-bookmark-title">next/image | Next.js</div><div class="kg-bookmark-description">Enable Image Optimization with the built-in Image component.</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://nextjs.org/static/favicon/apple-touch-icon.png" alt="Next-Image with StorybookJS"><span class="kg-bookmark-author">Next.js</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://nextjs.org/static/twitter-cards/documentation.png" alt="Next-Image with StorybookJS"/></div></a></figure><p>To add Next JS image tag support, we need two more addition in our setup and its ready to use Image tag. These changes are to be made in <strong>preview.js</strong> and our storybook script in <strong>package.json.</strong></p><h3 id="preview-js">Preview.js</h3><pre><code class="language-json">import '../styles/globals.css';

import * as nextImage from 'next/image';

Object.defineProperty(nextImage, 'default', {
  configurable: true,
  value: props =&gt; &lt;img {...props} /&gt;
});

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' }
};</code></pre><h3 id="package-json">package.json</h3><pre><code class="language-json">"storybook": "start-storybook -s ./public -p 6006",</code></pre><p>That is it. Now you can use &lt;Image /&gt; tag in your storybook without any problems.Find the complete project REPO here.</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://github.com/teamxenox/storybook-with-next-and-tailwind/"><div class="kg-bookmark-content"><div class="kg-bookmark-title">teamxenox/storybook-with-next-and-tailwind</div><div class="kg-bookmark-description">Contribute to teamxenox/storybook-with-next-and-tailwind development by creating an account on GitHub.</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://github.githubassets.com/favicons/favicon.svg" alt="Next-Image with StorybookJS"><span class="kg-bookmark-author">GitHub</span><span class="kg-bookmark-publisher">teamxenox</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://avatars.githubusercontent.com/u/45996492?s&#x3D;400&amp;v&#x3D;4" alt="Next-Image with StorybookJS"/></div></a></figure><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/03/code-2.gif" class="kg-image" alt="Next-Image with StorybookJS" loading="lazy" width="800" height="600"/></figure>]]></content:encoded></item><item><title><![CDATA[Storybook Js with Next Js and Tailwind CSS]]></title><description><![CDATA[Storybook is a brilliant open-source tool to develop UI components in isolation for your React or Next js App, etc. With Storybook, you can develop and visualize your components even before creating any pages. Let us implement a storybook with next with tailwind CSS.]]></description><link>http://xenox.dev/storybook-js-with-next-js-and-tailwind-css/</link><guid isPermaLink="false">Ghost__Post__603e73c350c14226c52917bc</guid><category><![CDATA[next.js]]></category><dc:creator><![CDATA[Rehan Alam]]></dc:creator><pubDate>Thu, 11 Mar 2021 08:33:54 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2021/03/story-book-banner.png" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2021/03/story-book-banner.png" alt="Storybook Js with Next Js and Tailwind CSS"/><p>Storybook is a brilliant open source tool to develop UI components in isolation for your React or Next js App, etc. With Storybook you can develop and visualise your components even before creating any pages. Not only that, with storybook add-ons you can also interact with them without even changing your source code.<br><br>This makes the development process very smooth for bigger teams, especially when developing components and APIs simultaneously. Storybook will also remove any need to go back and forth between developers to understand the structures of UI components. </br></br></p><p>Back-end developers can look at the story for a component and will understand all the intricacies of that component. They can also modify it to their requirements if needs be.</p><p><strong>TL:DR</strong><br><br><strong>Go to GitHub, clone the repo.</strong></br></br></p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://github.com/teamxenox/storybook-with-next-and-tailwind"><div class="kg-bookmark-content"><div class="kg-bookmark-title">teamxenox/storybook-with-next-and-tailwind</div><div class="kg-bookmark-description">Contribute to teamxenox/storybook-with-next-and-tailwind development by creating an account on GitHub.</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://github.githubassets.com/favicons/favicon.svg" alt="Storybook Js with Next Js and Tailwind CSS"><span class="kg-bookmark-author">GitHub</span><span class="kg-bookmark-publisher">teamxenox</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://avatars.githubusercontent.com/u/45996492?s&#x3D;400&amp;v&#x3D;4" alt="Storybook Js with Next Js and Tailwind CSS"/></div></a></figure><p>So let us begin to implement storybook in a next js project with tailwind CSS. If you want to know more about tailwind CSS, read my article here.</p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://xenox.dev/tailwind-css-utility-first-css-framework/"><div class="kg-bookmark-content"><div class="kg-bookmark-title">Should you use Tailwind CSS in 2021?</div><div class="kg-bookmark-description">A utility-first CSS framework provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://xenox.dev/icons/icon-512x512.png" alt="Storybook Js with Next Js and Tailwind CSS"><span class="kg-bookmark-author">XenoX</span><span class="kg-bookmark-publisher">Rehan Alam</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://authors.xenox.dev/content/images/2020/12/Copy-of-Copy-of-Untitled.png" alt="Storybook Js with Next Js and Tailwind CSS"/></div></a></figure><h3 id="create-next-app-and-add-storybook">Create Next App and add storybook</h3><p>First let us create a next js app</p><pre><code class="language-shell">npx create-next-app my-storybook</code></pre><p>We will now install storybook in our next js project:-</p><pre><code class="language-shell">npx sb init</code></pre><p>This command will install the storybook in your project. After installation you will have the following folders in your project:-<br><br>.storybook (contains main and preview.js files)<br>stories (contains demo stories and a guide)</br></br></br></p><h3 id="see-storybook-in-action">See storybook in action</h3><pre><code class="language-shell">yarn storybook</code></pre><p>If you run this command now, you will see the following window opens at localhost:6006.</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/03/Screenshot-from-2021-03-02-23-59-26.png" class="kg-image" alt="Storybook Js with Next Js and Tailwind CSS" loading="lazy" width="1915" height="945" srcset="https://authors.xenox.dev/content/images/size/w600/2021/03/Screenshot-from-2021-03-02-23-59-26.png 600w, https://authors.xenox.dev/content/images/size/w1000/2021/03/Screenshot-from-2021-03-02-23-59-26.png 1000w, https://authors.xenox.dev/content/images/size/w1600/2021/03/Screenshot-from-2021-03-02-23-59-26.png 1600w, https://authors.xenox.dev/content/images/2021/03/Screenshot-from-2021-03-02-23-59-26.png 1915w" sizes="(min-width: 720px) 720px"/></figure><p>There will be some basic introduction and some example stories. Now we're going to delete this stories folder and will write our stories in the component itself. </p><h3 id="installing-tailwind-css">Installing tailwind CSS</h3><p>Before we write stories let us first add Tailwind CSS in our project, this can be done by following this article on their <strong><a href="https://tailwindcss.com/docs/guides/nextjs">website</a></strong>. Make sure to use this line for installation as storybook is not yet compatible with latest versions.</p><pre><code class="language-shell">npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9</code></pre><p>After installing Tailwind we have to setup our storybook for tailwind. The following changes are to be made in </p><p><strong>main.js</strong>:-</p><pre><code class="language-json">module.exports = {
  stories: [
    // Paths to the story files
    '../components/**/*.stories.mdx',
    '../components/**/*.stories.@(js|jsx|ts|tsx)'
  ],
  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-controls'],
  webpackFinal: async config =&gt; {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
    });

    return config;
  }
};</code></pre><p><strong>Preview.js:-</strong></p><pre><code class="language-javascript">import '../styles/globals.scss'

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
}</code></pre><h2 id="writing-first-story">Writing first story</h2><p>With all things set up, let us now write our first story. If you look closely at the main.js file, we have configured it to look for stories in our components folder. That is the most practical place to put all your stories, that is with your components. To know more about Component Driven Development, visit <a href="https://www.componentdriven.org/">https://www.componentdriven.org/</a>/.</p><p><strong>components/Button/index.js</strong></p><pre><code class="language-javascript">const Button = ({size, children}) =&gt; {
    return( &lt;button className={` bg-red-400 font-bold text-white px-6 py-2 ${size} `}&gt;
        {children}
    &lt;/button&gt;)
}

export default Button;</code></pre><p><strong>components/Button/button.stories.js</strong></p><pre><code class="language-javascript">import Button from './index'; //importing the button component

export default {
    title: "My First Button" //title for our storybook
}

const Template = arguments_ =&gt; &lt;Button {...arguments_} /&gt; //creating a template

export const Primary = Template.bind({})

//Passing the props to the component

Primary.args ={     
    size: "h-10 w-56",
    children: "Primary Button"
}

//these arguments will later be the control on the storybook UI and you can change them in the storybook without coming back to the editor.</code></pre><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/03/Screenshot-from-2021-03-07-16-42-28.png" class="kg-image" alt="Storybook Js with Next Js and Tailwind CSS" loading="lazy" width="1920" height="951" srcset="https://authors.xenox.dev/content/images/size/w600/2021/03/Screenshot-from-2021-03-07-16-42-28.png 600w, https://authors.xenox.dev/content/images/size/w1000/2021/03/Screenshot-from-2021-03-07-16-42-28.png 1000w, https://authors.xenox.dev/content/images/size/w1600/2021/03/Screenshot-from-2021-03-07-16-42-28.png 1600w, https://authors.xenox.dev/content/images/2021/03/Screenshot-from-2021-03-07-16-42-28.png 1920w" sizes="(min-width: 720px) 720px"/></figure><p>If everything goes well, you will see this story on the localhost:6006. If not, make sure you haven't made any typo and follows all the steps correctly. If the styles are not applied properly, make sure to run the command mentioned above for tailwind installation.</p><p>In the footer, you can see the controls section, where you can see two keys, size and children as we have specified in our story. You can change the values here and see the code in the docs tab. See below:-</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/03/storyblog.gif" class="kg-image" alt="Storybook Js with Next Js and Tailwind CSS" loading="lazy" width="1917" height="946"/></figure><p>That's it folks. That is the implementation of storybook in Next js project with tailwind CSS.</p><p>Also, we next week I will write about how to add <strong>Next Image</strong> support to the storybook, so stay tuned..</p><p><strong>Project Repo: </strong><a href="https://github.com/relativelyrehan/storybook-with-next-and-tailwind">https://github.com/relativelyrehan/storybook-with-next-and-tailwind</a></p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/03/tenor.gif" class="kg-image" alt="Storybook Js with Next Js and Tailwind CSS" loading="lazy" width="498" height="347"/></figure>]]></content:encoded></item><item><title><![CDATA[Setting up ESLint and Prettier For Your Next.js Project]]></title><description><![CDATA[How to Setup your Next.js Project using ESLint and Prettier. Step by Step guide. Containing bonus boilerplate templates also, to help you get started.]]></description><link>http://xenox.dev/setting-up-eslint-and-prettier-for-next-js-project/</link><guid isPermaLink="false">Ghost__Post__6005686b50c14226c52910f7</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[next.js]]></category><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Tue, 23 Feb 2021 07:21:33 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2021/02/Copy-of-Next.js-SASS.png" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2021/02/Copy-of-Next.js-SASS.png" alt="Setting up ESLint and Prettier For Your Next.js Project"/><p>Eslint and Prettier, are the most used npm packages in all Modern JavaScript Applications. </p><p>However, I noticed they're not being utilized to their fullest potential. That's purely a personal preference, but as the project grows, so does the requirements to tweak configurations to improve the team's productivity and the overall performance of the app. You can check out my article on <a href="https://authors.xenox.dev/eslint-the-easy-but-complete-guide/">Eslint made easy</a> breaking down Eslint for you. </p><p>For now, let's focus on quickly setting up Next.js.</p><figure class="kg-card kg-bookmark-card kg-card-hascaption"><a class="kg-bookmark-container" href="https://authors.xenox.dev/eslint-the-easy-but-complete-guide/"><div class="kg-bookmark-content"><div class="kg-bookmark-title">Setting up ESLint the easy way</div><div class="kg-bookmark-description">ESLint 101: The simplest and shortest guide to getting started with ESLint. 🚀</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://xenox.dev/favicon.png" alt="Setting up ESLint and Prettier For Your Next.js Project"><span class="kg-bookmark-author">XenoX</span><span class="kg-bookmark-publisher">Sarthak Sharma</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://xenox.dev/content/images/2021/02/ESLint-the-easy-Guide.png" alt="Setting up ESLint and Prettier For Your Next.js Project"/></div></a><figcaption>Easy Guide to ESLint and Prettier 🚀</figcaption></figure><hr><p>For <strong>Next.js</strong>, I'm going to divide this article into two sections, based on complexities and the number of plugins we have to integrate into the project: </p><ol><li>The Basic Setup 🌱</li><li>The Pro Setup 💯<strong> </strong></li></ol><h2 id="the-basic-setup-">The Basic Setup 🌱</h2><p>First install the ESLint and Prettier using following commands:</p><figure class="kg-card kg-code-card"><pre><code class="language-cmd">npm i -D eslint prettier
yarn add eslint prettier -D</code></pre><figcaption>Install Eslint and Prettier&nbsp;</figcaption></figure><p>Following is the Prettier setting I use in my projects and this remains same for the Pro Setup as well. I encourage you to edit this file as per your preferences. Checkout <a href="https://prettier.io/docs/en/options.html">this document</a> for further details on more options available. </p><figure class="kg-card kg-code-card"><pre><code class="language-Javascript">module.exports = {
  tabWidth: 2,
  printWidth: 80,
  endOfLine: 'auto',
  arrowParens: 'avoid',
  trailingComma: 'none',
  semi: true,
  useTabs: false,
  singleQuote: true,
  bracketSpacing: true
};</code></pre><figcaption><code>.prettierrc.js</code> Prettier config file for Next.js</figcaption></figure><p>Let's add a few more of these popular plugins, and get you started with having Basic Linting in your project 💖  </p><p>Run following command:</p><figure class="kg-card kg-code-card"><pre><code class="language-Bash">npm i -D eslint-plugin-prettier eslint-plugin-react eslint-config-airbnb eslint-config-prettier

yarn add eslint-plugin-prettier eslint-plugin-react eslint-config-airbnb eslint-config-prettier -D</code></pre><figcaption>More Eslint plugins&nbsp;</figcaption></figure><p>Add the following config. to your <code>.eslintrc.js</code> , and you're good to go :</p><figure class="kg-card kg-code-card"><pre><code class="language-Javascript">module.exports = {
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  settings: {
    react: {
      version: 'detect'
    }
  },
  extends: ['plugin:react/recommended', 'airbnb', 'prettier', 'prettier/react'],
  plugins: ['react', 'prettier']
};</code></pre><figcaption><code>.eslintrc.js</code> ESLint config File for Next.js</figcaption></figure><h2 id="the-pro-setup-">The Pro Setup 💯</h2><p>📍<strong><em>Adding More Plugins</em></strong></p><p>The main difference setting Pro apart from The Basic setup, is that the Pro flaunts a few more plugins, more awesome and  customizable ones 👩‍🎨.  </p><p>This is the setup I personally use, in all my Next.js projects.</p><figure class="kg-card kg-code-card"><pre><code class="language-bash">npm i -D eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-security eslint-plugin-simple-import-sort eslint-plugin-sonarjs eslint-plugin-unicorn

yarn add eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-security eslint-plugin-simple-import-sort eslint-plugin-sonarjs eslint-plugin-unicorn -D</code></pre><figcaption>Adding more Pro Plugins to the project</figcaption></figure><p>Now, add the following to your <code>.eslintrc.js</code> file, and you are good to go. I have explained most use cases for the following plugin, in <a href="https://authors.xenox.dev/eslint-the-easy-but-complete-guide/">this post</a>.</p><figure class="kg-card kg-code-card"><pre><code class="language-Javascript">module.exports = {
  parserOptions: {
    ecmaVersion: 2020, 
    sourceType: 'module', 
    ecmaFeatures: {
      jsx: true 
    }
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  plugins: ['simple-import-sort'],
  settings: {
    react: {
      version: 'detect'
    }
  },
  extends: [
    'eslint:recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:react/recommended', 
    'plugin:prettier/recommended',
    'plugin:sonarjs/recommended',
    'plugin:unicorn/recommended',
    'plugin:security/recommended',
    'plugin:react-hooks/recommended'
  ],
  rules: {
    'no-console': 'error',
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'simple-import-sort/sort': 'error',
    'unicorn/filename-case': 'off'
  }
};</code></pre><figcaption><code>.eslintrc.js</code> ESLint config File for Next.js</figcaption></figure><p>📍<strong><em>Setting Up Husky</em></strong></p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/02/iu.png" class="kg-image" alt="Setting up ESLint and Prettier For Your Next.js Project" loading="lazy" width="973" height="553" srcset="https://authors.xenox.dev/content/images/size/w600/2021/02/iu.png 600w, https://authors.xenox.dev/content/images/2021/02/iu.png 973w" sizes="(min-width: 720px) 720px"/></figure><p>Husky gives you the ability to add precommit hooks. It works as your third eye, protecting your project from that sneaky smelly code, from being pushed into, or committing to - forcing people to follow the guidelines added by you. </p><figure class="kg-card kg-code-card"><pre><code class="language-bash">npm i -D husky lint-staged 
yarn add husky lint-staged -D</code></pre><figcaption>Add husky to your Next.js Project.</figcaption></figure><p>after that, add this to your  <code>package.json</code>  file:</p><pre><code class="language-json">  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint '*/**/*.{js,jsx}' --fix"
    ]
  },</code></pre><p>That's it : and you are good to go. 🚀</p><h2 id="tldr-">TlDr; 💁🏽‍♀️</h2><p>You can simply copy them from here 😅</p><figure class="kg-card kg-bookmark-card kg-card-hascaption"><a class="kg-bookmark-container" href="https://github.com/sarthology/next-js-eslint-basic"><div class="kg-bookmark-content"><div class="kg-bookmark-title">sarthology/next-js-eslint-basic</div><div class="kg-bookmark-description">Basic Boilerplate Setup of Next.js, ESLint and Prettier - sarthology/next-js-eslint-basic</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://github.githubassets.com/favicons/favicon.svg" alt="Setting up ESLint and Prettier For Your Next.js Project"><span class="kg-bookmark-author">GitHub</span><span class="kg-bookmark-publisher">sarthology</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://avatars.githubusercontent.com/u/3650216?s&#x3D;400&amp;v&#x3D;4" alt="Setting up ESLint and Prettier For Your Next.js Project"/></div></a><figcaption>The Link to Basic Setup 🌱</figcaption></figure><figure class="kg-card kg-bookmark-card kg-card-hascaption"><a class="kg-bookmark-container" href="https://github.com/sarthology/next-js-eslint-pro"><div class="kg-bookmark-content"><div class="kg-bookmark-title">sarthology/next-js-eslint-pro</div><div class="kg-bookmark-description">Pro Boilerplate Setup of Next.js, ESLint and Prettier - sarthology/next-js-eslint-pro</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://github.githubassets.com/favicons/favicon.svg" alt="Setting up ESLint and Prettier For Your Next.js Project"><span class="kg-bookmark-author">GitHub</span><span class="kg-bookmark-publisher">sarthology</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://avatars.githubusercontent.com/u/3650216?s&#x3D;400&amp;v&#x3D;4" alt="Setting up ESLint and Prettier For Your Next.js Project"/></div></a><figcaption>The Link to Pro Setup 💯</figcaption></figure><h2 id="conclusion">Conclusion</h2><!--kg-card-begin: markdown--><p>Hopefully, you have learned something new here. I will be posting few more articles in this Next Station series of Next.js, so subcribe to get notified. Also we have weekly discussion on  <a href="https://dev.to/xenoxdev">dev.to</a> every Wednesday and Saturday.</p>
<p><a href="https://dev.to/xenoxdev/"><img src="https://authors.xenox.dev/content/images/2021/02/Copy-of-Bullet-Journal.gif" alt="Setting up ESLint and Prettier For Your Next.js Project" loading="lazy"/></a></p>
<p>Thanks again, if you have any queris reach out to me <a href="https://twitter.com/Sarthology">@sarthology</a></p>
<!--kg-card-end: markdown--></hr>]]></content:encoded></item><item><title><![CDATA[Learn JavaScript sync and async the easy way 🚀]]></title><description><![CDATA[Data fetching in javascript is an integral part of full-stack web development. Learn how to master the art of fetching data using asynchronous javascript.]]></description><link>http://xenox.dev/learn-javascript-sync-async-easy-way/</link><guid isPermaLink="false">Ghost__Post__60115d1350c14226c52911b5</guid><category><![CDATA[ES6]]></category><category><![CDATA[JavaScript]]></category><dc:creator><![CDATA[saurav sharma]]></dc:creator><pubDate>Wed, 10 Feb 2021 10:20:09 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2021/02/ss-poster.png" medium="image"/><content:encoded><![CDATA[<h3 id="get-in-sync-with-async-js-">GET IN SYNC WITH ASYNC JS!!</h3><img src="https://authors.xenox.dev/content/images/2021/02/ss-poster.png" alt="Learn JavaScript sync and async the easy way 🚀"/><p><strong><em>The process of developing a full-fledged Web-app might seem a bit daunting. It requires a lot of concentrated developers' hours. One of the Key aspects of developing a full stack web app is fetching data. As a full-stack developer, data fetching becomes an integral part of the profession, and mastering the art of handling that information is what one must strive to achieve.</em></strong><br><br>Over the years, Modern Javascript has evolved to accumulate an arsenal capable of handling data fetching. The Async behavior of Javascript allows it to move forward with further instructions without having to wait for the current task to reach its conclusion. But this behavior can prove counterproductive in situations that involve gathering and processing data from outside sources (servers, APIs, etc). And that’s where the mature and evolved function-set of modern javascript comes into play.</br></br></p><h2 id="problem-">PROBLEM:</h2><p><em>Function A - (slowFunction) generates data in a non-predefined amount of time.</em></p><p><em>Function B - (dataProcessor) responsible for utilising said data</em>.<br><br>Function A is called. Due to the asynchronous behavior of JS, function B is executed before function A is able to generate its result. Function B gets ‘null/undefined’ as input, leading to errors.</br></br></p><h2 id="solution-s-">SOLUTION(s):</h2><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/02/WhatsApp-Video-2021-02-10-at-12.10.48-PM.gif" class="kg-image" alt="Learn JavaScript sync and async the easy way 🚀" loading="lazy" width="290" height="426"/></figure><p><br><strong>Callbacks</strong></br></p><p>A callback is a function passed as an argument to another function. The code is set up in such a manner that the passed function will execute only after the main function is done with its own processing.</p><p><br>Solving the above problem, function A will be passed another argument, a callback, during its initialization. That callback is passed the fetched data. When Function A is called, the callback is replaced by function B (responsible for utilising the data).This way, function B will wait for function A to complete its execution.<br><br>To make this code real-world ready, we can add separate callbacks for both success and failure cases because let's be real, there is no way your backend is that good :)</br></br></br></p><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://authors.xenox.dev/content/images/2021/01/callback_fail.png" width="746" height="716" loading="lazy" alt="Learn JavaScript sync and async the easy way 🚀" srcset="https://authors.xenox.dev/content/images/size/w600/2021/01/callback_fail.png 600w, https://authors.xenox.dev/content/images/2021/01/callback_fail.png 746w" sizes="(min-width: 720px) 720px"/></div><div class="kg-gallery-image"><img src="https://authors.xenox.dev/content/images/2021/01/callback_pass.png" width="812" height="716" loading="lazy" alt="Learn JavaScript sync and async the easy way 🚀" srcset="https://authors.xenox.dev/content/images/size/w600/2021/01/callback_pass.png 600w, https://authors.xenox.dev/content/images/2021/01/callback_pass.png 812w" sizes="(min-width: 720px) 720px"/></div></div></div></figure><p/><p><strong>Promises</strong></p><p>A promise is an object that gives us either a result of an asynchronous operation or an error to that asynchronous operation. Promises are initiated as ‘new Promise’ with two variables (resolve, reject). The promise is consumed with '.then' and '.catch' functions responsible for success or failure respectively. </p><p>For the problem, a new promise is returned inside function A. A positive result is returned using the resolved variable whereas a negative result is returned using the reject variable. When the function is called, it’s followed by the above mentioned ‘.then’ and ‘.catch’ functions to handle both success and failure.</p><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="https://authors.xenox.dev/content/images/2021/01/promise_reject.png" width="830" height="860" loading="lazy" alt="Learn JavaScript sync and async the easy way 🚀" srcset="https://authors.xenox.dev/content/images/size/w600/2021/01/promise_reject.png 600w, https://authors.xenox.dev/content/images/2021/01/promise_reject.png 830w" sizes="(min-width: 720px) 720px"/></div><div class="kg-gallery-image"><img src="https://authors.xenox.dev/content/images/2021/01/promise_resolve.png" width="830" height="860" loading="lazy" alt="Learn JavaScript sync and async the easy way 🚀" srcset="https://authors.xenox.dev/content/images/size/w600/2021/01/promise_resolve.png 600w, https://authors.xenox.dev/content/images/2021/01/promise_resolve.png 830w" sizes="(min-width: 720px) 720px"/></div></div></div></figure><p/><p><strong>Async/Await</strong></p><p>When a function is provided with the async designation, it automatically returns a promise, allowing the user to consume the function’s response with ‘.then’ and ‘.catch’.<br><br>But that’s not all async does. Functions prefixed with async unlock yet another variable known as ‘await’. The keyword ‘await’ makes JavaScript wait until that promise settles and returns its result. In layman's terms, await simply stops the forward progression of code inside the async function until the promise is resolved and a positive (or negative) response is received.<br><br>For the problem, the logic inside function A is wrapped by a promise. Function A is called inside a different async function. The return from function A is stored in a variable which would be used by function B for further processing. Now, for function A to complete its processing, we need to stop the code execution before function B consumes the data. Declaring the ‘process’ function (see image) an async function and adding ‘await’ before function A, we can wait for function A to return the data and then pass it onto function B.</br></br></br></br></p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/01/async_await_correct.png" class="kg-image" alt="Learn JavaScript sync and async the easy way 🚀" loading="lazy" width="830" height="932" srcset="https://authors.xenox.dev/content/images/size/w600/2021/01/async_await_correct.png 600w, https://authors.xenox.dev/content/images/2021/01/async_await_correct.png 830w" sizes="(min-width: 720px) 720px"/></figure><p>That's it folks. I hope you now have the clear understanding of asynchronous JavaScript and when to use what to fetch data and use the asynchronous features to their max.</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2021/02/tenor.gif" class="kg-image" alt="Learn JavaScript sync and async the easy way 🚀" loading="lazy" width="220" height="148"/></figure><p><br><br>If you have any questions, ping me on twitter @dabibu1.<br><br> </br></br></br></br></p>]]></content:encoded></item><item><title><![CDATA[Utility-first CSS framework? - Tailwind CSS]]></title><description><![CDATA[What is utility-first CSS framework and what is tailwind CSS?
A utility first provides low-level utility classes that let you build completely custom designs without ever leaving your HTML.]]></description><link>http://xenox.dev/tailwind-css-utility-first-css-framework/</link><guid isPermaLink="false">Ghost__Post__5fcf0a0650c14226c5290f90</guid><category><![CDATA[CSS]]></category><dc:creator><![CDATA[Rehan Alam]]></dc:creator><pubDate>Tue, 15 Dec 2020 09:11:00 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2020/12/Copy-of-Copy-of-Untitled.png" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2020/12/Copy-of-Copy-of-Untitled.png" alt="Utility-first CSS framework? - Tailwind CSS"/><p>When we think about CSS frameworks like bootstrap or material-UI, we think of them as a great tool to fasten our development speed. However, all these frameworks suffer from the same problem that they all look and feel the same. When you visit any of these sites, they look like an identical adaptation of a popular base.</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/12/spp.png" class="kg-image" alt="Utility-first CSS framework? - Tailwind CSS" loading="lazy" width="548" height="436"/></figure><p>It is the primary reason why I refrain from using these frameworks because the process of giving the personal touch to these frameworks is like working in the opposite direction of the framework, which, is in itself a counterproductive act. It not only affects productivity but often clutters the folder structure with overriding rules.</p><p>Therefore, while working on a large project, I always use custom CSS styles and a pre-processor like SASS. This way I have more authority over the design, but it is not the best solution for the problem. The best solution to this problem is a utility-first CSS framework like Tailwind CSS.</p><p/><h1 id="what-is-the-utility-first-css-framework">What is the Utility-first CSS framework?</h1><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2020/12/Screenshot-from-2020-12-08-15-58-06.png" class="kg-image" alt="Utility-first CSS framework? - Tailwind CSS" loading="lazy" width="1141" height="567" srcset="https://authors.xenox.dev/content/images/size/w600/2020/12/Screenshot-from-2020-12-08-15-58-06.png 600w, https://authors.xenox.dev/content/images/size/w1000/2020/12/Screenshot-from-2020-12-08-15-58-06.png 1000w, https://authors.xenox.dev/content/images/2020/12/Screenshot-from-2020-12-08-15-58-06.png 1141w" sizes="(min-width: 720px) 720px"><figcaption>Tailwind CSS is the most popular CSS framework in 2020 stateofcss survey</figcaption></img></figure><p>When we work with frameworks like bootstrap, they have some predefined components like buttons with `btn` class, etc. Now, every change is either in the direction of the framework, giving the site a homogenous look, or in the opposite direction of the framework which is harming productivity.</p><p>Tailwind CSS provides low-level utility classes that let you build completely custom designs without ever leaving your HTML. That is, you can design your HTML directly within HTML, and that too with a higher degree of customization. Utility classes provide the user the freedom to sketch the site according to their design preference.</p><p>It is more like writing the inline CSS styles, but in a more elegant and much cleaner way. Code example:</p><pre><code class="language-HTML">&lt;button class = "bg-red-500 text-white font-bold py-2 px-4 rounded"&gt;
    Sign in
&lt;/button&gt;</code></pre><p>Here you will find that there is no `btn` or `button` class pre-applied. We just wrote classes to design our button the way we want it to look. And  not only this, if I want to add a `hover` effect it is as simple as adding:</p><pre><code class="language-CSS">hover:bg-blue:400
</code></pre><h1 id="advantages-of-the-utility-first-approach">Advantages of the utility-first approach<br/></h1><ul><li><strong>You never leave the HTML:-</strong></li></ul><p>Utility-first CSS feels like writing inline CSS. You want a hover effect, just add the class to the markup. No need of switching between the HTML-CSS files.</p><ul><li><strong>Cleaner folder structure:-</strong></li></ul><p>No more need for separate files like:</p><pre><code class="language-javascript">navbar.scss
header.scss
footer.scss
hero.scss
variables.scss
global.scss
cards.scss
</code></pre><p>Simply 2 files will do: </p><pre><code class="language-javascript">global.scss
tailwind.scss
</code></pre><p><br/></p><ul><li><strong>Faster Development:-</strong></li></ul><p>The primary purpose of using any framework is to increase the development speed. Tailwind does not shy away from speedy development.</p><p>Want a box with a red border:-</p><pre><code class="language-HTML">&lt;div class="border border-red"&gt;	Red border Box&lt;/div&gt;</code></pre><p><strong>Equivalent vanilla way:-</strong></p><h3 id="html">HTML</h3><pre><code class="language-HTML">&lt;div class="box"&gt; Red border Box &lt;/div&gt;</code></pre><h3 id="css">CSS</h3><pre><code class="language-javascript">.box {	border: 1px solid red;}</code></pre><p><br/></p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/12/roc.gif" class="kg-image" alt="Utility-first CSS framework? - Tailwind CSS" loading="lazy" width="1080" height="1080"/></figure><ul><li><strong>Performance</strong></li></ul><p>Tailwind automatically removes all unused CSS when building for production, which means your final CSS bundle is the smallest it could possibly be. In fact, most Tailwind projects ship less than 10KB of CSS to the client.</p><ul><li><strong>Pseudo Classes and Responsiveness</strong></li></ul><p>When I say you never need to switch between files, I meant it. Even for adding things like hover effects, responsive design, you can do all in just an HTML file.</p><pre><code class="language-HTML">&lt;button class = "bg-red-500 text-white font-bold py-2 px-4 rounded hover:bg-red-400"&gt;
    Sign in
&lt;/button&gt;
</code></pre><p>Similarly, for adding responsiveness, we can use classes like:`md:flex`, that means when the screen size is more than medium (tablet), the items will be flex and, on smaller screen sizes, they will stack on top of each other. That is, you'll get responsive behavior without leaving the HTML file.</p><pre><code class="language-HTML">&lt;p class="text-base md:text-lg"&gt;
    The quick brown fox jumped over the lazy dog.
&lt;/p&gt;
</code></pre><h1 id="downfalls-of-the-tailwind-css">Downfalls of the Tailwind CSS</h1><p>As futuristic and revolutionary tailwind CSS is, it does have some flaws.</p><ul><li><strong>Repeating classes:-</strong></li></ul><p>While the idea of having utility classes is really great, there are some issues with repeating these classes. For example:-</p><pre><code class="language-HTML">&lt;h1 class="bold text-2xl py-2 text-blue"&gt;Title One&lt;/h1&gt;
&lt;h1 class="bold text-2xl py-2 text-red"&gt;Title Two&lt;/h1&gt;
&lt;h1 class="bold text-2xl py-2 text-green"&gt;Title Three&lt;/h1&gt;</code></pre><p>While working with CSS, I can write a common class for repetitive styles and add that same class to markup.</p><ul><li><strong>Readability:-</strong></li></ul><p>It is the biggest downfall of tailwind CSS, readability. While adding these classes, the readability can be challenging.</p><p>Suppose you have a button like:-</p><pre><code class="language-HTML">&lt;button class="bg-red-500 text-white font-bold py-2 px-4 rounded mt-5 hover:bg-red-400 border border-red"&gt;
    Read More
&lt;/button&gt;
</code></pre><h1 id="conclusion">Conclusion</h1><blockquote>Should you use it in 2021? Definitely!</blockquote><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/12/ggg.gif" class="kg-image" alt="Utility-first CSS framework? - Tailwind CSS" loading="lazy" width="320" height="298"/></figure><p>As discussed above, tailwind CSS comes with some downfalls, but the advantages it offers are far bigger than these tradeoffs. The utility-first approach of the tailwind CSS makes it a great framework choice for design-oriented developers. In the end, choosing tailwind CSS for your next project can be a worthy inclusion.</p>]]></content:encoded></item><item><title><![CDATA[Drag and Drop Image Upload with HTML5 and ES6]]></title><description><![CDATA[Create drag and drop image upload with just HTML5 and Vanilla Javascript. Avoid the use of those heavyweight packages.]]></description><link>http://xenox.dev/drag-and-drop-es6-vanilla-js/</link><guid isPermaLink="false">Ghost__Post__5fb89e2250c14226c5290cd3</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[HTML5]]></category><category><![CDATA[ES6]]></category><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Tue, 24 Nov 2020 09:34:16 GMT</pubDate><content:encoded><![CDATA[<p>Sometimes I debate with my team that most of the things can be achieved by Vanilla JS without using an <em><strong>npm package</strong></em>. That's why I thought about writing a series on this. In this article, we will talk about HTML Drag and Drop API and try to create a Drag and Drop for images that you can then use in your project without using any package or library. So let's get started. 🏃🏾‍♂️</p><h3 id="creating-the-drop-zone-">Creating the Drop Zone 🧰</h3><p>In this example, We will be dragging the text, but you can drop anything on the drop zone.</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2020/11/Screen-Recording-2020-11-21-at-11.31-AM.gif" class="kg-image" alt="" loading="lazy" width="477" height="370"><figcaption>Creating Drag Zone</figcaption></img></figure><pre><code class="language-html">&lt;div class="outer-body"&gt;
    
  &lt;!--   Draggable h1 for test 🧐  --&gt;
  &lt;h1 draggable="true"&gt;Simple Drag and Drop 📦 &lt;/h1&gt;

  &lt;!--   Drop Area 📥 --&gt;
  &lt;div class="the-box" 
       id="magicBox" 
       ondragover="dragging(event)" 
       ondragleave="dragLeft()"&gt;

  &lt;/div&gt;
&lt;/div&gt;</code></pre><p>Drag API has a couple of Events which you can use to know each state of drag. In our case, to create an animation when the object is dragged on the drag zone, we will use two events <code>ondragover</code>  and <code>ondragleave</code> . Below is the list of all of them in case you want to create something more complex. For more details, check this <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API">MDN Doc</a>.</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/11/image.png" class="kg-image" alt="" loading="lazy" width="2000" height="629" srcset="https://authors.xenox.dev/content/images/size/w600/2020/11/image.png 600w, https://authors.xenox.dev/content/images/size/w1000/2020/11/image.png 1000w, https://authors.xenox.dev/content/images/size/w1600/2020/11/image.png 1600w, https://authors.xenox.dev/content/images/2020/11/image.png 2080w" sizes="(min-width: 720px) 720px"/></figure><p>Now let us write code to change the color of the border if one drags on the drag zone.</p><figure class="kg-card kg-code-card"><pre><code class="language-javascript">const magicBox = document.getElementById("magicBox");

// Change color of the box if something being dragged 🖍
const dragging = (e) =&gt; {
  e.preventDefault();
  magicBox.style = "border-color: rgba(164, 37, 228)";
};

// Back to initial stage when dragging ends 🏃🏾‍♂️
const dragLeft = () =&gt; {
  magicBox.style = "border-color: #c6c6c6";
};

</code></pre><figcaption>JavaScript code to handle the drag event.</figcaption></figure><h3 id="handling-drop-event-">Handling Drop Event 📥</h3><p>Now it's time handle drop on the drop zone. Let's start with simple steps first</p><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://authors.xenox.dev/content/images/2020/11/Screen-Recording-2020-11-21-at-12.39-PM.gif" class="kg-image" alt="" loading="lazy" width="548" height="428"><figcaption>Dropping image on Drop Zone</figcaption></img></figure><p>The event that we will use to handle drop is of course <code>ondrop</code> event. In HTML add the following code.</p><pre><code class="language-html">   &lt;!--   Drop Area 📥 --&gt;
  &lt;div class="the-box" 
       id="magicBox" 
       ondrop="onDrop(event)" 
       ondragover="dragging(event)" 
       ondragleave="dragLeft()"&gt;</code></pre><p/><p>Make sure you pass the <code>event</code> in the callback, as we will be using that to prevent default browser actions using <code>e.preventDefault()</code>, or else you may be redirected to a new page on document drop zone.</p><p/><pre><code class="language-javascript">// Alert when something is dropped 🔔
const onDrop = (e) =&gt; {
  e.preventDefault();
  alert("Hello There 👋");
  magicBox.style = "border-color: #c6c6c6";
};
</code></pre><h2 id="preview-and-upload-dropped-files">Preview and Upload Dropped files</h2><p>So finally it's time to upload the content to your server. This part is actually more about <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileList">FileList Object</a> because that's what Drop API returns when a file is dropped on the Drop Zone.</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/11/Screen-Recording-2020-11-21-at-12.59-PM.gif" class="kg-image" alt="" loading="lazy" width="466" height="379"/></figure><p/><p>Let's modify our <code>onDrop</code> Function a Lil bit. In the event you will have access to <code>dataTransfer</code> object which, will have a list of items dropped on the drop zone. If it's a file, it will be in the <code>files</code> object and if it's text you can use <code>ev.dataTransfer.getData("text/plain")</code> to get it's value. To know what else you can do with <code>dataTransfer</code> object check this <a href="https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer">MDN Doc</a>.</p><p/><pre><code class="language-javascript">// Handle File drop on Drop Zone 📥
const onDrop = (e) =&gt; {
  e.preventDefault();

  const { files } = e.dataTransfer;
  previewImage(files[0]);

  magicBox.style = "border-color: #c6c6c6";
};

// Appending Image to the Drop area 👩‍👦
const previewImage = (file) =&gt; {
  const img = document.createElement("img");
  img.src = URL.createObjectURL(file);
  magicBox.appendChild(img);
};</code></pre><p/><p>In <code>previewImage</code> function used <code>URL.createObjectURL()</code> to covert file object to URL that then can be passed into image's <code>src</code>. To upload, you can simply pass the object and upload it to your server.</p><pre><code class="language-javascript">// Create payload and upload to server 🚀
const upload = (files) =&gt; {
  const payload = { image: files };
  // Upload to your API 📤
};</code></pre><h2 id="codepen">CodePen</h2><!--kg-card-begin: html--><p class="codepen" data-height="446" data-theme-id="2031" data-default-tab="result" data-user="sarthology" data-slug-hash="mdEZmEN" style="height: 446px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="mdEZmEN">
  <span>See the Pen <a href="https://codepen.io/sarthology/pen/mdEZmEN">
  mdEZmEN</a> by Sarthak (<a href="https://codepen.io/sarthology">@sarthology</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async="" src="https://static.codepen.io/assets/embed/ei.js"/><!--kg-card-end: html--><h3 id="conclusion">Conclusion </h3><p><em>Think about it, in less than 30 lines of code, we created our on Drag and Drop box. FYI, I have used the same code to create drag and drop image upload feature for </em><a href="https://dev.to"><em>Dev.to</em></a><em>. That's it, folks. </em><br>I hope you enjoyed this article and have learned something new. I will be writing more in this series on how you can achieve more by writing less code in just Vanilla JavaScript. </br></p><p><br><strong><em>If you liked this, don't forget to subscribe. If you have any better way to do this add your comment in the comment section below. Bye 👋</em></strong></br></p><figure class="kg-card kg-image-card"><img src="https://media.giphy.com/media/GB0lKzzxIv1te/giphy.gif" class="kg-image" alt="" loading="lazy"/></figure>]]></content:encoded></item><item><title><![CDATA[Revisiting CSS feels Scary 😱 ?
‒ Not Anymore 😎]]></title><description><![CDATA[Organize your CSS for a better web design experience. Use order CSS properties for organizing your style sheets.]]></description><link>http://xenox.dev/revisiting-css-scary-not-anymore/</link><guid isPermaLink="false">Ghost__Post__5faa629450c14226c5290b3f</guid><category><![CDATA[CSS]]></category><category><![CDATA[WebDev]]></category><dc:creator><![CDATA[Rehan Alam]]></dc:creator><pubDate>Tue, 24 Nov 2020 05:53:57 GMT</pubDate><content:encoded><![CDATA[<h3 id="you-created-a-website-and-it-looks-exactly-like-the-design-you-re-happy-that-you-don-t-have-to-visit-that-css-file-again-the-next-day-the-client-called-and-wanted-some-changes-and-your-struggle-with-css-starts-again-">You created a website, and it looks exactly like the design. You're happy that you don't have to visit that CSS file again. The next day, the client called and wanted some changes, and your struggle with CSS starts, Again.</h3><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/11/tenor.gif" class="kg-image" alt="" loading="lazy" width="220" height="220"/></figure><p>CSS is a powerful tool and has improved the way the website looks and feels. But CSS is often confusing, chaotic, and hard to work with, especially when you're in the middle of the project or working on some redesigning. Revisiting the CSS feels like a headache. But there is a simple solution, and you will never feel that heartache again - "<strong>Introduce Order."</strong></p><p>When we write CSS, we are not concerned about how we are writing it. We are just focusing on the end results. And here lies the problem, the end results might change in the future. Hence, when we dread revisiting because the code now needs a large amount of work in both reading and then changing it to reflect the new design changes.</p><p>Introducing "order" in the CSS makes your job so simple that you will no longer dread revisiting your old style-sheets.</p><h2 id="what-is-order">What is Order?</h2><p>In short, ordering your CSS is a simple task of organizing the CSS properties, either in groups of similar properties or in alphabetical order.</p><h3 id="chaotic-css-">Chaotic CSS:-</h3><p>You keep on writing CSS till you reach the final result. You didn't worry about the Ordering of properties. It is a wrong approach since this makes it extremely hard to read the code in the future.</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/11/carbon-5-.png" class="kg-image" alt="" loading="lazy" width="926" height="1064" srcset="https://authors.xenox.dev/content/images/size/w600/2020/11/carbon-5-.png 600w, https://authors.xenox.dev/content/images/2020/11/carbon-5-.png 926w" sizes="(min-width: 720px) 720px"/></figure><h3 id="alphabetical-css-">Alphabetical CSS:-</h3><p>You write CSS alphabetically. Alphabetical sorting is the most straightforward way to organize your CSS style-sheets.<br>However, the problem with this approach is this is sort of random as properties like <strong>color</strong>, <strong>background</strong> could be at the top, and properties like <strong>height</strong> and <strong>width</strong> have other properties in between them.</br></p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/11/carbon-2-.png" class="kg-image" alt="" loading="lazy" width="926" height="1064" srcset="https://authors.xenox.dev/content/images/size/w600/2020/11/carbon-2-.png 600w, https://authors.xenox.dev/content/images/2020/11/carbon-2-.png 926w" sizes="(min-width: 720px) 720px"/></figure><h3 id="group-css-"> Group CSS:-</h3><p>It is the part where things got interesting. You group your properties in small chunks of code. That is, the same type of properties are stacked together.</p><p>These groups could be:-</p><ul><li>Layout Properties like position, display, etc.</li><li>Typography properties like font-size, font-weight, etc.</li><li>Visual Properties like Color, Background, etc.</li></ul><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/11/carbon-3-.png" class="kg-image" alt="" loading="lazy" width="926" height="1248" srcset="https://authors.xenox.dev/content/images/size/w600/2020/11/carbon-3-.png 600w, https://authors.xenox.dev/content/images/2020/11/carbon-3-.png 926w" sizes="(min-width: 720px) 720px"/></figure><p>It offers a great advantage as reading code becomes very easy. All flex properties are stacked together, and typography properties are stacked <strong>together!</strong></p><p>If you need to find a property, search for it in the respective block, and change/edit the value.</p><p>The problem is that there are many ways to group our properties. For example, we could create a group of font-properties, followed by background properties or layout properties followed by typography, followed by background. Here comes the tools like <em><u><a href="https://stylelint.io/">stylelint</a></u></em> for the rescue.<br><br>You don't have to worry about how to organize CSS properties. Let these tools do the organizing of your CSS, and you do what you do best; <strong>Code</strong>.</br></br></p><h2 id="conclusion">Conclusion</h2><blockquote><em><strong>"Introduce a little order, and every chaos will disappear"</strong></em></blockquote><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/11/order.gif" class="kg-image" alt="" loading="lazy" width="220" height="124"/></figure><p>The problem with CSS is that you could write it any way you like. But that is the reason why it becomes so hard to work with big CSS files and maintain the code in the future. Hence developers don't like CSS.</p><p><strong>Grouping your CSS properties together in chunks of similar properties will exponentially increase the readability of code and make it easy for you to revisit.</strong> </p><p>So whenever in the future client demands the changes, you know where to look for them.</p><p><em>Happy Coding:)</em></p>]]></content:encoded></item><item><title><![CDATA[Traced SVG placeholders for great user experience]]></title><description><![CDATA[Slow loading speed of a website is not only penalized by Google and other search engines, but it has an unfair disadvantage in regard to your visitors.]]></description><link>http://xenox.dev/traced-svg-image-placeholders-for-great-user-experience/</link><guid isPermaLink="false">Ghost__Post__5f842cdf50c14226c5290624</guid><category><![CDATA[UX]]></category><category><![CDATA[GatsbyJS]]></category><dc:creator><![CDATA[Akshay Thakur]]></dc:creator><pubDate>Wed, 18 Nov 2020 11:11:41 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2020/10/pexels-andrea-piacquadio-3807737.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2020/10/pexels-andrea-piacquadio-3807737.jpg" alt="Traced SVG placeholders for great user experience"/><p>Slow loading speed of a website is not only <strong>penalized by Google </strong>and other search engines, but it has an unfair disadvantage in regard to your visitors. When a website consumes even a little bit of time in loading, users bounce off the and conversion rates take a huge hit. According to a research in 2017, <strong>one full second can decrease conversion rates by 70%!</strong></p><h2 id="solution">Solution</h2><p>Now that we know how important it is to provide users with a fast website loading experience, let's see what we can do to improve ours.</p><p><strong>Gatsby JS - </strong>All Gatsby sites are fast by design. Gatsby loads only<strong> critical</strong> parts of the page, so your site loads as quickly as possible. Once loaded, Gatsby <strong>prefetches</strong> resources for other pages so that browsing through the site is smooth.</p><p>But that's not all. To understand this better, let's know about <strong>Perceived performance. </strong></p><blockquote><strong>Perceived performance</strong> is a subjective measure of how fast a website seems to a user based on load time. In terms of conversion rates, perceived performance is more important than the actual load and response times.</blockquote><p><a href="https://developer.mozilla.org/en-US/docs/Glossary/Perceived_performance">Perceived performance - MDN Web Docs Glossary: Definitions of Web-related terms | MDN</a></p><p>One way of increasing the perceived performance of a website is through loading indicators, i.e. loading "above the fold" contents first. Right now, we are going to talk about image loading and placeholders.</p><p>As images are usually the heaviest bits and hence take more time to load, improving their perceived loading speed can have a drastic effect.</p><p>Take a look at how Gatsby's home page loads.</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/10/new-1.gif" class="kg-image" alt="Traced SVG placeholders for great user experience" loading="lazy" width="1887" height="970"/></figure><p><a href="https://www.gatsbyjs.com/">https://www.gatsbyjs.com/</a></p><h2 id="implementation">Implementation</h2><p>First, you need to install <code>gatsby-image</code> and other dependencies if not installed already.</p><pre><code class="language-shell">yarn add gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp</code></pre><p>Update installed plugins in your <code>gatsby-config.js</code>.</p><pre><code class="language-js">module.exports = {
  plugins: [`gatsby-plugin-sharp`, `gatsby-transformer-sharp`],
}</code></pre><p>Also, you need to have a source plugin so that you can query images using <code>graphql</code>, so if your images are in your local filesystem you would setup <code>gatsby-source-filesystem</code> in <code>gatsby-config.js</code> like this:</p><pre><code class="language-js">const path = require(`path`)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}</code></pre><p>Now, you just need to import <code>Img</code> component and mention image processing specifications in the query itself like this:</p><pre><code class="language-js">import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) =&gt; (
  &lt;div&gt;
    &lt;h1&gt;Hello gatsby-image&lt;/h1&gt;
    &lt;Img fluid={data.images.edges[1].node.childImageSharp.fluid} /&gt;
  &lt;/div&gt;
)

export const imageData = graphql`
  query {
    images: allFile(
      filter: { relativePath: { glob: "portfolio/fullsize/*.png" } }
      sort: { fields: name }
    ) {
      edges {
        node {
          childImageSharp {
            fluid(traceSVG: { color: "#57bc88" }) {
              ...GatsbyImageSharpFluid_tracedSVG
            }
          }
        }
      }
    }
  }
`</code></pre><p>You can even specify color for traced SVG like I have, <code>#57bc88</code>. If you don't, it's grey by default.</p><p>There you have it! I applied this to my personal site and here's the result:</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/10/new1-1.gif" class="kg-image" alt="Traced SVG placeholders for great user experience" loading="lazy" width="1886" height="914"/></figure><p> <code>gatsby-image</code> provides many more amazing options, alongside great docs you can look at here: <a href="https://using-gatsby-image.gatsbyjs.org/">https://using-gatsby-image.gatsbyjs.org/</a></p><h2 id="conclusion">Conclusion</h2><p>Perceived performance of a website can make or break your user's experience, and henceforth, your website's growth. I hope this post aids in improving your web projects. I'll soon be posting about improving perceived performance and UX, so stay tuned by subscribing to XenoX. 👍</p>]]></content:encoded></item><item><title><![CDATA[Setting up ESLint the easy way 🤩]]></title><description><![CDATA[ESLint 101: The simplest and shortest guide to getting started with ESLint. 🚀]]></description><link>http://xenox.dev/eslint-the-easy-but-complete-guide/</link><guid isPermaLink="false">Ghost__Post__5f95030d50c14226c52907ce</guid><category><![CDATA[JavaScript]]></category><category><![CDATA[Eslint]]></category><category><![CDATA[Beginners]]></category><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Thu, 12 Nov 2020 06:55:42 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2021/02/ESLint-the-easy-Guide.png" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2021/02/ESLint-the-easy-Guide.png" alt="Setting up ESLint the easy way 🤩"/><p>I see you.<br>I know you are beginning a new project and thinking, "Alright, I will be using ESLint and I hope it works."<br>But let's be honest, it's not that easy. And the reason is that you are just getting started. Unless you have used ESLint in a project before, it's hard to figure out the settings to employ.<br>In this article, I will help you solve that problem.</br></br></br></p><p><em><a href="#tldr">tldr</a></em></p><p>The steps to get started are as follows:</p><h3 id="discuss-with-your-team-">Discuss with your Team 🤓</h3><figure class="kg-card kg-image-card kg-card-hascaption"><img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=2000&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExNzczfQ" class="kg-image" alt="Setting up ESLint the easy way 🤩" loading="lazy" width="3600" height="2400" srcset="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=600&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExNzczfQ 600w, https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1000&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExNzczfQ 1000w, https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=1600&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExNzczfQ 1600w, https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&amp;q=80&amp;fm=jpg&amp;crop=entropy&amp;cs=tinysrgb&amp;w=2400&amp;fit=max&amp;ixid=eyJhcHBfaWQiOjExNzczfQ 2400w" sizes="(min-width: 720px) 720px"><figcaption>Photo by <a href="https://unsplash.com/@youxventures?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">You X Ventures</a> / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Unsplash</a></figcaption></img></figure><p>You must remember that setting ESLint config is the foundation. It's like writing the constitution of a country. You need to agree on the rules that are important for your project, and ignore the ones that are not. But if just one person is deciding the rules, others may raise concern. So, it is better to discuss this with your team before setting up the project. It will hog <a href="https://lastmocha.com/the-one-and-only-guide-to-make-meetings-un-suck/">15 mins</a> of your time, but will save you hours later.  <br><br>If you are a lone wolf, you can skip this step. </br></br></p><h3 id="take-inspiration-c-v-">Take inspiration (<em>⌘+c ⌘+v</em>) 😅</h3><p>In the beginning, it's better to start with configs by well-known companies. One can always make changes to them when the project begins taking shape. Here's the list of some of the most popular ones to use:</p><ul><li><a href="https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb"><strong><em>Airbnb</em></strong></a><strong><em> </em></strong>🏡 : The one everyone ends up using.</li><li><em><strong><a href="https://github.com/eslint/eslint/tree/master/packages/eslint-config-eslint">ESLint</a> </strong></em>🛠: The one used by ESLint team themselves.</li><li><a href="https://github.com/google/eslint-config-google"><em><strong>Google</strong></em></a><em><strong> </strong></em>🕵🏿‍♂️:  This one's for google fanboys.</li></ul><p>Now, some less popular but more pratical ones:</p><ul><li><em><strong><a href="https://github.com/RyanZim/eslint-config-problems">Problems</a> </strong></em>🐞: Config that does not regulate your code style and only catches actual problems with your code.</li><li><em><strong><a href="https://github.com/EvgenyOrekhov/eslint-config-hardcore">Hardcore</a></strong></em> 💪🏽: The most strict (but practical) ESLint config.</li><li><a href="https://github.com/gajus/eslint-config-canonical"><strong><em>Canonical</em></strong></a><strong><em> </em></strong>👩🏽‍🎨: This one's the most comprehensive code style guide with more than 800 rules.</li></ul><p>So, these were the configs. You can use plugins too as your projects grows. </p><p>Next up is list of plugins to use.</p><h3 id="plug-in-awesomeness-">Plug-in Awesomeness 🔌</h3><p>Since plugins enhance every platform, then why exclude <em>ESLint. </em></p><p>Here's list of some super cool plugins to install in your project:</p><p><strong><em>To Improve Code Quality: </em></strong></p><ul><li><em><strong><a href="https://github.com/SonarSource/eslint-plugin-sonarjs">SonarJS</a> </strong></em><strong>🐞</strong>:<strong> </strong>Free Plugin for Bug Detection 🐛 and Code Smell Detection. 🐷</li><li><em><strong><a href="https://github.com/sindresorhus/eslint-plugin-unicorn">Unicorn</a> </strong></em>🦄:  A variety of remarkable ESLint rules</li></ul><p><strong><em>For Better React:</em></strong></p><ul><li><a href="https://github.com/evcohen/eslint-plugin-jsx-a11y"><em><strong>JSX - a11y</strong></em></a><em><strong> </strong></em><strong>✨ </strong>: Accessibility rules on JSX elements.<em><strong> </strong></em></li><li><a href="https://github.com/yannickcr/eslint-plugin-react"><em><strong>React</strong></em></a><em><strong> &amp; </strong></em><a href="https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks"><em><strong>React Hooks</strong></em></a><em><strong> </strong></em><strong>⚛️ </strong>: Linting rules for React &amp; React Hooks.</li></ul><p><strong><em>Mics:</em></strong></p><ul><li><em><strong><a href="https://github.com/nodesecurity/eslint-plugin-security">Security</a></strong></em> 🔐: ESLint rules for Node Security.</li><li><a href="https://github.com/jfmengels/eslint-plugin-fp"><em><strong>fp</strong></em></a><em><strong> </strong></em><strong>🏎</strong>: ESLint rules for functional programming.</li><li><em><strong><a href="https://github.com/lydell/eslint-plugin-simple-import-sort">Simple import sort</a></strong></em> 🔃 : Easy autofixable import sorting.</li><li><a href="https://github.com/selaux/eslint-plugin-filenames"><em><strong>Filenames</strong></em></a> 🗄: Ensures consistent filenames for your JavaScript files.</li></ul><p><strong><em>To Format Errors and Warnings:</em></strong></p><ul><li><em><strong><a href="https://github.com/fengzilong/eslint-formatter-mo">MO</a> </strong></em><strong>👩🏽‍🎨 </strong>: Good-looking ESLint formatter. </li></ul><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/10/image-4.png" class="kg-image" alt="Setting up ESLint the easy way 🤩" loading="lazy" width="1646" height="780" srcset="https://authors.xenox.dev/content/images/size/w600/2020/10/image-4.png 600w, https://authors.xenox.dev/content/images/size/w1000/2020/10/image-4.png 1000w, https://authors.xenox.dev/content/images/size/w1600/2020/10/image-4.png 1600w, https://authors.xenox.dev/content/images/2020/10/image-4.png 1646w" sizes="(min-width: 720px) 720px"/></figure><ul><li><a href="https://github.com/JamieMason/eslint-formatter-git-log"><em><strong>Git Log</strong></em></a><em><strong> </strong></em><strong>🐙</strong>: ESLint Formatter featuring Git Author, Date, and Hash.</li></ul><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/10/image-5.png" class="kg-image" alt="Setting up ESLint the easy way 🤩" loading="lazy" width="746" height="283" srcset="https://authors.xenox.dev/content/images/size/w600/2020/10/image-5.png 600w, https://authors.xenox.dev/content/images/2020/10/image-5.png 746w" sizes="(min-width: 720px) 720px"/></figure><h3 id="automatting-workflow-">Automatting Workflow 🤖</h3><p>After selecting the plugins most suitable for your project, we move to installing other packages to further improve the flow.</p><p><strong><em>Setting up git Hooks</em></strong></p><p>Pre commit hooks are cool as they remind developers that they are not done till the ESLint issues are fixed. The most popular plugin when it comes to hooks is <em><strong><a href="https://github.com/typicode/husky">Husky </a> </strong></em>🐶. </p><p>You can install this using:</p><pre><code class="language-bash">npm install husky --save-dev
yarn add husky -d</code></pre><p>And then, add this to your <code>package.json</code>:</p><pre><code class="language-json">  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint '*/**/*.{js,jsx}' --fix"
    ]
  },</code></pre><p><code>--fix</code> will auto-fix some problems and will save you loads of time.</p><p><strong><em>Setting up Github Actions</em></strong></p><p>Sometimes, by mistake or intentionally, developers may use <code>--no-verify</code> and force push to branch or generate PR. Here enters <a href="https://github.com/marketplace/actions/lint-action"><em><strong>Lint Action</strong></em></a><em><strong> </strong></em><strong>✨</strong>.</p><p>Just creat a file in <code>.github/workflow</code> branch, and name it anything but <code>lint.yml</code>.</p><pre><code class="language-yml">name: Lint

on: push

jobs:
  run-linters:
    name: Run linters
    runs-on: ubuntu-latest

    steps:
      - name: Check out Git repository
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 12

      # ESLint and Prettier must be in `package.json`
      - name: Install Node.js dependencies
        run: npm install

      - name: Run linters
        uses: wearerequired/lint-action@v1
        with:
          github_token: ${{ secrets.github_token }}
          # Enable linters
          eslint: true
          prettier: true
          auto_fix: true</code></pre><p>That's it, you will start seeing this in action.</p><p>The errors will start showing up like this:</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/10/image-6.png" class="kg-image" alt="Setting up ESLint the easy way 🤩" loading="lazy" width="1470" height="680" srcset="https://authors.xenox.dev/content/images/size/w600/2020/10/image-6.png 600w, https://authors.xenox.dev/content/images/size/w1000/2020/10/image-6.png 1000w, https://authors.xenox.dev/content/images/2020/10/image-6.png 1470w" sizes="(min-width: 720px) 720px"/></figure><p>It also auto-fixes the errors it can, and corrects it automatically.</p><p>Magic? Agreed. ✨</p><!--kg-card-begin: markdown--><h3 id="tldr">tldr; 💁🏽‍♀️</h3>
<!--kg-card-end: markdown--><p>Here's my config file, if you just want to skip all the hustle and go by my word, because this config is excellent for any <strong><em>React project.</em></strong></p><pre><code class="language-javascript ">module.exports = {
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module', 
    ecmaFeatures: {
      jsx: true 
    }
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  plugins: ['simple-import-sort'],
  settings: {
    react: {
      version: 'detect'
    }
  },
  extends: [
    'eslint:recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:react/recommended',
    'plugin:prettier/recommended', 
    'plugin:sonarjs/recommended',
    'plugin:unicorn/recommended',
    'plugin:security/recommended',
    'plugin:react-hooks/recommended'
  ],
  rules: {
    'no-console': 'error',
    'react/react-in-jsx-scope': 'off',
    'react/prop-types': 'off',
    'simple-import-sort/sort': 'error',
    'unicorn/filename-case': [
      'error',
      {
        cases: {
          camelCase: true
        }
      }
    ]
  }
};
</code></pre><p>Lastly, don't forget to install all those packages as well, or just copy this in your <code>package.json</code> and run <code>yarn install</code>.</p><pre><code class="language-JSON">  "devDependencies": {
    "eslint": "^7.5.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-formatter-git-log": "^0.5.3",
    "eslint-formatter-mo": "^1.0.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-security": "^1.4.0",
    "eslint-plugin-simple-import-sort": "^5.0.3",
    "eslint-plugin-sonarjs": "^0.5.0",
    "eslint-plugin-unicorn": "^23.0.0",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.11",
    "prettier": "2.0.5",
  },</code></pre><h3 id="conclusion">Conclusion</h3><p>Well, this article is over, but the series is just starting. </p><p>In this is series, <strong><em>"DevOps by Dummy"</em></strong>, we will learn how to implement DevOps to projects, or simply how to organise the workflow to be as productive as you can. We'll also upload a free video course soon. </p><h3 id="want-to-make-sure-you-don-t-miss-a-thing">Want to make sure you don't miss a thing?</h3><p>Subscribe to the awesomeness now, and we got you! ☺️</p>]]></content:encoded></item><item><title><![CDATA[Next.js Component level SCSS setup]]></title><description><![CDATA[Keeping the SASS files in the component folder is a bit tricky in Next.js. In this article, we will try to make that easy.]]></description><link>http://xenox.dev/using-component-level-sass-in-next-js/</link><guid isPermaLink="false">Ghost__Post__5f7daab150c14226c5290597</guid><category><![CDATA[sass]]></category><category><![CDATA[CSS]]></category><category><![CDATA[next.js]]></category><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Fri, 30 Oct 2020 06:29:49 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2020/10/Next.js-SASS-2.png" medium="image"/><content:encoded><![CDATA[<h3 id="problem">Problem </h3><img src="https://authors.xenox.dev/content/images/2020/10/Next.js-SASS-2.png" alt="Next.js Component level SCSS setup"/><p>If you are anything like me, you like things arranged in a systematic manner.</p><figure class="kg-card kg-image-card"><img src="https://authors.xenox.dev/content/images/2020/10/image-3.png" class="kg-image" alt="Next.js Component level SCSS setup" loading="lazy" width="442" height="890"/></figure><p>I like to use this folder structure to keep my <em><strong>CSS/SCSS</strong></em> in its respective component, as it effectively establishes the separation of concern. </p><p>Achieving this in Next.js if you are using SASS, is bit of a hassle. While trying to do the same, you may encounter this error:</p><pre><code class="language-Bash">error - ./components/Navbar/navbar.styles.scss
Global CSS cannot be imported from files other than your Custom &lt;App&gt;. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).</code></pre><h3 id="solution">Solution</h3><p>I'm assuming that you have already installed SASS for your Next.js project.</p><p>If not, you can install it using the following:</p><figure class="kg-card kg-code-card"><pre><code class="language-bash">yarn add @zeit/next-sass node-sass</code></pre><figcaption>Install next-sass and node-sass to your project</figcaption></figure><p>Next, you need to create a file named <code>next.config.js</code> with the following lines in it, to enable SASS.</p><figure class="kg-card kg-code-card"><pre><code class="language-Javascript">const withSass = require("@zeit/next-sass");
module.exports = withSass();

// If you already have some config

module.exports = withSass({
  target: 'serverless',
  env: {
    JWT_SECRET: process.env.JWT_SECRET
  }
});
</code></pre><figcaption>Add custom setting to enable component level SCSS</figcaption></figure><p>That's it! It's up and running, and everything looks neat and in place now. <br/></p><!--kg-card-begin: markdown--><p><img src="https://media.giphy.com/media/BW5OaeGBHVBf2/giphy.gif" alt="Next.js Component level SCSS setup" loading="lazy"/></p>
<!--kg-card-end: markdown--><h3 id="conclusion">Conclusion</h3><p>If this solution worked for you, I will be providing answers to many Next.js related queries in the series, <strong>Next Station. </strong>So make sure you subscribe to receive the updates. </p><p>Do mention the queries in the comment section below and I hope to see you soon!</p><p> </p>]]></content:encoded></item><item><title><![CDATA[Make a Linux dev server for less than 50$/life 😱]]></title><description><![CDATA[Convert Raspberry Pi into your local dev server to deploy and test locally. Can be used by anyone in your network. ]]></description><link>https://dev.to/teamxenox/make-a-linux-dev-server-for-less-than-50life--3gc7</link><guid isPermaLink="false">Ghost__Post__5f72f22e50c14226c529051a</guid><category><![CDATA[Beginners]]></category><category><![CDATA[Productivity]]></category><category><![CDATA[WebDev]]></category><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Tue, 29 Sep 2020 08:38:52 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2020/09/pexels-field-engineer-442150.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2020/09/pexels-field-engineer-442150.jpg" alt="Make a Linux dev server for less than 50$/life 😱"/><p>In case you didn't already know this, Raspberry Pi is an absolutely brilliant piece of hardware. It is gold when it comes to doing fun and crazy experiments, and I personally think it's a device that every developer should own. There are a lot of things that you can do with a Raspberry Pi, but in this article, we are going to make a dev server for your team. So let's get started 👨🏻‍💻</p><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/stnbbvUVJSxkA/giphy.gif" class="kg-image" alt="Make a Linux dev server for less than 50$/life 😱" loading="lazy"/></figure><h3 id="1-prerequisites">1. Prerequisites</h3><p>First things first, this is ideal if you have a small team working in the same office as you or if you work alone. If that's not the case, don't worry, I have this <a href="https://m.do.co/c/12642f967cd1">coupon</a> for you. Anyways, to start, you need the following things in starting.</p><p><strong><em>Hardware</em></strong></p><p><strong>1. Raspberry Pi</strong> (duh!)<br><strong>2. Wifi dongle or Ethernet Cable</strong><br><strong>3. Micro SD Card</strong>(8GB+)<br><strong>4. HDMI Cable</strong>*<br><strong>5. Monitor</strong>*<br><strong>6. USB keyboard</strong>*</br></br></br></br></br></p><p>*<em>optional</em></p><p><strong><em>Software</em></strong></p><p><strong>7. BalenaEtcher</strong> 👉🏼 <a href="https://www.balena.io/etcher/">Download</a><br><strong>8. Raspbian Stretch Lite</strong> 👉🏼 <a href="https://www.raspberrypi.org/downloads/raspbian/">Download</a><br><em>or</em><br><strong>8. Ubuntu</strong> 👉🏼 <a href="https://wiki.ubuntu.com/ARM/RaspberryPi">Download</a></br></br></br></p><h3 id="2-booting-the-micro-sd">2. Booting the Micro SD</h3><p>For this, we will use BalenaEtcher. Although it's completely optional, if you are a beginner, you'd prefer this. This makes it really easy to install and saves a lot of time.</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9zw7wXWq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/db1unfe9i2mpvxgdumth.png" class="kg-image" alt="Make a Linux dev server for less than 50$/life 😱" loading="lazy"/></figure><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Dn02lSUh--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/4icstdzbw0u1xfabqi6s.png" class="kg-image" alt="Make a Linux dev server for less than 50$/life 😱" loading="lazy"/></figure><p>If not, these commands can be used:<br/></p><pre><code>diskutil list
</code></pre><p>Recognize your card using this command as this command will give you a list of all the drives available</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IycKVvzS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/nnsf2d6q1y4nibcs22ow.png" class="kg-image" alt="Make a Linux dev server for less than 50$/life 😱" loading="lazy"/></figure><p>Next, unmount your disk using:<br/></p><pre><code>diskutil unmountDisk /dev/disk3
</code></pre><p>Now flash your card using this command, and do remember to change values according to your computer:<br/></p><pre><code>sudo dd bs=1m if=/Path/to/image/ubuntu-16.04-preinstalled-server-armhf+raspi3.img.xz  of=/dev/disk3 conv=sync
</code></pre><p>To check status, press <code>cntrl+t</code>. If something breaks, check this <a href="https://www.raspberrypi.org/documentation/installation/installing-images/README.md">guide</a>.</p><h3 id="3-running-the-raspberry-server">3. Running the Raspberry Server</h3><p>So in this section, I will demonstrate how to set up your server with the Raspbian image. When you plug in power and see something like this, that means you are good to go, give it some time to boot up.</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JHmkUGwe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/3aemdw16yqmivnc6x1to.gif" class="kg-image" alt="Make a Linux dev server for less than 50$/life 😱" loading="lazy"/></figure><p><em>NOTE: If you have Ethernet cable, you don't even need a monitor, though if something goes wrong with bootup, you won't be able to debug it. So it's good to have one.</em></p><p>After bootup, It will ask you for username and password. Following are the default values:</p><p><strong>Default Username:</strong> <em>pi</em><br><strong>Default Password:</strong> <em>raspberry</em></br></p><p>Once you are logged in, check if the internet is working fine by running <code>ping 8.8.8.8</code>. If everything is working fine, these are the commands that you need to run next.<br/></p><pre><code>apt-get install update 
apt-get install upgrade
</code></pre><p>Now, this is the most important step to set up your Raspberry Pi, run:<br/></p><pre><code>sudo raspi-config
</code></pre><p>This command is your friend. Using this, you can configure pretty much anything in Raspberry Pi. Here are a few useful ones:</p><h5 id="go-wireless-with-a-wifi-dongle">Go wireless with a Wifi Dongle</h5><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/9uIwFx9ZQVK1tfuda0/giphy.gif" class="kg-image" alt="Make a Linux dev server for less than 50$/life 😱" loading="lazy"/></figure><p>Add a Wifi name and password, and boom! You are done.</p><h5 id="enable-disable-ssh">Enable/Disable SSH</h5><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/QMsSbdOMLex2ol3Jml/giphy.gif" class="kg-image" alt="Make a Linux dev server for less than 50$/life 😱" loading="lazy"/></figure><h5 id="expand-filesystem">Expand Filesystem</h5><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/xVSkOQWLVYGA27K5gm/giphy.gif" class="kg-image" alt="Make a Linux dev server for less than 50$/life 😱" loading="lazy"/></figure><p>By default, all the space on your SD card won't be available to you, but using this, you can have all that good space.</p><h5 id="connect-to-internet-while-boot-up">Connect to Internet While Boot Up</h5><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/1zjzJZCyRzDSZjXHl3/giphy.gif" class="kg-image" alt="Make a Linux dev server for less than 50$/life 😱" loading="lazy"/></figure><p>Most important, this will ensure that your server is connected to the internet.</p><h3 id="4-connect-to-your-server-">4. Connect to your server 🥳</h3><p>Finally, connecting now is really easy. Just use command:<br/></p><pre><code>ssh pi@your-ip-address
</code></pre><p><em>Note:</em><br><em>1. If you don't know your IP address, use<code>/sbin/ifconfig wlan0</code></em><br><em>2. You should be on the same network as the Raspberry Pi</em></br></br></p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kkNT7Y4p--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/9lnmlsg9emnx4clv5tq0.png" class="kg-image" alt="Make a Linux dev server for less than 50$/life 😱" loading="lazy"/></figure><p>Now, let's install nginx on our server with this simple command.<br/></p><pre><code>sudo apt-get install nginx
</code></pre><p>After this, open your browser and add the IP address of the Raspberry Pi. If everything is good, you will see this.</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fSUX3DK9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/oanjmahdpmoyrdzvcbn4.png" class="kg-image" alt="Make a Linux dev server for less than 50$/life 😱" loading="lazy"/></figure><p><strong><em>CONGRATULATIONS! YOUR SERVER IS UP AND RUNNING!!</em></strong></p><h3 id="conclusion">Conclusion</h3><p>I hope you guys will enjoy doing this as much as I did. I will make sure to post more such experiments. If you get stuck somewhere, feel free to ask questions in the comments section below.<br>Okay guys, I have to go now. Throwing a party in the office with all that 🤑 money 🤑 we saved today. 😂😆</br></p>]]></content:encoded></item><item><title><![CDATA[The only way to improve your CSS game👩🏾‍🎨]]></title><description><![CDATA[The most practical guide for improving your CSS in 60 days or less. Follow the steps to be CSS Ninja.]]></description><link>https://dev.to/teamxenox/the-only-way-to-improve-your-css-game-1m2k</link><guid isPermaLink="false">Ghost__Post__5f72efe750c14226c52904f1</guid><category><![CDATA[CSS]]></category><category><![CDATA[WebDev]]></category><category><![CDATA[Beginners]]></category><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Tue, 29 Sep 2020 08:30:39 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2020/09/pexels-pixabay-259756-1.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2020/09/pexels-pixabay-259756-1.jpg" alt="The only way to improve your CSS game👩🏾‍🎨"/><p>I have been mentoring developers since 2013, and I can never stop putting emphasis on how important mastering HTML and CSS is if you want to make your career in the World Wide Web. It's been 6 years now and CSS is more powerful than ever. Thanks to Javascript, now you can make desktop and mobile apps as well using HTML and CSS, and that makes learning CSS even more important. Despite that, so many devs I know are either afraid of it or just not interested in learning it. It's no surprise then that memes like this one are a staple in the Dev community 😃</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--xR9L9QJo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/4iw2r4pttjzplxcp6cgp.gif" class="kg-image" alt="The only way to improve your CSS game👩🏾‍🎨" loading="lazy"/></figure><p>I recently conducted a poll on a Telegram Group <a href="https://t.me/bestofdev">Dev.to</a> I created, where I share important dev resources (do check it out btw). The results were as follows:</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--vzrbVMl3--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/e3x1d1tljxwc8gd0grn1.png" class="kg-image" alt="The only way to improve your CSS game👩🏾‍🎨" loading="lazy"/></figure><p>More than 60 people out of 100 actually want to improve their CSS. That's a huge number. That's why I decided to write this article. I'm also going to share some helpful tricks that I share with my juniors. So let's get started.</p><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/7XuzvVcyCheHPsaIlI/giphy.gif" class="kg-image" alt="The only way to improve your CSS game👩🏾‍🎨" loading="lazy"/></figure><h3 id="be-sure-about-it-">Be Sure About it 🤔</h3><p>Well yes, the first step of taking one step forward is actually taking one step back. You have to be very clear in your head that you want to master it. Learning the basic concepts is not that hard, but things get hard quickly when you want to bring in perfection. To be a run-of-the-mill fullstack developer, you just need to know the basics. But if you want to be a <strong>BADASS FULLSTACK NINJA</strong>, you gotta be a perfectionist. 😎🐱‍👤</p><p>If you have decided to a badass fullstack ninja, remember that Rome wasn't built in a day. You will have to practice daily on it. But I assure you that if you do this, you <em>will</em> be one; and I know this because I have seen people transforming and evolving with every single day of practice.</p><h3 id="be-a-hunter-gatherer-">Be a hunter-gatherer 🗄</h3><p>Curiosity helps you discover wonders and the same is true for learning CSS. Every day, we visit dozens of websites, made by top achievers in their fields. It's like free master classes. The CSS code is very easy to peek into and learn from. In my initial days of learning, that's how I used to learn about new CSS properties. So every time you see something cool on a website, just inspect it using your Inspect Element tool.</p><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/xGdvlOVSWaDvi/giphy.gif" class="kg-image" alt="The only way to improve your CSS game👩🏾‍🎨" loading="lazy"/></figure><p>Once you've hunted some Properties and Tricks, the next step is to start gathering it by making snippets. No matter what code editor you use, they all either have a built-in feature to save snippets or you can achieve it using a plugin. If you use VS Code, check out <a href="https://dev.to/matthewbrophy/code-snippets---a-beginners-guide-p4d">this article.</a></p><h3 id="take-the-dribbble-challenge-">Take the Dribbble Challenge 🏅💪🏼</h3><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--GvLnYllt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ehxckdrn59mx135nkbo4.png" class="kg-image" alt="The only way to improve your CSS game👩🏾‍🎨" loading="lazy"/></figure><p>I love Dribbble, it's a great source of inspiration when you are stuck. But in my team, it's popular for one reason <strong>"The Dribbble Challenge"</strong>. The Dribbble challenge is very simple: find someone who's good with CSS or Design (if you don't know one, tweet me anytime <a href="https://twitter.com/sarthology">@sarthology</a> ). They will randomly choose a design from Dribble and give it to you for practice. Your task is to try and replicate it, and go as close to it as you can using just HTML and CSS. Then take a screenshot of it and send it back to that friend. Then your friend will give you a score of anywhere between 1-5 on the basis of how close you got to the original design. Do this daily for the next 30 days. I gave this challenge to one of my colleagues and it helped her greatly. This was her submission for the 7th day of the challenge.</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fTfccRKZ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/x9nxge06st8exwdi5btq.png" class="kg-image" alt="The only way to improve your CSS game👩🏾‍🎨" loading="lazy"/></figure><p>Crazy. right? But I gave her 3.5/5 as I noticed a few things were still not like the original design. The one thing that you will learn from this challenge is the most important part of being a good CSS Developer, and that's <em>Respecting the Designer's Work</em>. Your job as a developer is to do justice to the design given to you by the UX/UI designer. It should be exactly the same.</p><p>That will technically help you with two things:</p><ul><li>This will promote the development of a good design sense in you.</li><li>This will start your journey to explore more CSS properties in order to get the job done.</li></ul><h3 id="don-t-leave-devtools-">Don't leave Devtools 🏃🏻‍♂️</h3><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XsTIHDfU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/ce3g3x15a7cli56f74be.png" class="kg-image" alt="The only way to improve your CSS game👩🏾‍🎨" loading="lazy"/></figure><p>This the first mistake I see devs usually making. They keep shifting between their editor and browser. Not only is this counterproductive, it is also frustrating as hell. Here is a fun fact: <em>I write 90% of my CSS code in Devtools</em> and it's freakishly fast. Devtools are so powerful that you just need to go to editors to write your HTML skeleton. So the next tip to up your CSS game is mastering Devtools. Here are a few great resources to get started:</p><ol><li><strong><em><a href="https://css-tricks.com/devtools-for-designers/">DevTools for Designers</a></em></strong> - <em>CSS Tricks</em></li><li><strong><em><a href="https://blog.logrocket.com/firefox-devtools-for-css-authors-1511f41d1e3/">Firefox DevTools for CSS authors</a></em></strong> - <em>Log Rocket</em></li><li><strong><em><a href="https://www.youtube.com/watch?v=Z3HGJsNLQ1E">Better CSS Coding &amp; CSS Debugging with Developer Tools</a></em></strong> - <em>LearnCode.academy</em></li><li><strong><em><a href="https://www.youtube.com/watch?v=S36N8RGdY2U">14 Firefox Developer Tools You Might Not Know About </a></em></strong>- <em>Envato Tuts+</em></li></ol><h3 id="don-t-miss-out-on-the-new-stuff-">Don't miss out on the new stuff 🧐</h3><p>CSS is improving day by day. There is always something new coming up. It's better to keep your eyes open in case you stumble upon a gem. Remember what we talked about? Be a hunter-gatherer! People can make insanely amazing things with just great CSS, and no matter how many times you see one of these, it always blows your mind. You just wanna go, <em>"How the hell did they do that in CSS?"</em> We should aspire to reach that level, and there are few great websites to follow if you wanna do that:</p><ul><li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS">MDN Web Docs</a></li><li><a href="https://tympanus.net/codrops/">Codrops</a></li><li><a href="https://codepen.io/">Codepen</a></li><li><a href="https://alistapart.com/">A list apart</a></li><li><a href="https://css-tricks.com/">CSS-Tricks</a></li><li><a href="https://freefrontend.com/">Free Frontend</a></li><li><a href="https://csswizardry.com/archive/">CSS Wizardry</a></li></ul><h3 id="contribute-to-open-source">Contribute to Open Source</h3><p>As odd as it may sound, it's important. Once you are confident enough that your CSS skills have greatly improved and you have gained your super badass ninja status, you need to rush to Open Source projects, because <strong>With Great Powers Comes Great Responsibility</strong>. Those projects need you!<br>Not only will this help you elevate your skills even more but it will also help the OS community at large. Many good Open Source teams are constantly in need of a developer who can handle CSS well. This will also help you in polishing your design sense and develop your own artistic style, as you know, any great product requires a dash of creativity of your own. Many great Open source tools lack good design. Go and hunt a few such good products on Github, Fork them, add your CSS, and submit your Pull Request.</br></p><p><em>May the Source Be with You.</em></p><h4 id="in-the-end">In the end</h4><p>If you follow all the tips mentioned in this article, your CSS will improve drastically in 60 days or less. I know this for a fact as I have seen it work for countless devs I have mentored over the years. It will be a slow process but totally worth it, and it will be infinitely better than simply complaining how bad you are with CSS for the rest of your career. I also recommend you guys to check out <a href="https://cssbattle.dev/">CSS Battle</a> and challenge other devs because​ why not? 😃 That's it from my side, guys. If you know some cool tools or resources you want to share, the comment section is all yours to glorify. See you next time, folks. Happy coding!</p><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/7DzlajZNY5D0I/giphy.gif" class="kg-image" alt="The only way to improve your CSS game👩🏾‍🎨" loading="lazy"/></figure>]]></content:encoded></item><item><title><![CDATA[Philosophy of a Good Developer]]></title><description><![CDATA[It’s been a long time since we talked about something philosophical. So I thought I'd write a new post for you all, this time going back to basics. There's something I've been thinking about a lot lately.]]></description><link>https://dev.to/teamxenox/philosophy-of-a-good-developer-30c2</link><guid isPermaLink="false">Ghost__Post__5f72eed050c14226c52904e0</guid><category><![CDATA[Productivity]]></category><category><![CDATA[WebDev]]></category><category><![CDATA[Beginners]]></category><category><![CDATA[Career]]></category><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Tue, 29 Sep 2020 08:25:52 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2020/09/pexels-burst-374016.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2020/09/pexels-burst-374016.jpg" alt="Philosophy of a Good Developer"/><p>It’s been a long time since we talked about something philosophical. So I thought I'd write a new post for you all, this time going back to basics. There's something I've been thinking about a lot lately.</p><h4 id="who-is-actually-a-good-developer">Who is actually a good developer?</h4><p>Well, of course, the answer we're exploring today is not strictly technical, but goes beyond that. Even if you are technically super strong, you can still be a bad developer. I’m sharing my thoughts as a long-time product manager, programmer and techie. To some of you, a few of the points might feel familiar and perhaps even obvious, but there's a reason they're here. I am certain most of you will find something to learn and improve upon, so stay with me until the end, because Rule #6 is the most important of them all.</p><p>Let’s explore what it takes to actually be a good developer. 😇😇</p><h3 id="rule-1-don-t-be-a-lone-wolf-">Rule 1: Don’t be a lone wolf 🐺</h3><p>When you are working on a commercial application or project, the first thing you need to understand is that your code is not just your code; it will be read and reviewed by multiple people. Even if right now, you are the only one working on the project, someone else will have to read and understand it in the future. Your code should be readable, not only for you but also for anyone else who might join the project down the line.</p><p>So make sure that you:</p><p><strong><em>1. Don't use silly variables names</em></strong></p><p>Oh yeah, I know most of us have been there and done that. To some of us, it might even seem like a bit of harmless fun, but that's far from the truth. Don't use random variable names; that's what rookies do. Your variable name should always make it clear what its purpose is. You need to understand that code will not only be interpreted by the computer but by humans as well.<br/></p><pre><code class="language-Javascript">
    let vx34 = "Something" // ❌
    let x = "Something" // ❌
    let boxycat = "Something" // ❌

    let catCount = 34 // ✅
    let user_message = "Something" // ✅

</code></pre><p><strong><em>2. Always use comments</em></strong></p><p>When defining a function, along with giving it a proper name, make sure that you use comments. Of course, you don't have to do it everywhere, but more often than not, it helps to further clarify your intent with code comments. The rule of thumb is <em>Write a comment if it can save another developer's time to understand the code</em>. If another dev has to go back and forth in the code just to understand a single function and what it's actually doing, that's bad code. Be foresighted, add appropriate comments where needed.</p><p>Using Documentation Generators like JSdoc can also be efficient. Not only will your comments look good but it will also support a few cool IDE features like function definitions preview.<br/></p><pre><code class="language-Javascript">
/**
 * Represents a book.
 * @constructor
 * @param {string} title - The title of the book.
 * @param {string} author - The author of the book.
 */
function Book(title, author) {

}
</code></pre><p>To learn more about JSdoc, check out <a href="https://dev.to/paulasantamaria/document-your-javascript-code-with-jsdoc-2fbf">this</a> article.</p><p><strong><em>3. Make a project wiki</em></strong></p><p>This is mostly ignored, but it's a highly critical rule to follow. See, the thing is programming is not a linear process. You might stumble upon a dozen problems while trying to make something work. Whatever it is, write it down. Let's say, even if it's just a problem that you faced while installing MongoDB on your Linux machine, write down every piece of information that can help your teammates solve this same problem if they ever run into it in the future. A well-documented code always has a well-documented wiki. How to run the dev env, how to use the design system, how to export env variables locally, whatever it is, <strong>write a wiki!</strong> Trust me, you will save a lot of your (and your team's) time. Here are some useful links that I found:</p><ul><li><a href="https://guides.github.com/features/wikis/">Documenting your projects on GitHub</a></li><li><a href="https://docs.gitlab.com/ee/user/project/wiki/">How to write wikis in Gitlab</a></li></ul><p><strong>And oh, while we're on the topic of documentation, here's a neat little tool you can use to read your node modules' documentation easily.</strong></p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://dev.to/teamxenox/moddoc-a-new-way-to-read-documentation-of-node-modules-3ok4"><div class="kg-bookmark-content"><div class="kg-bookmark-title">🐶 ModdoC: A new way to read Documentation of Node Modules</div><div class="kg-bookmark-description">We all use node modules in our projects, and we have to read their documentation over and over. But g...</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://res.cloudinary.com/practicaldev/image/fetch/s--t7tVouP9--/c_limit,f_png,fl_progressive,q_80,w_192/https://practicaldev-herokuapp-com.freetls.fastly.net/assets/devlogo-pwa-512.png" alt="Philosophy of a Good Developer"><span class="kg-bookmark-author">DEV Community</span><span class="kg-bookmark-publisher">Sarthak Sharma</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2sUWPTfn--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/wu12bjov96jo9tohs0gd.png" alt="Philosophy of a Good Developer"/></div></a></figure><p><strong><em>4. Format code properly</em></strong></p><p>Last but not the least, indenting code well. I recommend using tools like prettier to make this easy. You can enable the "format on save" feature also; I love this feature. Here is the <a href="https://dev.to/robertcoopercode/using-eslint-and-prettier-in-a-typescript-project-53jb">full guide</a> on how to do it.<br/></p><pre><code class="language-javascript">
// Bad 🙅🏻‍♂️ ❌
function Book(title, author) {
if(data){
let data = false
}
}

// Good 🤩 ✅
function Book(title, author) {
  if(data){
    let data = false
  }
}

</code></pre><p>So do remember that working on a project is a collaborative effort. Save everyone's time by using the above tips. As Ned Stark said:</p><blockquote>"The lone wolf dies but the pack survives." 🐺☠</blockquote><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/4UMwhs4FDi0SI/giphy-downsized-large.gif" class="kg-image" alt="Philosophy of a Good Developer" loading="lazy"/></figure><h3 id="rule-2-you-can-t-remember-it-all-">Rule 2: You can't remember it all 🤔</h3><p>So imagine it's a regular day, you're working on something and then suddenly, you notice that something else is broken. You know how to fix it but really don't have the bandwidth right now. So you decide to make a mental note of it and get back to it later. But you never do.</p><p>Sounds familiar? Well, that's just how the human brain works. 🧠 In this particular context, think of your brain as RAM. It remembers certain things during a process and then erases them later, which is exactly why we need to write things down. Computers save things to their hard drives, and in the same manner, we should be writing down important things as well if we want to recall them later. It sounds like such a basic thing to do and yet so many of us struggle with it.</p><p>Writing these things down is also supremely helpful in building great software because it lets you focus on the task at hand while also giving you a big picture view when needed. <strong>More on this later in Point #6</strong>!</p><p>Using <code>TODO:</code> comments is highly effective. This can not only help <em>you</em> remember to do certain tasks later but can also encourage your fellow teammates to do those tasks instead if you couldn't get to them for some reason.</p><p>But if you wanna step up your game, I recommend using a tool like Todo Plus</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--v1sDTWlt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://github.com/fabiospampinato/vscode-todo-plus/raw/master/resources/demo/embedded.gif" class="kg-image" alt="Philosophy of a Good Developer" loading="lazy"/></figure><p>With this, you can either create a to-do file or track all your <code>TODO:</code> comments in a single file. Highly recommend it.</p><p>So don't just keep things in your mind palace. <strong>Write them down!</strong>.</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fFpT_FB7--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/http://giphygifs.s3.amazonaws.com/media/6SaVutI40pCKc/giphy.gif" class="kg-image" alt="Philosophy of a Good Developer" loading="lazy"/></figure><h3 id="rule-3-get-into-the-user-s-shoes-">Rule 3: Get into the user's shoes 🥾</h3><p>As developers, technically you are the first users of the app. Your work is not limited to writing logic or completing features. You also need to ensure that the feature(s) you are building is actually usable. Always ask yourself: If I were the intended user of this app, would I be able to use it? The answer to this should always be a resonant yes. Test all the features to pass <em>your</em> standards first, and as a computer engineer, those standards - as well as your expectations from a feature - should be high. Don't wait until the QA team gives you a list of bugs, NO! If you are having trouble understanding the user's perspective, sit down with your PM and understand it. It's okay if you can't fully wrap your mind around it, but you must always try.</p><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/LOcPt9gfuNOSI/giphy.gif" class="kg-image" alt="Philosophy of a Good Developer" loading="lazy"/></figure><p><br>This is especially important for full stack developers. If you don't just want to be a full stack developer in name but rather a champion of the people 🏆, you <em>must</em> learn how to do many things well, including UIX design. I talk about this in detail in my article on how to improve your CSS, which is a powerful tool for any full stack dev.</br></p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://authors.xenox.dev/the-only-way-to-improve-your-css-game/"><div class="kg-bookmark-content"><div class="kg-bookmark-title">The only way to improve your CSS game👩🏾‍🎨</div><div class="kg-bookmark-description">The most practical guide for improving your CSS in 60 days or less. Follow the steps to be CSS Ninja.</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://xenox.dev/favicon.png" alt="Philosophy of a Good Developer"><span class="kg-bookmark-author">XenoX</span><span class="kg-bookmark-publisher">Sarthak Sharma</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://xenox.dev/content/images/2020/09/pexels-pixabay-259756-1.jpg" alt="Philosophy of a Good Developer"/></div></a></figure><h3 id="rule-4-no-shortcuts-">Rule 4: No Shortcuts...</h3><p>...except the application shortcuts. 😜<br>There are many best practices for devs based on this rule only. I'm sure you have been in a situation where you have to make the same or similar thing multiple times, and you find yourself copy-pasting the same code over and over again. In a corner of your heart, you <em>know</em> that redundancy isn't good, and following the separation-of-concern rule, you should probably make a function out of it. But your lazy brain tells you it could take a long time, so you decide to skip it. After all, you're saving time you could put into building a new feature, right? Wrong! By doing so, you decrease the performance of the app and end up wasting more time when you revisit it to remove that redundant code. And trust me, it's damn frustrating!</br></p><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/xThta3k6D1l7T88GE8/giphy.gif" class="kg-image" alt="Philosophy of a Good Developer" loading="lazy"/></figure><p><br>Anything worth doing, is worth doing right!</br></p><p>You will face many other situations like this on a daily basis, and you will have two choices: the easy one and the right one. So just take that extra leap and do it. <strong>There are no shortcuts.</strong> 🙅🏼‍♂️🚫</p><h3 id="rule-5-don-t-play-the-blame-game-">Rule 5: Don't play the blame game 😡</h3><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/1kTU881Qh2bE5qUOl0/giphy.gif" class="kg-image" alt="Philosophy of a Good Developer" loading="lazy"/></figure><p>As a PM, I have faced this problem countless times that whenever something is broken, developers are quick to point fingers at each other. This does nothing but damages the teamwork. We need to understand that it's a team game. If you knew about the existence of a certain issue already and you did nothing to fix it or even bring it to light, you are equally responsible. Always take full responsibility and ownership for the project and don't play the blame game.</p><p>Great teams do it on a subconscious level, and I've seen it work so well. Good managers help in fostering this approach while bad ones do the exact opposite (but that's a discussion for another time).</p><h3 id="rule-6-look-at-the-bigger-picture-">Rule 6: Look at the bigger picture 🤨🖼</h3><p>In the end, this is the most important mindset that can differentiate you from others. Of course, you are doing your job just like anyone else, and at the end of the month, you will get your salary for the work you've done. Now, that's great and you can stop there, but I dare you to think beyond that. Whether you've considered it or not, your name is associated with the company or product you are working on. You are not just writing code, my friend, <strong>you are leaving behind a legacy.</strong></p><p>You need to create opportunities for yourself to step back and get an overview of things. Having a big picture view is important to stay aligned with the mission and reassess tasks/priorities with respect to how they help you achieve the ultimate goal, i.e. build great software that helps users be awesome.</p><p>At the end of the day, if your creation is garbage, that's on you. Inversely, if your creation is flawless, that's on you as well. Do your best work, and your work will speak for you.</p><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/d3mlE7uhX8KFgEmY/giphy.gif" class="kg-image" alt="Philosophy of a Good Developer" loading="lazy"/></figure><h2 id="conclusion">Conclusion</h2><p>Being a good developer takes more than just technical skills. If improving technical skills is all you have your sights set upon, that's a low bar. You need to keep in mind that:</p><ul><li>When working on a commercial project, you shouldn't operate like a lone wolf; write easily understandable code and document everything!</li><li>You can't remember everything, so write stuff down; use To-do comments to get back to things you skipped earlier.</li><li>You must put yourself in the user's shoes and build features they can use; judge what you build on your own standards before anything goes to QA.</li><li>Shortcuts will only come back to bite you in the behind; when you do something, do it right.</li><li>Blaming others when things break down will lead you nowhere; take extreme ownership of what you're building and foster teamwork.</li><li>A software is more than just a collection of features, so make sure you step back and look at the big picture every so often. What you build is your legacy.</li></ul><p>So expand your mind and be the best developer you can be. I've written at length about how you can improve your focus and increase your brainpower to deliver your best work.</p><p>P.S. Are you an Open-Source enthusiast?</p><p>There are many reasons to love OSS. It's fundamentally collaborative in nature, and everyone involved is building something for the love of it. I've met so many great developers through open-source ever since I started Team XenoX. 🔥 If <em>you</em> are also someone who is an open-source enthusiast and looking to build cool products in a collaborative environment and meet awesome people, I welcome you to join me in <a href="http://bit.ly/xnxmltvrs">XenoX Multiverse</a>. Check out some of the <a href="http://bit.ly/madebyxenox">stuff we've made</a> this year.</p><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/NZCnpj2c4qoE0/giphy.gif" class="kg-image" alt="Philosophy of a Good Developer" loading="lazy"/></figure><p><strong><em>Oh, and if you're looking for work, we're hiring at Skynox Tech! Go ahead and apply <a href="http://bit.ly/2CA3qDe">here</a>.</em></strong> 😀💯<br>Have a great day and I'll see you all again very soon!</br></p>]]></content:encoded></item><item><title><![CDATA[Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️]]></title><description><![CDATA[Up until just a few days ago, I was a VS Code lover like anyone else these days. I use to write a column of top VS Code Themes and Plugins every month in my monthly blog series "Ultra List" as well, but recently, I shifted back to Sublime Text.]]></description><link>http://xenox.dev/switching-back-to-my-old-buddy-sublime-text-from-vs-code/</link><guid isPermaLink="false">Ghost__Post__5f72edc550c14226c52904d8</guid><category><![CDATA[Productivity]]></category><category><![CDATA[WebDev]]></category><category><![CDATA[VSCode]]></category><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Tue, 29 Sep 2020 08:21:30 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2020/09/pexels-negative-space-169573.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2020/09/pexels-negative-space-169573.jpg" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️"/><p>Okay, this will be a really quick article. Up until just a few days ago, I was a VS Code lover like anyone else these days. I use to write a column of top VS Code Themes and Plugins every month in my monthly blog series <em><a href="http://bit.ly/aug19ul">"Ultra List"</a></em> as well, but recently, I shifted back to Sublime Text.</p><p>Why? Let me tell you in this blog post.</p><h3 id="why-">Why? 🤔</h3><p>So while we were working on a big old project, I observed something. Some of my teammates started complaining about their systems slowing down when working on that project. They complained about this often, and after a while, I just couldn't ignore the issue. So I decided to look into it, and I found out that the culprit was VS Code. When you work on big projects with lots of files, the folder structure starts looking like this.</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3zCvt0Lg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/osjt7m0s7jqa2qilmley.gif" class="kg-image" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️" loading="lazy"/></figure><p>The problem starts here: the more files you have and the bigger your project, the more resources VS Code will start to consume. The Search Indexing and File Watcher scripts start eating up your memory. Moreover, to work on such a project, you will open each file in a new tab, leading to multiple VS Code instances running simultaneously, and eventually, your CPU usage will start to look like this.</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--RvMrQyo1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/8qr2qmgm2ctw1gg780fs.png" class="kg-image" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️" loading="lazy"/></figure><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--GdOKz3BM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/pbo7k0i19gz7kpiuaf3r.png" class="kg-image" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️" loading="lazy"/></figure><p>If you have 4GB RAM, like some of my teammates, you can't code efficiently on a big project like this. And I can't tell my teammates to upgrade their RAMs. So the better approach for me was shifting to my old mate Sublime Text, see if it could help reduce the memory load on our machines without sacrificing general efficiency and important VS Code features we've all come to rely on, and then help my teammates set it up correctly. I am pleased to report that this was a successful experiment and I'm gonna stick to Sublime Text now, at least for the foreseeable future.</p><p>Check out its memory usage for the same workspace.</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--muKPpcOn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/stucf4yz308swkaoy7pe.png" class="kg-image" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️" loading="lazy"/></figure><hr><h3 id="how-">How? 🤔</h3><p>So if you think this is cool and could help your machine run lighter so you can code faster, stay with me and find out how you can achieve this too.</p><p>Once you install Sublime Text and <a href="https://packagecontrol.io/">Package Control</a>, here is a list of plugins and themes that can help you to have the same experience you're used to on VS Code.</p><h4 id="plugins">Plugins</h4><p><em><a href="https://packagecontrol.io/packages/GitGutter">1. GitGutter</a></em>: It has everything that you need from a git plugin.<br/></p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--3NzP4ZRx--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/i95m4z2lxfvuf0088gfs.png" class="kg-image" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️" loading="lazy"/></figure><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--PwC3ven1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/3qbtsfouiwe3erd2own3.png" class="kg-image" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️" loading="lazy"/></figure><p><em><a href="https://packagecontrol.io/packages/Colorsublime">2. ColorSublime</a></em>: It is possibly the best plugin out there for themes. This plugin can help preview a theme real-time, even if that theme is not installed on your Sublime Text at that time. 🤯</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--DQOuzm2P--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/akmmnnlbu9chr2wh89d5.gif" class="kg-image" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️" loading="lazy"/></figure><p><em><a href="https://packagecontrol.io/packages/SublimeCodeIntel">3. Sublime​Code​Intel</a></em>: Code completion like VS Code but <em>way</em> lighter.</p><p><em><a href="https://packagecontrol.io/packages/SideBarEnhancements">4. SideBarEnhancements</a></em>: Take your sidebar options to the next level with this plugin.</p><p><em><a href="https://packagecontrol.io/packages/BracketHighlighter">5. BracketHighlighter</a></em>: Best Bracket Highlighter; matches a variety of brackets such as: [], (), {}, "", '', , and even custom brackets.</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TfvMkHID--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/fw4ve1e7tfdid3o4hzi6.png" class="kg-image" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️" loading="lazy"/></figure><p><em><a href="https://packagecontrol.io/packages/PlainTasks">6. PlainTasks</a></em>: An opinionated to-do-list plugin for Sublime Text (2 &amp; 3) editor.</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rNqN0SXf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://packagecontrol.io/readmes/img/a198cc584b2eeb51b603b95fe92edee49ce0e449.png" class="kg-image" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️" loading="lazy"/></figure><h4 id="themes">Themes</h4><p>Now that you have the basics taken care of, it's time to personalize your setup. Check out these themes and give your Sublime Text a facelift.</p><ul><li><em><a href="https://packagecontrol.io/packages/Materialize">Materialize</a></em></li><li><em><a href="https://packagecontrol.io/packages/Agila%20Theme">Agila Theme</a></em></li><li><em><a href="https://packagecontrol.io/packages/Seti_UI">Seti</a></em></li></ul><h4 id="other-cool-stuff">Other Cool Stuff</h4><p>If you want to explore further and see what more you could do with Sublime Text, go check out this AWESOME list. </p><figure class="kg-card kg-bookmark-card"><a class="kg-bookmark-container" href="https://github.com/dreikanter/sublime-bookmarks"><div class="kg-bookmark-content"><div class="kg-bookmark-title">dreikanter/sublime-bookmarks</div><div class="kg-bookmark-description">Sublime Text essential plugins and resources. Contribute to dreikanter/sublime-bookmarks development by creating an account on GitHub.</div><div class="kg-bookmark-metadata"><img class="kg-bookmark-icon" src="https://github.githubassets.com/favicons/favicon.svg" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️"><span class="kg-bookmark-author">GitHub</span><span class="kg-bookmark-publisher">dreikanter</span></img></div></div><div class="kg-bookmark-thumbnail"><img src="https://avatars0.githubusercontent.com/u/126636?s&#x3D;400&amp;v&#x3D;4" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️"/></div></a></figure><h3 id="sublime-text-essential-plugins-and-resources">Sublime Text essential plugins and resources</h3><h1 id="sublime-text-bookmarks">Sublime Text Bookmarks</h1><figure class="kg-card kg-image-card"><img src="https://camo.githubusercontent.com/13c4e50d88df7178ae1882a203ed57b641674f94/68747470733a2f2f63646e2e7261776769742e636f6d2f73696e647265736f726875732f617765736f6d652f643733303566333864323966656437386661383536353265336136336531353464643865383832392f6d656469612f62616467652e737667" class="kg-image" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️" loading="lazy"/></figure><blockquote><a href="http://www.sublimetext.com/" rel="nofollow">Sublime Text</a> is a cross-platform text and source code editor, with a Python application programming interface. Its functionality is extendable with plugins. Most of the extending packages have free-software licenses and are community-built and maintained. — <a href="https://en.wikipedia.org/wiki/Sublime_Text" rel="nofollow">Wikipedia</a></blockquote><p>This tiny project follows <a href="https://github.com/sindresorhus/awesome">GitHub community trend</a> to aggregate the most essential bookmarks for specific subject in the form of a handy well-structured collection. Here you will find tutorials and learning materials for Sublime Text, general purpose extensions for coding and text editing, and specialized extensions grouped by usage profiles.</p><p>This list not supposed to include absolutely all Sublime Text plugins, due we already have <a href="https://packagecontrol.io/" rel="nofollow">Package Control</a> for this. It is intended to be a starting point helping to setup working environment, or check out for new extensions to make your existing Sublime setup more awesome. You may find ★ here and there in the list. It stands for Editors'…<a href="https://github.com/dreikanter/sublime-bookmarks"><strong>View on GitHub</strong></a></p><p>It contains everything from useful books and community resources to plugins for specific profiles like JS, Python, and Ruby that could make your life much easier. You can also find some cool icon packs and fonts in there to customize the look and feel of your Sublime Text further. 🎨</p><hr><h3 id="conclusion">Conclusion</h3><p>And that's it for this post; short and sweet, just like I promised. That's my journey back to Sublime Text, a code editor I used for years before switching to VS Code. I'm really happy to discover that it's still amazing, better than ever in fact, and has a thriving ecosystem and community. Since switching back to it, I've seen a huge improvement in the productivity of my team, especially when working on big codebases. We've seen reduction in task completion times by as much as 60%, according to reports in our product management tool, <a href="https://app.clickup.com/">ClickUp</a>, which is awesome by the way and definitely worth checking out. So if you've been feeling done with VS Code and its memory-hungry tendencies, or if you simply want a change, go try Sublime Text and see the results for yourself.</p><hr><h4 id="one-more-thing">One More Thing</h4><p>If you're looking for work, we're hiring fullstack developers (MERN) at Skynox Tech! You can apply on <a href="http://bit.ly/2CA3qDe">Angellist</a>, <a href="http://bit.ly/33E0bGL">LinkedIn</a>, or via direct email to <a href="mailto:info@skynox.tech">info@skynox.tech</a>. 😀💯</p><p>Ooh, and lastly, if you're already a Sublime Text lover and long-time user, please share your own experience and cool <strong><em>plugins and themes</em></strong> that I might've missed.</p><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/l2QZSDxJmnQKc16a4/giphy.gif" class="kg-image" alt="Switching back to my old buddy Sublime Text from VS Code 🤷🏻‍♂️" loading="lazy"/></figure></hr></hr></hr>]]></content:encoded></item><item><title><![CDATA[😷🦠 COVID-19, Self-Isolation, Work From Home and Developers 👩🏻‍💻👩🏽‍⚕️]]></title><description><![CDATA[This is the time when keeping yourself safe can help save others. The COVID-19 situation has been devolving into a bigger mess by the day, becoming a global pandemic the likes of which we haven't seen often in the history of mankind. ]]></description><link>https://medium.com/skynox/covid-19-self-isolation-work-from-home-and-developers-%EF%B8%8F-7fe2556008b8</link><guid isPermaLink="false">Ghost__Post__5f72ec6c50c14226c52904bf</guid><category><![CDATA[Health]]></category><category><![CDATA[Productivity]]></category><category><![CDATA[WebDev]]></category><dc:creator><![CDATA[Sarthak Sharma]]></dc:creator><pubDate>Tue, 29 Sep 2020 08:13:48 GMT</pubDate><media:content url="https://authors.xenox.dev/content/images/2020/09/pexels-ekaterina-bolovtsova-4049990.jpg" medium="image"/><content:encoded><![CDATA[<img src="https://authors.xenox.dev/content/images/2020/09/pexels-ekaterina-bolovtsova-4049990.jpg" alt="😷🦠 COVID-19, Self-Isolation, Work From Home and Developers 👩🏻‍💻👩🏽‍⚕️"/><p>This is the time when keeping yourself safe can help save others. The COVID-19 situation has been devolving into a bigger mess by the day, becoming a global pandemic the likes of which we haven't seen often in the history of mankind. Despite the instant availability of facts and figures related to this crisis, it makes me sad to see that many people are still not taking it seriously.</p><p>Being in the IT industry makes it easy for most of us to work from home. In fact this holds true not just for the IT industry but for most of the knowledge workers in the world that don't need to rely on big, heavy equipment and dedicated labs to get their work done. Still, many businesses in many countries are still willing to take the risk. I see people who're <strong>terrified</strong> - scared for their own lives as well as those of their families - who can't do much to change their situation as they are being forced to commute to offices for work that can be easily done from home with minimal systemic changes.</p><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/ZdU3bTTc1WWStZM5lm/giphy.gif" class="kg-image" alt="😷🦠 COVID-19, Self-Isolation, Work From Home and Developers 👩🏻‍💻👩🏽‍⚕️" loading="lazy"/></figure><p>If you're in the same boat, I <strong>urge you all</strong> to request your respective authorities to allow working from home for the foreseeable future. We have some difficult times ahead of us and this is the least we can do to ensure we survive this.</p><h4 id="check-out-hollywood-has-gone-home-why-are-many-visual-effects-artists-still-going-into-work">Check out: <a href="https://www.msn.com/en-us/news/us/hollywood-has-gone-home-why-are-many-visual-effects-artists-still-going-into-work/ar-BB11rzUO">Hollywood has gone home. Why are many visual effects artists still going into work?</a></h4><p>Next, if you are already working from home or already working remotely, do keep a few things in mind. This is not like your regular remote work arrangement; things are different. Here are a few crucial things you must remember in order to be safe and productive during this time of crisis.</p><h2 id="1-don-t-work-from-caf-s-">1. Don't work from cafés ☕️</h2><p>This is the most obvious one. However, in countries that are not yet under lockdown but have reported cases of COVID-19, this is worth mentioning. I know you love that warm, soothing vibe of cafés, but by making some slight adjustments to your work-setup at home, you can replicate the same vibe (or at least close enough). The primary motivation for working remotely should <em>not</em> be personal comfort, saving time, etc. It should be keeping yourself and others safe. <strong>AVOID CROWDED PLACES!!!</strong></p><h2 id="2-create-a-productive-vibe-">2. Create a Productive Vibe 🕯</h2><p>No, you can not sit on your bed and work for hours because, best case scenario, you will feel sleepy and won't get much productive work done, and worst case scenario, you will have terrible posture and develop a bad back ache.</p><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/kudIERso2pFiE/giphy.gif" class="kg-image" alt="😷🦠 COVID-19, Self-Isolation, Work From Home and Developers 👩🏻‍💻👩🏽‍⚕️" loading="lazy"/></figure><p>Maintaining a good vibe is the next big challenge, so that you don't get distracted. Being in a new environment can confuse our brains, derail our personal productivity habits, and even throw off our body clocks. Here are some pointers to avoid that:</p><ul><li>🪑 <strong><em>Proper desk-</em></strong> You already must have seen many videos on the subject, but here is <a href="https://www.youtube.com/watch?v=cImom1FFTfk">one more</a> anyway.</li><li>🚪 <strong><em>Isolation-</em></strong> This is not only good for productivity but also recommended by doctors right now as it decreases the chances of spread significantly. Convey this to your family members in a calm but firm manner that you are not on a vacation. You're <em>working</em> from home, which means they shouldn't bother you with trivial things during your regular work hours as much as possible.</li><li>🗑 <strong><em>Clean room-</em></strong> The room that you choose to work in should be clean. If it happens to be the same room you sleep in, make your bed when you wake up. This will any urges to go back to bed for a quick nap when you're tired. Trust me, it works.</li><li>🛋 <strong><em>Proper lighting-</em></strong> If you have windows in the room, that's great! Natural lighting not only keeps you active but it also kills germs. If you don't have natural lighting, however, make sure you set up the room to have sufficient light. It should be enough to work comfortably but not so bright as to be distracting.</li><li>🪔 <strong><em>Aromatics-</em></strong> Well, this one's completely optional, but from personal experience, I can tell you that having some kind of aromatics or humidifier in your workplace definiely helps to perk up "the vibe". But hey, different strokes for different folks. You can choose to have candles, flowers, or even a desk plant. Go with whatever works for you.</li></ul><p>I know that a lot of remote-work pros who've been doing this for years might disagree with me on one or more points, but they've had a chance to experiment with this and settle down into routines that work for <strong><em>them</em></strong>. People who are new to this may not have the same luxury, so I need to stress the importance of maintaining a good routine and hygiene. The newcomers need as much help as they can get to maintain focus and productivity.</p><h2 id="3-establishing-systems-">3. Establishing Systems 🗃</h2><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/l0IylOPCNkiqOgMyA/giphy.gif" class="kg-image" alt="😷🦠 COVID-19, Self-Isolation, Work From Home and Developers 👩🏻‍💻👩🏽‍⚕️" loading="lazy"/></figure><p>Systems always make you productive, and I am a huge believer of establishing systems for yourself. So the next thing in your list should be to make a system that keeps you productive, but more importantly, sane! Consider creating one, or if you think that's too hard, I have a few tips for you that could help. These same tips are being used by my team as well at this very moment.</p><ul><li>⏰ <strong><em>Set fixed working hours:</em></strong><br>Communicate openly with your team on this and tell them your available hours. This not only helps you be disciplined but also helps you to not unnecessarily over-work yourself to the point of exhaustion. Also, communicate the same to your family as well so they know when you can be expected to do household chores and such. Doing this clearly and consistently can make sure everyone around you respects your time and personal boundaries.</br></li><li>🛠 <strong><em>Use common tools:</em></strong> Sit down with your team and decide on common tools you will use to plan and execute work-related tasks. Then stick to them.</li><li>☎️ <strong><em>Communication protocol:</em></strong><br>This will ensure that you are neither over-communicating nor under. You could use Slack, Asana or any of the thousands of other productivity tools out there, but this system will help you find a balance with your team. So discuss with them what kind of communication channel to use for what purpose. I recommend having two levels of contact for everything. Use the first level, and escalate to the second one only if your problem isn't resolved with the first level or you haven't received a response within a reasonable period of time. Here is the communication protocol my team is currently using:Name1st Contact 🟡2nd Contact 🔴For Low Priority TasksMattermostAudio CallFor High Urgency TasksAudio Call-For General Task UpdatesClickUpMattermost</br></li><li>📝 <strong><em>Be descriptive:</em></strong></li><li>User GIFs for feature or bug-fix previews</li><li>Add proper comments in code</li><li>Include message threads if necessary (don't assume recipients have all needed information)</li><li>Create Wikis whenever possible to minimize future effort</li></ul><h2 id="4-be-there-for-each-other-">4. Be there for each other 🤝</h2><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/2ytlbPlOr6c028biPK/giphy.gif" class="kg-image" alt="😷🦠 COVID-19, Self-Isolation, Work From Home and Developers 👩🏻‍💻👩🏽‍⚕️" loading="lazy"/></figure><p>Sometimes, isolation can also lead to stress and loneliness in our lives. We're not all wired the same, so if you feel lonely, reach out to your teammates and have a video call. Talk to each other, let others know what you've been up to. If you know some of your team mates are prone to this, take the initiative and reach out to them yourself. In hard times like this, it becomes even more important.</p><h2 id="5-good-time-to-gain-new-skills-">5. Good time to gain new skills 👩🏽‍🏫</h2><p>You will have a lot more free time on your hands now that you won't be commuting to work. Utilize this time to pick up some new skills. Learn that new language, library or framework you've been meaning to for months. You can also pick up a new hobby, like learning an instrument or other creative endeavors you may have been putting off for later.</p><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/l3vRaUGy4krQw0nXq/giphy.gif" class="kg-image" alt="😷🦠 COVID-19, Self-Isolation, Work From Home and Developers 👩🏻‍💻👩🏽‍⚕️" loading="lazy"/></figure><p>The possibilities are endless here. That said, here are a few of my personal favorites that not only make for great pastimes but also improve your quality of life:</p><ul><li>🍲 <strong>Cooking:</strong> No, instant noodles don't count. If you want to be serious about this, cooking has so much to offer. Cooking can not only be extremely relaxing, it's also a supreme life skill to have. Being able to feed yourself tasty food is no joke.</li><li>📚 <strong>Reading/Writing:</strong> These are very distinct but also tied together in a unique manner. I feel like reading should expand your mind and inspire you to write down your thoughts, and conversely, if you love writing, you should always be reading more in order to write better.</li><li>🏋🏿‍♀️ <strong>Exercise/Sports:</strong> The benefits of intense physical activities are well-known and I don't think I need to mention them here. That said, don't limit yourself to conventional physical activities like going to the gym or running. Do something that makes you wanna do it over and over. There's plenty of tutorials on the web.</li></ul><h2 id="6-contribute-to-open-source">6. Contribute to Open Source</h2><p>We talked about learning new skills in the previous point. What better way to test your knowledge and improve your skills than to contribute to an open-source project? It's a great way to gauge your level while also doing something productive. Here at Team XenoX, we're huge proponents of OSS, and we build cool, open-source projects all the time. Check out some of the projects we're currently working on:</p><ul><li><strong><a href="https://github.com/teamxenox/caligator">Caligator</a>:</strong> An open source kickass cross-platform Calculator with the power of alligator 🐊</li><li><strong><a href="https://github.com/teamxenox/ovuli">Ovuli</a>:</strong> Ovulation calendar and calculator app</li><li><strong><a href="https://github.com/teamxenox/CoDoc19">CoDoc19</a>:</strong> A bot to fight COVID-19 myths and misinformation floating around the internet.</li></ul><p>Personally, I love to mentor budding coders who're excited about learning and contributing to the world of OSS. So if you need any mentorship or are simply looking to contribute more in open-source development, join us at <a href="http://bit.ly/xnxmltvrs">XenoX Multiverse</a> or simply drop me a message on <a href="http://bit.ly/twsarth">Twitter</a>!</p><h2 id="7-do-not-panic-">7. Do not panic!</h2><figure class="kg-card kg-image-card"><img src="https://i.giphy.com/media/hpQzQF8PKj1wWJC41S/giphy.gif" class="kg-image" alt="😷🦠 COVID-19, Self-Isolation, Work From Home and Developers 👩🏻‍💻👩🏽‍⚕️" loading="lazy"/></figure><p>It's very hurtful to see that people are hoarding up supplies. This won't fix the problem; it will only create more panic. You should know that others may need something more than you, and they might not be able to afford hoarding it. When we are in panic mode, our brains stop functioning normally and our survival instincts go into overdrive. However, that is not the right way to tackle this pandemic. You must remain calm and remember to:</p><ul><li>Wash your hands frequently.🧼</li><li>Avoid touching your face. 🙊</li><li>Sneeze and cough into a tissue or your elbow.🧻</li><li>Avoid crowds and standing near others.🌆</li><li>Stay at home as much as possible, especially if you're sick.🏘</li><li>Follow the advice given by your government's health authority if you have a fever, cough, or difficulty breathing.🩺</li></ul><h2 id="conclusion">Conclusion</h2><p>It's a hard time we're going through, and it's going to get worse before it gets better. But we all need to make sure we stay informed, fight the myths and misinformation, and keep our heads. Keep your loved ones close and educated on the latest facts.</p><p>Remember friends, this isn't a normal time. Everyone is stressed because of some or the other reason, but we need to stand together and fight this without panicking.</p><figure class="kg-card kg-image-card"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--UOEEPxtW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/rwhytdb6khzr7ztm7pyr.gif" class="kg-image" alt="😷🦠 COVID-19, Self-Isolation, Work From Home and Developers 👩🏻‍💻👩🏽‍⚕️" loading="lazy"/></figure><h3 id="we-re-going-to-survive-this-friends-stay-strong-">We're going to survive this, friends. Stay strong! 💪🏽💯</h3>]]></content:encoded></item></channel></rss>