<?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: Carlos Nah </title>
    <description>The latest articles on DEV Community by Carlos Nah  (@ra9).</description>
    <link>https://dev.to/ra9</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%2F45208%2F11aa31ea-8ea6-408a-aadd-d56fe43247a5.jpg</url>
      <title>DEV Community: Carlos Nah </title>
      <link>https://dev.to/ra9</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ra9"/>
    <language>en</language>
    <item>
      <title>Lost Skills We Sold for Convenience Over Commitment</title>
      <dc:creator>Carlos Nah </dc:creator>
      <pubDate>Sun, 29 Mar 2026 11:49:29 +0000</pubDate>
      <link>https://dev.to/ra9/lost-skills-we-sold-for-convenience-over-commitment-4le6</link>
      <guid>https://dev.to/ra9/lost-skills-we-sold-for-convenience-over-commitment-4le6</guid>
      <description>&lt;p&gt;In an era where AI can write your code and your essays, is struggle still a virtue? We have traded the slow, painful process of learning for the instant gratification of a prompt. But in doing so, we might be trading away our mastery. This is a reflection on the lost skills of tech: the patience to sit with a bug, the grit to research deeply, and the commitment required to truly own your work.&lt;/p&gt;

&lt;h3&gt;
  
  
  TL;DR
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Efficiency vs. Expertise:&lt;/strong&gt; We have optimized for speed, but we have stopped optimizing for understanding.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Desirable Difficulty:&lt;/strong&gt; True learning requires a level of struggle that convenience tools often remove.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;The Mission:&lt;/strong&gt; Tech is about more than code. It is about solving problems, teaching others, and making an impact.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;How are we even supposed to write a piece like this in this day and age?&lt;/p&gt;

&lt;p&gt;We live in an age where we have slowly lost the touch of technical writing and the ability to truly pour out our thoughts. It has reached a point where those who can still do this effortlessly are labeled as "gurus" or "subject matter experts."&lt;/p&gt;

&lt;p&gt;But were they always that rare, or did we just stop trying?&lt;/p&gt;

&lt;p&gt;Nowadays, a few prompts can get you dangerously close to an expert level with little to no effort. We have entered an era where it is becoming harder to tell who is who anymore. The lines are blurred. Authenticity is fading. That is the scary part.&lt;/p&gt;

&lt;p&gt;There was a time when writing something meaningful took hours or even days. Drafts, edits, re-edits, and starting over. That process was not just about producing content. It was about becoming a better thinker. Today, tools like ChatGPT and GitHub Copilot have changed the game. They are powerful. They accelerate learning and reduce friction. &lt;/p&gt;

&lt;p&gt;But here is the uncomfortable truth: &lt;strong&gt;convenience is quietly replacing commitment.&lt;/strong&gt; When that happens, depth starts to suffer.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Early Spark
&lt;/h2&gt;

&lt;p&gt;I come from an era where curiosity was the key ingredient that fueled passion. Even though learning happened in classrooms, real growth came from intentional research. We filled knowledge gaps on our own with the hope of becoming better quizzers and worthy opponents. It was not just about answering questions. It was about the reputation you built and the value that came with it.&lt;/p&gt;

&lt;p&gt;Even though my school failed me in many ways, it was never enough to stop me from wanting to be better. There was pride in being called a quizzer or a historian. I cannot even begin to emphasize the volume of books I went through: world history, regional events, and stacks of current affairs. &lt;/p&gt;

&lt;p&gt;You had to know things. &lt;/p&gt;

&lt;p&gt;You had to memorize capitals and presidents so that when a moderator said, "In China, Mao Zedong..." the bells were already ringing. Everyone was racing to complete the question. That moment of tension and readiness meant something. It speaks to the challenging nature of the human spirit. We were wired to seek, to struggle, and to earn our knowledge.&lt;/p&gt;

&lt;p&gt;Now, that skill is slowly fading. I no longer have to search for a geography book or sit with the material long enough to truly understand it. Back then, the process taught you things you would never forget. Those discoveries felt personal. They were secrets earned only by those who put in the time.&lt;/p&gt;

&lt;p&gt;Today, everything is handed to you instantly. No retention. No struggle. No deep attachment to the skills once respected among scholars. Maybe that is what we have really lost.&lt;/p&gt;

