Skip to content

Instantly share code, notes, and snippets.

View SaraSoueidan's full-sized avatar

Sara Soueidan SaraSoueidan

View GitHub Profile
View collection.js
eleventyConfig.addCollection("articles", function(collection) {
return collection.getFilteredByGlob("./src/content/articles/**/*.md").filter((item) => {
return ! && <= now;
View pagination.html
title: Articles
# permalink: /articles/
layout: layouts/main.html
data: collections.articles
size: 3
alias: articles
permalink: 'articles{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber }}{% endif %}/index.html'
SaraSoueidan / pagination.njk
Created August 23, 2021 09:12
11ty pagination
View pagination.njk
<nav class="c-collection-pagination" aria-labelledby="pagination-label">
<h2 id="pagination-label" class="visually-hidden">Pagination</h2>
{% if page.url != pagination.href.first %}<a href="{{ pagination.href.first }}">First</a>
{% else %}First{% endif %}
{% if page.url != pagination.href.last %}<a href="{{ pagination.href.last }}">Last</a>
{% else %}Last{% endif %}
SaraSoueidan / Simulate Click event in Vanilla JS.js
Created September 7, 2018 07:18
Vanilla JS .click() doesn't apply to links <a>, so this is a function that enables it to work on them. Source:
View Simulate Click event in Vanilla JS.js
* Simulate a click event.
* @public
* @param {Element} elem the element to simulate a click on
var simulateClick = function (elem) {
// Create our event (with options)
var evt = new MouseEvent('click', {
bubbles: true,
cancelable: true,
View Event

Event Name:



Talk topic:

View gist:7915280

Moving from jQuery


// jQuery
$(document).ready(function() {
  // code
SaraSoueidan / Simple-Circular-Menu.markdown
Last active December 22, 2015 08:39
A Pen by Sara Soueidan.
View Simple-Circular-Menu.markdown
View HTML5-paste-image-to-page.markdown

HTML5 paste image to page

Using a simpel javascript code found on I have made simpel demo showing how you can paste images on the computer clipboard into HTML elements and save their info as dataURL

A Pen by Sten Hougaard on CodePen.


SaraSoueidan / index.html
Created August 11, 2013 13:14
A CodePen by Sara Soueidan. Tumblr's Like/Unlike Animation with CSS3 animaitons - Make sure u got the latest version of Chrome. Also works in Firefox.
View index.html
<h2>Click the heart to like/unlike</h2>
<div class="heart">❤</div>
View placeholder-mixin
@mixin placeholder-color($color){
color: $color
color: $color