<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: jobpick.in</title>
    <description>The latest articles on DEV Community by jobpick.in (@jobpick).</description>
    <link>https://dev.to/jobpick</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F678841%2F3cba9808-d7cc-4581-b3f9-fd63f60eb6f9.png</url>
      <title>DEV Community: jobpick.in</title>
      <link>https://dev.to/jobpick</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jobpick"/>
    <language>en</language>
    <item>
      <title> SEO Techniques 2021</title>
      <dc:creator>jobpick.in</dc:creator>
      <pubDate>Tue, 17 Aug 2021 09:38:49 +0000</pubDate>
      <link>https://dev.to/jobpick/seo-techniques-2021-3hmg</link>
      <guid>https://dev.to/jobpick/seo-techniques-2021-3hmg</guid>
      <description>&lt;p&gt;&lt;strong&gt;29 SEO marketing techniques&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Organic traffic is the best kind of traffic you can get. SEO gives you consistent &amp;amp; reliable traffic.&lt;/li&gt;
&lt;li&gt; Focus on SEO from day 1. Don't wait till your product is built to start working on SEO.&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Get the basics of on-page SEO right.&lt;br&gt;
• Add relevant tags to your page - title, meta, h1s, h2s.&lt;br&gt;
• Optimize these tags &amp;amp; your content.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Put efforts to increase your website's authority from day 1. Higher your website authority, more the chance of Google ranking you higher.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Writing guest posts is the best way to increase your website's authority. Set up a process to: &lt;br&gt;
• Research opportunities &lt;br&gt;
• Automate outreach&lt;br&gt;
• Create outlines&lt;br&gt;
• Write content&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Everyone loves linking to data &amp;amp; analysis. Create such pages on your website to get links organically.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;People will link to you only if you have quality content. Publish guides &amp;amp; in-depth content on your website and reach out to others asking to link to your content.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Internal linking is the most powerful way to improve rankings. Get the SEO juice from your top pages flowing to all other pages.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;No orphan links. As a rule of thumb, each page on your website should have at least 1 internal link.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Do your website's SEO audit regularly and clean up the errors. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use Google Search Console to track your website's organic traffic. It's the most reliable way to know your actual organic traffic. Other SEO tools are great, but they can only provide you estimates.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Keyword research is key to ranking on Google. If you find the right keywords, half your job is done.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Keywords don't rank themselves. You still have to write quality content that your website visitors would like to read.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Optimise your content for the reader, not just for keywords. Google also actively tracks this by measuring factors like time spent by users on your page.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Check for search intent. Ranking in top 10 and yet getting no traffic will do you no good.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Your goal should always be to kick out at least one of the existing top 10 results. Make sure you have &amp;gt;1-2 results that have a lower authority than you and/or have poor quality content.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;SEO takes time to show results. Wait at least 3-6 months before you decide to change your existing strategy.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;The wait for SEO to show results it totally worth it. Your website traffic grows exponentially afterwards.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Regularly monitor the keywords you are actually ranking for. Optimise your content for those keywords to improve your ranking.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Optimise your website's page speed. Go a step further &amp;amp; optimise your core web vitals too.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Establish a topical authority. Once you start ranking for a few blogs on a topic, there's a high chance Google will favour your website for other content on that topic&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Optimise your already ranking pages in one country for other countries. It's the easiest way to get more traffic.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Update &amp;amp; optimise your old content regularly. You don't want your competitors to outrank you just by including latest updates.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Research your competitors for content &amp;amp; keyword ideas. Don't hesitate to even borrow their SEO strategy.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Pick your domain name wisely.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Never use sub-domains. Google treats them almost like separate websites. Always use sub-folders.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;SEO is a long-term strategy. Make sure you set up the right processes to research, write &amp;amp; distribute content&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;SEO is amazing to drive website traffic, however, the conversion rates aren't as high as paid marketing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Don't rely entirely on SEO. Diversify your traffic sources through distribution &amp;amp; launches. Channels include social media, Product Hunt, Reddit, HackerNews etc.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;So that was it from this article😇.Hope you find this article helpful. Please share your thoughts/comments/feedback either in comment section or you can DM us at &lt;a href="https://twitter.com/job_pick"&gt;twiter&lt;/a&gt; , &lt;a href="https://twitter.com/job_pick"&gt;jobpick.in&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>react</category>
      <category>productivity</category>
    </item>
    <item>
      <title>When to use MongoDB Database?</title>
      <dc:creator>jobpick.in</dc:creator>
      <pubDate>Mon, 16 Aug 2021 07:36:13 +0000</pubDate>
      <link>https://dev.to/jobpick/when-to-use-mongodb-database-2b28</link>
      <guid>https://dev.to/jobpick/when-to-use-mongodb-database-2b28</guid>
      <description>&lt;p&gt;&lt;strong&gt;Today&lt;/strong&gt;, web applications support millions of users and include features that support content management, personalization, real-time big data and much more. NoSQL databases such as MongoDB supports unstructured data, horizontal scaling (if the data grows, you can add more machines).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is MongoDB?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;MongoDB&lt;/strong&gt; is Object-Oriented, simple, dynamic and scalable NoSQL database. It is based on the NoSQL document store model, in which data objects are stored as separate documents inside a collection instead of storing the data into columns and rows of a traditional relational database.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--TWuHi7yK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osfx11nee5vjsl3tcwa8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TWuHi7yK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osfx11nee5vjsl3tcwa8.png" alt="mongodb"&gt;&lt;/a&gt;&lt;br&gt;
