Henry Desroches xdesro

## .eleventy.js
/**
 *  @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
 */
module.exports = (eleventyConfig) => {
  return {};
};

## killport.sh
function killport {
    echo '🚨 Killing all processes at port' $1
    lsof -ti tcp:$1 | xargs kill
}

## index.js
if (matchMedia('(pointer:fine)').matches) {
  // This browser has a mouse or other fine-control device as its primary input.
}

## optional-chaining.js
// Before
const postsByAuthor = (posts) => {
  return this.posts.filter(
    (post) => post.author && post.author.fields.name == this.teamMember.name
  );
},

// After
const postsByAuthor = (posts) => {
  return this.posts.filter(

## MarginTop.js
const MarginTop = (props) => (
  <div>
    {Array.from(Array(props.spacing)).map((br) => (
      <br />
    ))}
    {props.children}
  </div>
);

ReactDOM.render(

## twitter-engagement-alignment.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                xdesro
                / twitter-engagement-alignment.md
            
            
              Created
              August 6, 2020 17:54
            
              
                An alignment chart for analyzing the different styles of engagement on Twitter dot com.
              
          
    Twitter Engagement Alignment Chart

😇 Good

Lawful Good


Like
Clean Retweet

Neutral Good


Like


## lexical-this-in-sass.scss
.nav-item {
    &__link {
        color: red;
    }
    $this: &;
    &:first-of-type {
        &__link {
            // this won't work 😞
            color: blue;
        }

## anchors-away.js
[...document.querySelectorAll('a')].forEach(a => a.remove());

// ⚓️ anchors away

## _mixins.scss
$bkpoints: (
  xs: 27rem,
  sm: 37.5rem,
  md: 56.25rem,
  lg: 62.5rem,
  xl: 120rem
);
// ^ This was for a particular client, you can use whichever
     breakpoints are best for your use case.

## component-sans-moment.js
// This is meant to be a Vue component, cause my site https://henry.codes is built with Nuxt.js. I put the .js extension on there for that fresh Gist syntax highlighting.
export default {
  computed: {
    postDate() {
      return new Date(this.post.fields.publishDate).toLocaleDateString("en-US", { month: "short", year: "2-digit" });
    }
  }
};
	/**
	* @param {import("@11ty/eleventy/src/UserConfig")} eleventyConfig
	*/
	module.exports = (eleventyConfig) => {
	return {};
	};
	function killport {
	echo '🚨 Killing all processes at port' $1
	lsof -ti tcp:$1 \| xargs kill
	}
	if (matchMedia('(pointer:fine)').matches) {
	// This browser has a mouse or other fine-control device as its primary input.
	}
	// Before
	const postsByAuthor = (posts) => {
	return this.posts.filter(
	(post) => post.author && post.author.fields.name == this.teamMember.name
	);
	},

	// After
	const postsByAuthor = (posts) => {
	return this.posts.filter(
	const MarginTop = (props) => (
	<div>
	{Array.from(Array(props.spacing)).map((br) => (
	<br />
	))}
	{props.children}
	</div>
	);

	ReactDOM.render(
	.nav-item {
	&__link {
	color: red;
	}
	$this: &;
	&:first-of-type {
	&__link {
	// this won't work 😞
	color: blue;
	}
	[...document.querySelectorAll('a')].forEach(a => a.remove());

	// ⚓️ anchors away
	$bkpoints: (
	xs: 27rem,
	sm: 37.5rem,
	md: 56.25rem,
	lg: 62.5rem,
	xl: 120rem
	);
	// ^ This was for a particular client, you can use whichever
	breakpoints are best for your use case.
	// This is meant to be a Vue component, cause my site https://henry.codes is built with Nuxt.js. I put the .js extension on there for that fresh Gist syntax highlighting.
	export default {
	computed: {
	postDate() {
	return new Date(this.post.fields.publishDate).toLocaleDateString("en-US", { month: "short", year: "2-digit" });
	}
	}
	};