ellm

const playing = document.querySelector('.community__song-playing');
const btn = document.querySelector('button.btn-like');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.type == "attributes") {
      btn.click();
      console.log("me_debug", "playing attributes changed")
    }
  });

ellm

Matt Ell is a UX Developer at Alley with over a decade of experience in frontend web development and building websites with WordPress. Matt started his career in 2008 as a graphic designer working in print and digital media for all sorts of organizations ranging from small nonprofits to large brands. Along the way, he became fascinated with interaction design and discovered open source software. After making a small contribution to WordPress core, he became inspired by the WordPress community and discovered the great work Alley was doing. Matt joined Alley in 2016.

Outside of work, Matt enjoys spending time with his wife and son, collecting vinyl records, traveling, and the outdoors. Matt is a graduate of the School of Visual Arts (BFA in Graphic Design) and Pace University (MS in Computer Science). He is based in Westwood, New Jersey.

ellm

1. Click on Windows Start button and type in "NotePad"
2. Right click on NotePad and click "Run as Administrator"
3. Click File > Open and navigate to: C:\windows\system32\drivers\etc\
4. Select "All files" to reveal "hosts" files and open it
5. Add the following (or another localhost IP) to the bottom of hosts file

192.168.50.4 example.dev

ellm

Vim

Command	Description
Editing
d	Cut/Delete
dd	Cut/Delete entire line
p	Paste line p (below) or P (above)
c	Change (delete and then place into insert mode)
y	Yank (copy) y or yy (copy entire line including carriage return)

ellm

CSS notes and snippets

Push elements off screen

• for UX where navigation flies in from the side of the screen or a rollup that swoops in from the bottom of the screen, use translate3d().
• the advantage is that you do not need to know the height or width. Whereas using negative margin or top, bottom, etc requires that an exact measurement to push off screen
• add transition: transform 0.5s to have it smoothly move in and out.

transform: translate3d(0, 100%, 0); // push off screen

ellm

JavaScript Notes and Snippets

Promises

• promise.all() can be used to queue up a few asynchronous calls to load before a subsquent script is called.
• This can be useful for preloading libraries before some scripts that depend on the library are called.

this.searchTrigger.addEventListener('click', () => {
 // Lazyload Typeahead and Bloodhound libraries.

ellm

Webpack 3.0

Code spliting in webpack to help decrease loaded dependencies on load.

• UI that gets displayed as a callback from an event can benefit.
• We can async. load a ES6 import() and code after it is returned using a promise.

// At top of file, assign an `import()` that is returned from a function.
const getBloodhound = () => import('bloodhound-js');

// Add an event that will trigger loading the module.

ellm

Php Snippets and Notes

printf

I need to escape/translate text that also requires HTML within in the copy. Use printf()

    <h3><?php printf( esc_html__( 'Get our exclusive newsletter—the best of %1$s The Dude %2$s every day!', 'localdude' ), '<span>', '</span>' ); ?></h3>

ellm

Podcasts

• Shop Talk Show
• JavaScript Jabber

People

• Harry Roberts
• Paul Irish
• Chris Coyier
• Matt Mullenweg
• David Walsh

ellm

<h1>Heading 1</h1>
Nulla eu erat dolor. <strong>Vestibulum</strong> vel eleifend libero. Donec molestie urna posuere egestas suscipit. Nunc id porttitor nulla. Nulla facilisi. In hac habitasse platea dictumst. <a href="http://www.google.com" target="_blank">Maecenas</a> quis condimentum ipsum. Suspendisse potenti. Cras eget <em>tristique</em> nulla, nec tempus arcu. Donec pulvinar sapien a sapien lobortis, eget egestas augue interdum. Curabitur imperdiet urna et pellentesque convallis. Morbi id risus ex. Morbi condimentum gravida odio. <del>Vestibulum</del> fermentum molestie vestibulum. Phasellus pretium nulla arcu, at pellentesque diam efficitur vitae.
<h2>Heading 2</h2>
Nulla eu erat dolor. Vestibulum vel eleifend libero. Donec molestie urna posuere egestas suscipit. Nunc id porttitor nulla. Nulla facilisi. In hac habitasse platea dictumst. Maecenas quis condimentum ipsum. Suspendisse potenti. Cras eget tristique nulla, nec tempus arcu. Donec pulvinar sapien a sapien lobortis, eget egestas augue interdum.