The motivation of &lt;strong&gt;MongoDB&lt;/strong&gt; is to implement a data store that provides high performance, high availability, and automatic scaling. MongoDB is an extremely simple and easy  Install/Implement. The core of MongoDB storage is documents and it’s stored as  JSON or BSON objects.  General distributions of MongoDB support Windows, Linux, Mac OS X, and Solaris.&lt;/p&gt;

&lt;p&gt;As one of the leading &lt;strong&gt;NoSQL databases&lt;/strong&gt;, MongoDB offers a number of advantages. With fast scalability and flexibility in the handling of data, it is helping businesses streamline their data services, manage applications better and also improve on user experience.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Features of MongoDB&lt;/strong&gt;:-&lt;/p&gt;

&lt;p&gt;•&lt;strong&gt;The application code&lt;/strong&gt; within the database is mapped to the objects by using a document model, which makes dealing with data very easy.&lt;/p&gt;

&lt;p&gt;•&lt;strong&gt;Geographic distribution&lt;/strong&gt;, high availability and horizontal scaling are built into the MongoDB database for its core is primarily a distributed database.&lt;/p&gt;

&lt;p&gt;•&lt;strong&gt;Analysis of data&lt;/strong&gt; is powerful yet easy as aggregation in real-time, random queries and indexing are built into MongoDB. This can help in determining the performance within a section or for the whole business much more effectively and quickly.&lt;/p&gt;

&lt;p&gt;•&lt;strong&gt;In MongoDB&lt;/strong&gt;, the fields can be made to vary within documents to enable data structure changes over a period of time. This is possible as it uses documents similar to JSON (known as BSON or Binary JSON,) which has a lot of flexibility in storing data.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;When should you use MongoDB over MySQL and vice versa?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;There are two main factors that come into play when choosing between &lt;strong&gt;relational&lt;/strong&gt; and &lt;strong&gt;noSQL&lt;/strong&gt; databases: how static your data is and how plug-and-play the tool will be for your team.&lt;/p&gt;

&lt;p&gt;In general, a project with frequently updated data will benefit more from a &lt;strong&gt;relational database&lt;/strong&gt; than a nonrelational one. An example of such a project would be any kind of transactional system, like an ecommerce platform, a workflow application, or a payment processor. &lt;/p&gt;

&lt;p&gt;On the other hand, a project that rarely updates information, such as an analytics application where data doesn't change after it has been collected, will benefit more from a &lt;strong&gt;nonrelational database.&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What to Choose?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If your project's success depends on users getting answers to their queries in real-time, you should opt for a &lt;strong&gt;nonrelational database&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;If, on the other hand, your biggest concern is having information you can trust no matter what, a &lt;strong&gt;relational database&lt;/strong&gt; is your best option. &lt;/p&gt;

