🧙🏽♀️ Automatically adds loading="lazy" to and tags. Load images on your sites lazily without JavaScript.</p> </div> </div> </div> </div> <div class="py-3 border-bottom border-light-dark"> <div class="container"> <ul class="d-flex list-unstyled p-0 position-relative mb-0 mx-n2"> <li class="px-2"> <a class="fw-bold text-primary" href="https://www.opensourceagenda.com/projects/jekyll-loading-lazy">Overview</a> </li> <li class="px-2"> <a class="fw-bold text-black" href="https://www.opensourceagenda.com/projects/jekyll-loading-lazy/versions">Versions</a> </li> <li class="px-2"> <a class="fw-bold text-black" href="https://www.opensourceagenda.com/projects/jekyll-loading-lazy/reviews">Reviews</a> </li> <li class="px-2"> <a class="fw-bold text-black" href="https://www.opensourceagenda.com/projects/jekyll-loading-lazy/resources">Resources</a> </li> </ul> </div> </div> <div class="container my-5"> <div class="row g-4"> <div class="col-12 col-lg-8 order-2 order-lg-1"> <div> <div class="px-2 mb-3 bg-primary text-white d-inline-block position-relative">Project README</div> <div id="readme" class="section-l" data-base="https://github.com/gildesmarais/jekyll-loading-lazy/blob/master/" class="readme mb-4"> <div> <h1>jekyll-loading-lazy <a href="https://liberapay.com/gildesmarais/donate"><img src="http://img.shields.io/liberapay/goal/gildesmarais.svg?logo=liberapa" alt=""></a></h1> <p>This plugin adds <code>loading="lazy"</code> to all <code>img</code> and <code>iframe</code> tags on your <a href="https://jekyllrb.com/">Jekyll site</a>. No configuration needed.<br> If a <code>loading</code> attribute is already present nothing is changed.</p> <p><code>loading="lazy"</code> causes images and iframes to load lazily without any JavaScript. <a href="https://caniuse.com/#feat=loading-lazy-attr">Browser support</a> is growing.<br> If a browser does not support the <code>loading</code> attribute, it will load the resource just like it would normally.</p> <p>⭐ If you like it, star it or <a href="https://liberapay.com/gildesmarais/donate">sponsor it</a>. 💓</p> <a href="#installation"></a><h2 id="installation">Installation</h2> <ol> <li> <p>Add the following to your site's <code>Gemfile</code>:</p> <pre><code class="language-ruby">gem 'jekyll-loading-lazy' </code></pre> </li> <li> <p>add the following to your site's <code>_config.yml</code>:</p> <pre><code class="language-yml">plugins: - jekyll-loading-lazy </code></pre> <p><strong>Note</strong>: if <code>jekyll --version</code> is less than <code>3.5</code> use:</p> <pre><code class="language-yml">gems: - jekyll-loading-lazy </code></pre> </li> <li> <p>In your terminal, execute:</p> <pre><code class="language-bash">bundle </code></pre> </li> <li> <p>(re)start your Jekyll server with:</p> <pre><code class="language-bash">jekyll serve </code></pre> </li> </ol> <a href="#usage"></a><h2 id="usage">Usage</h2> <p>Install the plugin as described above. That's basically all there is.</p> <p><strong>💡 Tip:</strong> Note that the <code>github-pages</code> gem runs in <code>safe</code> mode and only allows <a href="https://pages.github.com/versions/">a defined set of plugins</a>. To use this gem in GitHub Pages, you need to build your site locally or use a CI (e.g. <a href="https://help.github.com/en/actions/configuring-and-managing-workflows/configuring-a-workflow">Github Workflow</a>) and deploy to your <code>gh-pages</code> branch. <a href="https://jekyllrb.com/docs/continuous-integration/github-actions/">Click here for more information.</a></p> <a href="#prevent-lazy-loading"></a><h3 id="prevent-lazy-loading">Prevent lazy loading</h3> <p>In case you want to prevent loading some images/iframes lazily, add <code>loading="eager"</code> to their tags. This might be useful to prevent flickering of images during navigation (e.g. the site's logo).</p> <p>See the following examples to prevent lazy loading.</p> <details> <summary>Markdown example</summary> <pre><code class="language-markdown">{:loading='eager'} </code></pre> <p>This example assumes you're using Kramdown (Jekyll is using it by default).</p> </details> <details> <summary>HTML example</summary> <pre><code class="language-html"><img src="/image.jpg" alt="an example" loading="eager" /> </code></pre> </details> <a href="#contributing"></a><h2 id="contributing">Contributing</h2> <ol> <li> <a href="https://github.com/gildesmarais/jekyll-loading-lazy/fork">Fork this repository</a> </li> <li>Create your branch (<code>git checkout -b feat/my-new-feature</code>)</li> <li>Commit your changes (<code>git commit -m 'Add cool feature'</code>)</li> <li>Push to the branch (git push origin feat/my-new-feature)</li> <li>Create a new Pull Request</li> </ol> <a href="#testing"></a><h3 id="testing">Testing</h3> <pre><code class="language-bash">rake </code></pre> <a href="#credits"></a><h2 id="credits">Credits</h2> <p>Thanks to @keithmifsud's <a href="https://github.com/keithmifsud/jekyll-target-blank"><code>jekyll-target-blank</code></a> whereon this Jekyll plugin largely bases.</p> </div> </div> <div class="text-xs">Open Source Agenda is not affiliated with "Jekyll Loading Lazy" Project. README Source: <a href="https://github.com/gildesmarais/jekyll-loading-lazy" target="_blank">gildesmarais/jekyll-loading-lazy</a></div> </div> </div> <div class="col-12 col-lg-4 order-1 order-lg-2"> <div> <div class="d-flex justify-content-center mb-5"> </div> <div class="mb-3"> <div class="row pb-3"> <div class="col-6"> <span class="fw-bold">Stars</span> </div> <div class="col-6 text-end"> <span class="fw-bold">58</span> </div> </div> <div class="row pb-3"> <div class="col-6"> <span class="fw-bold">Open Issues</span> </div> <div class="col-6 text-end"> <span class="fw-bold">0</span> </div> </div> <div class="row pb-3"> <div class="col-6"> <span class="fw-bold">Last Commit</span> </div> <div class="col-6 text-end"> <span class="fw-bold">2 years ago</span> </div> </div> <div class="row pb-3"> <div class="col-12"> <span class="fw-bold">Repository</span> </div> <div class="col-12"> <a href="https://github.com/gildesmarais/jekyll-loading-lazy" target="_blank" class="fw-bold text-primary">gildesmarais/jekyll-loading-lazy</a> </div> </div> <div class="row pb-3"> <div class="col-6"> <span class="fw-bold">License</span> </div> <div class="col-6 text-end"> <a href="https://www.opensourceagenda.com/tags/mit" class="font-bold text-primary">MIT</a> </div> </div> <div class="row pb-3"> <div class="col-12"> <span class="fw-bold">Tags</span> </div> <div class="col-12"> <a href="https://www.opensourceagenda.com/tags/iframe" class="fw-bold text-primary me-3">Iframe</a> <a href="https://www.opensourceagenda.com/tags/iframes" class="fw-bold text-primary me-3">Iframes</a> <a href="https://www.opensourceagenda.com/tags/image" class="fw-bold text-primary me-3">Image</a> <a href="https://www.opensourceagenda.com/tags/img" class="fw-bold text-primary me-3">Img</a> <a href="https://www.opensourceagenda.com/tags/jekyll" class="fw-bold text-primary me-3">Jekyll</a> <a href="https://www.opensourceagenda.com/tags/jekyll-plugin" class="fw-bold text-primary me-3">Jekyll Plugin</a> <a href="https://www.opensourceagenda.com/tags/lazy" class="fw-bold text-primary me-3">Lazy</a> <a href="https://www.opensourceagenda.com/tags/lazy-load" class="fw-bold text-primary me-3">Lazy Load</a> <a href="https://www.opensourceagenda.com/tags/lazy-load-img" class="fw-bold text-primary me-3">Lazy Load Img</a> <a href="https://www.opensourceagenda.com/tags/lazy-loading" class="fw-bold text-primary me-3">Lazy Loading</a> <a href="https://www.opensourceagenda.com/tags/lazyload" class="fw-bold text-primary me-3">Lazyload</a> <a href="https://www.opensourceagenda.com/tags/lazyload-images" class="fw-bold text-primary me-3">Lazyload Images</a> <a href="https://www.opensourceagenda.com/tags/lazyloading" class="fw-bold text-primary me-3">Lazyloading</a> <a href="https://www.opensourceagenda.com/tags/loading" class="fw-bold text-primary me-3">Loading</a> <a href="https://www.opensourceagenda.com/tags/loading-lazy" class="fw-bold text-primary me-3">Loading Lazy</a> <a href="https://www.opensourceagenda.com/tags/native" class="fw-bold text-primary me-3">Native</a> <a href="https://www.opensourceagenda.com/tags/pagespeed" class="fw-bold text-primary me-3">Pagespeed</a> <a href="https://www.opensourceagenda.com/tags/performance" class="fw-bold text-primary me-3">Performance</a> <a href="https://www.opensourceagenda.com/tags/webperformance" class="fw-bold text-primary me-3">Webperformance</a> <a href="https://www.opensourceagenda.com/tags/webvitals" class="fw-bold text-primary me-3">Webvitals</a> </div> </div> </div> <div class="mb-4"> <div class="card bg-light p-3"> <h4>Open Source Agenda Badge</h4> <div class="mb-3"> <img src="https://www.opensourceagenda.com/projects/jekyll-loading-lazy/reviews/badge.svg" alt="Open Source Agenda Rating" /> </div> <div> <textarea class="w-100 p-2 border-white bg-light text-dark" readonly style="height:115px;word-break:break-all;"><a href="https://www.opensourceagenda.com/projects/jekyll-loading-lazy"><img src="https://www.opensourceagenda.com/projects/jekyll-loading-lazy/reviews/badge.svg" alt="Open Source Agenda"></a></textarea> </div> </div> </div> <div class="mb-4"> <a href="#" data-bs-toggle="modal" data-bs-target="#signInModal" class="d-block btn btn-warning text-white py-3 text-start"> <div class="d-flex"> <i class="fas fa-star fa-3x me-3 align-self-center"></i> <div class="align-self-center"> <span class="h4 mb-0 d-block">Submit Review</span> <span class="d-block">Review Your Favorite Project</span> </div> </div> </a> </div> <div class="mb-4"> <a href="#" data-bs-toggle="modal" data-bs-target="#signInModal" class="d-block btn btn-primary text-white py-3 text-start"> <div class="d-flex"> <i class="fas fa-list-alt fa-3x me-3 align-self-center"></i> <div class="align-self-center"> <span class="h4 mb-0 d-block">Submit Resource</span> <span class="d-block">Articles, Courses, Videos</span> </div> </div> </a> </div> <div class="mb-4"> <a href="https://forms.gle/u3ctNaCwf9sW5EaGA" target="_blank" class="d-block btn btn-light text-white py-3 text-start"> <div class="d-flex"> <i class="fas fa-pen fa-3x me-3 align-self-center text-black"></i> <div class="align-self-center"> <span class="h4 mb-0 d-block text-black">Submit Article</span> <span class="d-block text-black">Submit a post to our blog</span> </div> </div> </a> </div> <div class="d-none d-lg-block"> <h3>From the blog</h3> <div class="row g-4"> <div class="col-12"> <a href="https://www.opensourceagenda.com/blog/how-to-choose-which-programming-language-to-learn-first" class="d-block position-relative"> <div class="image-container"> <div class="image-inner"> <img loading="lazy" srcset="https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_1920_1280.jpg 1920w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_1606_1071.jpg 1606w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_1344_896.jpg 1344w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_1124_749.jpg 1124w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_940_627.jpg 940w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_787_525.jpg 787w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_658_439.jpg 658w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_550_367.jpg 550w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_460_307.jpg 460w, data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTkyMCAxMjgwIj4KCTxpbWFnZSB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIxMjgwIiB4bGluazpocmVmPSJkYXRhOmltYWdlL2pwZWc7YmFzZTY0LC85ai80QUFRU2taSlJnQUJBUUVBWUFCZ0FBRC8vZ0E3UTFKRlFWUlBVam9nWjJRdGFuQmxaeUIyTVM0d0lDaDFjMmx1WnlCSlNrY2dTbEJGUnlCMk5qSXBMQ0J4ZFdGc2FYUjVJRDBnT1RBSy85c0FRd0FEQWdJREFnSURBd01EQkFNREJBVUlCUVVFQkFVS0J3Y0dDQXdLREF3TENnc0xEUTRTRUEwT0VRNExDeEFXRUJFVEZCVVZGUXdQRnhnV0ZCZ1NGQlVVLzlzQVF3RURCQVFGQkFVSkJRVUpGQTBMRFJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVUvOEFBRVFnQUZRQWdBd0VpQUFJUkFRTVJBZi9FQUI4QUFBRUZBUUVCQVFFQkFBQUFBQUFBQUFBQkFnTUVCUVlIQ0FrS0MvL0VBTFVRQUFJQkF3TUNCQU1GQlFRRUFBQUJmUUVDQXdBRUVRVVNJVEZCQmhOUllRY2ljUlF5Z1pHaENDTkNzY0VWVXRId0pETmljb0lKQ2hZWEdCa2FKU1luS0NrcU5EVTJOemc1T2tORVJVWkhTRWxLVTFSVlZsZFlXVnBqWkdWbVoyaHBhbk4wZFhaM2VIbDZnNFNGaG9lSWlZcVNrNVNWbHBlWW1acWlvNlNscHFlb3FhcXlzN1MxdHJlNHVickN3OFRGeHNmSXljclMwOVRWMXRmWTJkcmg0dVBrNWVibjZPbnE4Zkx6OVBYMjkvajUrdi9FQUI4QkFBTUJBUUVCQVFFQkFRRUFBQUFBQUFBQkFnTUVCUVlIQ0FrS0MvL0VBTFVSQUFJQkFnUUVBd1FIQlFRRUFBRUNkd0FCQWdNUkJBVWhNUVlTUVZFSFlYRVRJaktCQ0JSQ2thR3h3UWtqTTFMd0ZXSnkwUW9XSkRUaEpmRVhHQmthSmljb0tTbzFOamM0T1RwRFJFVkdSMGhKU2xOVVZWWlhXRmxhWTJSbFptZG9hV3B6ZEhWMmQzaDVlb0tEaElXR2g0aUppcEtUbEpXV2w1aVptcUtqcEtXbXA2aXBxckt6dExXMnQ3aTV1c0xEeE1YR3g4akp5dExUMU5YVzE5aloydUxqNU9YbTUranA2dkx6OVBYMjkvajUrdi9hQUF3REFRQUNFUU1SQUQ4QStONDFQMlFoUmsxalNRdnZPYTZQVGhITEF5RnRwck12N1FvNXcyYTZKSm5MQ1Naanl4Yk9jMCt5aVdhNFZXYmFEM3BKNFhqUHpVMjN0cExtVUxFQ3plMWN6MFYyZGNidlk2UFNlSkVKR2FYVkpzU01Bb0ZGRmUxeXAwOVVlQ3BOVDBaaVhVclNEbXJmaHk4YXl1dzZxckgzb29yeE1SRk9MUjlCaEcxSk5ILy8yUT09Ij4KCTwvaW1hZ2U+Cjwvc3ZnPg== 32w" onload="window.requestAnimationFrame(function(){if(!(size=getBoundingClientRect().width))return;onload=null;sizes=Math.ceil(size/window.innerWidth*100)+'vw';});" sizes="1px" src="https://www.opensourceagenda.com/storage/media/715/how-to-choose-which-programming-language-to-learn.jpg" width="1920"> </div> </div> <span class="published-at bg-primary text-white position-absolute start-0 bottom-0 px-2 py-1">Dec 11, 2022</span> </a> <div class="md:flex-1 max-w-full py-3"> <a href="https://www.opensourceagenda.com/blog/how-to-choose-which-programming-language-to-learn-first"><h3 class="h4 mb-0 text-black">How to Choose Which Programming Language to Learn First?</h3></a> </div> </div> </div> </div> </div> </div> </div> <div class="d-lg-none mt-4"> <h3>From the blog</h3> <div class="row g-4"> <div class="col-12"> <a href="https://www.opensourceagenda.com/blog/how-to-choose-which-programming-language-to-learn-first" class="d-block position-relative"> <div class="image-container"> <div class="image-inner"> <img loading="lazy" srcset="https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_1920_1280.jpg 1920w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_1606_1071.jpg 1606w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_1344_896.jpg 1344w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_1124_749.jpg 1124w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_940_627.jpg 940w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_787_525.jpg 787w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_658_439.jpg 658w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_550_367.jpg 550w, https://www.opensourceagenda.com/storage/media/715/responsive-images/how-to-choose-which-programming-language-to-learn___media_library_original_460_307.jpg 460w, data:image/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTkyMCAxMjgwIj4KCTxpbWFnZSB3aWR0aD0iMTkyMCIgaGVpZ2h0PSIxMjgwIiB4bGluazpocmVmPSJkYXRhOmltYWdlL2pwZWc7YmFzZTY0LC85ai80QUFRU2taSlJnQUJBUUVBWUFCZ0FBRC8vZ0E3UTFKRlFWUlBVam9nWjJRdGFuQmxaeUIyTVM0d0lDaDFjMmx1WnlCSlNrY2dTbEJGUnlCMk5qSXBMQ0J4ZFdGc2FYUjVJRDBnT1RBSy85c0FRd0FEQWdJREFnSURBd01EQkFNREJBVUlCUVVFQkFVS0J3Y0dDQXdLREF3TENnc0xEUTRTRUEwT0VRNExDeEFXRUJFVEZCVVZGUXdQRnhnV0ZCZ1NGQlVVLzlzQVF3RURCQVFGQkFVSkJRVUpGQTBMRFJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVUvOEFBRVFnQUZRQWdBd0VpQUFJUkFRTVJBZi9FQUI4QUFBRUZBUUVCQVFFQkFBQUFBQUFBQUFBQkFnTUVCUVlIQ0FrS0MvL0VBTFVRQUFJQkF3TUNCQU1GQlFRRUFBQUJmUUVDQXdBRUVRVVNJVEZCQmhOUllRY2ljUlF5Z1pHaENDTkNzY0VWVXRId0pETmljb0lKQ2hZWEdCa2FKU1luS0NrcU5EVTJOemc1T2tORVJVWkhTRWxLVTFSVlZsZFlXVnBqWkdWbVoyaHBhbk4wZFhaM2VIbDZnNFNGaG9lSWlZcVNrNVNWbHBlWW1acWlvNlNscHFlb3FhcXlzN1MxdHJlNHVickN3OFRGeHNmSXljclMwOVRWMXRmWTJkcmg0dVBrNWVibjZPbnE4Zkx6OVBYMjkvajUrdi9FQUI4QkFBTUJBUUVCQVFFQkFRRUFBQUFBQUFBQkFnTUVCUVlIQ0FrS0MvL0VBTFVSQUFJQkFnUUVBd1FIQlFRRUFBRUNkd0FCQWdNUkJBVWhNUVlTUVZFSFlYRVRJaktCQ0JSQ2thR3h3UWtqTTFMd0ZXSnkwUW9XSkRUaEpmRVhHQmthSmljb0tTbzFOamM0T1RwRFJFVkdSMGhKU2xOVVZWWlhXRmxhWTJSbFptZG9hV3B6ZEhWMmQzaDVlb0tEaElXR2g0aUppcEtUbEpXV2w1aVptcUtqcEtXbXA2aXBxckt6dExXMnQ3aTV1c0xEeE1YR3g4akp5dExUMU5YVzE5aloydUxqNU9YbTUranA2dkx6OVBYMjkvajUrdi9hQUF3REFRQUNFUU1SQUQ4QStONDFQMlFoUmsxalNRdnZPYTZQVGhITEF5RnRwck12N1FvNXcyYTZKSm5MQ1Naanl4Yk9jMCt5aVdhNFZXYmFEM3BKNFhqUHpVMjN0cExtVUxFQ3plMWN6MFYyZGNidlk2UFNlSkVKR2FYVkpzU01Bb0ZGRmUxeXAwOVVlQ3BOVDBaaVhVclNEbXJmaHk4YXl1dzZxckgzb29yeE1SRk9MUjlCaEcxSk5ILy8yUT09Ij4KCTwvaW1hZ2U+Cjwvc3ZnPg== 32w" onload="window.requestAnimationFrame(function(){if(!(size=getBoundingClientRect().width))return;onload=null;sizes=Math.ceil(size/window.innerWidth*100)+'vw';});" sizes="1px" src="https://www.opensourceagenda.com/storage/media/715/how-to-choose-which-programming-language-to-learn.jpg" width="1920"> </div> </div> <span class="published-at bg-primary text-white position-absolute start-0 bottom-0 px-2 py-1">Dec 11, 2022</span> </a> <div class="md:flex-1 max-w-full py-3"> <a href="https://www.opensourceagenda.com/blog/how-to-choose-which-programming-language-to-learn-first"><h3 class="h4 mb-0 text-black">How to Choose Which Programming Language to Learn First?</h3></a> </div> </div> </div> </div> </div> <footer > <div class="bg-light"> <div class="container py-5"> <div class="text-center mb-5"> <a class="text-center" href="https://www.opensourceagenda.com"> <div class="text-2xl logo mx-auto"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 642.6 113.9" style="enable-background:new 0 0 642.6 113.9;" xml:space="preserve"> <g> <path class="color-2" d="M325,37.3c-10.3,0-18.7-7.7-18.7-18.7C306.3,7.7,314.7,0,325,0c10.4,0,18.6,7.7,18.6,18.6C343.6,29.6,335.3,37.3,325,37.3z M325,30.8c6.6,0,11.1-4.8,11.1-12.2c0-7.4-4.5-12.1-11.1-12.1c-6.6,0-11.2,4.6-11.2,12.1C313.8,26.1,318.4,30.8,325,30.8z"/> <path class="color-2" d="M365.9,7.6c7.4,0,13.2,5.8,13.2,14.8c0,9-5.8,15-13.2,15c-4.5,0-7.8-2.2-9.6-4.6v17.9H349V8h7.3v4.2 C358.1,9.8,361.4,7.6,365.9,7.6z M364,14c-3.9,0-7.6,3-7.6,8.5s3.7,8.5,7.6,8.5c4,0,7.7-3.1,7.7-8.6S367.9,14,364,14z"/> <path class="color-2" d="M397.1,37.4c-8.4,0-14.5-5.9-14.5-14.9c0-9.1,6-14.9,14.5-14.9c8.4,0,14.3,5.7,14.3,14.3c0,0.9-0.1,1.9-0.2,2.8H390 c0.4,4.3,3.3,6.7,6.9,6.7c3.1,0,4.9-1.6,5.8-3.5h7.9C409,33.2,404.2,37.4,397.1,37.4z M390,19.8h13.7c-0.1-3.8-3.1-6.2-6.9-6.2 C393.4,13.6,390.6,15.8,390,19.8z"/> <path class="color-2" d="M436.9,21c0-4.6-2.6-7.2-6.4-7.2c-4,0-6.5,2.5-6.5,7.2v16h-7.3V8h7.3v3.6c1.9-2.5,5-4,8.7-4c6.7,0,11.5,4.4,11.5,12.4v17 h-7.3V21z"/> <path class="color-2" d="M476.2,37.3c-7.6,0-13.4-4-13.5-10.9h7.8c0.2,2.9,2.1,4.9,5.5,4.9c3.4,0,5.5-1.8,5.5-4.4c0-7.9-18.8-3.1-18.8-16.3 C462.7,4,468.1,0,475.6,0c7.5,0,12.6,3.8,13.1,10.4h-8c-0.2-2.4-2.1-4.3-5.2-4.3c-2.9-0.1-5,1.3-5,4.3c0,7.3,18.7,3.2,18.7,16.1 C489.1,32.2,484.5,37.3,476.2,37.3z"/> <path class="color-2" d="M508.2,37.4c-8.4,0-14.7-5.9-14.7-14.9c0-9.1,6.5-14.9,14.9-14.9c8.4,0,14.9,5.8,14.9,14.9 C523.3,31.6,516.6,37.4,508.2,37.4z M508.2,31.1c3.9,0,7.6-2.8,7.6-8.6c0-5.8-3.6-8.6-7.5-8.6c-3.9,0-7.4,2.8-7.4,8.6 C501,28.3,504.3,31.1,508.2,31.1z"/> <path class="color-2" d="M556,37h-7.4v-3.7c-1.8,2.5-5,4-8.6,4c-6.7,0-11.6-4.4-11.6-12.3V8h7.3V24c0,4.6,2.6,7.2,6.4,7.2c4,0,6.5-2.5,6.5-7.2V8 h7.4V37z"/> <path class="color-2" d="M570.5,37h-7.3V8h7.3v4.5c1.8-3,4.9-4.9,8.9-4.9v7.7h-1.9c-4.3,0-6.9,1.7-6.9,7.3V37z"/> <path class="color-2" d="M596.7,7.6c7.2,0,12.1,3.8,13.6,10.2h-7.9c-0.8-2.5-2.8-4-5.8-4c-4.1,0-6.8,3.1-6.8,8.7s2.7,8.7,6.8,8.7c3,0,4.9-1.4,5.8-4 h7.9c-1.6,6.2-6.4,10.2-13.6,10.2c-8.4,0-14.3-5.9-14.3-14.9S588.4,7.6,596.7,7.6z"/> <path class="color-2" d="M628.3,37.4c-8.4,0-14.5-5.9-14.5-14.9c0-9.1,6-14.9,14.5-14.9c8.4,0,14.3,5.7,14.3,14.3c0,0.9-0.1,1.9-0.2,2.8h-21.2 c0.4,4.3,3.3,6.7,6.9,6.7c3.1,0,4.9-1.6,5.8-3.5h7.9C640.3,33.2,635.5,37.4,628.3,37.4z M621.3,19.8H635c-0.1-3.8-3.1-6.2-6.9-6.2 C624.6,13.6,621.9,15.8,621.3,19.8z"/> <path class="color-2" d="M330.4,92.7h-14.5l-2.4,6.9h-7.7l13.1-36.5h8.5l13.1,36.5h-7.7L330.4,92.7z M323.2,71.6l-5.3,15.3h10.6L323.2,71.6z"/> <path class="color-2" d="M356.8,70.2c4.5,0,7.8,2.1,9.6,4.6v-4.1h7.4v29.1c0,7.8-4.8,14-14.3,14c-8.1,0-13.8-4.1-14.6-10.7h7.3 c0.7,2.6,3.4,4.3,7.1,4.3c4,0,7.2-2.3,7.2-7.7v-4.5c-1.7,2.5-5,4.8-9.6,4.8c-7.4,0-13.2-6-13.2-15C343.6,76,349.4,70.2,356.8,70.2z M358.7,76.6c-3.9,0-7.6,2.9-7.6,8.4c0,5.5,3.7,8.6,7.6,8.6c4,0,7.7-3,7.7-8.5S362.7,76.6,358.7,76.6z"/> <path class="color-2" d="M393.5,100.1c-8.4,0-14.5-5.9-14.5-14.9c0-9.1,6-14.9,14.5-14.9c8.4,0,14.3,5.7,14.3,14.3c0,0.9-0.1,1.9-0.2,2.8h-21.2 c0.4,4.3,3.3,6.7,6.9,6.7c3.1,0,4.9-1.6,5.8-3.5h7.9C405.4,95.9,400.6,100.1,393.5,100.1z M386.4,82.4h13.7 c-0.1-3.8-3.1-6.2-6.9-6.2C389.8,76.2,387,78.5,386.4,82.4z"/> <path class="color-2" d="M433.3,83.6c0-4.6-2.6-7.2-6.4-7.2c-4,0-6.5,2.5-6.5,7.2v16H413V70.7h7.3v3.6c1.9-2.5,5-4,8.7-4c6.7,0,11.5,4.4,11.5,12.4 v17h-7.3V83.6z"/> <path class="color-2" d="M458.9,70.2c3.8,0,7.5,1.8,9.5,4.5V61h7.4v38.6h-7.4v-4.3c-1.7,2.7-5,4.8-9.5,4.8c-7.4,0-13.2-6-13.2-15 C445.7,76,451.5,70.2,458.9,70.2z M460.8,76.6c-3.9,0-7.6,2.9-7.6,8.4c0,5.5,3.7,8.6,7.6,8.6c4,0,7.7-3,7.7-8.5 S464.8,76.6,460.8,76.6z"/> <path class="color-2" d="M494.3,70.2c4.6,0,7.8,2.2,9.6,4.6v-4.1h7.4v28.9h-7.4v-4.2c-1.7,2.5-5,4.7-9.6,4.7c-7.3,0-13.2-6-13.2-15 C481.1,76,486.9,70.2,494.3,70.2z M496.2,76.6c-3.9,0-7.6,2.9-7.6,8.4c0,5.5,3.7,8.6,7.6,8.6c4,0,7.7-3,7.7-8.5 S500.2,76.6,496.2,76.6z"/> </g> <g> <path class="color-1" d="M49.6,3.1C22.2,3.1,0,23.4,0,52.4c0,29,22.2,49.4,49.6,49.4c27.3,0,49.3-20.5,49.3-49.4 C98.9,23.4,77,3.1,49.6,3.1z M49.6,80.4c-15.7,0-25.5-11.1-25.5-28c0-17.2,9.9-28,25.5-28C65,24.4,75,35.3,75,52.4 C75,69.3,65,80.4,49.6,80.4z"/> <path class="color-1" d="M239.4,3.1h-27.2l-34.9,96.4h24.6l5.8-17h36l5.8,17h24.9L239.4,3.1z M213.9,64.4l11.8-35.3l11.9,35.3H213.9z" /> <path class="color-1" d="M129.7,30.7c0-6,4.3-8.9,9.9-8.8c0.4,0,1.2,0,1.3,0v0h36.4V3.1h-36.4v0c-0.3,0-0.6,0-0.9,0 c-20.2,0-35.2,10.2-35.2,28.4c-0.3,34.2,47.9,24.6,47.9,42.4c0,5.6-4.4,9.1-11.3,9.1c-0.2,0-0.5,0-0.5,0v0h-36.1v18.8h36.4v0 c0.3,0,0.7,0,1,0c22.5,0,35.1-13.4,35.1-29.7C177.4,39.9,129.7,47.5,129.7,30.7z"/> </g> </svg> </div> </a> </div> <div class="row"> <div class="col-6 col-lg"> <il class="list-unstyled"> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/python" class="text-black hover:underline">Top Python Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/java" class="text-black hover:underline">Top Java Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/javascript" class="text-black hover:underline">Top JS Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/c-sharp" class="text-black hover:underline">Top C# Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/c-plus-plus" class="text-black hover:underline">Top C++ Projects</a> </li> </ul> </div> <div class="col-6 col-lg"> <il class="list-unstyled"> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/php" class="text-black hover:underline">Top PHP Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/swift" class="text-black hover:underline">Top Swift Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/go" class="text-black hover:underline">Top Go Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/c" class="text-black hover:underline">Top C Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/ruby" class="text-black hover:underline">Top Ruby Projects</a> </li> </ul> </div> <div class="col-6 col-lg"> <il class="list-unstyled"> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/kotlin" class="text-black hover:underline">Top Kotlin Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/objective-c" class="text-black hover:underline">Top Objective C Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/scala" class="text-black hover:underline">Top Scala Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/dart" class="text-black hover:underline">Top Dart Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/matlab" class="text-black hover:underline">Top Matlab Projects</a> </li> </ul> </div> <div class="col-6 col-lg"> <il class="list-unstyled"> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/typescript" class="text-black hover:underline">Top TypeScript Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/lua" class="text-black hover:underline">Top Lua Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/r" class="text-black hover:underline">Top R Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/rust" class="text-black hover:underline">Top Rust Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/haskell" class="text-black hover:underline">Top Haskell Projects</a> </li> </ul> </div> <div class="col-6 col-lg"> <il class="list-unstyled"> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/angular" class="text-black hover:underline">Top Angular Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/vue" class="text-black hover:underline">Top Vue Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/react" class="text-black hover:underline">Top React Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/laravel" class="text-black hover:underline">Top Laravel Projects</a> </li> <li class="pb-2"> <a href="https://www.opensourceagenda.com/tags/django" class="text-black">Top Django Projects</a> </li> </ul> </div> </div> </div> </div> <div class="py-4 copyright bg-white"> <div class="container text-center"> <p class="text-dsrk leading-loose mb-0">Copyright © 2021 Open Source Agenda (OSA). Logo Designed By <a href="https://dribbble.com/adrianPuiu" class="underline" target="_blank">Puiu Adrian</a>.</p> <p class="mb-0"><a href="https://www.opensourceagenda.com/terms-of-service">Terms of Service</a> | <a href="https://www.opensourceagenda.com/privacy-policy">Privacy Policy</a> | <a href="https://www.opensourceagenda.com/cookie-policy">Cookie Policy</a> | <a href="https://www.opensourceagenda.com/advertising">Advetising</a> | <a href="https://forms.gle/u3ctNaCwf9sW5EaGA" target="_blank">Submit a blog post</a></p> </div> </div> </footer> <div class="modal fade h-100 bg-white d-lg-none" id="mobileModal" data-bs-backdrop="static" data-bs-keyboard="true" tabindex="-1" data-bs-focus="false" aria-hidden="true"> <div class="modal-dialog modal-fullscreen"> <div class="modal-content bg-white"> <div class="container py-2"> <nav class="row justify-content-between"> <div class="col-8 col-lg-4 align-self-center"> <a href="https://www.opensourceagenda.com" class="logo header-logo"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 642.6 113.9" style="enable-background:new 0 0 642.6 113.9;" xml:space="preserve"> <g> <path class="color-2" d="M325,37.3c-10.3,0-18.7-7.7-18.7-18.7C306.3,7.7,314.7,0,325,0c10.4,0,18.6,7.7,18.6,18.6C343.6,29.6,335.3,37.3,325,37.3z M325,30.8c6.6,0,11.1-4.8,11.1-12.2c0-7.4-4.5-12.1-11.1-12.1c-6.6,0-11.2,4.6-11.2,12.1C313.8,26.1,318.4,30.8,325,30.8z"/> <path class="color-2" d="M365.9,7.6c7.4,0,13.2,5.8,13.2,14.8c0,9-5.8,15-13.2,15c-4.5,0-7.8-2.2-9.6-4.6v17.9H349V8h7.3v4.2 C358.1,9.8,361.4,7.6,365.9,7.6z M364,14c-3.9,0-7.6,3-7.6,8.5s3.7,8.5,7.6,8.5c4,0,7.7-3.1,7.7-8.6S367.9,14,364,14z"/> <path class="color-2" d="M397.1,37.4c-8.4,0-14.5-5.9-14.5-14.9c0-9.1,6-14.9,14.5-14.9c8.4,0,14.3,5.7,14.3,14.3c0,0.9-0.1,1.9-0.2,2.8H390 c0.4,4.3,3.3,6.7,6.9,6.7c3.1,0,4.9-1.6,5.8-3.5h7.9C409,33.2,404.2,37.4,397.1,37.4z M390,19.8h13.7c-0.1-3.8-3.1-6.2-6.9-6.2 C393.4,13.6,390.6,15.8,390,19.8z"/> <path class="color-2" d="M436.9,21c0-4.6-2.6-7.2-6.4-7.2c-4,0-6.5,2.5-6.5,7.2v16h-7.3V8h7.3v3.6c1.9-2.5,5-4,8.7-4c6.7,0,11.5,4.4,11.5,12.4v17 h-7.3V21z"/> <path class="color-2" d="M476.2,37.3c-7.6,0-13.4-4-13.5-10.9h7.8c0.2,2.9,2.1,4.9,5.5,4.9c3.4,0,5.5-1.8,5.5-4.4c0-7.9-18.8-3.1-18.8-16.3 C462.7,4,468.1,0,475.6,0c7.5,0,12.6,3.8,13.1,10.4h-8c-0.2-2.4-2.1-4.3-5.2-4.3c-2.9-0.1-5,1.3-5,4.3c0,7.3,18.7,3.2,18.7,16.1 C489.1,32.2,484.5,37.3,476.2,37.3z"/> <path class="color-2" d="M508.2,37.4c-8.4,0-14.7-5.9-14.7-14.9c0-9.1,6.5-14.9,14.9-14.9c8.4,0,14.9,5.8,14.9,14.9 C523.3,31.6,516.6,37.4,508.2,37.4z M508.2,31.1c3.9,0,7.6-2.8,7.6-8.6c0-5.8-3.6-8.6-7.5-8.6c-3.9,0-7.4,2.8-7.4,8.6 C501,28.3,504.3,31.1,508.2,31.1z"/> <path class="color-2" d="M556,37h-7.4v-3.7c-1.8,2.5-5,4-8.6,4c-6.7,0-11.6-4.4-11.6-12.3V8h7.3V24c0,4.6,2.6,7.2,6.4,7.2c4,0,6.5-2.5,6.5-7.2V8 h7.4V37z"/> <path class="color-2" d="M570.5,37h-7.3V8h7.3v4.5c1.8-3,4.9-4.9,8.9-4.9v7.7h-1.9c-4.3,0-6.9,1.7-6.9,7.3V37z"/> <path class="color-2" d="M596.7,7.6c7.2,0,12.1,3.8,13.6,10.2h-7.9c-0.8-2.5-2.8-4-5.8-4c-4.1,0-6.8,3.1-6.8,8.7s2.7,8.7,6.8,8.7c3,0,4.9-1.4,5.8-4 h7.9c-1.6,6.2-6.4,10.2-13.6,10.2c-8.4,0-14.3-5.9-14.3-14.9S588.4,7.6,596.7,7.6z"/> <path class="color-2" d="M628.3,37.4c-8.4,0-14.5-5.9-14.5-14.9c0-9.1,6-14.9,14.5-14.9c8.4,0,14.3,5.7,14.3,14.3c0,0.9-0.1,1.9-0.2,2.8h-21.2 c0.4,4.3,3.3,6.7,6.9,6.7c3.1,0,4.9-1.6,5.8-3.5h7.9C640.3,33.2,635.5,37.4,628.3,37.4z M621.3,19.8H635c-0.1-3.8-3.1-6.2-6.9-6.2 C624.6,13.6,621.9,15.8,621.3,19.8z"/> <path class="color-2" d="M330.4,92.7h-14.5l-2.4,6.9h-7.7l13.1-36.5h8.5l13.1,36.5h-7.7L330.4,92.7z M323.2,71.6l-5.3,15.3h10.6L323.2,71.6z"/> <path class="color-2" d="M356.8,70.2c4.5,0,7.8,2.1,9.6,4.6v-4.1h7.4v29.1c0,7.8-4.8,14-14.3,14c-8.1,0-13.8-4.1-14.6-10.7h7.3 c0.7,2.6,3.4,4.3,7.1,4.3c4,0,7.2-2.3,7.2-7.7v-4.5c-1.7,2.5-5,4.8-9.6,4.8c-7.4,0-13.2-6-13.2-15C343.6,76,349.4,70.2,356.8,70.2z M358.7,76.6c-3.9,0-7.6,2.9-7.6,8.4c0,5.5,3.7,8.6,7.6,8.6c4,0,7.7-3,7.7-8.5S362.7,76.6,358.7,76.6z"/> <path class="color-2" d="M393.5,100.1c-8.4,0-14.5-5.9-14.5-14.9c0-9.1,6-14.9,14.5-14.9c8.4,0,14.3,5.7,14.3,14.3c0,0.9-0.1,1.9-0.2,2.8h-21.2 c0.4,4.3,3.3,6.7,6.9,6.7c3.1,0,4.9-1.6,5.8-3.5h7.9C405.4,95.9,400.6,100.1,393.5,100.1z M386.4,82.4h13.7 c-0.1-3.8-3.1-6.2-6.9-6.2C389.8,76.2,387,78.5,386.4,82.4z"/> <path class="color-2" d="M433.3,83.6c0-4.6-2.6-7.2-6.4-7.2c-4,0-6.5,2.5-6.5,7.2v16H413V70.7h7.3v3.6c1.9-2.5,5-4,8.7-4c6.7,0,11.5,4.4,11.5,12.4 v17h-7.3V83.6z"/> <path class="color-2" d="M458.9,70.2c3.8,0,7.5,1.8,9.5,4.5V61h7.4v38.6h-7.4v-4.3c-1.7,2.7-5,4.8-9.5,4.8c-7.4,0-13.2-6-13.2-15 C445.7,76,451.5,70.2,458.9,70.2z M460.8,76.6c-3.9,0-7.6,2.9-7.6,8.4c0,5.5,3.7,8.6,7.6,8.6c4,0,7.7-3,7.7-8.5 S464.8,76.6,460.8,76.6z"/> <path class="color-2" d="M494.3,70.2c4.6,0,7.8,2.2,9.6,4.6v-4.1h7.4v28.9h-7.4v-4.2c-1.7,2.5-5,4.7-9.6,4.7c-7.3,0-13.2-6-13.2-15 C481.1,76,486.9,70.2,494.3,70.2z M496.2,76.6c-3.9,0-7.6,2.9-7.6,8.4c0,5.5,3.7,8.6,7.6,8.6c4,0,7.7-3,7.7-8.5 S500.2,76.6,496.2,76.6z"/> </g> <g> <path class="color-1" d="M49.6,3.1C22.2,3.1,0,23.4,0,52.4c0,29,22.2,49.4,49.6,49.4c27.3,0,49.3-20.5,49.3-49.4 C98.9,23.4,77,3.1,49.6,3.1z M49.6,80.4c-15.7,0-25.5-11.1-25.5-28c0-17.2,9.9-28,25.5-28C65,24.4,75,35.3,75,52.4 C75,69.3,65,80.4,49.6,80.4z"/> <path class="color-1" d="M239.4,3.1h-27.2l-34.9,96.4h24.6l5.8-17h36l5.8,17h24.9L239.4,3.1z M213.9,64.4l11.8-35.3l11.9,35.3H213.9z" /> <path class="color-1" d="M129.7,30.7c0-6,4.3-8.9,9.9-8.8c0.4,0,1.2,0,1.3,0v0h36.4V3.1h-36.4v0c-0.3,0-0.6,0-0.9,0 c-20.2,0-35.2,10.2-35.2,28.4c-0.3,34.2,47.9,24.6,47.9,42.4c0,5.6-4.4,9.1-11.3,9.1c-0.2,0-0.5,0-0.5,0v0h-36.1v18.8h36.4v0 c0.3,0,0.7,0,1,0c22.5,0,35.1-13.4,35.1-29.7C177.4,39.9,129.7,47.5,129.7,30.7z"/> </g> </svg> </a> </div> <div class="col-4 col-lg-8 text-end align-self-center"> <button type="button" class="btn btn-light d-inline-block text-end" data-bs-toggle="modal" data-bs-target="#mobileModal"> <i class="fas fa-times"></i> </button> </div> </nav> <div class="d-block mt-3"> <a href="https://www.opensourceagenda.com" class="hover d-block text-black py-2"> Home </a> <a href="https://www.opensourceagenda.com/projects" class="hover d-block text-black py-2"> Projects </a> <a href="https://www.opensourceagenda.com/resources" class="hover d-block text-black py-2"> Resources </a> <a href="https://www.opensourceagenda.com/alternatives" class="hover d-block text-black py-2"> Alternatives </a> <a href="https://www.opensourceagenda.com/blog" class="hover d-block text-black py-2"> Blog </a> <a href="#" data-bs-toggle="modal" data-bs-target="#signInModal" class="hover d-block text-black py-2"> Sign In </a> </div> </div> </div> </div> </div> <div class="modal fade" id="signInModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-sm modal-dialog-centered"> <div class="modal-content bg-white"> <div class="modal-body"> <h5 class="taxt-dark text-center mb-3">Sign In to OSA</h5> <div class="form-check mb-2"> <input class="form-check-input" type="checkbox" value="yes" id="tosAndPrivacy"> <label class="form-check-label line-highlight position-relative" style="font-size: 10px; top:-2px" for="tosAndPrivacy"> I agree with <a href="https://www.opensourceagenda.com/terms-of-service">Terms of Service</a> and <a href="https://www.opensourceagenda.com/privacy-policy">Privacy Policy</a> </label> </div> <a class="btn btn-light d-block text-start btn-login disabled" href="https://www.opensourceagenda.com/auth/redirect/github"> <i class="fab fa-github me-2"></i> Sign In with Github </a> </div> </div> </div> </div> </div> <script src="/js/app.js?id=d660065a12530b071d5e" defer></script> </body> </html><script>(function(){if (!document.body) return;var js = "window['__CF$cv$params']={r:'87bae9876c6f607e',t:'MTcxNDM0Nzc4Mi40MTQwMDA='};_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js',document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script>