&lt;h2&gt;
  
  
  My Journey Into Tech
&lt;/h2&gt;

&lt;p&gt;My journey into tech was never just about the code. It was driven by a deeper desire to solve problems, to teach what I had discovered, and to make a tangible impact. Bringing ideas to life through syntax was simply the medium. I wanted to build things that mattered and help others navigate the same complexities I was facing.&lt;/p&gt;

&lt;p&gt;And yes, sometimes it would break. Badly.&lt;/p&gt;

&lt;p&gt;There were moments when a bug would take hours or even days to figure out. You would reach those pauses where you were not even coding anymore. You were just living life. You would be talking to a friend or standing in the shower when it finally hit you: "I just needed to remove that curly bracket from line 54."&lt;/p&gt;

&lt;p&gt;That moment. That spark. That click. &lt;/p&gt;

&lt;p&gt;You do not forget it because you earned the solution. We did not just get attached to the ideas. We got attached to the process. With that came accountability. There is a certain pride in saying, "I figured out the bug we were struggling with." It is about the fact that you stayed with the problem long enough for it to reveal itself to you.&lt;/p&gt;

&lt;p&gt;That patience is fading. We are moving toward a world where the "human debugger" is becoming less relevant. Instead of thinking through problems, we throw our styles and patterns into an AI and wait for something usable to come back. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Convenience over craftsmanship.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;We no longer sit with the problem. We no longer struggle. You can simply pay for high-tier tools, prompt your way through a few iterations, and get something that works.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Shift We Do Not Talk About Enough
&lt;/h2&gt;

&lt;p&gt;I remember how many times I thought about being published by freeCodeCamp. My growth as a developer started there. It was not just a platform. It was a proving ground. I wanted to contribute and say, "I have learned something, and here is my voice." &lt;/p&gt;

&lt;p&gt;But every time I had an idea, I would find that someone had already written about it. That stalled me. Looking back, I realize that hesitation was part of the journey. It forced me to think deeper. It demanded originality. &lt;/p&gt;

&lt;p&gt;While not everything published back then was perfect, there was a level of rigor involved. There was weight to putting your name on something. It felt even harder coming from a place and a country that is not always recognized in these global spaces. You had to earn your voice.&lt;/p&gt;

&lt;p&gt;Now, success is becoming about who has access to better tools and more tokens. Blocks of code appear instantly, but they often carry no real connection to the person using them. No struggle. No story. No depth. &lt;/p&gt;

&lt;p&gt;This raises a question we are not asking enough: &lt;strong&gt;If everything is easier to produce, what becomes harder to prove?&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What We Might Be Losing
&lt;/h2&gt;

&lt;p&gt;This is not an attack on technology. Tools have always evolved. From calculators to IDEs and from Stack Overflow to AI assistants, we have always built things to make life easier. But there is a difference between using tools and losing yourself to them.&lt;/p&gt;

&lt;p&gt;Psychologists often discuss "desirable difficulty," a concept popularized by Robert A. Bjork. The idea is simple: some level of struggle is necessary for deep learning. If you remove that struggle entirely, you may gain speed, but you lose mastery. &lt;/p&gt;

&lt;p&gt;That is where we are now. We have optimized for speed and output. Somewhere along the way, we stopped optimizing for understanding.&lt;/p&gt;

&lt;h2&gt;
  
  
  Closing Thought
&lt;/h2&gt;

&lt;p&gt;Perhaps this feels reflective or even uncomfortable. That is good. Not everything should be easy. Not everything should be instant. &lt;/p&gt;

&lt;p&gt;We have gained power through tools like ChatGPT and Claude, but we are trading away something quieter: patience, depth, and ownership. The part of us that sits with a problem and refuses to quit is where mastery lives.&lt;/p&gt;

&lt;p&gt;The question is not whether these tools are good or bad. The question is what kind of builder, thinker, or writer you choose to be in a world where everything can be done for you. &lt;/p&gt;

&lt;p&gt;Convenience will get you results. Commitment is what makes the work yours.&lt;/p&gt;

