<?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: KHALID ISMAIL</title>
    <description>The latest articles on DEV Community by KHALID ISMAIL (@kabcoder).</description>
    <link>https://dev.to/kabcoder</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%2F312475%2F44be511c-acc2-4549-ad9e-405283786fa4.jpg</url>
      <title>DEV Community: KHALID ISMAIL</title>
      <link>https://dev.to/kabcoder</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/kabcoder"/>
    <language>en</language>
    <item>
      <title>Here is how you can write and collaborate better as developer</title>
      <dc:creator>KHALID ISMAIL</dc:creator>
      <pubDate>Mon, 18 Nov 2024 14:29:43 +0000</pubDate>
      <link>https://dev.to/kabcoder/here-is-how-you-can-write-and-collaborate-better-as-developer-546i</link>
      <guid>https://dev.to/kabcoder/here-is-how-you-can-write-and-collaborate-better-as-developer-546i</guid>
      <description>&lt;p&gt;Let’s face it: writing documentation is hard. Whether it’s a PRD, API doc, or meeting notes, the process often feels overwhelming. You start with a blank page, struggle to find the right structure, and then spend hours going back and forth with teammates on edits.&lt;/p&gt;

&lt;p&gt;For developers, it’s even harder. Balancing technical depth with readability is tricky. Should you add more details? Or keep it simple? Then comes the collaboration: juggling comments in Slack, Google Docs, or emails. It’s messy and time-consuming.&lt;/p&gt;

&lt;p&gt;But it doesn’t have to be this way.&lt;/p&gt;

&lt;p&gt;Here are some tips to make documentation easier:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Start with templates: Templates save time and give structure, so you’re not stuck staring at a blank page.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Collaborate smarter: Real-time collaboration keeps everyone on the same page without the chaos of scattered feedback.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Use AI to your advantage: AI tools can help with phrasing, formatting, and even suggesting sections you might have missed.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This is exactly why I built Proganize. It’s a platform designed to take the pain out of writing and collaborating on documentation. With AI-powered suggestions, ready-made templates, and seamless collaboration tools, Proganize helps you write docs 10x faster and with far less frustration.&lt;/p&gt;

&lt;p&gt;Whether you're a solo developer or part of a team, Proganize is here to transform the way you write. No more blank pages, messy feedback cycles, or endless revisions.&lt;/p&gt;

&lt;p&gt;Want to see it in action? &lt;a href="https://prorganize.app" rel="noopener noreferrer"&gt;Try Proganize&lt;/a&gt; today and start writing better docs that your team will actually love.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>TECHNICAL CO-FOUNDER NEEDED</title>
      <dc:creator>KHALID ISMAIL</dc:creator>
      <pubDate>Tue, 24 Nov 2020 18:22:31 +0000</pubDate>
      <link>https://dev.to/kabcoder/technical-co-founder-needed-3pfb</link>
      <guid>https://dev.to/kabcoder/technical-co-founder-needed-3pfb</guid>
      <description>&lt;p&gt;Hi, there my name is Khalid Ismail am a front-end engineer, so I have an idea I have been working on.&lt;/p&gt;

&lt;p&gt;It's a fintech solution that let you bank, pay bills, transportation, and a lot more packed in a single app, this also let users bank with their social media platform like Messenger, Whatsapp without having to open an app or stop their chatting.&lt;/p&gt;

&lt;p&gt;so am looking for a technical founder who is dedicated to making this product come to life, if you feel like you are the one you can reply to this post in the comment section or email me at &lt;a href="mailto:kabcoder@gmail.com"&gt;kabcoder@gmail.com&lt;/a&gt; so that we can talk further about features and how we would build this app.&lt;/p&gt;

</description>
      <category>discuss</category>
    </item>
    <item>
      <title>What hactoberfest made me</title>
      <dc:creator>KHALID ISMAIL</dc:creator>
      <pubDate>Fri, 30 Oct 2020 08:28:16 +0000</pubDate>
      <link>https://dev.to/kabcoder/what-hactoberfest-made-me-5681</link>
      <guid>https://dev.to/kabcoder/what-hactoberfest-made-me-5681</guid>
      <description>&lt;h2&gt;
  
  
  What I Learned From Hacktoberfest
&lt;/h2&gt;

&lt;p&gt;Today my hactoberfest challenge was reviewed and accepted, and this is a huge milestone for me, to contribute to the opensource and learn from them.&lt;/p&gt;

&lt;p&gt;I was able to work on a google chrome extension (Letra Extension) and Open source Github community stats which I was able to work with a team and improve my knowledge in the open-source world.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;This not the end&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I would gladly contribute to any open-source software to improve my coding skills, experience to become a better developer.&lt;/p&gt;