&lt;p&gt;So that was it from this article😇.Hope you find this article helpful. Please share your thoughts/comments/feedback either in comment section or you can DM us at &lt;a href="https://twitter.com/job_pick"&gt;twiter&lt;/a&gt; , &lt;a href="https://jobpick.in/"&gt;jobpick.in&lt;/a&gt;&lt;/p&gt;

</description>
      <category>database</category>
      <category>mongodb</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Frontend Development 2021</title>
      <dc:creator>jobpick.in</dc:creator>
      <pubDate>Thu, 12 Aug 2021 06:13:30 +0000</pubDate>
      <link>https://dev.to/jobpick/frontend-development-2021-5p</link>
      <guid>https://dev.to/jobpick/frontend-development-2021-5p</guid>
      <description>&lt;p&gt;&lt;strong&gt;Frontend Development&lt;/strong&gt;&lt;br&gt;
Every business, brand, and idea has a website. As a result, building websites, called front-end development, is one of the simplest and most profitable ways to enter the world of software development.&lt;/p&gt;

&lt;p&gt;In a website building, Front-end plays a first and foremost role. As a result of good Front-end development, the website can reach more people and serve the purpose. Front-end development helps optimizes navigation on a website which makes easier for visitor to find what they are looking for on the site. It calls for a clean, well-structed and carefully planned layout.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;For 2021 :&lt;/strong&gt;&lt;br&gt;
Front-end web development has become more difficult in recent years. There's a lot more to it than HTML, CSS, and JavaScript. There are several technologies to master, as well as numerous activities. You will certainly become a good front-end web developer if you have the passion ,discipline and patience.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5na2t5kbzyf4t51t78zc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5na2t5kbzyf4t51t78zc.png" alt="jobpick.in"&gt;&lt;/a&gt;&lt;br&gt;
&lt;strong&gt;Frontend and Backend&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;There are two paths towards becoming a web developer: the back-end or the front-end.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Front-end developers&lt;/strong&gt;, on the other hand, get to build everything a user touches and interacts with on the screen, such as layouts, information, engagement, etc. Front-end developers are both creative and tech-savvy, and act as the bridge between designers and back-end programmers.&lt;/p&gt;

&lt;p&gt;A frontend must provide a good user experience and should be convenient for the end user to operate. It should be able to perform proper validation of any data sent by the user and should be responsive.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Back-end developers&lt;/strong&gt; build server-side software. They’re responsible for all the performance, stability, security and speed of your site or app, all of which power the front-end or user-facing side.&lt;/p&gt;

&lt;p&gt;So frontend or backend it depends on need.&lt;/p&gt;

&lt;p&gt;If you just need to provide information, frontend development is more important because you don’t need a backend to display simple content.&lt;/p&gt;

&lt;p&gt;If you only need to serve data, an API will suffice, which means backend development is more important (since no frontend is required).&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Static and Dynamic Site&lt;/strong&gt;&lt;br&gt;
A static site that only displays text or images and has no interaction between the site and the user, does not require back-end development.&lt;/p&gt;

&lt;p&gt;A dynamic site that requires interaction between the site and the user (such as filling in and submitting a form), does require back-end development.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Frameworks&lt;/strong&gt; :&lt;/p&gt;

&lt;p&gt;Framework will help you a lot with development. The framework will give you the basic structure, some guidelines, and even some pre-build elements. Besides, almost every company uses any framework so it will be much easier to get your dream job.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3 most popular&lt;/strong&gt; front-end frameworks in the market right now: React, Angular and Vue.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Follow these steps :&lt;/strong&gt; &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Learn the basics of how websites work, front-end vs back-end, and using a code editor&lt;/li&gt;
&lt;li&gt; Learn basic HTML, CSS, and JavaScript&lt;/li&gt;
&lt;li&gt; Learn tools: package managers, build tools, version control&lt;/li&gt;
&lt;li&gt; Learn Sass, responsive design, JavaScript frameworks&lt;/li&gt;
&lt;li&gt; Learn back-end basics: servers and databases, programming languages&lt;/li&gt;
&lt;li&gt; Maintain an active Github profile&lt;/li&gt;
&lt;li&gt; Develop your own projects&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;There are plenty of free learning sources available for learning Frontend Development as well as backend development .&lt;/p&gt;