</description>
      <category>career</category>
      <category>webdev</category>
      <category>ai</category>
      <category>programming</category>
    </item>
    <item>
      <title>Simplifying Data Table Management with EzyTables</title>
      <dc:creator>Carlos Nah </dc:creator>
      <pubDate>Wed, 18 Oct 2023 00:06:53 +0000</pubDate>
      <link>https://dev.to/ra9/simplifying-data-table-management-with-ezytables-g0j</link>
      <guid>https://dev.to/ra9/simplifying-data-table-management-with-ezytables-g0j</guid>
      <description>&lt;p&gt;Data tables are a fundamental component of many web applications. They help organize, display, and manage tabular data efficiently. Regardless of the framework or library you're using, managing data tables can sometimes be a challenging task. To address these challenges and simplify data table management, we introduce &lt;strong&gt;EzyTables&lt;/strong&gt;, a minimalist JavaScript library.&lt;/p&gt;

&lt;p&gt;In this blog post, we'll explore the benefits of using &lt;strong&gt;EzyTables&lt;/strong&gt; and demonstrate how it can enhance data table handling in a framework-agnostic context.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Challenges of Data Table Management
&lt;/h2&gt;

&lt;p&gt;Managing data tables in web applications comes with a set of common challenges:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reactivity&lt;/strong&gt;: Ensuring that your data table updates and reflects changes promptly, such as sorting, filtering, or searching.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Complexity&lt;/strong&gt;: Writing and maintaining custom code for data table functionality can quickly become complex and hard to manage.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Performance&lt;/strong&gt;: As your dataset grows, handling rendering, sorting, and filtering efficiently can be a performance bottleneck.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Data Fetching&lt;/strong&gt;: When working with remote data sources, fetching data from a server and integrating it into your data table can be a significant challenge.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Meet EzyTables
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;EzyTables&lt;/strong&gt; is a lightweight, framework-agnostic JavaScript library that simplifies data table management. It offers several key features:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reactivity&lt;/strong&gt;: EzyTables leverages the reactivity system to ensure that your data table automatically updates when data changes. Whether it's sorting, searching, or filtering, your table stays up-to-date.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Simplicity&lt;/strong&gt;: Creating and managing data tables becomes effortless with EzyTables. It eliminates the need for intricate custom code, allowing you to set up a data table with minimal effort.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Customization&lt;/strong&gt;: While EzyTables provides essential data table functionality, it also allows for customization. You can define your rendering logic, ensuring that your data table looks and behaves exactly as you want.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Pagination&lt;/strong&gt;: EzyTables includes built-in support for pagination. This makes it easy to handle large datasets while maintaining optimal performance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Server-Side Data Fetching&lt;/strong&gt;: If your application requires data from a server, EzyTables can handle server-side data fetching efficiently, while still providing a smooth user experience.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h2&gt;
  
  
  Using EzyTables in a Framework-Agnostic Context
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;EzyTables&lt;/strong&gt; is designed to be framework-agnostic, which means you can use it with any web framework or even without one. Let's take a look at a simple example of using EzyTables in a framework-agnostic context:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;!DOCTYPE html&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;html&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;head&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;title&amp;gt;&lt;/span&gt;EzyTables Example&lt;span class="nt"&gt;&amp;lt;/title&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/head&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;body&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;"table-controls"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;label&lt;/span&gt; &lt;span class="na"&gt;for=&lt;/span&gt;&lt;span class="s"&gt;"limitSelect"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Show&lt;span class="nt"&gt;&amp;lt;/label&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;select&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"limitSelect"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;option&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"10"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;10&lt;span class="nt"&gt;&amp;lt;/option&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;option&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"20"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;20&lt;span class="nt"&gt;&amp;lt;/option&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;option&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"50"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;50&lt;span class="nt"&gt;&amp;lt;/option&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;/select&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;label&lt;/span&gt; &lt;span class="na"&gt;for=&lt;/span&gt;&lt;span class="s"&gt;"searchInput"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Search&lt;span class="nt"&gt;&amp;lt;/label&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;input&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"searchInput"&lt;/span&gt; &lt;span class="na"&gt;placeholder=&lt;/span&gt;&lt;span class="s"&gt;"Search..."&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;table&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"myTable"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;thead&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;tr&amp;gt;&lt;/span&gt;
          &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Name&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
          &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Description&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
          &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Status&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
          &lt;span class="nt"&gt;&amp;lt;th&amp;gt;&lt;/span&gt;Date&lt;span class="nt"&gt;&amp;lt;/th&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/tr&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;/thead&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;tbody&amp;gt;&amp;lt;/tbody&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/table&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;"pagination"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"prevButton"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Prev&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
      &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"nextButton"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Next&lt;span class="nt"&gt;&amp;lt;/button&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;p&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"paginationInfo"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&amp;lt;/p&amp;gt;&lt;/span&gt;

    &lt;span class="nt"&gt;&amp;lt;script &lt;/span&gt;&lt;span class="na"&gt;type=&lt;/span&gt;&lt;span class="s"&gt;"module"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
       &lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;EzyTables&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://esm.run/ezytables&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;script&amp;gt;&lt;/span&gt;
      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John Brown&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Active&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2020-01-01&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Jane Abram&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Active&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2020-01-01&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Sam Smith&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Active&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2020-01-01&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Ekaterina Tankova&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Active&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2020-01-01&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Tom Winter&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Active&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2020-01-01&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Sandra Jones&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Active&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2020-01-01&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Molly Summer&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Active&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2020-01-01&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Mark Winter&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Active&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2020-01-01&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
        &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Cindy Jones&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
            &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, vitae aliquam nisl nunc eu nisi. Sed vitae nisl eget nisl aliquam aliquet. Sed vitae nisl eget nisl aliquam aliquet.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;status&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Active&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
          &lt;span class="na"&gt;date&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2020-01-01&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;},&lt;/span&gt;
      &lt;span class="p"&gt;];&lt;/span&gt;

      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;customRender&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="c1"&gt;// Replace this with your custom rendering logic&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;tableBody&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;#myTable tbody&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;tableBody&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;""&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
          &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;row&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;createElement&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;tr&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
          &lt;span class="nx"&gt;row&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;innerHTML&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`
            &amp;lt;td&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/td&amp;gt;
            &amp;lt;td&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;description&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/td&amp;gt;
            &amp;lt;td&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;status&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/td&amp;gt;
            &amp;lt;td&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;date&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="s2"&gt;&amp;lt;/td&amp;gt;
          `&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
          &lt;span class="nx"&gt;tableBody&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;appendChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;row&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="p"&gt;});&lt;/span&gt;

        &lt;span class="c1"&gt;// Display pagination info&lt;/span&gt;
        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;pageInfo&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;#paginationInfo&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;pageInfo&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;${&lt;/span&gt;&lt;span class="nx"&gt;easyTable&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;getShowingInfo&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;&lt;span class="s2"&gt;`&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="p"&gt;};&lt;/span&gt;


      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;easyTable&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;EzyTables&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
        &lt;span class="nx"&gt;data&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;perPage&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;renderFunction&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;customRender&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;clientEnabled&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="na"&gt;client&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="na"&gt;perPage&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
        &lt;span class="p"&gt;}&lt;/span&gt;
      &lt;span class="p"&gt;});&lt;/span&gt;

      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;searchInput&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;#searchInput&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="nx"&gt;searchInput&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;input&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="nx"&gt;easyTable&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;setSearchDebounced&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;searchInput&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="p"&gt;});&lt;/span&gt;

      &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;prevButton&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;#prevButton&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;prevButton&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;easyTable&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;prevPage&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="p"&gt;});&lt;/span&gt;

        &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;nextButton&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;querySelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;#nextButton&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
        &lt;span class="nx"&gt;nextButton&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
            &lt;span class="nx"&gt;easyTable&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;nextPage&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
        &lt;span class="p"&gt;});&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;/body&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/html&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In this example, EzyTables is included as a JavaScript file, and an instance of EzyTables is created to manage the data table. The HTML structure is simple, and the logic is kept minimal, showcasing the ease of integrating EzyTables into a framework-agnostic context.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Data table management in web applications can be simplified and made more efficient with EzyTables. Its reactivity, simplicity, and customization options make it a valuable addition to your web development toolkit, regardless of the framework or library you're using. Give it a try, and you'll find that handling data tables has never been easier. EzyTables opens up new possibilities for efficient and elegant data table solutions in your web applications.&lt;/p&gt;