&lt;p&gt;Thank you hactoberfest for giving the opportunity to learn and contribute to open-source projects.&lt;/p&gt;

</description>
      <category>hacktoberfest</category>
    </item>
    <item>
      <title>Getting started with tailwindcss</title>
      <dc:creator>KHALID ISMAIL</dc:creator>
      <pubDate>Tue, 04 Aug 2020 13:16:47 +0000</pubDate>
      <link>https://dev.to/kabcoder/getting-started-with-tailwindcss-1ng0</link>
      <guid>https://dev.to/kabcoder/getting-started-with-tailwindcss-1ng0</guid>
      <description>&lt;p&gt;tailwind is a utility based framework with minimal code which let you focus on the main instead of wasting time on utilities to help your design.&lt;/p&gt;

&lt;p&gt;Today i will be talking about tailwind CSS and how you can use it, grab your coffee, hoop on and let's ride.&lt;/p&gt;

&lt;p&gt;Tailwind CSS have been around for quit sometimes now and since it's launch it has been gaining popularity more and more, i personally use this for my personal project i work on.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Before&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;before the launch of tailwindcss many CSS frameworks like &lt;strong&gt;Bootstrap&lt;/strong&gt; and &lt;strong&gt;Material UI&lt;/strong&gt; have been using predefined component.&lt;/p&gt;

&lt;p&gt;In which this libraries reduce the stress of designing all UI from the start and most of this libraries enable users to add their own feature and customize this to their own thirst.&lt;/p&gt;

&lt;p&gt;However, this customization most of the time involves overwriting. For example, creating new classes to overwrite the existing styles provided by the library.&lt;/p&gt;

&lt;p&gt;this is where tailwindcss comes in&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Tailwindcss&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Tailwind is utility based CSS framework which focus on utility and it take a lot of work off your head.&lt;br&gt;
with this utility frame work you can build anything in matter of minutes this has utilities like, color, background, margin, padding and so on.&lt;/p&gt;

&lt;p&gt;So lets div into examples to see what am talking about.&lt;br&gt;
here is a link to &lt;a href="https://tailwindcss.com/"&gt;tailwindcss&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;Installation&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;unfortunately tailwindcss is not hosted online in which you can just link to your html file but that's where the Syntactic sugar comes in.&lt;/p&gt;

&lt;p&gt;all you have to do is to install it via npm in your project then configure the package which tailwindcss has already done for you.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;process&lt;/strong&gt;&lt;br&gt;
using &lt;code&gt;npm install tailwind.css&lt;/code&gt;&lt;br&gt;
this will automatically install tailwind in your project then you now go to your project folder the create a file &lt;code&gt;input.css&lt;/code&gt; and the other folder &lt;code&gt;output.css&lt;/code&gt; then open &lt;code&gt;input.css&lt;/code&gt; and put the following code&lt;/p&gt;

&lt;p&gt;&lt;code&gt;@tailwind base;&lt;br&gt;
@tailwind components;&lt;br&gt;
@tailwind utilities;&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;now go to your &lt;code&gt;package.json&lt;/code&gt; file and the following code on your script &lt;code&gt;input.css -o public/style.css&lt;/code&gt; that's it welcome to the world of tailwindcss.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;examples of tailwind utility classes&lt;/strong&gt;
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Tailwind class&lt;/th&gt;
&lt;th&gt;Css&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;.w-1/2&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;width: 50%&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;.w-0&lt;/td&gt;
&lt;td&gt;width: 0;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;you can browse through their website to know more about this utilities&lt;/p&gt;

&lt;h1&gt;
  
  
  Conculsion
&lt;/h1&gt;

&lt;p&gt;so far so good we've seen how we can install and work with tailwindcss feel free to checkout my github which can also help you in your way of becoming a good developer.&lt;/p&gt;

&lt;p&gt;check it out now !! &lt;strong&gt;&lt;em&gt;&lt;a href="https://github.com/binismail"&gt;@binismail&lt;/a&gt;&lt;/em&gt;&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;have a lovely day.&lt;/p&gt;

</description>
      <category>css</category>
      <category>codenewbie</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Javascript map, filter and reduce explained</title>
      <dc:creator>KHALID ISMAIL</dc:creator>
      <pubDate>Sat, 13 Jun 2020 16:59:24 +0000</pubDate>
      <link>https://dev.to/kabcoder/javascript-map-filter-and-reduce-explained-hc8</link>
      <guid>https://dev.to/kabcoder/javascript-map-filter-and-reduce-explained-hc8</guid>
      <description>&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Frhz6ryvfmfpy0wozmcvu.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Frhz6ryvfmfpy0wozmcvu.jpg" alt="Alt Text" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Javascript has given us a lot of possibilities as a developer.&lt;/p&gt;

