diff --git a/.eleventy.js b/.eleventy.js index 68593fc..9821ffe 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,4 +1,9 @@ module.exports = function (eleventyConfig) { + // Custom watchers eleventyConfig.addWatchTarget("./styles"); + + // Custom pass through eleventyConfig.addPassthroughCopy("./styles"); + eleventyConfig.addPassthroughCopy("**/*.jpg"); + eleventyConfig.addPassthroughCopy("**/*.png"); }; diff --git a/index.md b/index.md index 7514028..7c1fcca 100644 --- a/index.md +++ b/index.md @@ -6,7 +6,11 @@ layout: layout.liquid # Posts diff --git a/posts/make-node-list-an-array.md b/posts/make-node-list-an-array.md new file mode 100644 index 0000000..19e3b05 --- /dev/null +++ b/posts/make-node-list-an-array.md @@ -0,0 +1,38 @@ +--- +date: 2019-12-07 +tags: ['JavaScript'] +title: Make node list into an array +description: "Make iterating through a set of DOM nodes easy by turning a Node List into an array." +--- + +# {{ title }} + +Most of the time when I'm coding with [node lists](https://developer.mozilla.org/en-US/docs/Web/API/NodeList), I want to iterate through each of them and preform some action. My first thought is, "Node lists are _like_ arrays, I should be able to use the array methods like `.map()` or `.filter()` right?" 🤔 + +But every time it backfires because Node lists are actually objects. + +```javascript +const nodeArray = document.querySelectorAll('p'); + +nodeArray.map(node => console.log(node); +// ❗️TypeError: nodeArray.map is not a function +``` + +To quickly fix this, I could either use the `.forEach()` method instead of `.map()`. + +```javascript +const nodeArray = document.querySelectorAll('p'); + +nodeArray.forEach(node => console.log(node); +// ✅ That works! +``` + +Or I could quickly turn the node list into an array using the `spread operator`. + +```javascript +const nodeArray = document.querySelectorAll('p'); +const realArray = [...nodeArray]; + +realArray.map(node => console.log(node); +// ✅ That works! +``` diff --git a/posts/nested-destructuring.md b/posts/nested-destructuring.md new file mode 100644 index 0000000..48a219c --- /dev/null +++ b/posts/nested-destructuring.md @@ -0,0 +1,156 @@ +--- +title: Nested Destructuring +date: 2019-06-22 +tags: JavaScript +description: "I always forget the syntax for nested object destructuring. So I wrote this article so that I don't forget again." +--- + +# {{ title }} + +{{ description }} + +## Object Destructuring + +> The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables. - [MDN Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) + +Destructing is one of my favorite ES6 syntax improvements. But when I need to pull things out of nested objects, I can never remember the syntax. So I'm writing this so I can focus on how to remember the syntax and so that I can refer to this article if I forget. 😆 + +But first, lets looks at destructuring from one object. + +```jsx +const MyAwesomeButton = props => ( + +) +``` + +Here we have `MyAwesomeButton` that takes a `label` prop and puts it inside of a ` +) +``` + +Now we've eliminated the reference to `props` and are only pulling out `label` so that we can use it as a variable name by itself. We need to wrap `{ label }` in parentheses because without them, JavaScript would interpret it as an [object literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Creating_objects). + +Our final result looks like: + +```jsx +const MyAwesomeButton = ({ label }) => ( + +) +``` + +## Now Lets Try Nesting + +Here is where the syntax gets confusing. If I want to pull from an object within an object, I totally can, but I never remember the right way to do it. + +```jsx +const MyAwesomeButton = props => ( + +) +``` + +So now I have an object inside of my props that have two different values, but they're nested inside of an object. + +Before we look at how we can pull `icon` and `label` out of the prop, lets look at how an object literal is defined: + +```javascript +const myObject = { + property: 'value', + nestedObject: { + nestedProperty: 'nested value' + } +}; +``` + +Ok we have curly braces, property names, and values. You can take the "shape" and apply it to how our destructuring will look. + +```javascript +// Pseudo code of how we would pull out `nestedProperty` +{ + nestedObject: { + nestedProperty + } +} +``` + +Now reduce that format to one line. + +```javascript +{ nestedObject: { nestedProperty } } +``` + +💡 Ah ha! I usually forget when I need to add another set of curly braces to get to the nested property! + +Back to our React button example, I want to pull `icon` and `label` out of `props.constants`. + +```diff ++ const MyAwesomeButton = { constants: { icon }, constants: { label } } => ( +- const MyAwesomeButton = props => ( + +) +``` + +Our component now doesn't reference `props` or `constants` and has a cleaning look. + +```jsx +const MyAwesomeButton = { constants: { icon }, constants: { label } } => ( + +) +``` + +## GatsbyJS Example + +I got this wrong several times while building this website. Pulling from nested objects seems like a normal thing when working with GraphQL, the query language I'm using in Gatsby. I like how clean it looks, but it took a little while to get use to. + +Here is one of the craziest examples of nested destructuring that I had to do: + +```jsx +{quotes.map( + ({ + node: { avatar }, + node: { company }, + node: { id }, + node: { person }, + node: { quote }, + node: { url }, + }) => ( +
  • + +
    • + ) +)} +``` + +For each quote, I'm pulling out each piece of data as its own variable and then using it where I need to. And there's not all these references to `node`, which I like. + +## Conclusion + +The syntax for nested destructuring on the left side mirrors what defining a nested object would look like on the right side. diff --git a/posts/test.md b/posts/test.md index b09840c..0366c53 100644 --- a/posts/test.md +++ b/posts/test.md @@ -1,5 +1,6 @@ --- title: Markdown egg test +date: 2024-09-07 --- # {{ title }} diff --git a/posts/visual-studio-code-setup/bracket-pair-colorizer-2.png b/posts/visual-studio-code-setup/bracket-pair-colorizer-2.png new file mode 100644 index 0000000..f139abd Binary files /dev/null and b/posts/visual-studio-code-setup/bracket-pair-colorizer-2.png differ diff --git a/posts/visual-studio-code-setup/change-case.png b/posts/visual-studio-code-setup/change-case.png new file mode 100644 index 0000000..812bd9e Binary files /dev/null and b/posts/visual-studio-code-setup/change-case.png differ diff --git a/posts/visual-studio-code-setup/code-spell-checker.png b/posts/visual-studio-code-setup/code-spell-checker.png new file mode 100644 index 0000000..5bcb18b Binary files /dev/null and b/posts/visual-studio-code-setup/code-spell-checker.png differ diff --git a/posts/visual-studio-code-setup/disable-oblique-faces.png b/posts/visual-studio-code-setup/disable-oblique-faces.png new file mode 100644 index 0000000..e0728bd Binary files /dev/null and b/posts/visual-studio-code-setup/disable-oblique-faces.png differ diff --git a/posts/visual-studio-code-setup/eslint.png b/posts/visual-studio-code-setup/eslint.png new file mode 100644 index 0000000..be2dedb Binary files /dev/null and b/posts/visual-studio-code-setup/eslint.png differ diff --git a/posts/visual-studio-code-setup/font-victor-mono.png b/posts/visual-studio-code-setup/font-victor-mono.png new file mode 100644 index 0000000..d143f33 Binary files /dev/null and b/posts/visual-studio-code-setup/font-victor-mono.png differ diff --git a/posts/visual-studio-code-setup/headwind.png b/posts/visual-studio-code-setup/headwind.png new file mode 100644 index 0000000..6bbc205 Binary files /dev/null and b/posts/visual-studio-code-setup/headwind.png differ diff --git a/posts/visual-studio-code-setup/quick-and-simple-text-selection.png b/posts/visual-studio-code-setup/quick-and-simple-text-selection.png new file mode 100644 index 0000000..de03056 Binary files /dev/null and b/posts/visual-studio-code-setup/quick-and-simple-text-selection.png differ diff --git a/posts/visual-studio-code-setup/tailwind-css-intellisense.png b/posts/visual-studio-code-setup/tailwind-css-intellisense.png new file mode 100644 index 0000000..2c0e242 Binary files /dev/null and b/posts/visual-studio-code-setup/tailwind-css-intellisense.png differ diff --git a/posts/visual-studio-code-setup/text-marker.png b/posts/visual-studio-code-setup/text-marker.png new file mode 100644 index 0000000..fa6bf90 Binary files /dev/null and b/posts/visual-studio-code-setup/text-marker.png differ diff --git a/posts/visual-studio-code-setup/theme-cobalt2.png b/posts/visual-studio-code-setup/theme-cobalt2.png new file mode 100644 index 0000000..9ffcb88 Binary files /dev/null and b/posts/visual-studio-code-setup/theme-cobalt2.png differ diff --git a/posts/visual-studio-code-setup/theme-dracula.png b/posts/visual-studio-code-setup/theme-dracula.png new file mode 100644 index 0000000..39e8df8 Binary files /dev/null and b/posts/visual-studio-code-setup/theme-dracula.png differ diff --git a/posts/visual-studio-code-setup/theme-light-owl.png b/posts/visual-studio-code-setup/theme-light-owl.png new file mode 100644 index 0000000..dae3915 Binary files /dev/null and b/posts/visual-studio-code-setup/theme-light-owl.png differ diff --git a/posts/visual-studio-code-setup/theme-monokai-pro.png b/posts/visual-studio-code-setup/theme-monokai-pro.png new file mode 100644 index 0000000..7d26e8d Binary files /dev/null and b/posts/visual-studio-code-setup/theme-monokai-pro.png differ diff --git a/posts/visual-studio-code-setup/theme-night-owl.png b/posts/visual-studio-code-setup/theme-night-owl.png new file mode 100644 index 0000000..c683e06 Binary files /dev/null and b/posts/visual-studio-code-setup/theme-night-owl.png differ diff --git a/posts/visual-studio-code-setup/theme-overnight-slumber-italics.png b/posts/visual-studio-code-setup/theme-overnight-slumber-italics.png new file mode 100644 index 0000000..b125e62 Binary files /dev/null and b/posts/visual-studio-code-setup/theme-overnight-slumber-italics.png differ diff --git a/posts/visual-studio-code-setup/theme-synthwave.png b/posts/visual-studio-code-setup/theme-synthwave.png new file mode 100644 index 0000000..8562d62 Binary files /dev/null and b/posts/visual-studio-code-setup/theme-synthwave.png differ diff --git a/posts/visual-studio-code-setup/toggle-quotes.png b/posts/visual-studio-code-setup/toggle-quotes.png new file mode 100644 index 0000000..1defe21 Binary files /dev/null and b/posts/visual-studio-code-setup/toggle-quotes.png differ diff --git a/posts/visual-studio-code-setup/vetur.png b/posts/visual-studio-code-setup/vetur.png new file mode 100644 index 0000000..244c512 Binary files /dev/null and b/posts/visual-studio-code-setup/vetur.png differ diff --git a/posts/visual-studio-code-setup/visual-studio-code-setup.md b/posts/visual-studio-code-setup/visual-studio-code-setup.md new file mode 100644 index 0000000..c6cf447 --- /dev/null +++ b/posts/visual-studio-code-setup/visual-studio-code-setup.md @@ -0,0 +1,155 @@ +--- +date: 2020-03-02 +tags: ['VSCode', 'Setup', 'Productivity'] +title: Visual Studio Code Setup +description: "I've been using Visual studio code since 2017, I decided to look through my set up and document what I use." +--- + +# {{ title }} + +I've been using [Visual studio code (VSCode)](https://code.visualstudio.com/) since 2017. It has been one of my all time favorite text editors. This year I decided to look through my set up and document what I use. + +## Extensions + +### Bracket pair colorizer 2 + + +![Bracket pair colorizing nested methods](./bracket-pair-colorizer-2.png) + +This [extension](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) is great for focusing on what block of code your looking in. I have some of the more verbose settings enabled so that I can see a lot of colors as I navigate through code. This is especially helpful when I have several nested `functions` or `objects` within each other. + +### Change-case + +![Change-case extension in the visual studio code store](./change-case.png) + +I use this [extension](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case) via the command palette a lot. Many times I need to transform a pascal case vue.js component into kebab case or vice versa. + +### Code spell checker + +![Code spell checker in the visual studio code store](./code-spell-checker.png) + +In the course of typing, I make a lot of spelling mistakes. This [extension](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) is a life saver. Plus it helps find little bugs due to typos. + +### ESLint + +![ESLint extension in the visual studio code store](./eslint.png) + +[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) is an essential extension for any JavaScript-based project. Getting all the settings to work are a pain in the ass sometimes, but I couldn't live without it. + +### Headwind + +![Headwind in the visual studio code store](./headwind.png) + +This [extension](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind) helps me align my tailwind classes in the same order without having to thing about it. It doesn’t seem like much, but the consistency of the order without having to think about is awesome. + +### Tailwind CSS intelliSence + +![Tailwind CSS intelliSence in the visual studio code store](./tailwind-css-intellisense.png) + +[IntelliSence](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) is a great feature of VSCode. Why not have it know about my Tailwind classes? Very useful for remembering the number differences for spacing and colors. + +### Toggle quotes + +![Toggle quotes in the visual studio code store](./toggle-quotes.png) + +This [extension](https://marketplace.visualstudio.com/items?itemName=BriteSnow.vscode-toggle-quotes) seems like it would be native to VSCode along with all the other text transformation tools. I can easily switch between single quotes, double quotes, and back ticks. I even like the default keyboard shortcut `control + ‘`. + +### Vetur + +![Vetur is the perfect Vue integration extension](./vetur.png) + +[Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur) gives you easy integration with all things Vue in VSCode. It's an essential extension for working with Vue projects. What are you waiting for, download this package right now! + +### Vscode-icons + +![Example of vscode-icons for vue, javascript, etc](./vscode-icons.png) + +I've used the [vscode-icon](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons) set since I started using Visual Studio Code. I'm so used to them now, I don't want to switch. + +### Vue vscode snippets + +![Vue vscode snippets is the best collection of snippets for the Vue.js language](./vue-vscode-snippets.png) + +The [best snippet](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets) package for Vue.js. I sometimes forget the format of certain features because this package has so many good snippets. + +### Quick and simple text selection + +![Quick and simple text selection in the visual studio code store](./quick-and-simple-text-selection.png) + +I've used this [extension](https://marketplace.visualstudio.com/items?itemName=dbankier.vscode-quick-select) so much I thought it was baked into VSCode! It makes selecting text within characters—think `''`, `""`, `[]`, and `()`—a keyboard shortcut away. When I have to do a lot of irregular find and replace tasks, this extension haves my life. + +### Text Marker + +![Text marker extension in the visual studio code store](./text-marker.png) + +Sometimes I need to highlight a piece of code to copy, refactor, delete, etc. This [extension](https://marketplace.visualstudio.com/items?itemName=ryu1kn.text-marker) does the trick! I try to use it sparingly and clear all highlights when I'm done. + +## Font + +![Victor mono landing page](./font-victor-mono.png) + +[Victor mono](https://rubjo.github.io/victor-mono/) was my most used font in 2019. Along with the ligatures and the cursive italic variant, the large x-height makes it easy for me to read. + +If it works well for you, consider donating to the creator. + +### Italic cursive face not working in VSCode + +(Mar 12, 2020 Update) + +There is a bug with [VSCode font rendering for macOS](https://github.com/microsoft/vscode/issues/82122). If this is happening for you, there is a simple work around. Open up the Font Book app, find the Victor Mono font and disable or delete all "oblique" faces. The "oblique" faces were getting applied instead of the "italic" faces. + +![Disable oblique faces inside of font book for macOS](./disable-oblique-faces.png) + +## Themes + +I like color themes. I like having a lot of color themes to choose from. I like light themes for when the sun is out and there is a glare from the window. I like dark themes for the rest of the time. + +I tried to stick with one theme for a little while, but I can never make one last. So I keep a handful around and change whenever I feel like it—the `cmd + k cmd + t` shortcut is handy for quick switching. + +### Cobalt2 + +![A Vue.js file with the cobalt2 theme active](./theme-cobalt2.png) + +A classic blue and yellow [theme](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2) from [Wes Bos](https://wesbos.com/). I tend to not use it, as I think it's too bright for me. But it has a great highlight search color when doing a "Find in files". + +### Dracula + +![A Vue.js file with the Dracula theme active](./theme-dracula.png) + +Great dark [theme](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula) with purples and pinks. This theme puts a solid vertical pink line between editors when you're in split mode, which I really like. So when I am working with two or three splits for long periods of time, I switch to this theme. + +### Monokai pro + +![A Vue.js file with the monokai pro theme active](./theme-monokai-pro.png) + +This [theme](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode) costs money, but there is a free trial. I'd say it is well worth it since it comes with an icon theme—which I don't use. This is my "home base" theme. I might not use it all the time, but I always come back to it eventually. + +### Light owl + +![A Vue.js file with the light owl theme active](./theme-light-owl.png) + +My favorite light theme. Just enough color to be nice, but everything is still readable. It comes with [Night Owl](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl), so a two for one situation. + +### Night owl + +![A Vue.js file with the night owl theme active](./theme-night-owl.png) + +A great [theme](https://marketplace.visualstudio.com/items?itemName=sdras.night-owl) for late night coding. [Sarah Drasner](https://sarahdrasnerdesign.com/) really put a lot of TLC into this theme. + +### Overnight Slumber Italics + +![A Vue.js file with the overnight slumber italics theme active](./theme-overnight-slumber-italics.png) + +I haven't used this theme very much, but I like the peach and purple vibe of [this theme](https://marketplace.visualstudio.com/items?itemName=cev.overnight). I think I like the "slumber" alternative better than the base theme. + +### SynthWave '84 + +![A Vue.js file with the synth wave '84 theme active](./theme-synthwave.png) + +SUPER POP COLORS! When I really need to tell the difference between variables and functions, I turn on [this theme](https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode). I don't turn on the custom glow CSS because glow is very distracting to me. + +## Thanks for reading + +Next up I'll be writing up what keyboard shortcuts I use and customized to save myself time. + +What extensions/themes do you use for VSCode? I'd love to hear about your setup! diff --git a/posts/visual-studio-code-setup/vscode-icons.png b/posts/visual-studio-code-setup/vscode-icons.png new file mode 100644 index 0000000..08c3633 Binary files /dev/null and b/posts/visual-studio-code-setup/vscode-icons.png differ diff --git a/posts/visual-studio-code-setup/vue-vscode-snippets.png b/posts/visual-studio-code-setup/vue-vscode-snippets.png new file mode 100644 index 0000000..f8afe7f Binary files /dev/null and b/posts/visual-studio-code-setup/vue-vscode-snippets.png differ diff --git a/styles/reset.css b/styles/reset.css index d6ec91b..80a8a79 100644 --- a/styles/reset.css +++ b/styles/reset.css @@ -72,6 +72,8 @@ img, picture { max-width: 100%; display: block; + margin-inline-start: auto; + margin-inline-end: auto; } /* Inherit fonts for inputs and buttons */ diff --git a/styles/style.css b/styles/style.css index 3803d10..f737a5b 100644 --- a/styles/style.css +++ b/styles/style.css @@ -102,6 +102,7 @@ pre { } .layout { + margin-block-end: 4rem; display: grid; grid-template-columns: minmax(1.5rem, 1fr) [content-start] minmax(auto, 100ch)