I had a bug that was only appearing on old iPhones. This made testing really difficult because I couldn’t re-create the issue on my laptop’s localhost. I needed a way to test my localhost on an old iPhone 5. But as amazing as the Google machine can be for answering questions, sometimes the content just isn’t there. After a lot of troubleshooting and asking friends for help, I finally got my localhost to appear on my phone. This article goes through the steps that I took and the problems I encountered along the way.

Step 1: Plug the iPhone into your MacBook.

Step 2: Connect the iPhone to the same Wi-Fi network that your laptop is on.

Step 3: Open Safari on the iPhone. In the search bar, type your computer’s IP address and the port that you’re running on (example: http://10.1.2.345:3002).

Tip: Find your computer’s IP address under settings>network>wifi.

Step 4: Open Safari on your computer to view the inspector by selecting “Develop” in the top menu bar. Select the iPhone that is connected to the laptop. (Tip: You may need to enable the develop menu in safari>preferences>advanced.)

Step 5: If it doesn’t work right away, which it probably won’t, you may have some security settings blocking you from viewing on your iPhone. There are a few things it could be:

• On the iPhone, open settings>safari>advanced and make sure the “web inspector” is switched on.
• In the text editor on your laptop, open the makefile for your API server and find the setting called “HOST_CORS_ALLOWED_ORIGINS”, add http://[your-ip-address]:[your-post-number].
• If it still isn’t working, there may be other files in your app that need to be allowed permission to access your IP. For example, the API URL in my .env.developement file needed to be updated to REACT_APP_API_URL=http://10.1.2.345:4000. Keep in mind that security blocks will probably be centered around your servers so play around in there if you continue to experience problems.

I am by no means an expert in this and I’m sure this is just one method of many. But this worked for me so with any luck at all, it’ll work for you as well. Happy debugging!!

Follow along with this codepen to see the animation in action.

HTML

Step 1: Get your SVG. You can get free SVGs from The Noun Project and Font Awesome or you can make your own in Adobe Illustrator.

Step 2: Wrap your SVG in a div.

Step 3: Update your SVG path with the following fill, stroke, stroke-width, and id attributes:

CSS

Step 4: Give your containing div a height so that it is large enough to create a vertical scroll. I did this because my SVG was the only element on the page. If you have lots of other content on the page, this step isn’t necessary, as long as the elements are in the same containing div.

Step 5: Apply a fixed position to your SVG element so that as you scroll down the page, the SVG stays put in the viewport.

JavaScript

Step 6: Get the length of the SVG path. This value is important for the next step.

Step 7: Apply strokeDasharray and strokeDashoffset styles to your SVG. These two properties are the key players in animating an SVG. By setting them to the full length of the SVG path, we are ensuring that no dashes are visible on the path as it appears.

Step 8: For the final step, add an event listener when the window begins to scroll. In the event listener, offset the dash by the same amount as the percentage scrolled.

That’s it! When I was learning, this post from CSS Tricks really helped me so check it out if you need another explanation.

SVG animations can really increase the interest on a website. Like anything, they must be used sparingly to avoid confusion or distraction. This applies to SVG scroll drawing in particular. SVG scroll drawing can either take up a small section of the webpage, or the animation can follow the user all the way down the page. When used correctly, this unique animation technique can delight the user, giving them a sense that they have control over the animations. Go ahead, try it out!

If you’re not already using this popular tool, I would recommend you hop on board. Here are just a few reasons why.

Nesting

This neat feature checks off both boxes: it creates more organized looking code and it saves space. It may look odd to begin with but you’ll be dazzled with its simplicity in no time!

One word of warning with nesting: if you’re designing a responsive website you’ll need to watch out for specificity. In the example above, if you wanted to make a change on the <a> tags in a mobile view, you’ll need to be just as specific as you were in the original styles.

Partials

Partials are another great way to make sections of your code easy to find. The idea behind partials is to break up your code into sections based on typography, global styles, headers, footers, etc. Each partial will have its own .scss sheet which are joined together on the main style.scss by using the import function as seen below.

Just remember to import each partial in the order that it appears on the page. For example, the footer should always be the last to be uploaded. This ensures that the most important styles are loaded first.

Variables

Can’t remember the six digit hex codes for the colours on your website? Well, luckily you don’t have to with SASS variables! Variables are established at the beginning of the .scss document. They hold any value such as font size, font family, colour value, etc. It’s not only a great tool for people like me who have a bad memory, but it also saves a ton of hassle when the design colors change halfway through the project. It only needs to be changed at the variable level!

Of course there are lots of other fun features in SASS, popular ones being the @mixin and @extend functions, but nesting, partials, and variables are reason enough to join the community of SASSy coders. They’re super easy to use right from the start. But most importantly, think of all the sassy puns in your future…

If I have at least convinced you to try it out, check out my friend Bill’s article on setting up your SASS files.