<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Andy Sciro</title>
	<atom:link href="https://www.andysciro.com/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.andysciro.com/</link>
	<description>Frontend Software Engineer</description>
	<lastBuildDate>Wed, 09 Aug 2023 21:42:39 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.1.1</generator>
	<item>
		<title>Simple &#038; to the point, great video on JavaScript&#8217;s call() apply() bind() Methods In 90 Seconds</title>
		<link>https://www.andysciro.com/simple-to-the-point-great-video-on-javascripts-call-apply-bind-methods-in-90-seconds/</link>
					<comments>https://www.andysciro.com/simple-to-the-point-great-video-on-javascripts-call-apply-bind-methods-in-90-seconds/#respond</comments>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Wed, 09 Aug 2023 13:11:05 +0000</pubDate>
				<category><![CDATA[javascript]]></category>
		<guid isPermaLink="false">https://www.andysciro.com/?p=6587</guid>

					<description><![CDATA[<p>The post <a rel="nofollow" href="https://www.andysciro.com/simple-to-the-point-great-video-on-javascripts-call-apply-bind-methods-in-90-seconds/">Simple &#038; to the point, great video on JavaScript&#8217;s call() apply() bind() Methods In 90 Seconds</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe title="JavaScript call() apply() bind() Methods In 90 Seconds #JavaScriptJanuary" width="1080" height="608" src="https://www.youtube.com/embed/rZc7_2YXbP8?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div></figure>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/simple-to-the-point-great-video-on-javascripts-call-apply-bind-methods-in-90-seconds/">Simple &#038; to the point, great video on JavaScript&#8217;s call() apply() bind() Methods In 90 Seconds</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andysciro.com/simple-to-the-point-great-video-on-javascripts-call-apply-bind-methods-in-90-seconds/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Great video that helped me understand Object.valueOf()</title>
		<link>https://www.andysciro.com/great-video-that-helped-me-understand-object-valueof/</link>
					<comments>https://www.andysciro.com/great-video-that-helped-me-understand-object-valueof/#respond</comments>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Mon, 10 Jul 2023 17:35:46 +0000</pubDate>
				<category><![CDATA[javascript]]></category>
		<guid isPermaLink="false">https://www.andysciro.com/?p=6578</guid>

					<description><![CDATA[<p>JavaScript&#8217;s Object.valueOf() method is a fundamental feature that allows objects to be converted into primitive values. When called on an object, it returns the primitive...</p>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/great-video-that-helped-me-understand-object-valueof/">Great video that helped me understand Object.valueOf()</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="The valueOf() method in JavaScript - Returning Primitive Values" width="1080" height="608" src="https://www.youtube.com/embed/kOe2x9q4h5o?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div></figure>



<p><br>JavaScript&#8217;s <code>Object.valueOf()</code> method is a fundamental feature that allows objects to be converted into primitive values. When called on an object, it returns the primitive value representation of that object. This is crucial because it enables objects to be used in contexts where only primitives are accepted, such as mathematical operations or comparisons. By overriding the default implementation, developers can customize how their objects are converted to primitives, providing greater control and flexibility in their code. This method plays a vital role in JavaScript&#8217;s object-oriented paradigm, ensuring seamless interoperability between objects and primitives. I had a hard time understanding why its important until watching this video, other resources I came across didn&#8217;t it explain it as well. Highly recommend watching this!</p>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/great-video-that-helped-me-understand-object-valueof/">Great video that helped me understand Object.valueOf()</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andysciro.com/great-video-that-helped-me-understand-object-valueof/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Node Vs Element</title>
		<link>https://www.andysciro.com/node-vs-element/</link>
					<comments>https://www.andysciro.com/node-vs-element/#respond</comments>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Mon, 13 Jun 2022 16:41:00 +0000</pubDate>
				<category><![CDATA[javascript]]></category>
		<guid isPermaLink="false">https://www.andysciro.com/?p=6581</guid>

					<description><![CDATA[<p>In the context of the Document Object Model (DOM), both nodes and elements refer to different parts of the structured representation of an HTML or...</p>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/node-vs-element/">Node Vs Element</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Do You Know The Difference?" width="1080" height="608" src="https://www.youtube.com/embed/rhvec8cXLlo?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div></figure>



<p>In the context of the Document Object Model (DOM), both nodes and elements refer to different parts of the structured representation of an HTML or XML document. Here&#8217;s a breakdown of the differences:</p>



<p>Node: A node is a generic term that represents an individual object within the DOM. It can represent various types of entities, including elements, text, comments, attributes, and more. In other words, a node is a fundamental building block of the DOM tree.</p>



<p>Elements: An element, on the other hand, is a specific type of node that represents the HTML or XML tags in the document. Elements are the most common and recognizable nodes in the DOM. They consist of a start tag, content, and an end tag (e.g., <code>&lt;div&gt;Content&lt;/div&gt;</code>). Elements can have attributes, child nodes, and may also contain text, other elements, or both.</p>



<p>To summarize, while all elements are nodes, not all nodes are elements. Nodes encompass a broader category that includes elements as well as other types of entities in the DOM, such as text nodes, comment nodes, attribute nodes, etc. Elements specifically refer to the nodes that represent the HTML or XML tags in the document structure.</p>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/node-vs-element/">Node Vs Element</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andysciro.com/node-vs-element/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>The Fun, easy way to learn CSS Grid&#8230; CSS Grid Garden</title>
		<link>https://www.andysciro.com/the-fun-easy-way-to-learn-css-grid-css-grid-garden/</link>
					<comments>https://www.andysciro.com/the-fun-easy-way-to-learn-css-grid-css-grid-garden/#respond</comments>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Fri, 08 Apr 2022 03:46:51 +0000</pubDate>
				<category><![CDATA[cool tips]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[tools]]></category>
		<guid isPermaLink="false">https://www.andysciro.com/?p=6560</guid>

					<description><![CDATA[<p>CSS Grid is a CSS layout module that enables two-dimensional layout. CSS Grid is CSS&#8217;s newest layout module and has been designed to create flexible...</p>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/the-fun-easy-way-to-learn-css-grid-css-grid-garden/">The Fun, easy way to learn CSS Grid&#8230; CSS Grid Garden</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>CSS Grid is a CSS layout module that enables two-dimensional layout. CSS Grid is CSS&#8217;s newest layout module and has been designed to create flexible and responsive layouts. While it can be difficult to learn CSS Grid due to its new syntax and layout ideas, the rewards are worth it. With CSS Grid, you can create grid-based layouts with CSS, which means that your layouts will be more flexible and responsive. In addition, CSS Grid is well supported by modern browsers, so you can be sure that your layouts will look great on all devices. So if you&#8217;re looking for a new way to create CSS layouts, CSS Grid is definitely worth considering.</p>



<h3 id="it-takes-time-to-learn-css-grid-but-don-t-give-up-there-s-a-fun-way-now">It takes time to learn CSS Grid but don&#8217;t give up, there&#8217;s a fun way now</h3>



<p>CSS Grid is a powerful layout tool for web developers, but it can be tricky to learn. For junior developers, the process can be even more daunting. That&#8217;s where <strong>CSS Grid Garden</strong> comes in! This fun and interactive game makes it easy to understand CSS Grid, and makes the learning process enjoyable. With CSS Grid Garden, players learn by completing progressively more challenging levels. As they advance, they build up their skills and confidence, until they are ready to take on real-world projects. CSS Grid Garden is the perfect way for junior developers to learn CSS Grid &#8211; it&#8217;s easy, it&#8217;s fun, and it gets results!</p>



<div class="is-layout-flex wp-container-3 wp-block-columns">
<div class="is-layout-flow wp-block-column">
<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1018" height="1024" src="https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.46.43-AM-1018x1024.png" alt="" class="wp-image-6567" srcset="https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.46.43-AM-1018x1024.png 1018w, https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.46.43-AM-298x300.png 298w, https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.46.43-AM-150x150.png 150w, https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.46.43-AM-768x773.png 768w, https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.46.43-AM-1526x1536.png 1526w, https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.46.43-AM-100x100.png 100w, https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.46.43-AM-140x140.png 140w, https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.46.43-AM.png 1598w" sizes="(max-width: 1018px) 100vw, 1018px" /></figure>



<p>At the time of writing this there are 28 levels that teach you CSS grid from basic to advanced concepts. The levels are colorful and fun as well. </p>
</div>



<div class="is-layout-flow wp-block-column">
<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="508" src="https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.48.04-AM-1024x508.png" alt="" class="wp-image-6566" srcset="https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.48.04-AM-1024x508.png 1024w, https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.48.04-AM-300x149.png 300w, https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.48.04-AM-768x381.png 768w, https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.48.04-AM-1536x762.png 1536w, https://www.andysciro.com/wp-content/uploads/2022/07/Screen-Shot-2022-07-27-at-10.48.04-AM.png 1620w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>It&#8217;s<strong> completely free</strong> and offers an easy to use built in css editor that updates in real time. </p>
</div>
</div>



<p>How many levels can you complete? Try the game by visiting <a href="https://cssgridgarden.com/" target="_blank" rel="noreferrer noopener">https://cssgridgarden.com/</a> </p>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/the-fun-easy-way-to-learn-css-grid-css-grid-garden/">The Fun, easy way to learn CSS Grid&#8230; CSS Grid Garden</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andysciro.com/the-fun-easy-way-to-learn-css-grid-css-grid-garden/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Easy and safe way to get around &#8220;connection is not private&#8221; in Google Chrome when developing locally</title>
		<link>https://www.andysciro.com/easy-and-safe-way-to-get-around-connection-is-not-private-in-google-chrome/</link>
					<comments>https://www.andysciro.com/easy-and-safe-way-to-get-around-connection-is-not-private-in-google-chrome/#respond</comments>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Fri, 11 Mar 2022 15:26:00 +0000</pubDate>
				<category><![CDATA[Uncategorized]]></category>
		<guid isPermaLink="false">https://www.andysciro.com/?p=6545</guid>

					<description><![CDATA[<p>I just learned about this setting after finally getting frustrated of clicking “Proceed.” Geez I wish I knew about this simple setting long ago… so...</p>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/easy-and-safe-way-to-get-around-connection-is-not-private-in-google-chrome/">Easy and safe way to get around &#8220;connection is not private&#8221; in Google Chrome when developing locally</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>I just learned about this setting after finally getting frustrated of clicking “Proceed.” Geez I wish I knew about this simple setting long ago… so much time wasted! I do lots of local development and we&#8217;ve had team members include ssl certs in repositories, or type in the following command &#8220;thisisunsafe&#8221;, etc. Who knew the solution was so simple <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f44d.png" alt="👍" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>



<p></p>



<h3 id="now-we-can-simply-get-around-that-by-copying-and-pasting-the-following-command-into-your-browser">Now we can simply get around that by copying and pasting the following command into your browser</h3>



<div class="hcb_wrap"><pre class="prism line-numbers lang-bash" data-lang="Bash"><code>chrome://flags/#allow-insecure-localhost</code></pre></div>



<p>You will then be taken to Chrome&#8217;s development flags page as shown in the screenshot below. Simply enable it and restart Chrome</p>



<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="286" src="https://www.andysciro.com/wp-content/uploads/2022/06/Screen-Shot-2022-06-27-at-1.08.29-PM-1024x286.png" alt="" class="wp-image-6556" srcset="https://www.andysciro.com/wp-content/uploads/2022/06/Screen-Shot-2022-06-27-at-1.08.29-PM-1024x286.png 1024w, https://www.andysciro.com/wp-content/uploads/2022/06/Screen-Shot-2022-06-27-at-1.08.29-PM-300x84.png 300w, https://www.andysciro.com/wp-content/uploads/2022/06/Screen-Shot-2022-06-27-at-1.08.29-PM-768x215.png 768w, https://www.andysciro.com/wp-content/uploads/2022/06/Screen-Shot-2022-06-27-at-1.08.29-PM-1536x429.png 1536w, https://www.andysciro.com/wp-content/uploads/2022/06/Screen-Shot-2022-06-27-at-1.08.29-PM.png 1660w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p></p>



<p>Now you&#8217;re all set to kick up a local dev server and never have to click proceed ever again. </p>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/easy-and-safe-way-to-get-around-connection-is-not-private-in-google-chrome/">Easy and safe way to get around &#8220;connection is not private&#8221; in Google Chrome when developing locally</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andysciro.com/easy-and-safe-way-to-get-around-connection-is-not-private-in-google-chrome/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>What I use on my mac for screen recordings in slack for (pc + windows) Giphy Capture</title>
		<link>https://www.andysciro.com/what-i-use-on-my-mac-for-screen-recordings-in-slack-for-pc-windows-giphy-capture/</link>
					<comments>https://www.andysciro.com/what-i-use-on-my-mac-for-screen-recordings-in-slack-for-pc-windows-giphy-capture/#respond</comments>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Wed, 23 Feb 2022 20:02:00 +0000</pubDate>
				<category><![CDATA[cool tips]]></category>
		<guid isPermaLink="false">https://www.andysciro.com/?p=6453</guid>

					<description><![CDATA[<p>If you&#8217;re looking for a great screen recording software that is free and easy to use on a mac, giphy.com&#8217;s screen recorder is a great...</p>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/what-i-use-on-my-mac-for-screen-recordings-in-slack-for-pc-windows-giphy-capture/">What I use on my mac for screen recordings in slack for (pc + windows) Giphy Capture</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image size-large"><img decoding="async" loading="lazy" width="1024" height="574" src="https://www.andysciro.com/wp-content/uploads/2022/08/Screen-Shot-2022-08-23-at-3.12.30-PM-1024x574.png" alt="" class="wp-image-6573" srcset="https://www.andysciro.com/wp-content/uploads/2022/08/Screen-Shot-2022-08-23-at-3.12.30-PM-1024x574.png 1024w, https://www.andysciro.com/wp-content/uploads/2022/08/Screen-Shot-2022-08-23-at-3.12.30-PM-300x168.png 300w, https://www.andysciro.com/wp-content/uploads/2022/08/Screen-Shot-2022-08-23-at-3.12.30-PM-768x430.png 768w, https://www.andysciro.com/wp-content/uploads/2022/08/Screen-Shot-2022-08-23-at-3.12.30-PM-1536x861.png 1536w, https://www.andysciro.com/wp-content/uploads/2022/08/Screen-Shot-2022-08-23-at-3.12.30-PM-2048x1148.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>If you&#8217;re looking for a great screen recording software that is free and easy to use on a mac, giphy.com&#8217;s screen recorder is a great option. It&#8217;s completely free to use, and it has a ton of great features.</p>



<p></p>



<p>Just head to giphy.com and download <a href="https://giphy.com/apps/giphycapture" target="_blank" rel="noreferrer noopener">giphy capture</a>. Then, select the area of your screen that you want to record. You can also choose to record your entire screen or just a portion of it. The giphy.com recorder also lets you choose whether or not to include audio in your recording. If you choose to include audio, you can either record your own voice with a microphone or use the system audio. This is great if you want to record a video tutorial or walkthrough. </p>



<p></p>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/what-i-use-on-my-mac-for-screen-recordings-in-slack-for-pc-windows-giphy-capture/">What I use on my mac for screen recordings in slack for (pc + windows) Giphy Capture</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andysciro.com/what-i-use-on-my-mac-for-screen-recordings-in-slack-for-pc-windows-giphy-capture/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Awesome video: 3 useful css sizing values most people don&#8217;t know about</title>
		<link>https://www.andysciro.com/awesome-video-3-useful-css-sizing-values-most-people-dont-know-about/</link>
					<comments>https://www.andysciro.com/awesome-video-3-useful-css-sizing-values-most-people-dont-know-about/#respond</comments>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Thu, 13 Jan 2022 20:35:50 +0000</pubDate>
				<category><![CDATA[cool tips]]></category>
		<category><![CDATA[css]]></category>
		<guid isPermaLink="false">https://www.andysciro.com/?p=6477</guid>

					<description><![CDATA[<p>The post <a rel="nofollow" href="https://www.andysciro.com/awesome-video-3-useful-css-sizing-values-most-people-dont-know-about/">Awesome video: 3 useful css sizing values most people don&#8217;t know about</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div id="fws_65daa01c4c436"  data-column-margin="default" data-midnight="dark"  data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section "  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-overlay="false"><div class="inner-wrap"><div class="row-bg"  style=""></div></div><div class="row-bg-overlay" ></div></div><div class="col span_12 dark left">
	<div  class="vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding"  data-t-w-inherits="default" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0" >
		<div class="vc_column-inner" ><div class="column-bg-overlay-wrap" data-bg-animation="none"><div class="column-bg-overlay"></div></div>
			<div class="wpb_wrapper">
				<div class="nectar-gradient-text" data-direction="horizontal" data-color="extra-color-gradient-1" style=""><h2></h2></div>
<div class="wpb_text_column wpb_content_element " >
	<div class="wpb_wrapper">
		<p>Came across this fantastic video by this fantastic YouTuber. Just wanted to share it as I felt it really did a great job demonstrating the value in knowing these width properties.</p>
<p><strong>For even more information check out their respective mdn entries:</strong></p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content">Fit-content</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-content">Min-content</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-content">Max-content</a></li>
</ul>
	</div>
</div>



<div id="fws_65daa01c62c5b" data-midnight="" data-column-margin="default" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row inner_row standard_section    "  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap"> <div class="row-bg   "  style=""></div> </div><div class="col span_12  left">
	<div  class="vc_col-sm-2 wpb_column column_container vc_column_container col child_column no-extra-padding"   data-t-w-inherits="default" data-shadow="none" data-border-radius="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">
		<div class="vc_column-inner" ><div class="column-bg-overlay-wrap" data-bg-animation="none"><div class="column-bg-overlay"></div></div>
		<div class="wpb_wrapper">
			
		</div> 
	</div>
	</div> 

	<div  class="vc_col-sm-8 wpb_column column_container vc_column_container col child_column no-extra-padding"   data-t-w-inherits="default" data-shadow="none" data-border-radius="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">
		<div class="vc_column-inner" ><div class="column-bg-overlay-wrap" data-bg-animation="none"><div class="column-bg-overlay"></div></div>
		<div class="wpb_wrapper">
			
	<div class="wpb_video_widget wpb_content_element vc_clearfix   vc_video-aspect-ratio-169 vc_video-el-width-100 vc_video-align-center" >
		<div class="wpb_wrapper">
			
			<div class="wpb_video_wrapper"><iframe title="3 useful CSS values that most people don’t know about" width="1080" height="608" src="https://www.youtube.com/embed/DM244V9KvNs?feature=oembed&enablejsapi=1&origin=https://www.andysciro.com" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
		</div>
	</div>

		</div> 
	</div>
	</div> 

	<div  class="vc_col-sm-2 wpb_column column_container vc_column_container col child_column no-extra-padding"   data-t-w-inherits="default" data-shadow="none" data-border-radius="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">
		<div class="vc_column-inner" ><div class="column-bg-overlay-wrap" data-bg-animation="none"><div class="column-bg-overlay"></div></div>
		<div class="wpb_wrapper">
			
		</div> 
	</div>
	</div> 
</div></div>
			</div> 
		</div>
	</div> 
</div></div>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/awesome-video-3-useful-css-sizing-values-most-people-dont-know-about/">Awesome video: 3 useful css sizing values most people don&#8217;t know about</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andysciro.com/awesome-video-3-useful-css-sizing-values-most-people-dont-know-about/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Ten-second tip: How I remember the difference between unshift() and shift()</title>
		<link>https://www.andysciro.com/ten-second-tip-how-i-remember-the-difference-between-unshift-and-shift/</link>
					<comments>https://www.andysciro.com/ten-second-tip-how-i-remember-the-difference-between-unshift-and-shift/#respond</comments>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Thu, 07 Oct 2021 17:31:04 +0000</pubDate>
				<category><![CDATA[cool tips]]></category>
		<category><![CDATA[javascript]]></category>
		<guid isPermaLink="false">http://35.184.221.227/?p=6415</guid>

					<description><![CDATA[<p>The post <a rel="nofollow" href="https://www.andysciro.com/ten-second-tip-how-i-remember-the-difference-between-unshift-and-shift/">Ten-second tip: How I remember the difference between unshift() and shift()</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></description>
										<content:encoded><![CDATA[
		<div id="fws_65daa01c646e9"  data-column-margin="default" data-midnight="dark"  data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section "  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-overlay="false"><div class="inner-wrap"><div class="row-bg"  style=""></div></div><div class="row-bg-overlay" ></div></div><div class="col span_12 dark left">
	<div  class="vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding"  data-t-w-inherits="default" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0" >
		<div class="vc_column-inner" ><div class="column-bg-overlay-wrap" data-bg-animation="none"><div class="column-bg-overlay"></div></div>
			<div class="wpb_wrapper">
				
<div class="wpb_text_column wpb_content_element " >
	<div class="wpb_wrapper">
		<p>I help run a bi-weekly algorithm coding guild at work where we solve many programming problems together. It&#8217;s a very fun and rewarding experience and I get exposed to many different programming languages. Sometimes, when I &#8220;shift gears&#8221; between languages, I mix up the prototype methods in javascript.</p>
<p>The one I recently flubbed was <code>shift()</code> and <code>unshift()</code>, which seems silly but when you&#8217;re moving fast its an honest mistake to make!</p>
<p> </p>
<h3><strong>Let&#8217;s review their MDN</strong> entries</h3>
<h4 class="LC20lb MBeuO DKV0Md">Array.prototype.shift()</h4>
<p>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift#description</p>
<p><!-- /wp:paragraph --></p>
<h4 class="LC20lb MBeuO DKV0Md">Array.prototype.unshift()</h4>
<p>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift#description</p>
<p><!-- /wp:paragraph --> </p>
<p><!-- wp:heading {"level":3} --></p>
<h3> </h3>
<h3>How I always remember the difference:</h3>
<p><!-- /wp:heading --></p>
<p>&nbsp;</p>
<p><!-- wp:paragraph --><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:paragraph --><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:paragraph --><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:paragraph --><!-- /wp:paragraph --></p>
<p>&nbsp;</p>
<p><!-- wp:paragraph --></p>
<p>If we literally break up the words into letters (similar to <code>split()</code> lol) you might notice something:</p>
<p><code>["u","n","s","h","i","f","t"]</code><br />vs<br /><code>["s","h","i","f","t"]</code></p>
<p>&nbsp;</p>
<p>The way I see it, unshift is &#8220;updating&#8221; our array above, &#8220;shift&#8221; with two additional characters in the front (&#8220;u&#8221; and &#8220;n&#8221;). In my mind I also remember this by matching up the &#8220;u&#8221; of update and &#8220;u&#8221; of unshift. Shift on the other hand complements this as its missing the &#8220;u. &#8221; In fact this is even how <code>unshift()</code> works! It prepends characters to the front of the array. </p>
<p><strong>Hope this little trick helps you! Remember we update (think &#8220;u&#8221; ) with unshift&#8230; with two characters in the front of the word shift &gt; unshift. </strong></p>
	</div>
</div>




			</div> 
		</div>
	</div> 
</div></div><p>The post <a rel="nofollow" href="https://www.andysciro.com/ten-second-tip-how-i-remember-the-difference-between-unshift-and-shift/">Ten-second tip: How I remember the difference between unshift() and shift()</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andysciro.com/ten-second-tip-how-i-remember-the-difference-between-unshift-and-shift/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Bouncing DVD logo in Pixi.js</title>
		<link>https://www.andysciro.com/bouncing-dvd-logo-in-pixi-js/</link>
					<comments>https://www.andysciro.com/bouncing-dvd-logo-in-pixi-js/#respond</comments>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Thu, 19 Aug 2021 23:21:55 +0000</pubDate>
				<category><![CDATA[animation]]></category>
		<category><![CDATA[javascript]]></category>
		<guid isPermaLink="false">http://35.184.221.227/?p=6442</guid>

					<description><![CDATA[<p>The post <a rel="nofollow" href="https://www.andysciro.com/bouncing-dvd-logo-in-pixi-js/">Bouncing DVD logo in Pixi.js</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></description>
										<content:encoded><![CDATA[
		<div id="fws_65daa01c654fe"  data-column-margin="default" data-midnight="dark"  data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section "  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-overlay="false"><div class="inner-wrap"><div class="row-bg"  style=""></div></div><div class="row-bg-overlay" ></div></div><div class="col span_12 dark left">
	<div  class="vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding"  data-t-w-inherits="default" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0" >
		<div class="vc_column-inner" ><div class="column-bg-overlay-wrap" data-bg-animation="none"><div class="column-bg-overlay"></div></div>
			<div class="wpb_wrapper">
				
<div class="wpb_text_column wpb_content_element " >
	<div class="wpb_wrapper">
		<p>Hopefully you know about this bouncing DVD logo screensaver, my mind goes right to watching it in class or seeing it on a bus. Either way over the years its almost become a meme, there&#8217;s something just so satisfying about when it hits the corner lol.</p>
<p> </p>
	</div>
</div>



<div id="fws_65daa01c6575a" data-midnight="" data-column-margin="default" data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row inner_row standard_section    "  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap"> <div class="row-bg   "  style=""></div> </div><div class="col span_12  left">
	<div  class="vc_col-sm-2 wpb_column column_container vc_column_container col child_column no-extra-padding"   data-t-w-inherits="default" data-shadow="none" data-border-radius="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">
		<div class="vc_column-inner" ><div class="column-bg-overlay-wrap" data-bg-animation="none"><div class="column-bg-overlay"></div></div>
		<div class="wpb_wrapper">
			
		</div> 
	</div>
	</div> 

	<div  class="vc_col-sm-8 wpb_column column_container vc_column_container col child_column no-extra-padding"   data-t-w-inherits="default" data-shadow="none" data-border-radius="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">
		<div class="vc_column-inner" ><div class="column-bg-overlay-wrap" data-bg-animation="none"><div class="column-bg-overlay"></div></div>
		<div class="wpb_wrapper">
			
	<div class="wpb_video_widget wpb_content_element vc_clearfix   vc_video-aspect-ratio-169 vc_video-el-width-100 vc_video-align-center" >
		<div class="wpb_wrapper">
			
			<div class="wpb_video_wrapper"><iframe title="Happiness comes from the simple things" width="1080" height="608" src="https://www.youtube.com/embed/m8NAlDOCG6g?feature=oembed&enablejsapi=1&origin=https://www.andysciro.com" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
		</div>
	</div>

<div class="wpb_text_column wpb_content_element " >
	<div class="wpb_wrapper">
		<p style="text-align: center;"><span style="color: #999999;">(Yes I know the video below is fake, but still thought it really captures the feeling)</span></p>
	</div>
</div>




		</div> 
	</div>
	</div> 

	<div  class="vc_col-sm-2 wpb_column column_container vc_column_container col child_column no-extra-padding"   data-t-w-inherits="default" data-shadow="none" data-border-radius="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0">
		<div class="vc_column-inner" ><div class="column-bg-overlay-wrap" data-bg-animation="none"><div class="column-bg-overlay"></div></div>
		<div class="wpb_wrapper">
			
		</div> 
	</div>
	</div> 
</div></div>
<div class="wpb_text_column wpb_content_element " >
	<div class="wpb_wrapper">
		<p>With that said, I tried to make it in pixi.js in an afternoon. It surprisingly wasn&#8217;t too hard when we utilize pixi.js&#8217;s tint api. Essentially though all we need to do is when the logo hits the &#8220;wall&#8221; just randomly generate a new tint. An example of that looks like this:</p>
<p>[crayon-61e6d234e0a50867660984/]<strong>If you want to learn more about the tint api you can read more about it here in the docs:</strong></p>
<p>https://scottmcdonnell.github.io/pixi-examples/index.html?s=demos&amp;f=tinting.js&amp;title=Tinting</p>
	</div>
</div>




<div class="wpb_text_column wpb_content_element " >
	<div class="wpb_wrapper">
		<p><iframe height="500" style="width: 100%;" scrolling="no" title="Bouncing DVD SPS logo" src="https://codepen.io/spssciro/embed/BaWXwRJ?default-tab=result&amp;editable=true" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="allowfullscreen"><br />
See the Pen <a href="https://codepen.io/spssciro/pen/BaWXwRJ"><br />
Bouncing DVD SPS logo</a> by Andy Sciro (<a href="https://codepen.io/spssciro">@spssciro</a>)<br />
on <a href="https://codepen.io">CodePen</a>.<br /></iframe></p>
	</div>
</div>




			</div> 
		</div>
	</div> 
</div></div>
		<div id="fws_65daa01c65d10"  data-column-margin="default" data-midnight="dark"  data-bg-mobile-hidden="" class="wpb_row vc_row-fluid vc_row standard_section "  style="padding-top: 0px; padding-bottom: 0px; "><div class="row-bg-wrap" data-bg-animation="none" data-bg-overlay="false"><div class="inner-wrap"><div class="row-bg"  style=""></div></div><div class="row-bg-overlay" ></div></div><div class="col span_12 dark left">
	<div  class="vc_col-sm-12 wpb_column column_container vc_column_container col no-extra-padding"  data-t-w-inherits="default" data-border-radius="none" data-shadow="none" data-border-animation="" data-border-animation-delay="" data-border-width="none" data-border-style="solid" data-border-color="" data-bg-cover="" data-padding-pos="all" data-has-bg-color="false" data-bg-color="" data-bg-opacity="1" data-hover-bg="" data-hover-bg-opacity="1" data-animation="" data-delay="0" >
		<div class="vc_column-inner" ><div class="column-bg-overlay-wrap" data-bg-animation="none"><div class="column-bg-overlay"></div></div>
			<div class="wpb_wrapper">
				
<div class="wpb_text_column wpb_content_element " >
	<div class="wpb_wrapper">
		<p>As always because its on codepen.io so feel free to fork it! You can view the source <a href="https://codepen.io/spssciro/pen/BaWXwRJ?editors=0010">here</a>, if you want you can replace the logo (<a href="https://www.base64-image.de/">it&#8217;s a base64 encoded string</a>), because I&#8217;m too cheap for codepen premium!! </p>
	</div>
</div>




			</div> 
		</div>
	</div> 
</div></div><p>The post <a rel="nofollow" href="https://www.andysciro.com/bouncing-dvd-logo-in-pixi-js/">Bouncing DVD logo in Pixi.js</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andysciro.com/bouncing-dvd-logo-in-pixi-js/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Steve Wozniak&#8217;s opinion on when you&#8217;re the most creative (and how he brought color to personal computers)</title>
		<link>https://www.andysciro.com/how-steve-wozniak-brought-color-to-personal-computers/</link>
					<comments>https://www.andysciro.com/how-steve-wozniak-brought-color-to-personal-computers/#respond</comments>
		
		<dc:creator><![CDATA[Andy]]></dc:creator>
		<pubDate>Thu, 01 Jul 2021 02:00:00 +0000</pubDate>
				<category><![CDATA[cool tips]]></category>
		<guid isPermaLink="false">http://35.184.221.227/?p=6430</guid>

					<description><![CDATA[<p>Here is a fascinating talk by the famous Steve Wozniak that resonated with me. The key takeaway here is his point about where and WHEN...</p>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/how-steve-wozniak-brought-color-to-personal-computers/">Steve Wozniak&#8217;s opinion on when you&#8217;re the most creative (and how he brought color to personal computers)</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="How Steve Wozniak Brought Color to Personal Computers" width="1080" height="608" src="https://www.youtube.com/embed/uCRijF7lxzI?feature=oembed&#038;enablejsapi=1&#038;origin=https://www.andysciro.com" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div></figure>



<p>Here is a fascinating talk by the famous Steve Wozniak that resonated with me. The key takeaway here is his point about <strong>where</strong> and <strong>WHEN </strong>he is the most creative. Wozniak goes onto explain that&#8217;s how he came up with the idea of color display for the mac. </p>



<p>&#8220;When you&#8217;re without sleep, and when you&#8217;re going to sleep your inner head goes <strong>briefly</strong> into this period of really&#8230;creativity kind of thinking. It&#8217;s not restricted to the normal thoughts of life, and the day. When you&#8217;re waking up your head&#8217;s a little like that too, well my head was kind of in this floating half-asleep state and out.&#8221; </p>



<p>TLDR; When you&#8217;re sleep deprived and working hard on a project, when you drift off to sleep that&#8217;s the time you may be the MOST creative. <strong>Pretty cool. </strong></p>
<p>The post <a rel="nofollow" href="https://www.andysciro.com/how-steve-wozniak-brought-color-to-personal-computers/">Steve Wozniak&#8217;s opinion on when you&#8217;re the most creative (and how he brought color to personal computers)</a> appeared first on <a rel="nofollow" href="https://www.andysciro.com">Andy Sciro</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.andysciro.com/how-steve-wozniak-brought-color-to-personal-computers/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
