<?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>Forem: Ibrahim Kamal</title>
    <description>The latest articles on Forem by Ibrahim Kamal (@ibrahimkamal).</description>
    <link>https://forem.com/ibrahimkamal</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%2F449823%2F86e77c7a-e21e-4df8-bff2-b670b76e70a2.jpeg</url>
      <title>Forem: Ibrahim Kamal</title>
      <link>https://forem.com/ibrahimkamal</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/ibrahimkamal"/>
    <language>en</language>
    <item>
      <title>Chrome Extension for Summarizing YouTube Videos with AI</title>
      <dc:creator>Ibrahim Kamal</dc:creator>
      <pubDate>Sat, 28 Jun 2025 13:17:43 +0000</pubDate>
      <link>https://forem.com/ibrahimkamal/chrome-extension-for-summarizing-youtube-videos-with-ai-3mml</link>
      <guid>https://forem.com/ibrahimkamal/chrome-extension-for-summarizing-youtube-videos-with-ai-3mml</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.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%2F81mrdivj8trbohjj8m3x.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.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%2F81mrdivj8trbohjj8m3x.png" alt="Image description" width="800" height="500"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Hello to the developer community! Today, I’d like to share my new project &lt;a href="https://chromewebstore.google.com/detail/youtube-snapsummary-ai/jkmgdfefeffdhcoojdkdaiblpjkbfilm" rel="noopener noreferrer"&gt;YouTube SnapSummary AI&lt;/a&gt;, carefully crafted to enhance your YouTube experience. Let me introduce you to a Chrome extension that allows you to summarize YouTube videos effortlessly using the power of artificial intelligence.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Idea Behind the Project
&lt;/h2&gt;

&lt;p&gt;I was looking for a way to save time while watching long educational videos, so I decided to develop an extension that quickly summarizes content. With the help of AI models like Grok and ChatGPT, it’s now possible to extract key points from any video with a single click.&lt;/p&gt;

&lt;h2&gt;
  
  
  How the Extension Works
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Open any video on YouTube.&lt;/li&gt;
&lt;li&gt;You will find the extension box.&lt;/li&gt;
&lt;li&gt;Choose the model you want to use (e.g., ChatGPT, Grok or others).&lt;/li&gt;
&lt;li&gt;Get a quick summary in your preferred language!&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Benefits
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Save time by summarizing long videos.&lt;/li&gt;
&lt;li&gt;Support for multiple languages to suit all users.&lt;/li&gt;
&lt;li&gt;Simple and user-friendly interface.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How to Install the Extension
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Go to the Chrome Web Store.&lt;/li&gt;
&lt;li&gt;Search for "YouTube SnapSummary AI".&lt;/li&gt;
&lt;li&gt;Click "Add to Chrome" and enjoy!&lt;/li&gt;
&lt;li&gt;&lt;a href="https://chromewebstore.google.com/detail/youtube-snapsummary-ai/jkmgdfefeffdhcoojdkdaiblpjkbfilm" rel="noopener noreferrer"&gt;YouTube SnapSummary AI&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Call to the Community
&lt;/h2&gt;

&lt;p&gt;I’m excited to hear your feedback and suggestions for improving the extension.&lt;/p&gt;

&lt;p&gt;Thanks for your support, and I hope you find this extension useful!&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>ai</category>
      <category>python</category>
    </item>
    <item>
      <title>10 Useful Vanilla Javascript Plugins 2021</title>
      <dc:creator>Ibrahim Kamal</dc:creator>
      <pubDate>Fri, 30 Oct 2020 20:40:09 +0000</pubDate>
      <link>https://forem.com/ibrahimkamal/10-useful-vanilla-javascript-plugins-2021-562h</link>
      <guid>https://forem.com/ibrahimkamal/10-useful-vanilla-javascript-plugins-2021-562h</guid>
      <description>&lt;h4&gt;
  
  
  Introduction
&lt;/h4&gt;