&lt;p&gt;In the interim, find open source projects or help your friends with their sites ,use this opportunity to learn to manage expectations.&lt;/p&gt;

&lt;p&gt;So that was it from this article😇.Hope you find this article helpful. Please share your thoughts/comments/feedback either in comment section or you can DM us at &lt;a href="https://twitter.com/job_pick" rel="noopener noreferrer"&gt;twiter&lt;/a&gt; , &lt;a href="https://jobpick.in/" rel="noopener noreferrer"&gt;jobpick.in&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>html</category>
      <category>css</category>
    </item>
    <item>
      <title>How to create a Skeleton Loader in Tailwindcss ?</title>
      <dc:creator>jobpick.in</dc:creator>
      <pubDate>Wed, 04 Aug 2021 10:37:47 +0000</pubDate>
      <link>https://dev.to/jobpick/how-to-create-a-skeleton-loader-in-tailwindcss-38gh</link>
      <guid>https://dev.to/jobpick/how-to-create-a-skeleton-loader-in-tailwindcss-38gh</guid>
      <description>&lt;p&gt;In this tutorial we are going to see how to make skeleton loaders in tailwind. Skeleton Loaders are used show the loading state. Many big websites such as youtube, linkedIn and even dev.to uses such loaders while loading the data!&lt;/p&gt;

&lt;p&gt;Here we are going to create a Loader Like below:&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqeqx8swh96th3jo7g2ap.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqeqx8swh96th3jo7g2ap.gif" alt="Skeleton loader example"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The simple code in html is below:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;

&lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"w-60 h-24 border-2 rounded-md mx-auto mt-20"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"flex animate-pulse flex-row items-center h-full justify-center space-x-5"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"w-12 bg-gray-300 h-12 rounded-full "&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"flex flex-col space-y-3"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"w-36 bg-gray-300 h-6 rounded-md "&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;div&lt;/span&gt; &lt;span class="na"&gt;class=&lt;/span&gt;&lt;span class="s"&gt;"w-24 bg-gray-300 h-6 rounded-md "&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/div&amp;gt;&lt;/span&gt;



&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Here we have simply created a div with the border in which we have a 3 solid div. We have given the gray-300 color to those div.&lt;/p&gt;

&lt;p&gt;So far nothing Special!&lt;br&gt;
Wait but how to create that pulse effect 🤔? Do not worry we have tailwind thats it! In &lt;strong&gt;Tailwindcss&lt;/strong&gt; we have animation class called as &lt;strong&gt;animate-pulse&lt;/strong&gt; which give the effect we needed.&lt;/p&gt;

&lt;p&gt;Here is the &lt;a href="https://play.tailwindcss.com/UOqCq8WJme" rel="noopener noreferrer"&gt;tailwind playground&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Isn't it simple? If you find useful like and share😇.&lt;br&gt;
Any thoughts comment below👇.&lt;/p&gt;

&lt;p&gt;connnect us:&lt;br&gt;
Twitter : &lt;a href="https://twitter.com/job_pick" rel="noopener noreferrer"&gt;@job_pick&lt;/a&gt;&lt;br&gt;
Website : &lt;a href="https://jobpick.in/" rel="noopener noreferrer"&gt;jobpick.in&lt;/a&gt; - Frontend Developer Jobs Board&lt;/p&gt;

</description>
      <category>tailwindcss</category>
      <category>html</category>
      <category>css</category>
    </item>
    <item>
      <title>Why make a Bootstrapy Website if there's TailwindCss!</title>
      <dc:creator>jobpick.in</dc:creator>
      <pubDate>Wed, 04 Aug 2021 06:10:25 +0000</pubDate>
      <link>https://dev.to/jobpick/why-make-a-bootstrapy-website-if-there-s-tailwindcss-5c3c</link>
      <guid>https://dev.to/jobpick/why-make-a-bootstrapy-website-if-there-s-tailwindcss-5c3c</guid>
      <description>&lt;p&gt;&lt;strong&gt;How Tailwind Is Different From Other Frameworks?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tailwind&lt;/strong&gt; is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit.&lt;/p&gt;

