SaraSoueidan

eleventyConfig.addCollection("articles", function(collection) {
        return collection.getFilteredByGlob("./src/content/articles/**/*.md").filter((item) => {
            return !item.data.draft && item.date <= now;
        }).reverse();
    });

SaraSoueidan

---
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'

SaraSoueidan

<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

/**
 * 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,

SaraSoueidan

Event Name:

Location:

Date:

---

Talk topic:

SaraSoueidan

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

SaraSoueidan

Simple Circular Menu

Another simple circular menu. UPDATE: How-to and explanation included.

A Pen by Sara Soueidan on CodePen.

License.

SaraSoueidan

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

<h2>Click the heart to like/unlike</h2>
<div class="heart">❤</div>

SaraSoueidan

@mixin placeholder-color($color){
  &.placeholder{
    color: $color
  }

  &:-moz-placeholder{
    color: $color
  }
    
  &::-webkit-input-placeholder{