&lt;p&gt;Head over to their documentation for more information and example &lt;a href="https://github.com/ra9/easytables"&gt;here.&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>datatables</category>
      <category>javascript</category>
      <category>programming</category>
    </item>
    <item>
      <title>My new npm package RademeJs</title>
      <dc:creator>Carlos Nah </dc:creator>
      <pubDate>Wed, 06 May 2020 11:29:13 +0000</pubDate>
      <link>https://dev.to/ra9/my-new-npm-package-rademejs-5bmb</link>
      <guid>https://dev.to/ra9/my-new-npm-package-rademejs-5bmb</guid>
      <description>&lt;p&gt;Howdy world,  today I am excited to recommend you to this wonderful npm package called &lt;a href="https://www.npmjs.com/package/rademe-js"&gt;rademe-js&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;I created this package to help professional developers and beginners as well to stop repetitive tasks and use each features of the language wisely.&lt;/p&gt;

&lt;h2&gt;
  
  
  Problems
&lt;/h2&gt;

&lt;p&gt;Many at times you will want to loop through an array or an object, it may also be a way to check the type of each data types or maybe to create a html element or some cool helper methods that you keep on repeating yourselves.&lt;/p&gt;

&lt;p&gt;These things have happened to me at my job and I decided that why not make each helper methods into a reusable code or function that I can use in whatever project I am doing and this started to get great and I enjoyed those moments.&lt;/p&gt;