&lt;p&gt;Most UI frameworks like Bootstrap, Material UI, Bulma etc. have pre-designed UI components like cards, buttons, navbars, alerts. You use those components and create designs on top of those components.                                                  &lt;/p&gt;

&lt;p&gt;But in &lt;strong&gt;Tailwind CSS&lt;/strong&gt;, you don't get a pre-designed set of components. You get utility-classes. You can combine those to create your layout and components.&lt;br&gt;
Because Tailwind is so low-level, it never encourages you to design the same site twice. Even with the same color palette and sizing scale, it's easy to build the same component with a completely different look in the next project.&lt;/p&gt;

&lt;p&gt;It doesn't have a default theme, and there are no built-in UI components.&lt;br&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz433piduf4676m7ykt70.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz433piduf4676m7ykt70.jpg" alt="frameworks"&gt;&lt;/a&gt;                          &lt;/p&gt;

&lt;p&gt;On the flip side, it also has no opinion about how your site should look and doesn't impose design decisions that you have to fight to undo.                                             &lt;/p&gt;

&lt;p&gt;If you're looking for a framework that comes with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you.                              &lt;/p&gt;

&lt;p&gt;But if you want a huge head start implementing a custom design with its own identity, Tailwind might be just what you're looking for.       &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Utility-first&lt;/strong&gt;                                            &lt;/p&gt;

&lt;p&gt;Creating a framework for building custom UIs means you can't provide abstractions at the usual level of buttons, forms, cards, navbars, etc.&lt;/p&gt;

&lt;p&gt;Instead, Tailwind provides highly composable, low-level utility classes that make it easy to build complex user interfaces without encouraging any two sites to look the same.          &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Responsive&lt;/strong&gt;&lt;br&gt;
If you use Tailwind CSS, you don't need to write &lt;strong&gt;custom styles&lt;/strong&gt; for handling responsiveness for different screen sizes. You can use Tailwind's responsive utilities to handle it easily.&lt;/p&gt;

&lt;p&gt;Frameworks like &lt;strong&gt;Bootstrap&lt;/strong&gt; have one major &lt;strong&gt;disadvantage&lt;/strong&gt;. Due to increased growth and usage, they became too big and offer less control over their styles. Learning frameworks like Bootstrap has become increasingly challenging because developers have to learn hundreds of classes.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Tailwind&lt;/strong&gt; and &lt;strong&gt;bootstrap&lt;/strong&gt; both have their place in the development landscape, but you’re better off to learn raw CSS as a fundamental skill first, then try and use both of the frameworks and make your decisions in a position of understanding.&lt;/p&gt;

&lt;p&gt;So that was it from this article😇.Hope you find this article helpful. Please share your thoughts/comments/feedback either in comment section or you can DM us at &lt;a href="https://twitter.com/job_pick" rel="noopener noreferrer"&gt;twiter&lt;/a&gt; , &lt;a href="https://jobpick.in/" rel="noopener noreferrer"&gt;jobpick.in&lt;/a&gt;&lt;/p&gt;

</description>
      <category>tailwindcss</category>
      <category>react</category>
      <category>webdev</category>
      <category>css</category>
    </item>
    <item>
      <title>How to Render HTML string in a React component ?</title>
      <dc:creator>jobpick.in</dc:creator>
      <pubDate>Tue, 03 Aug 2021 12:09:47 +0000</pubDate>
      <link>https://dev.to/jobpick/how-to-render-html-string-in-a-react-component-3kd2</link>
      <guid>https://dev.to/jobpick/how-to-render-html-string-in-a-react-component-3kd2</guid>
      <description>&lt;p&gt;In this tutorial we will see how to render HTML string in a React component. &lt;/p&gt;

&lt;p&gt;Most of the rich text editor for react uses html for the formatting. So the data in the text editor is saved as string.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;p&amp;gt;some dummy &amp;lt;span&amp;gt;data&amp;lt;/span&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We cannot directly render this string, html tags will also get treated as raw string.&lt;/p&gt;

