Hey Readers!
+ +I have been especially excited for this post. I have been working on this project for a little over a yeaer and have learned so much about wordpress as well about HTML, CSS, JavaScript and PHP. The project was to create a wordpress custom theme from scratch for Imani Barbarin who runs Crutches & Spice. I am not a Wordpress developer per se but developing this theme was something within my capability and I would do it again. If you recall I actually wrote about one of the features in this post, a text size slider. In this post I will write about the theme overall and a few key features in detail. I named the theme Strawberry because the first color I started with, from Imani’s logo was a pink that reminded me of a cartoon strawberry. If you think you want strawberry theme for your website click here Without further ado, let’s jump in!
+ +If you don’t know Imani Barbarin yet, definitely check her out. She is a diasbled representation and inclusion advocate. She writes on her blog Crutches & Spice and has a following of more than 80K people on twitter. To say the least, I was nervous that so many people would be going to a website that I designed. This meant that I had to get it right. A site requirement was to make the site accessible to her readers, many who have disabilities themselves. W3C has these guidelines for this exact reason, but many websites only do the absolute bare minimum! I found a tool that helped me make the site 99% accessible. The 1% is a warning caused by a wordpress generated snippet of code, that I unfortunately cannot work around. The site, according to the tool has 0 errors, which is less than major sites like Facebook [5 errors, 33 warnings], Twitter [2 errors, 38 warnings] and wordpress.com/read [29 errors, 76 warnings](seriously wordpress, what the heck?!). The name of this tool is called WAVE, you can learn more about it here. I will definitely be using it to improve my own site and every web dev project I have.
+ +As mentioned before, the text slider was a key feature that I have already written about, but what else does Strawberry theme have to offer?
+ +On the landing blog page there is a post carousel featuring the last 10 posts. I’ve laid with a purple overlay, and a magenta background to fit the theme. Writing the code to change each photo size to be uniform, keep an acceptable looking aspect ratio, as well as centering was a real challenge. I’ve set this one to auto scroll, but has buttons at the bottom to toggle left and right, as well as the entire slider being draggable to see more posts.
+ +I think it’s no secret I love position:sticky; in CSS. On this very site my footer is sticky on the blog page. Everything on the right as well as the navigation/search on the top, will follow the user as they scroll on the page, making it so that they are always easy and in reach. Here is a gif of what the sticky sidebar and navigation look like on the main page: +   +  Â
+ +   +   + +Here’s the code behind the sidebar:
+ +HTML and PHP:
+ +1
+2
+3
+4
+5
+6
+7
+8
+9
+10
+11
+12
+13
+14
+15
+16
+17
+18
+19
+20
+21
+22
+23
+24
+25
+26
+27
+28
+29
+30
+31
+32
+33
+34
+35
+36
+37
+38
+39
+40
+41
+42
+43
+44
+45
+46
+47
+48
+49
+50
+51
+52
+53
+54
+55
+56
+57
+58
+59
+60
+61
+62
+
<div class="sidebar-wrap">
+ <div class="sidebar">
+ <div class="socials">
+ <ul class="social-list">
+ <li> <a class="social-btn"
+ href="https://twitter.com/Imani_Barbarin" title="Go to Imani's Twitter"
+ target="_blank">
+ <img class="s-img"
+ src="/stagingsite/wp-content/themes/strawberry/assets/images/twitter.png" alt="twitter logo"> </a></li>
+ <li> <a class="social-btn"
+ href="https://www.facebook.com/CrutchesandSpice/?ref=bookmarks" title="Go to Crutches & Spice Facebook Page"
+ target="_blank">
+ <img class="s-img"
+ src="/stagingsite/wp-content/themes/strawberry/assets/images/facebook.png" class="s-img" alt="facebook logo"> </a></li>
+ <li> <a class="social-btn"
+ href="https://www.instagram.com/crutches_and_spice/" title="Go to Crutches & Spice Instagram"
+ target="_blank">
+ <img class="s-img"
+ src="/stagingsite/wp-content/themes/strawberry/assets/images/ig.png" alt="instagram logo"> </a></li>
+ <li> <a class="social-btn"
+ href="https://www.linkedin.com/in/i-gineva-barbarin-3b836528/" title="Go to Imani's Linkedin"
+ target="_blank">
+ <img class="s-img"
+ src="/stagingsite/wp-content/themes/strawberry/assets/images/in.png" alt="linkedin logo"> </a></li>
+ <li> <a class="social-btn"
+ href="https://imanibarbarin.com/" title="Go to Imani's Portfolio site"
+ target="_blank">
+ <img class="s-img"
+ src="/stagingsite/wp-content/themes/strawberry/assets/images/link.png" alt="literal chain link"> </a></li>
+ </ul>
+ </div>
+ <div class="patreon">
+ <hr class="sidebar-ln">
+ <h3 class="sidebar-heading">Support This Blog!</h3>
+ <a href="https://www.patreon.com/ImaniBarbarin"
+ title="Subscribe to Crutches & Spice on Patreon" target="_blank"><img src="/stagingsite/wp-content/themes/strawberry/assets/images/patreon_logo.png" alt="patreon logo"></a>
+ </div>
+
+ <div class="subscribe">
+ <hr class="sidebar-ln">
+ <h3 class="sidebar-heading">Subscribe for Email Updates!</h3>
+ <?php if (is_active_sidebar('jetpack-subscribe')) : ?>
+ <?php dynamic_sidebar('jetpack-subscribe');
+ endif; ?>
+ </div>
+
+ <div class="archive">
+ <hr class="sidebar-ln">
+ <h3 class="sidebar-heading">Archives</h3>
+ <div class="archive-drop">
+ <select name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
+ <option value=""><?php esc_attr(_e('Select Month', 'textdomain')); ?></option>
+ <?php wp_get_archives(array( 'type' => 'monthly', 'format' => 'option', 'show_post_count' => 1 )); ?>
+ </select></div>
+ </div>
+ </div>
+ <div class="slidecontainer main-range">
+ <p>Text Size: <span id="size"></span></p>
+ <input type="range" min="16" max="32" value="16" class="slider page-slider" id="font-range" aria-label="Text size slider" autocomplete="off">
+ </div>
+ </div>
+</div>
+
CSS: +
+ +1
+2
+3
+4
+5
+6
+7
+8
+9
+10
+11
+12
+13
+14
+15
+16
+17
+18
+19
+20
+21
+22
+23
+24
+25
+26
+27
+28
+29
+30
+31
+32
+33
+34
+35
+36
+37
+38
+39
+40
+41
+42
+43
+44
+45
+46
+47
+48
+
.sidebar {
+ float : left;
+ border-radius : 25px;
+ width : 550px;
+ height : auto;
+ position : sticky;
+ background-color: #F55776;
+ overflow-x : hidden;
+ padding-bottom : 8px;
+}
+
+.sidebar-ln {
+ width : 39%;
+ float : left;
+ border-color: #5796f5;
+ display : block;
+ }
+
+.sidebar-wrap {
+ top : 5.5rem;
+ position : sticky;
+ margin-left : 0;
+ height : max-content;
+ width : min-content;
+ margin-bottom: 100px;
+
+ }
+
+.archive {
+ width : 1200px;
+ float : left;
+ margin-left: 40px;
+ display : block;
+ }
+
+.archive-drop {
+ margin-bottom: 15px;
+ float : left;
+ }
+
+.archive-drop select {
+ font-family: 'Merriweather', 'Tahoma', serif;
+
+ }
+
+.archive-nav {
+ margin: 15px;
+ }
+
Hey readers! Today I am writing about a topic that everyone should care about. If you use the internet or social media daily, this one is for you!
+Have you ever been on social media, minding your business, when suddenly an ad that is just little too personal pops up on your feed?
+ +{insert reel}
+ +It is not fun! It feels like someone is watching over your shoulder. So today I am going to answer the question: “Why and how does this happen?”
+ +Internet privacy is how much of your personal information remains private when you are on the internet. This can include financial information, browsing history, and personal preferences. Internet privacy can also be referred to as digital privacy or online privacy.
+ +We are constantly sharing data about ourselves on platforms we use. Google uses your birthday when you sign up for Gmail to make sure you get age-appropiate ads. When you like a photo on Instagram it will suggest similar ads containing products connected to it. When you visit a website you are sharing data: your location through IP, your habits (how long you spend on a page, what you click on etc.). Similarly, search engines collect both of these in addition to search history and cookies.
+ +Companies collect this data and create a “profile” on all of to give them an idea on our preferences from social media to browsing, from shopping to political stances. Sometimes this data is sold to third parties, and sometimes it is used directly by the company, for say targeted ads.
+ +There are some misconceptions about the “how”. Companies cannot listen to you through your phone and then give you an ad for the thing you verbally said (The government is a different story, but I’ll save that for another post.). Nonetheless, it feels this invasive when a targeted ad is shown.
+ +Let’s go over an example and breakdown each step. Pretend you are shopping for a reusable water bottle.
+++ +You go to a retail website like Walmart.com or Amazon.com and a cookie is created associated with your computer.
+
++ +When you visit an article the next day. The article’s website reads your cookie data, and you start to get ads related to the cookie, say, fitness equipment.
+
++ +This paired with your search engine history, social media likes and dislikes and more help ads become more and more targeted.
+
++ +It is multi-platformed too, if different sites or apps are using the same ad provider, for ex, Google’s Ad sense. If you go on 5 different apps that all use the same ad provider you are likely to get ads from the same company, as the provider is drawing from the same pool of information each time.
+
Your internet browser, search engines and websites all store this information for as long as you let them, so be sure to clear your cookies and data when you need to. The downside to this is having to sign in manually, as the same data, like a saved user-name or password is also stored this way. Targeted ads that feel way too personal are the culmination of websites having a large amount of information on you. The right to be forgotten, or the right to internet privacy is something we should all care about especially after April 2017 when Trump signed into law a measure that allows ISPs to sell your data without consent.
+ +
+ +
Hey Readers!
+ +I have been especially excited for this post. I have been working on this project for a little over a yeaer and have learned so much about wordpress as well about HTML, CSS, JavaScript and PHP. The project was to create a wordpress custom theme from scratch for Imani Barbarin who runs Crutches & Spice. I am not a Wordpress developer per se but developing this theme was something within my capability and I would do it again. If you recall I actually wrote about one of the features in this post, a text size slider. In this post I will write about the theme overall and a few key features in detail. I named the theme Strawberry because the first color I started with, from Imani’s logo was a pink that reminded me of a cartoon strawberry. If you think you want strawberry theme for your website click here Without further ado, let’s jump in!
+ +If you don’t know Imani Barbarin yet, definitely check her out. She is a diasbled representation and inclusion advocate. She writes on her blog Crutches & Spice and has a following of more than 80K people on twitter. To say the least, I was nervous that so many people would be going to a website that I designed. This meant that I had to get it right. A site requirement was to make the site accessible to her readers, many who have disabilities themselves. W3C has these guidelines for this exact reason, but many websites only do the absolute bare minimum! I found a tool that helped me make the site 99% accessible. The 1% is a warning caused by a wordpress generated snippet of code, that I unfortunately cannot work around. The site, according to the tool has 0 errors, which is less than major sites like Facebook [5 errors, 33 warnings], Twitter [2 errors, 38 warnings] and wordpress.com/read [29 errors, 76 warnings](seriously wordpress, what the heck?!). The name of this tool is called WAVE, you can learn more about it here. I will definitely be using it to improve my own site and every web dev project I have.
+ +As mentioned before, the text slider was a key feature that I have already written about, but what else does Strawberry theme have to offer?
+ +On the landing blog page there is a post carousel featuring the last 10 posts. I’ve laid with a purple overlay, and a magenta background to fit the theme. Writing the code to change each photo size to be uniform, keep an acceptable looking aspect ratio, as well as centering was a real challenge. I’ve set this one to auto scroll, but has buttons at the bottom to toggle left and right, as well as the entire slider being draggable to see more posts.
+ +I think it’s no secret I love position:sticky; in CSS. On this very site my footer is sticky on the blog page. Everything on the right as well as the navigation/search on the top, will follow the user as they scroll on the page, making it so that they are always easy and in reach. Here is a gif of what the sticky sidebar and navigation look like on the main page: +   +  Â
+ +   +   + +Here’s the code behind the sidebar:
+ +HTML and PHP:
+ +1
+2
+3
+4
+5
+6
+7
+8
+9
+10
+11
+12
+13
+14
+15
+16
+17
+18
+19
+20
+21
+22
+23
+24
+25
+26
+27
+28
+29
+30
+31
+32
+33
+34
+35
+36
+37
+38
+39
+40
+41
+42
+43
+44
+45
+46
+47
+48
+49
+50
+51
+52
+53
+54
+55
+56
+57
+58
+59
+60
+61
+62
+
<div class="sidebar-wrap">
+ <div class="sidebar">
+ <div class="socials">
+ <ul class="social-list">
+ <li> <a class="social-btn"
+ href="https://twitter.com/Imani_Barbarin" title="Go to Imani's Twitter"
+ target="_blank">
+ <img class="s-img"
+ src="/stagingsite/wp-content/themes/strawberry/assets/images/twitter.png" alt="twitter logo"> </a></li>
+ <li> <a class="social-btn"
+ href="https://www.facebook.com/CrutchesandSpice/?ref=bookmarks" title="Go to Crutches & Spice Facebook Page"
+ target="_blank">
+ <img class="s-img"
+ src="/stagingsite/wp-content/themes/strawberry/assets/images/facebook.png" class="s-img" alt="facebook logo"> </a></li>
+ <li> <a class="social-btn"
+ href="https://www.instagram.com/crutches_and_spice/" title="Go to Crutches & Spice Instagram"
+ target="_blank">
+ <img class="s-img"
+ src="/stagingsite/wp-content/themes/strawberry/assets/images/ig.png" alt="instagram logo"> </a></li>
+ <li> <a class="social-btn"
+ href="https://www.linkedin.com/in/i-gineva-barbarin-3b836528/" title="Go to Imani's Linkedin"
+ target="_blank">
+ <img class="s-img"
+ src="/stagingsite/wp-content/themes/strawberry/assets/images/in.png" alt="linkedin logo"> </a></li>
+ <li> <a class="social-btn"
+ href="https://imanibarbarin.com/" title="Go to Imani's Portfolio site"
+ target="_blank">
+ <img class="s-img"
+ src="/stagingsite/wp-content/themes/strawberry/assets/images/link.png" alt="literal chain link"> </a></li>
+ </ul>
+ </div>
+ <div class="patreon">
+ <hr class="sidebar-ln">
+ <h3 class="sidebar-heading">Support This Blog!</h3>
+ <a href="https://www.patreon.com/ImaniBarbarin"
+ title="Subscribe to Crutches & Spice on Patreon" target="_blank"><img src="/stagingsite/wp-content/themes/strawberry/assets/images/patreon_logo.png" alt="patreon logo"></a>
+ </div>
+
+ <div class="subscribe">
+ <hr class="sidebar-ln">
+ <h3 class="sidebar-heading">Subscribe for Email Updates!</h3>
+ <?php if (is_active_sidebar('jetpack-subscribe')) : ?>
+ <?php dynamic_sidebar('jetpack-subscribe');
+ endif; ?>
+ </div>
+
+ <div class="archive">
+ <hr class="sidebar-ln">
+ <h3 class="sidebar-heading">Archives</h3>
+ <div class="archive-drop">
+ <select name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
+ <option value=""><?php esc_attr(_e('Select Month', 'textdomain')); ?></option>
+ <?php wp_get_archives(array( 'type' => 'monthly', 'format' => 'option', 'show_post_count' => 1 )); ?>
+ </select></div>
+ </div>
+ </div>
+ <div class="slidecontainer main-range">
+ <p>Text Size: <span id="size"></span></p>
+ <input type="range" min="16" max="32" value="16" class="slider page-slider" id="font-range" aria-label="Text size slider" autocomplete="off">
+ </div>
+ </div>
+</div>
+
CSS: +
+ +1
+2
+3
+4
+5
+6
+7
+8
+9
+10
+11
+12
+13
+14
+15
+16
+17
+18
+19
+20
+21
+22
+23
+24
+25
+26
+27
+28
+29
+30
+31
+32
+33
+34
+35
+36
+37
+38
+39
+40
+41
+42
+43
+44
+45
+46
+47
+48
+
.sidebar {
+ float : left;
+ border-radius : 25px;
+ width : 550px;
+ height : auto;
+ position : sticky;
+ background-color: #F55776;
+ overflow-x : hidden;
+ padding-bottom : 8px;
+}
+
+.sidebar-ln {
+ width : 39%;
+ float : left;
+ border-color: #5796f5;
+ display : block;
+ }
+
+.sidebar-wrap {
+ top : 5.5rem;
+ position : sticky;
+ margin-left : 0;
+ height : max-content;
+ width : min-content;
+ margin-bottom: 100px;
+
+ }
+
+.archive {
+ width : 1200px;
+ float : left;
+ margin-left: 40px;
+ display : block;
+ }
+
+.archive-drop {
+ margin-bottom: 15px;
+ float : left;
+ }
+
+.archive-drop select {
+ font-family: 'Merriweather', 'Tahoma', serif;
+
+ }
+
+.archive-nav {
+ margin: 15px;
+ }
+