<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Blog | Jemima Abu]]></title><description><![CDATA[Articles written by Jemima Abu]]></description><link>https://blog.jemimaabu.com</link><generator>RSS for Node</generator><lastBuildDate>Mon, 11 May 2026 03:15:51 GMT</lastBuildDate><atom:link href="https://blog.jemimaabu.com/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[How to Successfully Apply to Speak at Conferences]]></title><description><![CDATA[In the previous article in this series, we covered how to find conferences to speak at. In this article, we'll be looking at the process of applying to speak at conferences.
Most conferences have open application forms for interested speakers to fill...]]></description><link>https://blog.jemimaabu.com/how-to-apply-to-speak-at-conferences</link><guid isPermaLink="true">https://blog.jemimaabu.com/how-to-apply-to-speak-at-conferences</guid><category><![CDATA[Public Speaking]]></category><category><![CDATA[Soft Skills]]></category><category><![CDATA[conference]]></category><dc:creator><![CDATA[Jemima Abu]]></dc:creator><pubDate>Tue, 13 Aug 2024 23:00:00 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1723882752229/266866b5-9c12-4e6d-8e26-9bade301b3ae.jpeg" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>In the <a target="_blank" href="https://blog.jemimaabu.com/how-to-find-conferences-to-speak-at">previous article</a> in this series, we covered how to find conferences to speak at. In this article, we'll be looking at the process of applying to speak at conferences.</p>
<p>Most conferences have open application forms for interested speakers to fill out called "Call for Papers (CFP)" or "Call for Speakers (CFS)". Conference organisers use these application forms to review talk submissions and determine which talks will be accepted for the conference.</p>
<p>Speaker application forms usually contain fields for speaker details (name, role, company, bio and social media) and talk details (title and abstract/description). In this article, we'll be looking at how to fill in the talk details.</p>
<p>Here's a quick summary of what we'll be discussing:</p>
<ul>
<li><p>How do I come up with an idea for a talk?</p>
</li>
<li><p>How do I create a good title?</p>
</li>
<li><p>How do I fill out the abstract/description?</p>
</li>
<li><p>How do I make sure my talk gets accepted?</p>
</li>
</ul>
<hr />
<h2 id="heading-how-do-i-come-up-with-an-idea-for-a-talk">How Do I Come Up With An Idea For A Talk?</h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1615746129423/WX8tyfNDZ.png" alt="Illustration of a person sitting at a desk with a computer, wearing a pink outfit. The person has one finger raised and a thought bubble above their head containing a lit light bulb, representing an idea." /></p>
<p>The first part of submitting a talk to a conference is knowing what you'd like to talk about. These are some ways to figure out what talk to submit to a conference:</p>
<h3 id="heading-1-talk-about-what-you-know">1. Talk about what you know.</h3>
<p>Experience, as they say, is the best teacher. If you've worked with something sufficiently enough to have gained expertise on that topic, then that's a great area to submit a talk on.</p>
<p>This could be anything from soft skills to in-depth technical solutions - you can talk about ways of working that improved your productivity or what code optimisation practices you've implemented at work.</p>
<p>People enjoy seeing real-life experiences and use cases, especially if they focus on improving existing processes or implementing easier solutions.</p>
<h3 id="heading-2-talk-about-something-youre-passionate-about">2. Talk about something you're passionate about.</h3>
<p>I have a lot of accessibility-themed talks because I enjoy making presentations on the importance of accessibility and helping others learn how to make things accessible.</p>
<p>If you're the kind of person who can go on for hours about why a new JS framework is better than another new JS framework or anything of the like, then you'd feel right at home submitting a talk on that topic.</p>
<h3 id="heading-3-talk-about-whats-trending">3. Talk about what's trending.</h3>
<p>The world of technology is constantly changing, with new frameworks and libraries released every other day.<br />Conference audiences are always on the lookout for new trends as conferences are some of the best places to find out what's new in the field of technology, so these kinds of talks are particularly useful for conferences.</p>
<p>If you enjoy keeping up with the latest trends and fancy technology, you can submit a talk explaining the ways you've utilised the new tech. Alternatively, you can submit an opinion piece on why you don't approve of the latest buzzword.</p>
<h3 id="heading-4-talk-about-your-learning-journey">4. Talk about your learning journey.</h3>
<p>Whenever I have to learn a new technology or if I'm trying to understand a concept, I'll write an article or submit a talk on that idea to improve my learning journey. In creating a presentation to explain my experience or understanding of a concept, I gain a deeper understanding of it.</p>
<p>If you're using this method, you want to ensure that you've sufficiently understood the concept well enough to properly explain it to an audience. You can also include anything you would have wanted to know when you first started learning.</p>
<p>Topics like "How Learning {x} Made Me A Better {y}" or "5 Things I Learned from Learning {x}" are usually well-received by conferences.</p>
<h3 id="heading-5-get-inspiration-from-the-conference">5. Get inspiration from the conference.</h3>
<p>This is a great way of coming up with talk ideas, especially if you're looking for best-fit talks for a particular conference. Some conferences have published videos of previous talks or include a list of talks they're looking for on the CFP page.</p>
<p>It's always a good idea to align your talk submissions with what the conference is looking for, so basing your talk on previous editions or requested topics will give you a better chance of having your talk accepted.</p>
<p>You can also check out this article on <a target="_blank" href="https://lucybain.com/blog/2016/conference-proposal-ideas/">How to come up with conference proposal ideas</a> by Lucy Bain for more ideas.</p>
<h2 id="heading-how-do-i-create-a-good-title">How Do I Create a Good Title?</h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1615747439357/JDeWAjaLv.png" alt="A person in a pink sweater is writing &quot;What makes a good title?&quot; on a chalkboard." /></p>
<p>A good title explains the general concept of your talk and lets your audience know what to expect at a glance.</p>
<p>I usually come up with titles by taking the summary of the talk and rewording it to something catchy.</p>
<p>"This talk is going to be about optimising the images and videos on your website to improve SEO and performance" would be reworded to "Image Optimization for Web Performance" and then, if I wanted something casual, "Large Images Are Ruining Your Website - Let's Fix That".</p>
<p>You can also look at previous talks for title inspirations or use pop culture references.</p>
<h2 id="heading-how-do-i-write-a-talk-abstractdescription">How do I write a talk abstract/description?</h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1723711549000/d76a690f-78d6-4197-852f-7c7237a8e21c.png" alt="Illustration of a hand writing in a notebook with a pen. Nearby are a cup of coffee, some papers, a pink marker, and a roll of tape." class="image--right mx-auto mr-0" /></p>
<p>A talk abstract is a summary of the contents of your talk. This is usually what conferences publish on a speaker page for the audience to read. An abstract should be brief and engaging, usually between 3 to 5 sentences, and it should let the audience know why they should look forward to your talk.</p>
<p>I like to write my abstracts in the template:</p>
<ul>
<li><p><strong>Problem statement:</strong> The first part of your abstract should address the reason you're giving the talk, this is what the audience should be able to relate to.</p>
</li>
<li><p><strong>Solution statement</strong>: This part of the abstract covers the solution to the problem statement, it should state how you intend to approach the topic.</p>
</li>
<li><p><strong>Benefit statement</strong>: This is where you include the key takeaways from your talk, expand on what you wrote in the solution statement and write specific points the audience can expect to learn at the end of your talk.</p>
</li>
</ul>
<p>Here's an example of an abstract from one of my talks:</p>
<blockquote>
<p>Knowing how to build accessible products is important but it's just as important to know why we build products to be accessible.</p>
<p>In this talk, we'll explore the concept of accessibility to better understand its necessity and the ramifications involved in building non-accessible products.</p>
<p>We'll also answer pressing questions like "How do I know if this thing I built is accessible?" and "Whose job is it to ensure accessibility?" (Spoiler: it's everyone's job).</p>
</blockquote>
<p>A talk description is a more in-depth explanation of your talk and it should expand on whatever you've written in your abstract. The description is usually used to provide more in-depth information about your talk for the conference organisers. This is where you can include specific points of what the audience can expect to learn or give an outline of the slides you'll be presenting.</p>
<p>Sometimes, "abstract" and "description" are used interchangeably but if a form has both, keep the abstract shorter and put the bulk of the information in the description.</p>
<h2 id="heading-how-do-i-make-sure-my-talk-gets-accepted">How do I make sure my talk gets accepted?</h2>
<p>It's impossible to know for sure if your talk will be accepted at a conference. Even if you have an excellent talk proposal, several factors could affect its acceptance.<br />The conference might have already accepted a similar topic, or they might have too many talks related to one track. It could also come down to conferences preferring local vs international speakers or newer vs experienced speakers.</p>
<p>Whatever the case, here are some things that are within your control to improve the chances of your talk being accepted:</p>
<ul>
<li><p><strong>Read the submission guidelines:</strong> Some conferences include instructions detailing what they want your talk submission to look like.<br />  An instruction might be "List 3 to 5 bullet points of what the audience can expect from your talk". If your description contains only blocks of text instead, this might cause the reviewers to dismiss it outright.</p>
</li>
<li><p><strong>Stay on theme:</strong> When submitting to a conference, make sure the talk will be relevant to the audience.</p>
<p>  Larger conferences usually have multiple tracks so they are open to different areas, however, some conferences are very niche so a submission for a generic or unrelated talk is likely to be rejected e.g. if a conference is related to a specific platform or framework, then talks that cater directly to that platform have a higher chance of being accepted.<br />  Also, consider who the target audience of your talk will be - a beginner-focused talk introducing a concept would be fine for a larger conference but a smaller conference that focuses on a specific area might prefer a talk to be more advanced as most of the audience is likely to know the basic concepts.</p>
</li>
<li><p><strong>Explain the relevance of your talk:</strong> A talk submission form is meant to convince the conference reviewers to accept your talk and the best way to do this is by telling them why the audience would love your talk.<br />  Your description or abstract should explain why this talk will be beneficial to the audience by focusing on the key takeaways and what the audience will learn.</p>
</li>
<li><p><strong>Spell check:</strong> Before submitting a talk, always review your submission for grammatical errors or spelling mistakes. I use the <a target="_blank" href="https://grammarly.go2cloud.org/SH3o5">Grammarly</a> extension on my laptop to identify any potential issues in my write-up.<br />  You can reach out to any speakers you know or ask someone to help review your proposal before submitting it to a conference.<br />  Some conferences also offer help for first-time speakers through mentorship programs or workshops on writing abstracts. Make sure to take advantage of these opportunities if they are available.</p>
</li>
<li><p><strong>Apply, apply, apply</strong>: The best way to get your talk accepted at a conference is to apply to as many conferences as possible. Once you have an idea, <a target="_blank" href="https://blog.jemimaabu.com/how-to-find-conferences-to-speak-at">find all the conferences</a> where the talk would be relevant and submit it to each one.<br />  Always try to submit more than one talk to a conference (I usually submit 3 to 5). This increases your chances of having one or more of them selected as some conferences prefer having one speaker give multiple talks to cut down on the cost of logistics.<br />  It also helps to diversify the types of talks you submit by including ones suited for intermediate and beginner audiences, or by submitting both a session and a workshop proposal.</p>
</li>
</ul>
<h2 id="heading-conclusion">Conclusion</h2>
<p>Hopefully, this article has provided helpful insights on starting your journey as a conference speaker. Thanks for reading and good luck with your talk submissions!</p>
<hr />
<p>This article is part of an ongoing series so if you have any other questions about speaking at conferences, you can leave a comment below or send me a message on <a target="_blank" href="https://twitter.com/jemimaabu">Twitter</a>.</p>
<p>All graphics used are from <a target="_blank" href="https://www.canva.com/">Canva</a>.</p>
]]></content:encoded></item><item><title><![CDATA[How To Improve Your SEO Ranking]]></title><description><![CDATA[Fun fact: if you Google "front end developer Nigeria", my portfolio website shows up on the first page. Why? SEO.
Search Engine Optimization (SEO) is how you make sure your website shows up in relevant search results. Ranking refers to a website's po...]]></description><link>https://blog.jemimaabu.com/how-to-improve-your-seo-ranking</link><guid isPermaLink="true">https://blog.jemimaabu.com/how-to-improve-your-seo-ranking</guid><category><![CDATA[SEO]]></category><category><![CDATA[portfolio]]></category><dc:creator><![CDATA[Jemima Abu]]></dc:creator><pubDate>Fri, 07 May 2021 08:01:13 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1620301956528/p7ZP_ud1E.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>Fun fact: if you Google "<a target="_blank" href="https://www.google.com/search?q=front+end+developer+nigeria">front end developer Nigeria</a>", my portfolio website shows up on the first page. Why? SEO.</p>
<p>Search Engine Optimization (SEO) is how you make sure your website shows up in relevant search results. Ranking refers to a website's position in those search results.</p>
<p>In this article, we'll be discussing how to optimize your website or brand to help you get a high ranking on Google and other search engines. We'll also discuss how to improve the online presence for yourself or your brand.</p>
<p>I'd like to preface this by saying that I'm not an SEO expert so I'll just be sharing the tips that worked for me.</p>
<p>Here's what we'll be covering in this article:</p>
<ol>
<li><a class="post-section-overview" href="#what-is-seo">What is SEO?</a> </li>
<li><a class="post-section-overview" href="#importance-of-seo">Why is SEO important?</a></li>
<li><a class="post-section-overview" href="#tips-for-improving-seo">How do I improve my website's SEO ranking?</a></li>
<li><a class="post-section-overview" href="#tips-for-creating-an-online-presence">How do I improve my personal/my brand's online presence?</a></li>
<li><a class="post-section-overview" href="#testing-for-seo">How do I test the SEO of my websites?</a></li>
</ol>
<h2 id="what-is-seo">What is SEO</h2>
<blockquote>
<p>Search engine optimization is the process of improving the quality and quantity of website traffic to a website or a web page from search engines.</p>
</blockquote>
<p>In other words, SEO is ensuring that your website receives relevant and continuous traffic through organic search results. Organic search results refer to results that show up in search terms due to relevancy as opposed to paid search results.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1620314285788/UJLW7bGn5.png" alt="organic versus paid search results" /></p>
<p>(Another fun fact: studies have shown that people <a target="_blank" href="https://www.oakcitytechnology.com/websites/do-people-actually-click-on-paid-ads-in-google/#:~:text=However%2C%20to%20answer%20this%20directly,organic%20results%20over%20paid%20ads.">tend to click more on organic search results than ads</a>.)</p>
<p>SEO doesn't just affect your websites; it affects the visibility of anything you post online such as articles, products or videos. </p>
<p>The world of Search Engine Optimization is so vast and complex that companies have dedicated <a target="_blank" href="https://digitalmarketinginstitute.com/blog/what-does-an-seo-manager-do">SEO managers</a>  just to ensure the visibility of their brand.</p>
<h2 id="importance-of-seo">Importance of SEO</h2>
<p>The major importance of SEO is to increase the traffic and visibility of your website and content. High rankings are the best way to generate traffic to your site.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1620306812288/1Ien9sL8G.png" alt="organic traffic.png" /></p>
<p>The above image is a screenshot of the traffic for <a target="_blank" href="https://jemimaabu.medium.com/how-to-write-a-cv-in-nigeria-d05d8981dbda">an article I wrote in 2017</a>. The article has had over 32,000 views since then and over 50% of that traffic was from organic search results on Google. </p>
<p>Having a high ranking means that you no longer have to constantly market your products and content and instead you attract your target audience naturally.</p>
<p>Think of it this way: when was the last time you went to the second page of Google? The higher your search engine ranking, the more visible your site is.</p>
<h2 id="tips-for-improving-seo">Tips for Improving SEO</h2>
<p>There are <a target="_blank" href="https://backlinko.com/google-ranking-factors">multiple ranking factors</a> that can affect the SEO of your site but I'll be focusing on the factors I prioritized in order to optimize my website: </p>
<ol>
<li>Accessibility</li>
<li>Metadata</li>
<li>Relevant content and links</li>
<li>Performance and page speed</li>
<li>Traffic and backlinks</li>
<li>Domain name and extensions</li>
</ol>
<h3 id="accessibility">Accessibility</h3>
<p>Accessibility means creating websites that can be used by everyone. Ideally, you should build your websites to be as accessible as possible. Not only is it considered best practice but it also <a target="_blank" href="https://www.dbswebsite.com/blog/accessibility-seo-a-perfect-fit/">directly affects your site SEO</a>. 
Accessibility also improves user experience which is another important contributor to SEO.</p>
<p>Here are some quick tips to focus on to ensure your personal website meets base accessibility needs:</p>
<ul>
<li><strong>Use the lang attribute in your HTML tag.</strong> The lang attribute is what allows browsers to translate websites from one language to another so be sure to write your HTML tags appropriately e.g. <code>&lt;html lang="en"&gt;</code> </li>
<li><strong>Use alt tags for images that require description.</strong> Alt tags describe the content of an image for screen readers and should be included as attributes in image tags <code>&lt;img alt="" src="" /&gt;</code>. Alt tags are also <a target="_blank" href="https://www.bigcommerce.com/ecommerce-answers/what-is-an-alt-tag-and-how-does-it-impact-seo/">used by search engines</a> to return relevant image results.</li>
<li><strong>Use <a target="_blank" href="https://www.w3schools.com/html/html5_semantic_elements.asp#:~:text=What%20are%20Semantic%20Elements%3F,%3E%20%2D%20Clearly%20defines%20its%20content.">semantic elements</a> for creating layouts in HTML.</strong> Semantic elements such as <code>nav</code>, <code>footer</code> and <code>header</code> provide a description of the content to screenreaders.</li>
<li><strong>Use heading tags in the appropriate order.</strong> The rule of thumb is to have only one H1 tag on a page, serving as the title and let the headings follow in sequential order i.e. a <code>h4</code> tag shouldn't appear before a <code>h2</code> tag in the same section.</li>
<li><strong>Ensure that the colors on your site have adequate contrast.</strong> Adequate contrast between the colors of the text and the background allows for easily readable content.</li>
<li><strong>Use descriptive links.</strong> Links on your website should describe the page they lead to e.g. <code>Read More About Me</code> rather than generic statements like <code>Click Here</code>.</li>
</ul>
<p>You can view my slides on <a target="_blank" href="https://www.jemimaabu.com/talks/web-accessibility.html">Getting Started With Web Accessibility</a>, watch my video on <a target="_blank" href="https://www.youtube.com/watch?v=QSXdTuD9Rak">Understanding Accessibility as A Concept</a> or check out the <a target="_blank" href="https://romeo.elsevier.com/accessibility_checklist/downloads/developer_designer_checklist.pdf">Accessibility Checklist by Jay Nemchik</a>  for more information and resources.</p>
<h3 id="metadata">Metadata</h3>
<p>Metadata is what provides information about your website to search engines.
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1620319671614/QoI5VUTaZ.png" alt="metadata of jemimaabu.com" />
The two major tags for SEO are:</p>
<ul>
<li><strong>Title.</strong> The <code>&lt;title&gt;</code> tag is included in HTML and it contains the name of your webpage. It's a good idea to include your main keyword in your title tag.<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Jemima Abu: Front End Developer<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span>
</code></pre>The title tag should be changed on each page to describe the content of the new page e.g. <code>&lt;title&gt;About Me | Jemima Abu&lt;/title&gt;</code>. A descriptive title also improves the ranking for articles and videos. Your title should be between 50 to 60 characters to avoid search engines <a target="_blank" href="https://unamo.com/blog/seo/title-tags-best-practices#:~:text=Length,cut%20off%20in%20the%20middle.">truncating or ignoring it</a>.</li>
<li><strong>Description.</strong> The description tag describes the content of your webpage and it's also placed in the  tag of your HTML page. It should explain the main goal of your webpage and use more keywords related to the message you're trying to pass along.<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"description"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"Jemima Abu is a self-taught 
  Front End Developer and school-taught Systems Engineer 
  from Lagos, Nigeria."</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span>
</code></pre>Another tag to mention is the <strong>keywords</strong> tag. It was previously used by search engines to match relevant keywords but most search engines have announced that <a target="_blank" href="https://www.reliablesoft.net/meta-keywords/#relevancy">they no longer consider the meta keyword tag</a> in a site's ranking. Using too many keywords can also have a negative impact on your site's SEO as this could be seen as spam by some search engines.</li>
</ul>
<h3 id="relevant-content-and-links">Relevant content and links</h3>
<p>Providing relevant content on your website increases your website's SEO ranking. Here are some tips on increasing the relevancy of content for articles:</p>
<ul>
<li><strong>Use action words in your title</strong> and words related to search terms. An article with a title like "Introduction to Web Accessibility" or "How to Make Your Website Accessible" would be placed higher than an article simply titled "Web Accessibility".</li>
<li><strong>Use proper formatting</strong> by separating sections with titles and emphasizing important content using bold text or italics.</li>
<li><strong>Include links to related resources</strong> in your article. <a target="_blank" href="https://blog.alexa.com/outbound-links-content-marketing/#:~:text=Linking%20to%20high%2Dquality%20external,SEO%20health%20of%20a%20page.">Using outbound links</a>  can lend to the credibility of your content.</li>
<li><strong>Avoid plagiarism.</strong> If Google detects the same content in two search results, they'll remove whichever they consider least relevant. If you're trying to upload your content to multiple sites, be sure to include a <a target="_blank" href="https://moz.com/learn/seo/canonicalization#:~:text=A%20canonical%20tag%20(aka%20%22rel,content%20appearing%20on%20multiple%20URLs.">canonical link</a>.</li>
<li><strong>Provide a summary</strong> of your content in list tags. Google tends to place summarized content at the top of search results.</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1620328037087/JvnUEnn4b.png" alt="list-content.png" /></p>
<p>Using relevant keywords in the link of your article also helps with ranking. If I write an article titled "How To Make Your Website Accessible", a good link would be <code>myblog/make-your-website-accessible</code>.</p>
<h3 id="performance-and-page-speed">Performance and Page Speed</h3>
<p>Performance and page speed are factors used by Google to determine a website's ranking. If your page loads slowly or has poor performance, it <a target="_blank" href="https://moz.com/learn/seo/page-speed">directly affects your SEO</a>.</p>
<p>Here are some tips on improving how fast your page loads:</p>
<ul>
<li><strong>Reduce images to the maximum rendered size.</strong> If an image on a page only gets rendered at a maximum width of 450px then the width of the actual image shouldn't be more than 450px. You can also <a target="_blank" href="https://kinsta.com/blog/optimize-images-for-web/">optimize your images</a>  to reduce their data size.</li>
<li><strong>Avoid using embeds.</strong> When using embeds, the time it takes them to load is also calculated with your page speed. I was able to increase my page speed score from 63 to 91 by getting rid of the YouTube embeds on my landing page.</li>
<li><strong>Reduce loading animation.</strong> Google measures how long it takes for content to appear on your page so if you're animating content into the page, the time for animation might affect your score. Try to keep all loading animation under 1s.</li>
<li><strong>Minify your files.</strong> You can reduce the size of your CSS and JavaScript files by minifying them. This means removing all spaces, new lines and other unnecessary characters. You can use the <a target="_blank" href="https://www.minifier.org/">Minifier tool</a> to do this manually.</li>
</ul>
<p>You can use <a target="_blank" href="https://developers.google.com/speed/pagespeed/insights/">Page Speed Insights</a> on your website to get more information on how to improve the performance and decrease loading time.
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1620368314251/S_FwG6bF38.png" alt="page-speed.png" /></p>
<h3 id="traffic-and-backlinks">Traffic and backlinks</h3>
<p>If your site gets a lot of traffic from other sources, it increases its ranking as it seems more relevant. A good way of generating traffic and improving your SEO is using backlinks.</p>
<p>Backlinks are the inbound links for your site. They're created when other websites link to your site. Backlinks are basically votes from other sites vouching for the credibility of your site. A backlink from a highly ranked site also boosts your ranking.</p>
<p>Google uses backlinks as one of their <a target="_blank" href="https://searchengineland.com/now-know-googles-top-three-search-ranking-factors-245882">top three ranking factors</a>.</p>
<p>You can create backlinks by including a link to your site whenever you appear online. If you publish an article for an online magazine or you appear in an interview, including a link to your website on those sources create more backlinks for your site.</p>
<p>You can <a target="_blank" href="https://backlinko.com/hub/seo/backlinks">read this article</a> to learn more about backlinks.</p>
<p>You can also use the <a target="_blank" href="https://www.freecodecamp.org/news/how-and-why-to-get-started-with-google-analytics-153dc35b7812/">Google Analytics tool</a> to detect how much traffic your website generates and which sources you acquire traffic from.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1620374277843/VWKfy8lOZ.png" alt="traffic analytics of jemimaabu.com" /></p>
<h3 id="domain-name-and-extensions">Domain name and extensions</h3>
<p>Having a domain name tailored to your website is a good way of increasing traffic to your site as it lends credibility. Your domain name should perfectly represent your website e.g. use your full name for a personal site or the main keyword for a business site. </p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1620327165313/GWQpXgKCi.png" alt="domain-ranking.png" /></p>
<p>The domain extension also matters. <code>.com</code> domains are the most popular domain extension and <a target="_blank" href="https://novanym.com/pages/why-com-is-the-best-domain-extension-for-seo#:~:text=with%20suffixes%20like%20.-,net%20and%20.,they%20have%20become%20more%20popular.">tend to have higher rankings</a>. For location-targeted rankings, you can use country code domains e.g. <code>.co.uk</code> or <code>.eu</code>.</p>
<p>You can <a target="_blank" href="https://shrsl.com/2vhty">buy a domain name on Namecheap</a> (this is an affiliate link so I get a commission if you decide to buy with this link).</p>
<h2 id="tips-for-creating-an-online-presence">Tips for creating an online presence</h2>
<p>Having an online presence refers to having all results related to you or your brand show up when you Google yourself.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1620304200851/G4fCWnvPi.png" alt="Search results for jemima abu on google" /></p>
<p>While all the tips for improving SEO can also be applied to increasing your search results, here are some specific actions you can take to ensure a solid online presence:</p>
<ul>
<li><strong>Have a personal website.</strong> If you're trying to secure your brand's online presence, invest in a <a target="_blank" href="https://shrsl.com/2vhty"><code>.com</code>  domain name</a> and make sure all your other online accounts (Twitter, Instagram, LinkedIn) point to that site. 
You can read my article <a target="_blank" href="https://www.freecodecamp.org/news/beginners-guide-to-creating-a-portfolio-website/">How To Create a Portfolio Website</a>  for a step-by-step guide to creating your personal website.</li>
<li><strong>Direct traffic to your site.</strong> Aside from organic traffic, you can also take advantage of your social media presence to direct traffic to your personal site. If you have a viral tweet or video, be sure to include a link to your site somewhere.</li>
<li><strong>Create accounts on larger platforms.</strong> If you're going to create a personal blog, you might generate more traffic by creating it on a site like Hashnode, Medium or Dev.to than a lesser-known platform.</li>
<li><strong>Use the same username across all accounts and URLs.</strong> If you have a name you want to be known by online, make sure that's the name that you use for every account and in the same format.</li>
<li><strong>Use common keywords on all your accounts.</strong>
I use pretty much the same tagline for all my accounts (<em>"Self-taught Front End Developer, School Taught Systems Engineer"</em>) so this helps link them together.</li>
</ul>
<h2 id="testing-for-seo">Testing for SEO</h2>
<p>You can test your website's SEO by running the <a target="_blank" href="https://developers.google.com/web/tools/lighthouse">Lighthouse audit tool</a> in Google Chrome. The audit returns a score based on how optimized your site is for search engines. The passed audits section contains the features of your website that improves SEO.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1620332180712/5h46gp8Hj.png" alt="seo-audit.png" /></p>
<p>You can also use an <a target="_blank" href="https://www.seobility.net/en/seocheck/?px=2&amp;a_aid=6094eba07a470">online SEO checker</a> to get a more detailed report on the SEO of your website.</p>
<h2 id="conclusion">Conclusion</h2>
<p>And that's how you can get your website to the first page of search results for relevant keywords.</p>
<p>If you're interested in more in-depth research on the workings of SEO, you can check out these articles and tutorials:</p>
<ol>
<li><a target="_blank" href="https://searchengineland.com/guide/what-is-seo">What is Search Engine Optimization?</a> </li>
<li><a target="_blank" href="https://optinmonster.com/seo-ranking-factors/">10 Crucial SEO Ranking Factors You Need To Know</a> </li>
<li><a target="_blank" href="https://click.linksynergy.com/deeplink?id=i1rVYzXnF5I&amp;mid=40328&amp;murl=https%3A%2F%2Fwww.coursera.org%2Fspecializations%2Fseo">SEO Specialization</a>  - University of California, Coursera</li>
</ol>
<p>You can also read my article on <a target="_blank" href="https://blog.jemimaabu.com/how-i-built-my-perfect-score-portfolio-website">How I Built My Perfect Portfolio Website</a> for more insight into the process of creating my website.</p>
<p>If you found this article useful and you'd like to contribute to my content creation, feel free to <a target="_blank" href="https://www.buymeacoffee.com/jemimaabu">buy me a coffee</a> 😊</p>
<p>If you have any questions or comments, leave a message below or reach out on <a target="_blank" href="https://twitter.com/jemimaabu">Twitter</a>.</p>
]]></content:encoded></item><item><title><![CDATA[How I Built My Perfect Score Portfolio Website]]></title><description><![CDATA[I recently published the fourth version of my portfolio jemimaabu.com. 
With this version, I tried to make the code as performant and accessible as possible but still have an interactive site, so this article will be about how I managed to achieve th...]]></description><link>https://blog.jemimaabu.com/how-i-built-my-perfect-score-portfolio-website</link><guid isPermaLink="true">https://blog.jemimaabu.com/how-i-built-my-perfect-score-portfolio-website</guid><category><![CDATA[portfolio]]></category><category><![CDATA[performance]]></category><category><![CDATA[Accessibility]]></category><category><![CDATA[JavaScript]]></category><dc:creator><![CDATA[Jemima Abu]]></dc:creator><pubDate>Wed, 31 Mar 2021 09:07:58 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1617171297725/RkDNULg0s.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>I recently published the fourth version of my portfolio <a target="_blank" href="https://www.jemimaabu.com">jemimaabu.com</a>. 
With this version, I tried to make the code as performant and accessible as possible but still have an interactive site, so this article will be about how I managed to achieve that. </p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617172505481/lkQXyI6sI.gif" alt="portfolio-designs-tiny.gif" /></p>
<p>These are the following features in my portfolio that we'll be discussing:</p>
<ul>
<li>Clear content and easy to navigate.</li>
<li>Built with HTML, CSS and JavaScript (no frameworks or libraries)</li>
<li>Works on JS-disabled browsers</li>
<li>Vanilla JavaScript implementation of smart navigation and animate on scroll</li>
<li>6 different color themes</li>
<li>Perfect scores on accessibility, performance, best practices and SEO</li>
</ul>
<p>I shared the portfolio on Twitter once I was done and it <a target="_blank" href="https://twitter.com/Jemimaabu/status/1376830168334012422">got a lot of feedback</a> and I also got messages from people asking about certain features so I decided to write this article to explain these features.</p>
<h2 id="1-creating-the-design">1. Creating The Design</h2>
<p>It took me about a month to come up with the design for my portfolio, mostly because I designed the entire thing on a trial and error basis - swapping out different layouts and colors till I liked how it looked. </p>
<p>I also went around the internet looking at other people's portfolios for inspiration and using features that I liked.</p>
<p>These are some of the portfolios that I really liked and why:</p>
<ul>
<li><a target="_blank" href="https://www.usecue.com/">Usecue</a> - perfect lighthouse score, call to action buttons for next and previous item</li>
<li><a target="_blank" href="https://rfarn.com/">RFarn</a> - large text loading screen, slightly fixed header on scroll to offset the <a target="_blank" href="https://developers.google.com/web/updates/2016/12/url-bar-resizing">URL bar resizing</a> </li>
<li><a target="_blank" href="http://webinsane.com/">Webinsane</a> - brown color theme, the font 'Inter'</li>
<li><a target="_blank" href="https://www.havardbrynjulfsen.com/">Håvard Brynjulfsen</a> - vaporwave theme </li>
</ul>
<h3 id="clear-content">Clear content</h3>
<p>A major reason I wanted to revamp my portfolio from <a target="_blank" href="https://v3.jemimaabu.com">the previous version</a> was to have all my content on my site without overloading the landing page.</p>
<p>I had different pages for each content and chose designs I felt would best present the information:</p>
<ul>
<li><a target="_blank" href="https://www.jemimaabu.com/about">About page</a> - splitting sections into expandable details to reduce text appearance on page</li>
<li><a target="_blank" href="https://www.jemimaabu.com/articles">Articles page</a>  - simple article title and description display according to how most blog posts are displayed</li>
<li><a target="_blank" href="https://www.jemimaabu.com/talks">Talks page</a> - information set in responsive table (the table converts to a list on smaller screens)</li>
<li><a target="_blank" href="https://www.jemimaabu.com/projects">Projects page</a>  - projects set in slider carousel so I could include as many projects without having a terribly long page.</li>
</ul>
<p>I also included selected parts of each content on the <a target="_blank" href="https://www.jemimaabu.com">landing page</a>  along with a call-to-action button leading to each page to encourage user navigation.</p>
<h2 id="2-writing-the-code">2. Writing the code</h2>
<p>Ever since the <a target="_blank" href="http://v2.jemimaabu.com">second version</a> of my portfolio, which was easily the least performant version of all versions, I've always built my portfolios from scratch with HTML and CSS, using as little JavaScript dependency as possible.</p>
<p>I also try to avoid using frameworks or libraries so I can optimize my code for performance and accessibility.</p>
<h3 id="works-on-non-js-browsers">Works on non-JS browsers</h3>
<p>A lot of interactions on the page are actually done with CSS or semantic HTML and not JavaScript, such as:</p>
<ul>
<li>filter on Articles and <a target="_blank" href="https://www.jemimaabu.com/presskit">Presskit</a> pages - <a target="_blank" href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-filtering-component-in-pure-css--cms-33111">How to Build a Filtering Component in Pure CSS</a></li>
<li>slider carousel on Projects page - <a target="_blank" href="https://css-tricks.com/css-only-carousel/">CSS-Only Carousel</a></li>
<li>expandable content on About page using HTML details - <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details">The Details disclosure element</a> </li>
</ul>
<p>The benefit of this is that the site isn't dependent on JavaScript for displaying information so it still works without it.</p>
<h3 id="vanilla-js-implementation">Vanilla JS Implementation</h3>
<p>I used JavaScript to handle minor interactions on the page such as elements fading in on scroll, the smart navigation and handling multiple color themes. I also wrote two articles on how I did this:</p>
<ul>
<li><a target="_blank" href="https://webdesign.tutsplus.com/tutorials/animate-on-scroll-with-javascript--cms-36671">How to Animate on Scroll With Vanilla JavaScript</a> on Envato Tuts+ and,</li>
<li><a target="_blank" href="https://css-tricks.com/creating-a-smart-navbar-with-vanilla-javascript">Creating a Smart Navbar With Vanilla JavaScript</a> on CSS-Tricks</li>
</ul>
<p>In order to ensure that the content wasn't dependent on being displayed with JavaScript, I only implemented the effects on the elements once the JavaScript had loaded. For example, for the <code>scroll-in</code> element, my JavaScript code looked like this:</p>
<pre><code>scrollElements.forEach(<span class="hljs-function"><span class="hljs-params">(el)</span> =&gt;</span> {
  el.classList.add(<span class="hljs-string">'js-opacity'</span>);
})
</code></pre><p>Then I handled styling by targeting only the classes with the <code>js-opacity</code> attached.</p>
<pre><code><span class="hljs-selector-class">.scroll-in</span><span class="hljs-selector-class">.js-opacity</span> {
  <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>;
}
</code></pre><p>This way the elements are only hidden if the script has actually loaded and since the landing page wasn't too heavy or making multiple calls, the script loads almost immediately.</p>
<h3 id="how-to-implement-multiple-color-themes">How to implement multiple color themes</h3>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617174865543/E4WTP3Udi.png" alt="color-schemes.png" />
This was definitely the most fun feature to implement. </p>
<p>The <a target="_blank" href="https://jemimaabu.github.io">first version</a>  of my portfolio has a dark/light theme switch but I wanted something more interesting this time so I thought, why have two colors when you can have six. </p>
<p>I implemented the multiple color theme feature using vanilla JavaScript and CSS.
The best part is, thanks to the implementation, I could have gone on to have as many color themes as I wanted.</p>
<p>This is the JavaScript code for handling theme switching: </p>
<pre><code><span class="hljs-keyword">const</span> setTheme = <span class="hljs-function">(<span class="hljs-params">className</span>) =&gt;</span> {
  <span class="hljs-keyword">var</span> root = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">'html'</span>)[<span class="hljs-number">0</span>];
  root.className = className;
}
</code></pre><p>All we need to do is assign a className to the root element depending on what's selected. 
Then the HTML looks like this:</p>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"setTheme('light')"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Set light theme"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"setTheme('dark')"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Set dark theme"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"setTheme('brown')"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Set brown theme"</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
...
</code></pre><p>And our CSS looks like this:</p>
<pre><code><span class="hljs-selector-pseudo">:root</span>,
<span class="hljs-selector-pseudo">:root</span><span class="hljs-selector-class">.light</span> {
  --<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#fafafa</span>;
  --text-<span class="hljs-attribute">color</span>: <span class="hljs-number">#000</span>;
  ...
}