&lt;p&gt;The easiest solution for this is to use &lt;strong&gt;dangerouslySetInnerHTML&lt;/strong&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;div&lt;/span&gt; &lt;span class="nx"&gt;dangerouslySetInnerHTML&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{{&lt;/span&gt; &lt;span class="na"&gt;__html&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;p&amp;gt;some data &amp;lt;/p&amp;gt;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="p"&gt;}}&lt;/span&gt; &lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;by using dangerouslySetInnerHTML, entire html in the string is preserved.&lt;br&gt;
Other alternative would be to use a &lt;a href="https://github.com/remarkablemark/html-react-parser"&gt;html-react-parser&lt;/a&gt; library.&lt;/p&gt;

&lt;p&gt;Like this post?&lt;br&gt;
Our Twitter : &lt;a href="https://twitter.com/job_pick"&gt;@job_pick&lt;/a&gt; &lt;br&gt;
Our website : &lt;a href="https://jobpick.in/"&gt;jobpick.in&lt;/a&gt; &lt;/p&gt;

</description>
      <category>react</category>
      <category>html</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Why A Developer Should Learn React.js in 2021?</title>
      <dc:creator>jobpick.in</dc:creator>
      <pubDate>Tue, 03 Aug 2021 08:42:00 +0000</pubDate>
      <link>https://dev.to/jobpick/why-a-developer-should-learn-react-js-in-2021-3igo</link>
      <guid>https://dev.to/jobpick/why-a-developer-should-learn-react-js-in-2021-3igo</guid>
      <description>&lt;p&gt;&lt;strong&gt;Why A Developer Should Learn Reactjs?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Learning new skills is always nice but you should learn something that actually will turn out fruitful in future. Choose a skill that is worth your time and money. Learning &lt;strong&gt;React JS&lt;/strong&gt; is good to start because it is very popular throughout the globe among web developers.  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;About React.js&lt;/strong&gt;&lt;br&gt;
React(also known as React.js or React JS) is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by &lt;strong&gt;Facebook&lt;/strong&gt; and a community of individual developers and companies.  &lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8yg1t6hygsub74rc5n9v.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8yg1t6hygsub74rc5n9v.jpg" alt="React Image"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;React.js is one of the most critical front-end libraries you can use in modern JavaScript development. It enables you to build highly reactive user interfaces that provide a fast and mobile-app-like user experience.    &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Popularity&lt;/strong&gt; &lt;br&gt;
React.js is already extremely popular. Its popularity has risen continuously over the past years, and I see absolutely no reason why that should change. &lt;/p&gt;

&lt;p&gt;It is vastly used by professional developers and there are plenty of job opportunities in the digital field for anyone who has command over React JS. React is a Javascript library that is simple to its users and uses minimal coding. In short, it won't be incorrect if we say that React simplifies the life of a developer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Importance Of Learning React&lt;/strong&gt;&lt;br&gt;
Mastering React can enable you to get hold of a lucrative and financially rewarding job. There is a strong market demand for people who are well versed in React as it is used to create both web and mobile applications. One should never have second thoughts about perusing courses to learn React.&lt;/p&gt;

&lt;p&gt;It will focus on being a library for component-based UI creation - with all its strengths and weaknesses. The future of React.js is very bright.With the power of modern JavaScript and ReactJs, the web development becomes exiting and addictive.&lt;/p&gt;

&lt;p&gt;Again, knowing general web developer skills like HTML, CSS, and JavaScript is a must for working as a web developer, but the more skills like React that you stack on top of your foundation, the more in-demand you will be to employers and the more money you can earn. And when you look at the time investment it takes to learn a skill like React JS (literally a handful of months) that investment becomes a no-brainer. Part of being a successful web developer is staying on top of current technologies, and right now .React is at the top of the web technology heap. &lt;br&gt;
Once you learn React with your full potential and learn full features of React, you probably never gonna think to leave React.&lt;/p&gt;

&lt;p&gt;So that was it from this article😇. Please share your thoughts/comments/feedback.&lt;/p&gt;

&lt;p&gt;Connect us @ &lt;a href="https://twitter.com/job_pick" rel="noopener noreferrer"&gt;twitter&lt;/a&gt; , &lt;a href="https://jobpick.in/" rel="noopener noreferrer"&gt;jobpick.in&lt;/a&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>webdev</category>
      <category>reactnative</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