&lt;p&gt;About 3 months ago I wrote this article: &lt;a href="https://dev.to/kamalo__22/10-useful-vanilla-javascript-plugins-2020-2gij"&gt;10 Useful Vanilla Javascript Plugins 2020&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;In this article, I will add another 10 vanilla js plugins that will make your life easier.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://greensock.com/gsap/" rel="noopener noreferrer"&gt;1. GSAP&lt;/a&gt;
&lt;/h3&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%2Fi%2Fzua6mru0avtx60nwmkr7.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%2Fi%2Fzua6mru0avtx60nwmkr7.gif" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;The GreenSock Animation Platform (GSAP) is a popular set of JavaScript tools for building animations on the web. Anything you see in your web browser can be animated with GSAP&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;Weekly Downloads on npm&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&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%2Fi%2Fbjwxc70mph7umvop2379.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%2Fi%2Fbjwxc70mph7umvop2379.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://plyr.io/" rel="noopener noreferrer"&gt;2. Player &lt;/a&gt;
&lt;/h3&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%2Fi%2Fez5jx5od0bdi9qyxbian.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%2Fi%2Fez5jx5od0bdi9qyxbian.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Plyr is a simple, lightweight, accessible, and customizable HTML5, YouTube, and Vimeo media player that supports modern browsers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;Weekly Downloads on npm&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&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%2Fi%2Fpiqccv961qpgeiqf3gtc.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%2Fi%2Fpiqccv961qpgeiqf3gtc.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://www.dropzonejs.com/" rel="noopener noreferrer"&gt;3. dropzone.js&lt;/a&gt;
&lt;/h3&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%2Fi%2Fvlv7o3xkp2k8jinwp05h.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%2Fi%2Fvlv7o3xkp2k8jinwp05h.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;Weekly Downloads on npm&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&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%2Fi%2F8oxy5ptgi5sjo0vpit9p.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%2Fi%2F8oxy5ptgi5sjo0vpit9p.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://flatpickr.js.org/" rel="noopener noreferrer"&gt;4. flatpickr &lt;/a&gt;
&lt;/h3&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%2Fi%2F13agqbxnltwhn519hiav.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%2Fi%2F13agqbxnltwhn519hiav.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;flatpickr is a lightweight and powerful DateTime picker&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;Weekly Downloads on npm&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&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%2Fi%2F18kermt1f1iies5rjr80.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%2Fi%2F18kermt1f1iies5rjr80.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://nosir.github.io/cleave.js/" rel="noopener noreferrer"&gt;5. Cleave.js &lt;/a&gt;
&lt;/h3&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%2Fi%2Fxsgmd7btl0olaywzhskr.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%2Fi%2Fxsgmd7btl0olaywzhskr.jpg" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;JavaScript library for formatting input text content when you are typing.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;Weekly Downloads on npm&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&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%2Fi%2Fcevfndh914ov5pb41ond.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%2Fi%2Fcevfndh914ov5pb41ond.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://inorganik.github.io/countUp.js/" rel="noopener noreferrer"&gt;6. CountUp.js &lt;/a&gt;
&lt;/h3&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%2Fi%2Fnl3oowfp00yzn4e4sf8s.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%2Fi%2Fnl3oowfp00yzn4e4sf8s.jpg" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;CountUp.js is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;Weekly Downloads on npm&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&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%2Fi%2Fy7oubw8fg0hozernyapc.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%2Fi%2Fy7oubw8fg0hozernyapc.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://dixonandmoe.com/rellax/" rel="noopener noreferrer"&gt;7. rellax &lt;/a&gt;
&lt;/h3&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%2Fi%2F6dfx54owubqos3d8rqq6.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%2Fi%2F6dfx54owubqos3d8rqq6.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Rellax is a buttery smooth, super lightweight, vanilla javascript parallax library&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;Weekly Downloads on npm&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&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%2Fi%2Fedt7x1di4tpe8jv7tc8t.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%2Fi%2Fedt7x1di4tpe8jv7tc8t.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://vincentgarreau.com/particles.js/" rel="noopener noreferrer"&gt;8. particles.js &lt;/a&gt;
&lt;/h3&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%2Fi%2F0xkw8oyzhklqgkcn4p3f.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%2Fi%2F0xkw8oyzhklqgkcn4p3f.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;particles.js is a lightweight JavaScript library for creating particles.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;Weekly Downloads on npm&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&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%2Fi%2Flswegdbwwt1uvdqb8qwj.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%2Fi%2Flswegdbwwt1uvdqb8qwj.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://idiotwu.github.io/smooth-scrollbar/" rel="noopener noreferrer"&gt;9. Smooth Scrollbar &lt;/a&gt;
&lt;/h3&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%2Fi%2Fvaiytxo0v695swv2qagy.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%2Fi%2Fvaiytxo0v695swv2qagy.gif" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Smooth Scrollbar is a JavaScript plugin that allows you customizing high-performance scrollbars across browsers.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;Weekly Downloads on npm&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&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%2Fi%2Fcbc35f2hurosf1bmk95l.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%2Fi%2Fcbc35f2hurosf1bmk95l.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://yiotis.net/filterizr/#/" rel="noopener noreferrer"&gt;10. filterizr &lt;/a&gt;
&lt;/h3&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%2Fi%2Fe11iq8tn2aby6w4z4yz0.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%2Fi%2Fe11iq8tn2aby6w4z4yz0.jpg" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Filterizr is a JavaScript library that searches, sorts, shuffles and applies stunning filters over responsive galleries using CSS3 transitions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;em&gt;Weekly Downloads on npm&lt;/em&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&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%2Fi%2Fyhox6r47beku0ul2oxjq.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%2Fi%2Fyhox6r47beku0ul2oxjq.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>vue</category>
      <category>typescript</category>
    </item>
    <item>
      <title>10 Useful Vanilla Javascript Plugins 2020</title>
      <dc:creator>Ibrahim Kamal</dc:creator>
      <pubDate>Mon, 10 Aug 2020 01:16:34 +0000</pubDate>
      <link>https://forem.com/ibrahimkamal/10-useful-vanilla-javascript-plugins-2020-2gij</link>
      <guid>https://forem.com/ibrahimkamal/10-useful-vanilla-javascript-plugins-2020-2gij</guid>
      <description>&lt;h4&gt;
  
  
  Introduction