&lt;p&gt;Now I have decided to make these simple helper methods available to every one and am open to  contributions.&lt;/p&gt;

&lt;p&gt;There are some cool helper methods you find in this package that you will add to your project for fast development.&lt;/p&gt;

&lt;p&gt;I will love to hear what you think about this project and what new features should be added or if you find a bug my DM is always open or contact me through my mail &lt;a href="mailto:cnah27@gmail.com"&gt;cnah27@gmail.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Happy Coding,&lt;br&gt;
Have an awesome day&lt;/p&gt;

</description>
      <category>rademejs</category>
      <category>showdev</category>
    </item>
    <item>
      <title>Comparing Arrays using isArrayEquals() method</title>
      <dc:creator>Carlos Nah </dc:creator>
      <pubDate>Tue, 21 Jan 2020 22:56:58 +0000</pubDate>
      <link>https://dev.to/ra9/comparing-arrays-using-isarrayequals-method-1h2c</link>
      <guid>https://dev.to/ra9/comparing-arrays-using-isarrayequals-method-1h2c</guid>
      <description>&lt;p&gt;JavaScript is a great language that has endured a long struggle over the years. Yet it continues to shine despite all the criticisms. &lt;/p&gt;

&lt;p&gt;In this regard, I have decided to compare two arrays and see if they are equal. Equal in the sense of length and element within the array. In so doing I also take into consideration that the order of the elements doesn't matter.&lt;/p&gt;

&lt;p&gt;Here is my code below:&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="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;isArrayEquals&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;arr2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
     &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
     &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;arr1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;for&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;arr2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
           &lt;span class="k"&gt;if&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;arr1&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nx"&gt;arr2&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;j&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
                &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;
           &lt;span class="p"&gt;}&lt;/span&gt;
     &lt;span class="p"&gt;}&lt;/span&gt;   
 &lt;span class="p"&gt;}&lt;/span&gt;

 &lt;span class="k"&gt;return&lt;/span&gt;  &lt;span class="nx"&gt;arr1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nx"&gt;arr2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="nx"&gt;arr1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isArrayEquals&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;]))&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isArrayEquals&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;me&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;you&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;us&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;us&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;me&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]))&lt;/span&gt; &lt;span class="c1"&gt;// false&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;isArrayEquals&lt;/span&gt;&lt;span class="p"&gt;([],&lt;/span&gt; &lt;span class="p"&gt;[]))&lt;/span&gt; &lt;span class="c1"&gt;// true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Well this might not be the best way to implement this but I think it will help in the process.&lt;/p&gt;

&lt;p&gt;I've also implemented this and some other helper methods into a npm package called &lt;a href="https://www.npmjs.com/package/rademe-js"&gt;rademe-js&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Hope it helps and someday we might have Array.equals implemented into ECMA TC39 specification.&lt;/p&gt;

</description>
      <category>community</category>
      <category>web</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Year In Review 2019</title>
      <dc:creator>Carlos Nah </dc:creator>
      <pubDate>Fri, 20 Dec 2019 01:19:10 +0000</pubDate>
      <link>https://dev.to/ra9/year-in-review-2019-25l1</link>
      <guid>https://dev.to/ra9/year-in-review-2019-25l1</guid>
      <description>&lt;p&gt;Howdy, everyone, it has been a while since I last wrote an article to share my experiences with this wonderful community.&lt;br&gt;
