Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Sara Soueidan SaraSoueidan

🎯
Focusing
View GitHub Profile
View collection.js
eleventyConfig.addCollection("articles", function(collection) {
return collection.getFilteredByGlob("./src/content/articles/**/*.md").filter((item) => {
return !item.data.draft && item.date <= now;
}).reverse();
});
View pagination.html
---
title: Articles
# permalink: /articles/
layout: layouts/main.html
pagination:
data: collections.articles
size: 3
alias: articles
permalink: 'articles{% if pagination.pageNumber > 0 %}/page/{{ pagination.pageNumber }}{% endif %}/index.html'
View pagination.njk
<nav class="c-collection-pagination" aria-labelledby="pagination-label">
<h2 id="pagination-label" class="visually-hidden">Pagination</h2>
<ul>
<li>
{% if page.url != pagination.href.first %}<a href="{{ pagination.href.first }}">First</a>
{% else %}First{% endif %}
</li>
<li>
{% if page.url != pagination.href.last %}<a href="{{ pagination.href.last }}">Last</a>
{% else %}Last{% endif %}
@SaraSoueidan
SaraSoueidan / Simulate Click event in Vanilla JS.js
Created Sep 7, 2018
Vanilla JS .click() doesn't apply to links <a>, so this is a function that enables it to work on them. Source: https://gomakethings.com/how-to-simulate-a-click-event-with-javascript/
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 Notes.md

Event Name:

Location:

Date:


Talk topic:

View gist:7915280

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})
View Simple-Circular-Menu.markdown
View HTML5-paste-image-to-page.markdown

HTML5 paste image to page

Using a simpel javascript code found on gist.github.com 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.

License.

@SaraSoueidan
SaraSoueidan / index.html
Created Aug 11, 2013
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){
&.placeholder{
color: $color
}
&:-moz-placeholder{
color: $color
}
&::-webkit-input-placeholder{