<span class="hljs-selector-pseudo">:root</span><span class="hljs-selector-class">.dark</span> {
  --<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#0d1926</span>;
  --text-<span class="hljs-attribute">color</span>: <span class="hljs-number">#f7fafc</span>;
  ...
}

<span class="hljs-selector-pseudo">:root</span><span class="hljs-selector-class">.brown</span> {
  --<span class="hljs-attribute">background-color</span>: <span class="hljs-number">#eeeae2</span>;
  --text-<span class="hljs-attribute">color</span>: <span class="hljs-number">#120c07</span>;
  ...
}
...
</code></pre><p>Finally, make sure you only assign colors to each element according to the CSS variable.</p>
<pre><code><span class="hljs-selector-tag">body</span> {
  <span class="hljs-attribute">background-color</span>: <span class="hljs-built_in">var</span>(--background-color);
  <span class="hljs-attribute">color</span>: <span class="hljs-built_in">var</span>(--text-color);
}
</code></pre><p>An optional feature you can implement is setting a dark/light theme according to the user's system settings. We can do this using the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a> media query.
We just need to update our default root variables:</p>
<pre><code><span class="hljs-keyword">@media</span> (<span class="hljs-attribute">prefers-color-scheme:</span> dark) {
<span class="hljs-comment">/* set new default root to same colors in root.dark */</span>
  <span class="hljs-selector-pseudo">:root</span> {
    <span class="hljs-attribute">--background-color</span>: <span class="hljs-number">#0d1926</span>;
    <span class="hljs-attribute">--text-color</span>: <span class="hljs-number">#f7fafc</span>;
  }
}
</code></pre><p>That's pretty much the gist of the logic. You can see the complete implementation at my <a target="_blank" href="https://github.com/jemimaabu/portfolio">portfolio repository</a>.</p>
<h3 id="3-deploying-the-site">3. Deploying the site</h3>
<p>Once I had all my content and logic implemented, I added the repository to my Netlify site and connected it to my custom site. You can read about how I set up continuous deployment from Netlify (and more options for hosting and deploying your site) in the third article building my portfolio inspired: <a target="_blank" href="https://www.freecodecamp.org/news/beginners-guide-to-creating-a-portfolio-website/">How to Create a Portfolio Website – A Beginner Developer's Guide</a> </p>
<h3 id="how-to-get-a-perfect-lighthouse-score-on-your-website">How To Get A Perfect Lighthouse Score on Your Website</h3>
<p>You can test the scores of your website using the Lighthouse audit tool in DevTools. </p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617177408161/6Bed8iGXH.png" alt="lighthouse-tab.png" /></p>
<p>It's a good idea to run Lighthouse in incognito mode to prevent extensions interfering with your score. It returns a report giving you a score according to how well you meet certain metrics and also tells you things you can fix. </p>
<p>You can easily increase your score by taking note of the returned items and making those fixes accordingly.</p>
<p>Here's how I ensured high scores in each category:</p>
<h4 id="accessibility">Accessibility</h4>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617181012954/F1UPY9OFt.png" alt="accessibility.png" />
It's always best to ensure your site is as accessible as possible and not just for score-related reasons. You can watch my video on <a target="_blank" href="https://www.youtube.com/watch?v=QSXdTuD9Rak">Understanding Accessibility As A Concept</a> for more information on that.</p>
<p>These are some of the things I do to ensure accessibility on my site:</p>
<ol>
<li>Using an <a target="_blank" href="https://romeo.elsevier.com/accessibility_checklist/downloads/developer_designer_checklist.pdf">accessibility checklist</a> </li>
<li>Writing code with the <a target="_blank" href="https://marketplace.visualstudio.com/items?itemName=MaxvanderSchee.web-accessibility#overview">Web Accessibility extension</a> in VSCode</li>
<li>Using the appropriate aria-roles for custom elements</li>
<li>Manually testing the site after building (tabbing through and checking that all elements get visible focus, mouse operable elements work with keyboards etc).</li>
</ol>
<p>You can also use the <a target="_blank" href="https://wave.webaim.org/">WAVE tool</a> for further testing after building.</p>
<h4 id="perfomance">Perfomance</h4>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617181021769/Z9hZWTNBM.png" alt="perfomance.png" />
This definitely gave me the most headache but here's how I got a perfect performance score:</p>
<ul>
<li>Compressed all images and included an explicit width and height. 
This is one of the most common contributing factors to decreased performance scores mostly cause it's a lot of stress to implement. I resized all my images to be the maximum width they'd be rendered on the page, around 720px and set explicit width and height and made them responsive with CSS.</li>
</ul>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">""</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"720"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"340"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>&gt;</span>
</code></pre><pre><code><span class="hljs-selector-tag">img</span> {
  <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
  <span class="hljs-attribute">height</span>: auto;
}
</code></pre><p>I was able to do this because I served static images saved on my local folder so if you're calling your images from a CDN or somewhere else, look into the options they offer for rendering responsive images.</p>
<ul>
<li>I split all my code according to the pages calling them to make sure I wouldn't be loading unnecessary stylesheets or scripts. 
My site was very CSS heavy so instead of calling one large CSS file, I split the files according to the pages that needed them.</li>
</ul>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617173904496/3zFDaN8kJ.png" alt="file-structure.png" /></p>
<ul>
<li><p>Reduced page load animation.
Chrome detects how long it takes for text to appear on your page and the timing can affect your performance score so try to keep your loading animation under 1s (one second). </p>
</li>
<li><p>imported font using font-face instead of link. For some reason, Google Chrome marks downloading fonts from Google fonts as <a target="_blank" href="https://web.dev/render-blocking-resources/?utm_source=lighthouse&amp;utm_medium=devtools">a render-blocking resource</a> which is odd to me cause like aren't y'all part of the same company? You fix it, what do you want me to do (I'm kidding lol. Mostly).</p>
</li>
</ul>
<h4 id="seo-and-best-practices">SEO and Best Practices</h4>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617181043331/NBQNRfTGI.png" alt="best-practices.png" />
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617181048609/F6vW3gElu.png" alt="seo.png" /></p>
<p>SEO and Best Practices usually go hand in hand with performance and accessibility so as long as you have good scores there, they'll follow right along.
The audit report tells you what needs to be updated so you can always fix any errors that pop up.</p>
<hr />
<h2 id="conclusion">Conclusion</h2>
<p>And that's how I build my perfect score portfolio website. Maybe you're wondering why does it matter to have a perfect score on your website?</p>
<p>For bragging rights, obvy. Also, you get fireworks if you have a perfect score so that's always nice.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617181220899/LCQ1LsKjw.gif" alt="lighthouse-fireworks.gif" /></p>
<p>Seriously though, it's not the perfect score that matters, it's just the idea behind it. </p>
<p>You should always be building your sites to be as accessible and performant as possible, according to best practices and the SEO is an added benefit. Lighthouse scores are just a way of measuring how well you've done that.</p>
<p>Thanks for reading :) If you found this article helpful, let me know in the comments or on <a target="_blank" href="https://www.twitter.com/jemimaabu">Twitter</a>.</p>
]]></content:encoded></item><item><title><![CDATA[How To Find Conferences To Speak At]]></title><description><![CDATA[When I first tried to get into conference speaking, I had no idea how to get started. I'd attended some meetups in the past so I knew the speakers had to come from somewhere, I just didn't know where that somewhere was.
If you're reading this article...]]></description><link>https://blog.jemimaabu.com/how-to-find-conferences-to-speak-at</link><guid isPermaLink="true">https://blog.jemimaabu.com/how-to-find-conferences-to-speak-at</guid><category><![CDATA[conference]]></category><category><![CDATA[General Advice]]></category><category><![CDATA[Beginner Developers]]></category><dc:creator><![CDATA[Jemima Abu]]></dc:creator><pubDate>Sun, 31 Jan 2021 09:06:09 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1612048795553/d9-adATFe.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<p>When I first tried to get into conference speaking, I had no idea how to get started. I'd attended some meetups in the past so I knew the speakers had to come from <em>somewhere</em>, I just didn't know where that somewhere was.</p>
<p>If you're reading this article, then you're probably wondering the same. No worries. Somehow, I managed to figure it out and now I'm writing this so you can have a bit more knowledge than I did when I started out.</p>
<p>I'll be addressing questions I've received in the past regarding how to find conferences to speak at, namely:</p>
<ul>
<li><p>What conferences can I speak at?</p>
</li>
<li><p>How do I get my first speaking engagement?</p>
</li>
<li><p>How do I speak at international conferences?</p>
</li>
<li><p>How do I get invited to speak at conferences?</p>
</li>
</ul>
<hr />
<h2 id="heading-what-conferences-can-i-speak-at">What conferences can I speak at?</h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1612054795819/4mOEi4K5A.png" alt="research.png" /></p>
<p>Ideally, you should speak at conferences that overlap with your areas of interest or expertise. Other than that, there's no particular prerequisite for speaking at conferences.</p>
<p>Some conferences may ask if you have any previous speaking experience or for links to your previous talks but that shouldn't be a deterrent. You also don't need to have a strong grasp of technology or frameworks to speak at conferences, there are a lot of non-technical and soft skill related tracks which accept talks ranging from career skills to personal development.</p>
<p>If you have something you want to share, there's a space for it.</p>
<p>A great way to decide the types of conferences you want to speak at is to look up existing conferences and determine if the content appeals to you. If you're a designer, is there a particular design conference or meetup whose previous events seem interesting to you? You could also look at existing speakers in your field and see the types of conferences they've spoken at in the past.</p>
<h2 id="heading-how-do-i-get-my-first-speaking-engagement">How do I get my first speaking engagement?</h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1612054578018/eQPCDvL21.png" alt="start.png" /></p>
<p>Speaking at local meetups is a great introduction into public speaking. The first events I spoke at were local meetups where I reached out to the organizers or I happened to be invited to.</p>
<p>You can look up meetups you've attended or heard about and reach out to the organizers. I usually send them a message on Twitter or an email specifying my interest and what topic I would be interested in presenting.</p>
<p>I'd recommend this method for first-time speakers as local meetups tend to have a smaller number of people in attendance and are usually more casual than major conferences so it might be a bit less nerve-wracking. You can also find smaller meetups on meetup.com or eventbrite.com and contact the organizers directly.</p>
<p>Whenever reaching out to people, it helps to clearly state your interest and the topic you'd like to present. You can send an email or DM in the structure:</p>
<blockquote>
<p>Hello, I came across this group online and I'd be really interested in presenting a topic at the next meetup. These are the details of my proposed topic:</p>
<p>{Talk Title}</p>
<p>{Talk Description}</p>
<p>{Target audience and why you think the talk would be good for the meetup}.</p>
<p>{Other notes for the talk e.g. proposed duration or technical requirements}</p>
<p>Looking forward to hearing back from you,</p>
<p>Best regards.</p>
</blockquote>
<p>You could also include your bio and social media links.</p>
<h2 id="heading-how-do-i-speak-at-international-conferences">How do I speak at international conferences?</h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1612054647968/BFlNKyH7D.png" alt="speaking.png" /></p>
<p>For larger conferences, there are aggregator sites that list major conferences accepting speaker applications. These are the sites I use:</p>
<ul>
<li><p><a target="_blank" href="https://sessionize.com/app/speaker/discover">sessionize.com</a></p>
</li>
<li><p><a target="_blank" href="https://www.papercall.io/events">papercall.io</a></p>
</li>
<li><p><a target="_blank" href="https://www.confs.tech/cfp">confs.tech</a></p>
</li>
<li><p><a target="_blank" href="https://cfp.watch/">cfp.watch</a></p>
</li>
</ul>
<p>Most of these sites have newsletters you can subscribe to so you can get Call For Papers sent directly to your email.</p>
<p>Twitter is another great resource for finding conferences to speak at across the world. I use search terms like "<a target="_blank" href="https://twitter.com/search?q=%23cfp&amp;src=typed_query&amp;f=live">#CFP</a>", "<a target="_blank" href="https://twitter.com/search?q=call%20for%20papers&amp;src=typed_query&amp;f=live">call for papers</a>", "<a target="_blank" href="https://twitter.com/search?q=call%20for%20presenters&amp;src=typed_query&amp;f=live">call for presenters</a>" or "<a target="_blank" href="https://twitter.com/search?q=submit%20a%20talk&amp;f=live">submit a talk</a>" .</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1611088640507/uz2zno_eB.png" alt="Screenshot 2021-01-19 at 20.37.05.png" /></p>
<p>There are also tweetbot accounts like <a target="_blank" href="https://twitter.com/mozTechCFPs">@mozTechCFPs</a> and <a target="_blank" href="https://twitter.com/TechDailyCFP">@TechDailyCFP</a> that work in the same way as aggregator sites.</p>
<p>Finally, you can look up conferences on Google using similar search terms as the ones for Twitter.</p>
<h2 id="heading-how-do-i-get-invited-to-speak-at-conferences">How do I get invited to speak at conferences?</h2>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1612055016250/x297c60jp.png" alt="invited.png" /></p>
<p>Word of mouth is usually the fastest method. If a conference organizer sees you speak at a previous conference and they think you'd be a good fit for their conference, they'll be sure to reach out to you.</p>
<p>Conferences sometimes have recurring events and they tend to extend invitations to past speakers.</p>
<p>It also helps to publicly build a speaker's profile - have a page online where you list your previous talks, slides and videos and indicate your availability to speak.</p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>I hope you found this article helpful (if you did, feel free to let me know). Thanks for reading :)</p>
<hr />
<p>This article is part of an ongoing series so if you have any other questions about speaking at conferences, you can leave them in a comment or send me a message on <a target="_blank" href="https://www.twitter.com/jemimaabu">Twitter</a>.</p>
]]></content:encoded></item></channel></rss>