This year marked a remarkable memory in my life and I am so much excited to have made it through to this day.&lt;/p&gt;

&lt;p&gt;As the title of this article implies I am going to be asking this awesome community a few questions but mainly I will like for us to follow this format below and answer each question accordingly.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;What was your resolution for this year 2019?&lt;/li&gt;
&lt;li&gt;Did you reach or exceed your goals&lt;/li&gt;
&lt;li&gt;What are those things you were able to complete?&lt;/li&gt;
&lt;li&gt;What are those things you weren't able to complete?&lt;/li&gt;
&lt;li&gt;Did you actually follow all of these goals you've written down from the start of the year 2019?&lt;/li&gt;
&lt;li&gt;What lesson did you learn from this year?&lt;/li&gt;
&lt;li&gt;How can you prepare for the next year 2020?&lt;/li&gt;
&lt;li&gt;What held you back from no achieving all of your goals?&lt;/li&gt;
&lt;li&gt;Do you think you can do better next year?&lt;/li&gt;
&lt;li&gt;I know is a bit soon but can you briefly explain your resolution for the year 2020?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Well, these questions above are all important and I've used them to plan for the next year 2020.&lt;br&gt;
I hope you guys will share your answers below and who knows if this might inspire others to plan well and learned from someone's mistakes and that person might just be you.&lt;br&gt;
Merry Xmass in advance devs.&lt;/p&gt;

</description>
      <category>2019</category>
      <category>community</category>
      <category>discuss</category>
    </item>
    <item>
      <title>#100DaysofTeachMeAnything challenge</title>
      <dc:creator>Carlos Nah </dc:creator>
      <pubDate>Thu, 01 Aug 2019 13:14:48 +0000</pubDate>
      <link>https://dev.to/ra9/100daysofteachmeanything-challenge-215m</link>
      <guid>https://dev.to/ra9/100daysofteachmeanything-challenge-215m</guid>
      <description>&lt;p&gt;Howdy world, it gives me joy  today announcing to  everyone reading right now the &lt;em&gt;#100DaysOfTeachMeAnything&lt;/em&gt;.&lt;br&gt;
I have searched and haven't see such like this or any challenge like this so I decided to make one, it has been the way in which I learned many new things or  how to code  and today I want you to do the same.&lt;/p&gt;
&lt;h3&gt;
  
  
  Who can participate in this challenge?
&lt;/h3&gt;

&lt;p&gt;Anyone and everyone ranging from techies, professionals, diplomats or anybody who wants to learn something new and have confidence doing it.&lt;/p&gt;

&lt;p&gt;Well the  methodologies use here are very different from many challenges or somewhat similar.&lt;br&gt;
First reason of the &lt;em&gt;#100DaysOfTeachMeAnything&lt;/em&gt; challenge is to give anybody or everybody who finds it difficult to learn a certain thing in a certain amount of time but failed a chance to do better.&lt;br&gt;
Don't worry stay with me as we sort this out. &lt;br&gt;
I have heard from many professionals in my field that the best way to learn something is to  either teach it or blog about the part you aren't understanding and by doing it have helped me overcame many common mistakes I made in my learning endeavors.&lt;br&gt;
Many learners take it lightly and spend hours watching or reading tutorials just to realized it didn't stalk in.&lt;br&gt;
It can be very frustrating but hey! who told you that it isn't possible?Join the challenge today and be a part of something meaningful by teaching what you don't understand to another person who wants to learn it desperately. I am done with the talking let get into how this us possible.&lt;/p&gt;
&lt;h3&gt;
  
  
  How this is possible?
&lt;/h3&gt;