&lt;p&gt;But sometimes we just need to make it more flexible for ourselves without writing bunch of codes, as we all know in ES6 javascript introduced a new concept on looping through an array which are Map, Filter and Reduce.&lt;/p&gt;

&lt;p&gt;The Map, Filter, and  Reduce is used to filter through an array of elements and then return new arrays from that element, so in this article, we going to talk about the three new arrays methods that are attached to the Es6 JavaScript.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Map&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The JavaScript map method is used to loop true an array and then return new arrays, although it is similar to the for loop method. &lt;br&gt;
The Map method can make your code simpler and readable in all aspect &lt;br&gt;
Check out the examples.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;
   let incExp = [100, 200, -200, 300, -100]
   incExp.map(cur =&amp;gt; console.log(cur)
   // returns each element in the array
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Note: if the map method is taking more than one line of code you must include the return statement.&lt;/p&gt;

&lt;p&gt;For example. &lt;/p&gt;

&lt;pre&gt;&lt;code&gt;
   let incExp = [100, 200, -200, 300, -100]
   let sum;
   incExp.map(cur =&amp;gt; {
          return sum+= cur
    }
   // returns each element in the array
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;As you can see the map method is return a new array which there are two ways to do that, if you are to just return and element there is no need for writing the return statement in your code but in cases you will have to return index, element.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Filter&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;The JavaScript filter method is used to loop through and array of item return a new value based on conditional thereby pushing the truthy value as a new array.&lt;/p&gt;

&lt;p&gt;Lets look at the examples below.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;
   let incExp = [100, 200, -200, 300, -100]
   incExp.filter(cur =&amp;gt; console.log(cur &amp;gt; 1)
   // returns new arr with the element that are true
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;As you can see it returns an array that is greater than 1 in the element given to it.&lt;/p&gt;

&lt;p&gt;With this you can have lots of possibilities to write a better organized and readable code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Reduce&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The reduce method may return different types of value based on the parameter, first it takes the array as input and then return current element, and  total element.&lt;/p&gt;

&lt;p&gt;Lets look at the examples below.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;
   let incExp = [100, 200, -200, 300, -100]
   incExp.reduce((cur, total) =&amp;gt; {
          return cur + total
    }
  // returns new arr with the element that are true
  // or 

    let incExp = [100, 200, -200, 300, -100]
   incExp.reduce((cur, total) =&amp;gt; {
          return (cur + total) + 2;
    }

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

&lt;p&gt;So far we have talk about the three methods used in JavaScript to perform loops apart from other loop methods.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Weldon guys for following up and reading this articles &lt;br&gt;
There are tons of resources out there to teach you more on the these javascript method.&lt;/p&gt;

&lt;p&gt;have a nice weekend.&lt;/p&gt;

&lt;p&gt;Feel free to contact me if you need any help in the future.&lt;br&gt;
Kudos!!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>BEING PRODUCTIVE AS A DEVELOPER</title>
      <dc:creator>KHALID ISMAIL</dc:creator>
      <pubDate>Thu, 09 Jan 2020 23:02:11 +0000</pubDate>
      <link>https://dev.to/kabcoder/being-productive-as-a-developer-3mjn</link>
      <guid>https://dev.to/kabcoder/being-productive-as-a-developer-3mjn</guid>
      <description>&lt;p&gt;What's up devs, thank God it's Friday.&lt;/p&gt;

&lt;p&gt;Today we will be talking about productivity tips that can help you level up as a developer.&lt;/p&gt;

&lt;p&gt;Productivity bring tons of pluses which includes Higher salary, Increase in popularity among peers and internal satisfaction as it might be.&lt;/p&gt;

&lt;p&gt;In today's tech world there are huge demand for productive developers, which is why you need to become one. However productivity comes if you put it to work also it is highly debateable.&lt;/p&gt;

&lt;p&gt;A developer productivity is measured by LOC (Line of code) and quality of code written.&lt;br&gt;
Today I will talk about 10 productivity tips you need to take into account to improve as a developer.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;So why productivity matters?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;When we say productivity it means the amount of output you churn out compared to input. Being a productive engineer brings tons of benefits to you. And also the fast your code works the better it is for the company who is fighting competition every minute. The mantra is to work fast, keep the quality of your code intact.&lt;/p&gt;

&lt;p&gt;Startups love to have productive developers on their team who not only solve problems, but solve them faster than others.&lt;/p&gt;

&lt;p&gt;No one is denying the fact that a good developer is more productive than the Medicore ones. And you would love to become a better developer, you will need to take productivity into consideration.&lt;/p&gt;

&lt;p&gt;Enough of the talk guys, let's jump into 10 tips to make you a better developer.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;1. Manage your time.&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;When it comes to being a productive developer you need to work with time, you should not do random things at random times. You will want to do the right things at the right time.&lt;/p&gt;

&lt;p&gt;You also want to avoid a case where you don't Know what to do and you're either slacking or searching something. There you will have to plan, execute your working time, each day as early as possible, take into consideration all time consuming activities like social media and other social activities out there.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;2. Get proper sleep.&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Working fewer hours can help you remain productive, which means if you think you are less productive you can take a nap or go for a walk, I bet you will feel better in no time, in the main time you also need  to get a proper sleep, for example you can get 8hours sleep every night and you feel more healthier when you get back on your feet.&lt;/p&gt;

&lt;p&gt;Without proper sleep you can easily hamper your productivity to great extent.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;3. Don't optimize prematurely.&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;When it comes to premature optimization it's a serious issue among the coding community for real-time projects, optimization is necessary. However, that doesn't mean you should start optimizing your app in it's half-baked state. &lt;/p&gt;

&lt;p&gt;It's a good idea to optimize after a food chunk of functionality has been implemented.&lt;br&gt;
The late start will help you to avoid unnecessary work and keep you productive.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;4. Read books.&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Reading books as a developer can contribute alot in your career, i know that internet has everything, I don't argue that but with books it can change your perspective of learning.&lt;/p&gt;

&lt;p&gt;Books offer a unique view on managing product or understanding a programming language or some sort of technology. Books is written by talented people which is why you need to read and learn from them and also to avoid pitfalls.&lt;/p&gt;

&lt;p&gt;The structure of approach also help you to digest information in a more meaningful way.&lt;br&gt;
In the end you will benefit by becoming better, more productive, smart developer.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;5. Minimize distraction.&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;As a developer that work on complex problems, you will have to reduce distraction to it's last atom, this can help you focus more on whatever project you are working on which as well can help you be more productive than ever.&lt;/p&gt;

&lt;p&gt;As coding platforms, tools, frameworks require core understanding and attention, you need to keep your focus intact, if you are distracted, it will take you around 15-20 minutes to get going again.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;6. Set goal and make it a habit.&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Being productive is not that easy, therefore you need steps to archive those. Set a goal then make it habit comes with effort and self dedication which is why you need to set one for yourself.&lt;/p&gt;

&lt;p&gt;Making coding your habit or building stuffs on your free time can help you improve dramatically as a developer, you can set aside a minimum of 1hrs everyday to work on side projects, which is why &lt;strong&gt;100daysofcode&lt;/strong&gt; is made for you, go try it out and see the results in a snap.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;7. Keep your code DRY(don't repeat yourself) and simple.&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Implementing the DRY principles can really bring tons of benefits and also help you get things done without repeating yourself.&lt;/p&gt;

&lt;p&gt;This make your code easy to read and understandable, this can save alot of time when other developers are working on your code. It also reduce time spent on project you work on.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;8. Master your tools&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;When it comes to mastering your tools as a developer, it should be obvious for all developer that knowing your tools is a prerequisited for effective work, you want to move your ideas into code as fast as possible and avoid the overhead of doing everything using mouse pointer. &lt;/p&gt;

&lt;p&gt;Therefore to master your core tools, learn the key binding for the most important operation in your tools.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;9. Involve other people.&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;You might be the smartest but yet you lack some basic things. There a problematic or decision that should be made by the whole team.&lt;/p&gt;

&lt;p&gt;Therefore you will have to involve other people or ask for help if stuck on a certain level, this can help you level up as a productive engineer.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;10. Google your way out.&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Google is a developer friend, if you get stuck or need your way out you can just google it. The truth is Senior developers use Google when they are stuck.&lt;/p&gt;

&lt;p&gt;You can't know everything which why you have to find some basic things online to help you through. There are many dev community out there just ask a question then you will be given and answer in munites.&lt;/p&gt;

&lt;p&gt;With Google you can be more productive and get things done easily.&lt;/p&gt;

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

&lt;p&gt;So far so good we are finally done with what you need to become a better developer through productivity.&lt;/p&gt;

&lt;p&gt;Productivity gain come with time, initially, don't try to push too hard, take one at a time then make it a goal then eventually make it a habit.&lt;/p&gt;

&lt;p&gt;If you like this article try and comment, share for others to benefit from. More article coming soonest.&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
