Friday, June 14, 2019

Instagram Image Sizes

So I had an issue with my code snippet posting on instagram
https://www.instagram.com/codenlife/

Where the template I had used initially resulted in text that was too small to be legible.
So basically it came down to the different size formats and how it could trip up the unwary poster.
Here are the different resolutions available:



Square

Max Resolution: 1080 x 1080
Aspect ratio: 1:1

Both sides are equal and can range from 600 x 600 to 1080 x 1080.
Anything larger than 1080x1080 will be resized to fit and anything smaller than 600 x 600 is not
recommended at all as quality will suffer.

Landscape

Max Resolution: 1080 x 566
Aspect ratio: 16:9

Horizontal side is longer than the vertical.
This is the one I used originally resulting in tiny illegible text.
This one takes the least amount of visible space on the page. Offering
the least screen real estate of the three.

Portrait 

Max Resolution: 1080 x 1350
Aspect ratio: 4:5

Vertical side is longer than the horizontal.
This could be an ideal candidate for say an infographic or anything that requires more length area.

For the purposes of code snippets using a square format is the best option it fits precisely within Instagram's crop area so as not to require much adjusting compared to the others.

Technology Used by Successwful Businesses

Monday, June 10, 2019

ScrollMagic Tutorial

A quick primer on pinning elements using ScrollMagic. The video walks through the tutorial and information related to references needed in the tutorial can be found below the video.

Demo: https://donyd.github.io/ScrollMagicDemo/

References

Use these for the JavaScript libraries needed for the code from their respective delivery networks:
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>

ScrollMagic:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ plugins/debug.addIndicators.min.js"></script>

Background Image:
https://github.com/donyd/ScrollMagicDemo/blob/master/images/scaler_bg.png