&lt;p&gt;This is possible because you're willing to commit your time and efforts in teaching something to someone and at the same time learning what you're teaching.&lt;br&gt;
All you need to do is firstly, tweet about it by copying the below paragraph or statement.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; I [your name], do hereby commit to the #100DaysOfTeachMeAnything challenge to teach [course name] through blogs and articles until the 100 days elapse as a way to build up my skills in the said course or field.
@CarlosNah8 #100DaysOfTeachMeAnything
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After you're done with the tweet you can use the below resources to start your journey.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; For now I will give resources base on my field and if you have a good resources base on another field please leave it in the comments below.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Web development&lt;/strong&gt;&lt;br&gt;
Quincy Larson and his team of contributors have compile together many resources ranging from frontend backend and fullstack web development. I urge you to follow the link below and try them out if what you want to learn is web development. &lt;a href="https://freecodecamp.org"&gt;https://freecodecamp.org&lt;/a&gt;&lt;br&gt;
There are also many good sites that teaches many web development courses like &lt;a href="http://theodinproject.com"&gt;http://theodinproject.com&lt;/a&gt;, &lt;a href="https://developer.mozilla.org/en-US/"&gt;https://developer.mozilla.org/en-US/&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;After you have chosen the course you want to learn, each day write a blog post or an article summary of the topic you have learned and the best practices that follows.&lt;br&gt;
I will encourage you to use &lt;a href="https://dev.to"&gt;https://dev.to&lt;/a&gt; to post your daily work and tweet about it on twitter with the hash tag.&lt;br&gt;
I will retweet and follow you guys, this is just one of my many posts and you should expect more guidelines and updates.&lt;/p&gt;

&lt;p&gt;Lastly, I have tried to put almost everything in place but life has a way of dealing with us and my one will not be sufficient to make this challenge a success, I am now using this medium to ask for contributors and professionals to please help me either by sharing the word using the hash tag or producing more guidelines, contents or much more.&lt;br&gt;
Any interested individual can kindly reach me through twitter or &lt;a href="mailto:cnah27@gmail.com"&gt;cnah27@gmail.com&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thanks for reading through and you can leave your suggestions in the comment below.&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>webdev</category>
      <category>career</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Handling CSS3 Specificity</title>
      <dc:creator>Carlos Nah </dc:creator>
      <pubDate>Wed, 19 Jun 2019 22:52:03 +0000</pubDate>
      <link>https://dev.to/ra9/handling-css3-specificity-1jp</link>
      <guid>https://dev.to/ra9/handling-css3-specificity-1jp</guid>
      <description>&lt;p&gt;I know it may sound strange but a lot of developers and engineers still find it difficult to get their way around CSS3 Specificity. If you have  doubts of why this color isn't working or why your font isn't responding to your defined styles set then you have no more reason for doubts, join me as we unveil the secret recipes to handling css3 specificity.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is CSS Specificity?
&lt;/h2&gt;

&lt;p&gt;According to MDN&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Specificity&lt;/strong&gt; is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;In other words it is just a rule-set that web browsers uses to decide which css property with higher priority  to add on a given element or selectors that matched it.&lt;/p&gt;

&lt;h3&gt;
  
  
  How can one calculate specificity?
&lt;/h3&gt;

&lt;p&gt;There are many ways to calculate specificity but I will be showing you the easiest method, it is called the ABCD method.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;A&lt;/strong&gt; represent style attribute or inline style, which carries the highest priority &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;B&lt;/strong&gt; represent the id selector that carries the second highest priority when applied on an element&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;C&lt;/strong&gt; represent classes, pseudo elements and attribute&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;D&lt;/strong&gt; represent elements&lt;/p&gt;

&lt;p&gt;From the above description you will understand that &lt;strong&gt;A&lt;/strong&gt; have the value of 1000, while &lt;strong&gt;B&lt;/strong&gt; have the value of 100, also &lt;strong&gt;C&lt;/strong&gt; have the value of 10, and &lt;strong&gt;D&lt;/strong&gt; have the value of 1.&lt;/p&gt;

&lt;p&gt;If only A is applied on an element, it will look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; A = 1
 B = 0
 C = 0
 D = 0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And if B is applied on an element, it will look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; A = 0
 B = 1
 C = 0
 D = 0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If C is also applied on an element, it will look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; A = 0
 B = 0
 C = 1
 D = 0
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;And if D is applied on an element. it will look like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; A = 0
 B = 0
 C = 0
 D = 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Right now looking at the diagram above, I think you have grasp the concept and if you continue  practicing and adding each method together open up your mind to endless possibility or understanding.&lt;/p&gt;

&lt;p&gt;Let me know what you think by leaving a comment.&lt;/p&gt;

</description>
      <category>css3</category>
      <category>html</category>
      <category>andela</category>
    </item>
  </channel>
</rss>