&lt;/h4&gt;

&lt;p&gt;Modern JavaScript Frameworks makes it very easy to build complex web applications. Vanilla JavaScript refers to plain Javascript code, not extended in any way by any framework and it is good when it comes to create a small application&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://swiperjs.com/"&gt;1. Swiper.js&lt;/a&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--_w6ZjhIa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2018/04/javascript-image-gallery-slider-plugin-1.jpg%2522" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--_w6ZjhIa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2018/04/javascript-image-gallery-slider-plugin-1.jpg%2522" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://ityped.surge.sh/"&gt;2. iTyped&lt;/a&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Dead simple Javascript animated typing, with no dependencies.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--KagD-OcW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2019/02/ityped.jpg%2522" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--KagD-OcW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2019/02/ityped.jpg%2522" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://tingle.robinparisi.com/"&gt;3. tingle.js&lt;/a&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;A minimalist and easy-to-use modal plugin written in pure JavaScript.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--hQYUW1oR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2018/07/modal-lightbox-javascript-2.jpg%2522" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--hQYUW1oR--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2018/07/modal-lightbox-javascript-2.jpg%2522" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://glidejs.com/"&gt;4. Glide&lt;/a&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;A dependency-free JavaScript ES6 slider and carousel. Its lightweight, flexible and fast. Designed to slide. No less, no more.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--XttWgtNg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2019/02/glide.jpg%2522" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--XttWgtNg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2019/02/glide.jpg%2522" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://abouolia.github.io/sticky-sidebar/"&gt;5. Sticky Sidebar&lt;/a&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;These JavaScript plugins provide a handy way of creating sticky components. The first option is great for creating sticky headers whereas the second option is for sticky sidebars.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--r3XGQg0i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://designmodo.com/wp-content/uploads/2018/05/11-Sticky-Sidebar.jpg%2522" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--r3XGQg0i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://designmodo.com/wp-content/uploads/2018/05/11-Sticky-Sidebar.jpg%2522" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://michalsnik.github.io/aos/"&gt;6. AOS&lt;/a&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Animate On Scroll (AOS). Small library to animate elements on your page as you scroll.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--4Yb4z-Fd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://frontendscript.com/wp-content/uploads/2018/09/page-scroll-animation-css.jpg%2522" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--4Yb4z-Fd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://frontendscript.com/wp-content/uploads/2018/09/page-scroll-animation-css.jpg%2522" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;a href="http://callmecavs.com/jump.js/"&gt;7. jump.js&lt;/a&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;Jump.js is a modern, performant and customizable smooth scroll library written in pure JavaScript (ES6).&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;a href="https://github.com/e-oj/Magic-Grid"&gt;8. Magic Grid&lt;/a&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;A simple, lightweight Javascript library for dynamic grid layouts.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--LJeC2m0Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2019/02/magic-grid.jpg%2522" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--LJeC2m0Q--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2019/02/magic-grid.jpg%2522" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://jjkaufman.github.io/wiv.js/"&gt;9. Wiv.js&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;A library for a more wiggly div.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--wkDM4fnT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2019/02/wiv.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--wkDM4fnT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2019/02/wiv.jpg" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://joshuajohnson.co.uk/Choices/"&gt;10. Choices.js&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--OOQYAbf1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2019/02/choices-js.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--OOQYAbf1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://bashooka.com/wp-content/uploads/2019/02/choices-js.jpg" alt="alt text"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webpack</category>
      <category>react</category>
      <category>css</category>
    </item>
  </channel>
</rss>
