<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: 𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</title>
    <description>The latest articles on DEV Community by 𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝 (@nataliedeweerd).</description>
    <link>https://dev.to/nataliedeweerd</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F158999%2F4d56b44c-b55e-4fa3-8f85-77331779f44b.png</url>
      <title>DEV Community: 𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</title>
      <link>https://dev.to/nataliedeweerd</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/nataliedeweerd"/>
    <language>en</language>
    <item>
      <title>My AI Predictions for 2025 including; hyper-personalisation, sustainability, and legislation.</title>
      <dc:creator>𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</dc:creator>
      <pubDate>Mon, 06 Jan 2025 17:36:59 +0000</pubDate>
      <link>https://dev.to/nataliedeweerd/my-ai-predictions-for-2025-b90</link>
      <guid>https://dev.to/nataliedeweerd/my-ai-predictions-for-2025-b90</guid>
      <description>&lt;p&gt;&lt;em&gt;This is my submission for the &lt;a href="https://dev.to/challenges/newyear"&gt;2025 New Year Writing challenge&lt;/a&gt;: Predicting 2025.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;AI exploded in 2024, with ChatGPT and Claude becoming staple tools for many in my industry. Generative AI saw greater integration with existing software, supporting creatives and developers alike by it embedding itself seamlessly within existing processes.&lt;/p&gt;

&lt;p&gt;AI is certainly here to stay, and here are my predictions on its continued evolution as we head into 2025:&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Hyper-personalisation in marketing will become the norm&lt;/strong&gt;&lt;br&gt;
AI will enhance personalisation by leveraging real-time data analysis across multiple points, predictive analytics, and advanced customer segmentation to deliver highly tailored experiences. &lt;/p&gt;

&lt;p&gt;This will allow for shopping and browsing experiences that feel tailored to you. Expect to see product recommendations that match your preferences perfectly, or discounts and promotions which appeal to your buying habits or emotional state. &lt;/p&gt;

&lt;p&gt;This hyper-personalisation could even follow you across multiple touch-points; from online, to in-store, to at the bar.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;AI will impact Sustainability Pledges&lt;/strong&gt;&lt;br&gt;
AI's environmental impact will begin to be reflected in ESG evaluations. As AI becomes even more embedded into business operations, its energy demands and resource-intensive hardware production will draw attention from sustainability accreditations, such as EcoVadis or ISO 14001.&lt;/p&gt;

&lt;p&gt;Businesses may soon be required to disclose AI energy use and hardware sourcing (if appropriate), making partnering with green data centers even more vital. &lt;/p&gt;

&lt;p&gt;As an example of how much power AI requires, a single response from ChatGPT comsumes approximately 0.0029 kWh of electricity - which is still 10 times the energy required for a typical Google search. By comparison, an image generated by ChatGPT can require up to 0.05kWh - an increase of 1624%!&lt;/p&gt;

&lt;p&gt;There's nothing wrong with embracing AI as a tool, but we need to be mindful of its use and get better at prompting so we achieve our desired result as early as possible.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;Greater legislation will come into effect&lt;/strong&gt;&lt;br&gt;
With the &lt;a href="https://commission.europa.eu/news/ai-act-enters-force-2024-08-01_en" rel="noopener noreferrer"&gt;European Artificial Intelligence Act&lt;/a&gt; entering into force on 1st August 2024, stricter regulations and broader use cases are inevitable. &lt;/p&gt;

&lt;p&gt;For example, take AI influencer &lt;a href="https://www.instagram.com/fit_aitana/" rel="noopener noreferrer"&gt;Aitana&lt;/a&gt; who has gained a lot of popularity in recent months. There are currently no regulations to prevent her from taking on brand endorsements, despite her being an AI and therefore incapable of sharing her genuine experience. You could argue that her creators are sharing their experiences through her persona, but when it comes to &lt;a href="https://www.instagram.com/fit_aitana/p/C-LIMaaM0sb/?img_index=1" rel="noopener noreferrer"&gt;skincare&lt;/a&gt;, or sports nutrition, authenticity and safety are so important. At best it's simply unethical, at worst, it's downright dangerous. &lt;/p&gt;

&lt;p&gt;As generative AI gets better and we begin to see more AI-generated video content, distinguishing AI from reality will become impossible. To tackle this, we must demand greater control and legislation, particularly with brand partnerships.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>newyearchallenge</category>
      <category>future</category>
      <category>ai</category>
    </item>
    <item>
      <title>The Power of WebP</title>
      <dc:creator>𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</dc:creator>
      <pubDate>Sat, 09 Jul 2022 23:01:05 +0000</pubDate>
      <link>https://dev.to/nataliedeweerd/the-power-of-webp-2dlc</link>
      <guid>https://dev.to/nataliedeweerd/the-power-of-webp-2dlc</guid>
      <description>&lt;h1&gt;
  
  
  What is WebP?
&lt;/h1&gt;

&lt;p&gt;WebP is an image format for the web created by Google. It provides superior compression which outputs high quality images on average 25% smaller than other formats.&lt;/p&gt;

&lt;h1&gt;
  
  
  How to save as WebP
&lt;/h1&gt;

&lt;p&gt;You can save straight to WebP in Photoshop by going to File &amp;gt; Saves as... &amp;gt; and selecting WebP from the file type dropdown.&lt;/p&gt;

&lt;p&gt;If you don't have Photoshop, you can use an online converter such as &lt;a href="https://cloudconvert.com/"&gt;cloudconvert.com&lt;/a&gt;.&lt;/p&gt;

&lt;h1&gt;
  
  
  Real Example
&lt;/h1&gt;

&lt;p&gt;I've recently relaunched my wallpaper design site &lt;a href="https://www.divine-designs.net/"&gt;divine-designs.net&lt;/a&gt;. The homepage is very image heavy, and whilst the site was loading very quickly in my local environment, when I pushed it to production it slowed to a crawl. &lt;/p&gt;

&lt;p&gt;I'm running on a shared hosting server, so I knew it was always going to be slow (hence the decision to go purely frontend), however at almost 10 seconds loading time it was &lt;em&gt;too&lt;/em&gt; slow. &lt;/p&gt;

&lt;p&gt;I could just move it onto a different hosting provider, maybe even host it on AWS, however that doesn't solve the crux of the problem. So I needed to review and optimise my code, and as it's an image heavy site, I decided to start there.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The homepage was loading 53MB of images.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That number needed to come down. I was loading the wallpapers at their full size, in JPG format. So I opened photoshop, resaved them all at only 1000px wide (which is the largest the thumbnails sit at) and also saved them as WebP.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;This dropped the image load to 1.68MB!&lt;/strong&gt; That's a reduction of 96.84%!!&lt;/p&gt;

&lt;p&gt;The site now loads in around 1 second.&lt;/p&gt;

&lt;h1&gt;
  
  
  Why is this important?
&lt;/h1&gt;

&lt;p&gt;Aside from the obvious of making your website load quicker, it also reduces the amount of CO2 required to load your website and with the communications industry predicted to use 20% of all the world’s electricity by 2025, as developer's we all have a duty to keep our CO2 as low as possible.&lt;/p&gt;

&lt;p&gt;Currently divine-designs.net produces only &lt;a href="https://www.websitecarbon.com/website/divine-designs-net/"&gt;0.41g of CO2 per page load&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>modernweb</category>
      <category>webp</category>
      <category>frontend</category>
      <category>ecofriendly</category>
    </item>
    <item>
      <title>How to automatically add dark mode to your site in 3 lines</title>
      <dc:creator>𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</dc:creator>
      <pubDate>Sat, 16 Oct 2021 23:32:59 +0000</pubDate>
      <link>https://dev.to/nataliedeweerd/how-to-automatically-add-dark-mode-to-your-site-in-3-lines-j40</link>
      <guid>https://dev.to/nataliedeweerd/how-to-automatically-add-dark-mode-to-your-site-in-3-lines-j40</guid>
      <description>&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="k"&gt;@media&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;prefers-color-scheme&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;dark&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nl"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="nb"&gt;invert&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="m"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The result won't be perfect (in fact, it'll probably look downright awful), but it gives you a great starting point to then pull out individual colours and rebuild the CSS how you want!&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;@media (prefers-color-scheme:dark){ ... }&lt;/code&gt; is all you need to automatically trigger dark mode styling on your site if the user has set their browser to dark mode.&lt;/p&gt;

&lt;p&gt;This is how I created the new dark mode on my blog. Started with the &lt;code&gt;filter:invert(1);&lt;/code&gt; trick, picked out the colours manually in the inspector that worked, and slowly tweaked the rest. You can see the final result here: &lt;a href="https://flipsphere.net/"&gt;https://flipsphere.net/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>css</category>
      <category>darkmode</category>
      <category>quicktips</category>
    </item>
    <item>
      <title>What I learned about communication from getting my husband's car fixed - and how that relates to web dev!</title>
      <dc:creator>𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</dc:creator>
      <pubDate>Sun, 08 Nov 2020 21:44:49 +0000</pubDate>
      <link>https://dev.to/nataliedeweerd/what-i-learned-about-communication-from-getting-my-husband-s-car-fixed-and-how-that-relates-to-web-dev-4kbi</link>
      <guid>https://dev.to/nataliedeweerd/what-i-learned-about-communication-from-getting-my-husband-s-car-fixed-and-how-that-relates-to-web-dev-4kbi</guid>
      <description>&lt;p&gt;&lt;sup&gt;Within the article below I've censored the name of the company &lt;em&gt;just in case&lt;/em&gt;. To clarify, I highly recommend them, but I don't want to cause any issues. I also want to note that all of this took place during the height of the UK's spring lockdown.&lt;/sup&gt;&lt;/p&gt;

&lt;p&gt;My husband and I have never had any major car issues before. Tire and brake replacements, sure, but never anything that required any major work. As such, we didn't have a local trusted mechanic we could call upon, and certainly not a sports car specialist.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;So - what happened?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In short - the engine broke. &lt;/p&gt;

&lt;p&gt;We went for a drive and heard something snap, followed by a lot of rattling. So we called for a rescue, got the car home, and began our research, eventually finding &lt;em&gt;Company A&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;It's not a company we'd used before, but we'd heard good reviews about them, and they were quite well known in the country for tuned cars... however as with anything potentially expensive, I was anxious.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;em&gt;Are they actually any good?&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;Is this too expensive to fix?&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;What if we never see the car again?!&lt;/em&gt;&lt;/li&gt;
&lt;li&gt;&lt;em&gt;Is this just the start of everything going wrong?&lt;/em&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A lot of these questions can go through your clients minds as well, whether they're looking to get a brand new website, or seeking a rescue/repair job from you; especially if they've been burned in the past. &lt;/p&gt;

&lt;h2&gt;
  
  
  Communication lessons
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1) Be clear on the start date.
&lt;/h3&gt;

&lt;p&gt;Unfortunately, due to the lockdown, &lt;em&gt;Company A&lt;/em&gt; weren't taking phone calls... so whilst we'd confirmed they could look at the car, we still needed to arrange a collection. &lt;/p&gt;

&lt;p&gt;They weren't the quickest in their email responses... sometimes waiting several days to reply, but eventually we confirmed the fee for the car collection, and the date it would be collected. &lt;/p&gt;

&lt;p&gt;As that day drew closer and closer, we had no further communication with them regarding the collection. We didn't know what time they would arrive, or who was due to collect it (was it a third party?).&lt;/p&gt;

&lt;p&gt;On the day of collection a man showed up with a trailer on the back of his car. We realised then it was MD of the company come to collect! I was a little relieved that it wasn't a third party, but still took photos of the car on the trailer, just in case!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lesson: If you're due to collect anything from your client, whether it be files, or access details, be clear about what time you'll be arriving and confirm that the details &lt;em&gt;work&lt;/em&gt; as soon as possible! Don't wait for them to chase on something so simple.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  2) Keep your client up to date with progress.
&lt;/h3&gt;

&lt;p&gt;After the car was collected, it took a few days for them to confirm the car had arrived at their garage okay. During that time we had no idea if there'd been an issue, or an accident! It caused us unnecessary stress when all that was required was a quick 5 minute email to let us know the car had arrived safely.&lt;/p&gt;

&lt;p&gt;Likewise during their investigation into the issues surrounding the engine, we had to chase for updates. To be clear, we weren't chasing daily - we were aware that it was a big job to disassemble an engine and diagnose the problem - but a short weekly update would've been nice, even if it the answer was "sorry, we've been busy, but we're still sorting through what's salvageable".&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lesson: Keep communication open and clear with your client. Don't leave it too long between correspondence. Even if your update is small, send it. They'll be at ease knowing progress is being made. It's important that you show your client they haven't been forgotten.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  3) Be honest.
&lt;/h3&gt;

&lt;p&gt;I always stick to honesty being the best policy; especially during this time of covid. Whilst customers and clients are more forgiving right now, they are also inherently more anxious as they worry about what the future holds for their business. Being honest and communicative will put them at ease.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Company A&lt;/em&gt; were good with this. Sometimes they would email just to say little progress had been made because someone had left the company, or their lead mechanic had taken ill. It was frustrating as a customer, but put me at ease knowing I hadn't been forgotten. It was just some unfortunate setbacks the company hadn't foreseen. We can't know everything when we start a project, there are always unknown unknowns.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lesson: Working with a client is more than just getting a job finished. It's about building a relationship so they remember you when they need more work doing. You want to leave a good personal impression as well as a work impression. So, if you've had a personal set back which means your work isn't as far along as you'd like, be honest and tell your client.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  4) Make payment super clear.
&lt;/h3&gt;

&lt;p&gt;To be fair, &lt;em&gt;Company A&lt;/em&gt; did this well. They were clear from the start that PayPal was the easiest way to pay them, and even suggested we set up PayPal Credit to finance the work as they didn't offer financing options themselves.&lt;/p&gt;

&lt;p&gt;The invoices we received were all broken down clearly, leaving no ambiguity about what we were paying for.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lesson: Make sure your invoices are clear, and written so that a human would understand! If needs be, include a separate column which provides a little detail about what an item is; for example, SSL - Securing and encrypting the connection to the website.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  5) Have a thorough handover.
&lt;/h3&gt;

&lt;p&gt;When we finally got the call that the car was ready to be collected, my husband was obviously ecstatic! We arranged for collection the next day.&lt;/p&gt;

&lt;p&gt;When we arrived the mechanic gave us a thorough handover, letting us know he'd run the engine in - so we could push it if we wanted - as well as advising us to change to a different oil if we had any track-days planned for summer. They also provided us an oil sample pot, so we could send it off for analysis after 2000 miles, just to double check there wasn't anything else untoward in the engine.&lt;/p&gt;

&lt;p&gt;A follow-up email was also sent which included a service plan and details of the ECU mapping.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lesson: Don't shirk on the handover. Create a user guide if needed, or just sit and walk your client through the website and how to use the CMS. This comes back to building a good relationship! Don't leave your client scared to touch the website in case they break it.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Takeaways
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;Build trust at every step. Your customer will likely be anxious (like I was).&lt;/li&gt;
&lt;li&gt;Be compassionate. If your customer appears over anxious and is emailing you every day, be patient. Send those replies even if they're starting to bug you. They may have been sold horror stories that you need to dissipate.&lt;/li&gt;
&lt;li&gt;Keep dialogue open. Don't leave it weeks without communication.&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>communication</category>
      <category>clients</category>
      <category>management</category>
    </item>
    <item>
      <title>What FTP software do you use?</title>
      <dc:creator>𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</dc:creator>
      <pubDate>Sat, 04 Jul 2020 22:51:43 +0000</pubDate>
      <link>https://dev.to/nataliedeweerd/what-ftp-software-do-you-use-p6m</link>
      <guid>https://dev.to/nataliedeweerd/what-ftp-software-do-you-use-p6m</guid>
      <description>&lt;p&gt;So I've just re-installed my PC, and before I download Filezilla, I'm interested to know what FTP software other people use :)&lt;/p&gt;

</description>
      <category>discuss</category>
    </item>
    <item>
      <title>How to use the dev.to API!</title>
      <dc:creator>𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</dc:creator>
      <pubDate>Sun, 07 Jun 2020 12:58:06 +0000</pubDate>
      <link>https://dev.to/nataliedeweerd/how-to-use-the-dev-to-api-5gl3</link>
      <guid>https://dev.to/nataliedeweerd/how-to-use-the-dev-to-api-5gl3</guid>
      <description>&lt;h1&gt;
  
  
  Why?
&lt;/h1&gt;

&lt;p&gt;I use dev.to as my main dev blogging area now, but I want to show-off my blogs on my portfolio! So we're going to create a simple list of the latest 3 blog articles which link back to the dev.to site. For this tutorial I'll be showing how this can be achieved in PHP.&lt;/p&gt;

&lt;h1&gt;
  
  
  Let's go!
&lt;/h1&gt;

&lt;p&gt;First of all, the below is a great starting point to understand the dev.to API and all of the possible endpoints.&lt;/p&gt;


&lt;div class="ltag__link"&gt;
  &lt;a href="/alfredosalzillo" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F113263%2F4b0452f3-4a80-4cf9-a053-cf24f283472e.jpg" alt="alfredosalzillo"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="/alfredosalzillo/the-state-of-devto-v0-api-1o2" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;The state of dev.to v0 api&lt;/h2&gt;
      &lt;h3&gt;Alfredo Salzillo ・ Mar 25 '19&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#api&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#devto&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#discuss&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#rest&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


&lt;p&gt;We're going to be using this endpoint: &lt;a href="https://dev.to/api/articles?username=nataliedeweerd"&gt;https://dev.to/api/articles?username=nataliedeweerd&lt;/a&gt; which generates a JSON object with the author's latest 30 articles. To get your personal endpoint, change the &lt;code&gt;nataliedeweerd&lt;/code&gt; username to your own.&lt;/p&gt;

&lt;p&gt;So how do we get this data into our website? In PHP we can use something called &lt;code&gt;cURL&lt;/code&gt;. &lt;code&gt;cURL&lt;/code&gt; (&lt;strong&gt;c&lt;/strong&gt;lient &lt;strong&gt;URL&lt;/strong&gt;) is a PHP library which allows you to make HTTP requests. So you can call a URL in your code and get a HTML response from it.&lt;/p&gt;

&lt;p&gt;The below code shows a basic curl function which gets us our data:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$curl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;curl_init&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nb"&gt;curl_setopt_array&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$curl&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;array&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="no"&gt;CURLOPT_URL&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s2"&gt;"https://dev.to/api/articles?username=nataliedeweerd"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="no"&gt;CURLOPT_RETURNTRANSFER&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="no"&gt;CURLOPT_TIMEOUT&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="no"&gt;CURLOPT_HTTP_VERSION&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="no"&gt;CURL_HTTP_VERSION_1_1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="no"&gt;CURLOPT_CUSTOMREQUEST&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="s2"&gt;"GET"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="no"&gt;CURLOPT_HTTPHEADER&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;array&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="s2"&gt;"cache-control: no-cache"&lt;/span&gt;
  &lt;span class="p"&gt;),&lt;/span&gt;
&lt;span class="p"&gt;));&lt;/span&gt;

&lt;span class="nv"&gt;$response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;curl_exec&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$curl&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nv"&gt;$err&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;curl_error&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$curl&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="nb"&gt;curl_close&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$curl&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;We need to decode this data before we can effectively use it however. &lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;

&lt;span class="nv"&gt;$response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;json_decode&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$response&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; 


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;This decodes the json object into a much more usable array! All we need to do now is loop through the array, and print out the results.&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;

&lt;span class="k"&gt;foreach&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$response&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nv"&gt;$key&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nv"&gt;$article&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt;

    &lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s1"&gt;'
        &amp;lt;a href="'&lt;/span&gt;&lt;span class="mf"&gt;.&lt;/span&gt;&lt;span class="nv"&gt;$article&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'url'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="mf"&gt;.&lt;/span&gt;&lt;span class="s1"&gt;'" class="blog__article"&amp;gt;
            &amp;lt;h2&amp;gt;'&lt;/span&gt;&lt;span class="mf"&gt;.&lt;/span&gt;&lt;span class="nv"&gt;$article&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'title'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="mf"&gt;.&lt;/span&gt;&lt;span class="s1"&gt;'&amp;lt;/h2&amp;gt;
            &amp;lt;div class="blog__description"&amp;gt;'&lt;/span&gt;&lt;span class="mf"&gt;.&lt;/span&gt;&lt;span class="nv"&gt;$article&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'description'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="mf"&gt;.&lt;/span&gt;&lt;span class="s1"&gt;'&amp;lt;/div&amp;gt;
            &amp;lt;div class="blog__readmore"&amp;gt;Read More&amp;lt;/div&amp;gt;
        &amp;lt;/a&amp;gt;
    '&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$key&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;){&lt;/span&gt; &lt;span class="k"&gt;break&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="p"&gt;}&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Because the array key's are numeric, we can use these to determine how many articles we've printed. If we've printed 3 articles the key will be 2 (array's start from 0 don't forget), so we break out of the foreach.&lt;/p&gt;

&lt;p&gt;If you want to have a closer look at what keys the array is printing out, you can use the below code before the foreach loop:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight php"&gt;&lt;code&gt;

&lt;span class="k"&gt;echo&lt;/span&gt; &lt;span class="s1"&gt;'&amp;lt;pre&amp;gt;'&lt;/span&gt;&lt;span class="mf"&gt;.&lt;/span&gt;&lt;span class="nb"&gt;print_r&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nv"&gt;$response&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="kc"&gt;true&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="mf"&gt;.&lt;/span&gt;&lt;span class="s1"&gt;'&amp;lt;/pre&amp;gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;This will show you everything the decoded JSON is returning, allowing you to include your article's images, or canonical links, or tags!&lt;/p&gt;

&lt;p&gt;And that's it! We just need to apply a bit of CSS and our dev.to articles are printing out wherever we want!&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Let me know if you have any more questions below.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>webdev</category>
      <category>php</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>Why you should never ignore the alt attribute</title>
      <dc:creator>𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</dc:creator>
      <pubDate>Sat, 18 Apr 2020 22:30:36 +0000</pubDate>
      <link>https://dev.to/nataliedeweerd/why-you-should-never-ignore-the-alt-attribute-2gh0</link>
      <guid>https://dev.to/nataliedeweerd/why-you-should-never-ignore-the-alt-attribute-2gh0</guid>
      <description>&lt;p&gt;The alt attribute was first introduced in HTML 2 (1995), so it’s been with us for an awfully long time. This little three-letter attribute is so important; not only does it help with Search Engine Optimisation (SEO), but it also improves the accessibility of your site.&lt;/p&gt;

&lt;h1&gt;
  
  
  What is the Alt Attribute?
&lt;/h1&gt;

&lt;p&gt;The alt attribute is a bit of code which gets added to your image to allow screen readers and search engine crawlers to understand what the image is. Below is an example of how you would add the alt attribute to your HTML.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;img&lt;/span&gt; &lt;span class="na"&gt;src=&lt;/span&gt;&lt;span class="s"&gt;"image_url.jpg"&lt;/span&gt; &lt;span class="na"&gt;alt=&lt;/span&gt;&lt;span class="s"&gt;"Alt attribute text goes here"&lt;/span&gt; &lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;Alt attributes are an alternative to an image and the text should reflect the nature of the image; for example, an error icon should state “Error!” rather than a literal description of the image (e.g. “Red circle with a white X inside”).&lt;/p&gt;

&lt;p&gt;Context is also incredibly important when thinking about the text to add to your alt attribute. The detail you add needs to correspond to the content of the rest of your page.&lt;/p&gt;

&lt;p&gt;If you don’t include your alt attribute then screen readers may spend an eternity reading out the URL for an image. Decorative images may not need any text within their alt attribute, so an empty alt attribute should be used rather than excluding it completely.&lt;/p&gt;

&lt;h1&gt;
  
  
  Alt attributes and accessibility
&lt;/h1&gt;

&lt;p&gt;Accessibility on any site is vital, and alt attributes help by offering a readable text version of an image. If a user has to use a screen reader (due to visual impairment) then they will have the alt text read to them. This means that the text you put into your alt attribute needs to make sense within the context of your page.&lt;/p&gt;

&lt;h1&gt;
  
  
  How the alt attribute aids your SEO
&lt;/h1&gt;

&lt;p&gt;Bots can’t read an image; however, they can read alt text. As long as you choose a logical file name, and sensible text for your alt attribute, it will help improve your SEO as it gives the search engine crawler a broader picture of the content on your page, and website as a whole.&lt;/p&gt;

&lt;p&gt;Be aware, that if you copy text from the same page and paste it into the alt attribute, bots crawling your site may think that you’re purposefully spamming the phrase and thus it can be detrimental to your overall SEO score.&lt;/p&gt;

&lt;h2&gt;
  
  
  Good Examples
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--kiV0VoQK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/thqwm5ufudrv1972rnh7.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--kiV0VoQK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/thqwm5ufudrv1972rnh7.jpg" alt='A good example of an Alt Attribute - "A single potted plant on a windowsill"'&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;A single potted plant on a windowsill&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;This is clear and concise, and tells us exactly what is happening in the picture. By including the fact that the potted plant is on its own, alleviates any ambiguity as to how many plants there are.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aphb-SGB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/p992tbrdyxrrddn0frh5.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aphb-SGB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/p992tbrdyxrrddn0frh5.jpg" alt='A good example of an Alt Attribute - "A refreshing glass of water with sliced lemon and mint"'&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;A refreshing glass of water with sliced lemon and mint&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Whilst including the fact that the drink is refreshing is subjective, it may be useful if the site is about a person’s well-being, or mental health. Only include adjectives if it makes sense within the context of your site.&lt;/p&gt;

&lt;h2&gt;
  
  
  Bad Examples
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SvEoCZvA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/bentthrps407ha9q2pia.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SvEoCZvA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/bentthrps407ha9q2pia.jpg" alt='A bad example of an Alt Attribute - "Boat"'&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;Boat&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;There just isn’t enough information here about the image - plus, I'd argue it's a ship, not a boat. Depending on the context of the site, the location and type of ship may be important. If they’re not, include detail about the appearance of the ship, whether it’s decrepit, etc. For example, a better alt attribute here could be "A white cruise ship named Seaborn Quest".&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9b5kEblf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/cez0xxgoysveqtoea1kc.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9b5kEblf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/cez0xxgoysveqtoea1kc.jpg" alt='A bad example of an Alt attribute - "The word RESOLUTIONS spelt out in Scrabble letters. The R is worth 1 point, the E is worth 1 point, the S is worth 1 point, the O is worth 1 point, the L is worth 2 points, the U is worth 3 points, the T is worth 3 points, the I is worth 1 point, the N is worth 1 point. In total the word scores 15 points."'&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The word RESOLUTIONS spelt out in Scrabble letters. The R is worth 1 point, the E is worth 1 point, the S is worth 1 point, the O is worth 1 point, the L is worth 2 points, the U is worth 3 points, the T is worth 3 points, the I is worth 1 point, the N is worth 1 point. In total the word scores 15 points.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;This is just unnecessarily long... Alt text this long belongs in a caption, rather than an alt attribute – especially if the information is important. Ideally, just the first sentence should be used. It’s important not to make your alt text too long. It needs to be as succinct and descriptive as possible.&lt;/p&gt;

&lt;h1&gt;
  
  
  In Summary
&lt;/h1&gt;

&lt;p&gt;&lt;em&gt;Don't forget the alt attribute!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Even if its left empty, those with screen readers will thank you! And if you are adding text, make sure it's relevant to the content.&lt;/p&gt;

&lt;h5&gt;
  
  
  Photo Credits
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://www.pexels.com/photo/green-potted-plant-beside-window-3686293/"&gt;A single potted plant on a windowsill&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.pexels.com/photo/water-drink-fresh-lemons-3303/"&gt;A refreshing glass of water with sliced lemon and mine&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.pexels.com/photo/white-cruise-ship-on-blue-body-of-water-during-daytime-144237/"&gt;A white cruise ship named Seaborn Quest&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.pexels.com/photo/scrabble-resolutions-3237/"&gt;The word RESOLUTIONS spelt out in Scrabble letters&lt;/a&gt;&lt;/p&gt;

</description>
      <category>seo</category>
      <category>a11y</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Rubber duck debugging doesn't need to involve a duck!</title>
      <dc:creator>𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</dc:creator>
      <pubDate>Wed, 30 Oct 2019 11:09:55 +0000</pubDate>
      <link>https://dev.to/nataliedeweerd/rubber-duck-debugging-doesn-t-need-to-involve-a-duck-47i</link>
      <guid>https://dev.to/nataliedeweerd/rubber-duck-debugging-doesn-t-need-to-involve-a-duck-47i</guid>
      <description>&lt;h6&gt;
  
  
  Cover image credit: &lt;a href="https://www.pexels.com/photo/yellow-duckies-in-line-on-a-concrete-floor-106144/" rel="noopener noreferrer"&gt;https://www.pexels.com/photo/yellow-duckies-in-line-on-a-concrete-floor-106144/&lt;/a&gt;
&lt;/h6&gt;

&lt;h1&gt;
  
  
  What is Rubber Duck Debugging?
&lt;/h1&gt;

&lt;p&gt;Rubber Duck Debugging (or Rubber Ducking) is explaining to an inanimate object what your problem is, and in doing so finding a solution. Typically rubber ducks are used, but any inanimate object will do; my current rubber duck is a giraffe called Stumps!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fdctaq7eihh7e08gillll.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fthepracticaldev.s3.amazonaws.com%2Fi%2Fdctaq7eihh7e08gillll.JPG" alt="A good rubber duck doesn't have to be a duck!"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h1&gt;
  
  
  How to Rubber Duck Debug:
&lt;/h1&gt;

&lt;ol&gt;
&lt;li&gt;You get suck in your coding and you can't find the solution.&lt;/li&gt;
&lt;li&gt;Take a deep breath to calm yourself.&lt;/li&gt;
&lt;li&gt;Find a duck, giraffe, monkey, or other inanimate object with a face.&lt;/li&gt;
&lt;li&gt;Explain to your "duck" what the problem is.&lt;/li&gt;
&lt;li&gt;As you're talking your "duck" will implant the answer into your brain! Eureka!&lt;/li&gt;
&lt;/ol&gt;

&lt;h1&gt;
  
  
  How does it work?
&lt;/h1&gt;

&lt;p&gt;Rubber Duck Debugging works because it forces you to break down a complex problem into smaller chunks as you explain it to your duck. For example:&lt;/p&gt;

&lt;p&gt;Dev: "Duck, why isn't my email sending?"&lt;br&gt;
Duck: "..."&lt;br&gt;
Dev: "The email is generated automatically when someone completes the contact form on my website, and it should then send to the site admin..."&lt;br&gt;
Duck: "..."&lt;br&gt;
Dev: "OMG DUCK I'M USING THE WRONG VARIABLE!"&lt;/p&gt;

&lt;p&gt;Sometimes we developers can't see the forest for the trees. We're in so deep into our code that we can no longer &lt;em&gt;see&lt;/em&gt; the problem, regardless of how obvious it may be. Breaking down the problem section by section, line by line, can help us realise where the issue is.&lt;/p&gt;

&lt;p&gt;Speaking aloud also helps us hear our thoughts differently. The very act of hearing yourself explain the problem is often all you need to bring forth a solution. How often have you found yourself just asking "why?" in front of your code and BAM - the solution hits you. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Discussion: What's your experience with rubber duck debugging? Do you find it helps you? Also, please show me your ducks!&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>debugging</category>
      <category>fun</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Why developers should embrace their creativity</title>
      <dc:creator>𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</dc:creator>
      <pubDate>Tue, 10 Sep 2019 14:14:21 +0000</pubDate>
      <link>https://dev.to/nataliedeweerd/why-developers-should-embrace-their-creativity-290g</link>
      <guid>https://dev.to/nataliedeweerd/why-developers-should-embrace-their-creativity-290g</guid>
      <description>&lt;p&gt;We often refer to artists or writers as being creative, but the actual definition of creativity is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"the ability to transcend traditional ideas, rules, patterns, relationships, or the like, and to create meaningful new ideas, forms, methods, interpretations" - &lt;a href="https://www.dictionary.com/browse/creativity"&gt;https://www.dictionary.com/browse/creativity&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So whilst artists and writers often gain their fame from writing something imaginative and unique, developers also exhibit this skill albeit in a slightly different way.&lt;/p&gt;

&lt;p&gt;Traditionally it was thought that the left side of the brain was for logical thinking, and that the right side was for creativity. This way of slicing the brain has been debunked - we all use our brain in equal measure, and it's down to other aspects of our personality that dictate how creative or logical we are. Therefore, developers can have a lot of creativity! Yet in their day-to-day lives they probably don't get to pursue creative outlets in traditional ways.&lt;/p&gt;

&lt;p&gt;If we consider only the nitty-gritty backend developers, even in this seemingly uncreative environment creativity can shine. Whilst the code itself may be completely logical, to be able to split the client's requirements into sections for development requires a certain level of imagination.&lt;/p&gt;

&lt;p&gt;Problem solving itself is a form of creativity as you're forced to discover new ideas to overcome obstacles. As developers, we can increase our inventiveness not only through artistic outlets, but also through problem solving. One simple task you could do is that every time you come across a problem, consider three different solutions - and don't limit yourself to only what you know either! Assume you'll be passing the work to someone else to develop and consider options which might, at the moment, terrify you as a developer.&lt;/p&gt;

&lt;p&gt;This not only improves your problem-solving skills, but also provides you with a bank of solutions which you can pull from when you need to; and hopefully in a few months you'll look back on your possible solutions and no longer be scared of them.&lt;/p&gt;

&lt;p&gt;Ultimately having a creative outlet is so much more than creating an incredible piece of art, or writing a symphony; it allows us to see the world in a different way. It sparks our imagination and opens our eyes to different ways of thinking.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Creativity is the source to improvise solutions to problems for dominating complex systems such as software development" - Daniel Graziotin&lt;/p&gt;

&lt;p&gt;"Imagination is more important than knowledge. For knowledge is limited, whereas imagination embraces the entire world, stimulating progress, giving birth to evolution." - Albert Einstein&lt;/p&gt;
&lt;/blockquote&gt;

</description>
      <category>discuss</category>
      <category>creativity</category>
    </item>
    <item>
      <title>How would you tackle this? Multiple screens showing the same user generated content in real time.</title>
      <dc:creator>𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</dc:creator>
      <pubDate>Fri, 26 Jul 2019 14:25:42 +0000</pubDate>
      <link>https://dev.to/nataliedeweerd/how-would-you-tackle-this-multiple-screens-showing-the-same-user-generated-content-in-real-time-1lh</link>
      <guid>https://dev.to/nataliedeweerd/how-would-you-tackle-this-multiple-screens-showing-the-same-user-generated-content-in-real-time-1lh</guid>
      <description>&lt;h1&gt;
  
  
  The Problem
&lt;/h1&gt;

&lt;p&gt;So I had a project recently in which there were two components: the "app", and the "big screen". Users take their photo with the app, apply some fun effects, and then send it to the big screen for the world to see! These "big screens" are always on.&lt;/p&gt;

&lt;p&gt;The "app" was being developed by another developer externally. They would be passing data to me to display on the big screen via a custom API. The screen itself was a super simple microsite which rotated through several images until it was interrupted by some user generated content passed to me from the app.&lt;/p&gt;

&lt;p&gt;The catch however was that there were multiple locations where these apps and screens could be installed. Wherever a photo was uploaded, it should appear on every screen. So if someone in Singapore took a photo, it would appear on the big screen in London &lt;em&gt;and&lt;/em&gt; Singapore.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Basic user journey&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;User takes photo using app.&lt;/li&gt;
&lt;li&gt;User adds some fun effects.&lt;/li&gt;
&lt;li&gt;User sends the photo to the big screen.&lt;/li&gt;
&lt;li&gt;Big screens all around the world display the photo.&lt;/li&gt;
&lt;li&gt;Photo then gets scheduled for deletion.&lt;/li&gt;
&lt;/ol&gt;

&lt;h1&gt;
  
  
  My Solution
&lt;/h1&gt;

&lt;p&gt;Initially I used just an AJAX call to get the next photograph stored in the database, then set it to "used" so it didn't appear again. However this meant that if Screen A grabbed it before Screen B, Screen B would never see it. Not ideal if the user is waiting in front of Screen B to see themselves! &lt;/p&gt;

&lt;p&gt;So I went down a server-side CRON route. Every 10 seconds, my CRON would run and set the status of any current image from 2, to 1; and set any unused image to 2. Below is the CRON script I used to run a command every 10 seconds.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight"&gt;&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="k"&gt;for &lt;/span&gt;i &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;1..5&lt;span class="o"&gt;}&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;do &lt;/span&gt;curl &lt;span class="nt"&gt;--silent&lt;/span&gt; &lt;span class="s2"&gt;"https://***/api/prep"&lt;/span&gt; &amp;amp;&amp;gt;/dev/null&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nb"&gt;sleep &lt;/span&gt;10&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="k"&gt;done&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;



&lt;p&gt;My table in my database looked like this:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;ID&lt;/th&gt;
&lt;th&gt;img&lt;/th&gt;
&lt;th&gt;status&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;td&gt;e1321fsdffdsfds.jpg&lt;/td&gt;
&lt;td&gt;1&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;td&gt;mpfhmnh80fhj823.jpg&lt;/td&gt;
&lt;td&gt;2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;3&lt;/td&gt;
&lt;td&gt;fdsfhjdskfu8h1u.jpg&lt;/td&gt;
&lt;td&gt;0&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;0 represents an image which hasn't been used yet, and is in essence queued.&lt;br&gt;
1 represents an image which has been used / shown on the big screen.&lt;br&gt;
2 represents the current image to be shown on the screen.&lt;/p&gt;

&lt;p&gt;My AJAX call would get the next image where &lt;code&gt;status = 2&lt;/code&gt; and display it. &lt;/p&gt;

&lt;p&gt;This works mostly; however there is a tiny chance of the image not appearing on a screen. My CRON runs every 10 seconds. My Javascript AJAX call runs every 10.15 seconds. There's the tiny possibility that an image a user takes does not appear on the screen they're looking at.&lt;/p&gt;

&lt;h1&gt;
  
  
  How would you have solved this problem?
&lt;/h1&gt;

&lt;p&gt;Very interested to hear how other developers may have tackled this problem! The solution I've presented above is a PHP based solution, with some AJAX/JS thrown in.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;I should add this project launched successfully. I'm just looking to open a discussion to discover what other technologies/methods could be used to complete this job.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>webdev</category>
    </item>
    <item>
      <title>There's never just one way of achieving something</title>
      <dc:creator>𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</dc:creator>
      <pubDate>Mon, 08 Jul 2019 21:07:55 +0000</pubDate>
      <link>https://dev.to/nataliedeweerd/there-s-never-just-one-way-of-achieving-something-3i6f</link>
      <guid>https://dev.to/nataliedeweerd/there-s-never-just-one-way-of-achieving-something-3i6f</guid>
      <description>&lt;p&gt;I just want to make a point to all the beginner's out there who may be feeling a little lost or overwhelmed. &lt;/p&gt;

&lt;p&gt;If you ever feel like you have to learn X, even though you prefer Y, stick with Y. Developing for the web is one of those beautiful things where anything can be achieved in a number of different ways. The most important thing is your passion. Don't lose it because you feel like you were forced to do something a certain way.&lt;/p&gt;

&lt;p&gt;This is especially true today with the sheer number of javascript frameworks; for example, if you're finding Angular a bit overwhelming, try Vue. &lt;/p&gt;

&lt;p&gt;Just take a look at the new dev.to offline page. Already there are three posts explaining how to achieve it using different tools!&lt;/p&gt;


&lt;div class="ltag__link"&gt;
  &lt;a href="/aspittel" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F38627%2F77a2a5e7-603e-41b4-afcc-f7aff468ae2f.jpg" alt="aspittel"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="/aspittel/how-to-create-the-drawing-interaction-on-dev-s-offline-page-1mbe" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;How to Create the Drawing Interaction on DEV's Offline Page&lt;/h2&gt;
      &lt;h3&gt;Ali Spittel ・ Jul 3 '19&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#art&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#showdev&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;



&lt;div class="ltag__link"&gt;
  &lt;a href="/sendilkumarn" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F181774%2Fe2b2cf59-8ff3-44f5-ae1d-c6ba29b633cb.jpg" alt="sendilkumarn"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="/sendilkumarn/create-dev-s-offline-page-with-rust-and-webassembly-21gn" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Create Dev's offline page with Rust and WebAssembly 🦄💡✨&lt;/h2&gt;
      &lt;h3&gt;Sendil Kumar ・ Jul 3 '19&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#rust&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#webassembly&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#showdev&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;



&lt;div class="ltag__link"&gt;
  &lt;a href="/azure" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__org__pic"&gt;
      &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Forganization%2Fprofile_image%2F512%2F64ce0b82-730d-4ca0-8359-2c21513a0063.jpg" alt="Microsoft Azure"&gt;
      &lt;div class="ltag__link__user__pic"&gt;
        &lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F31774%2Fc6e1cf69-a699-4071-a6e8-88ee7f8d7d67.jpg" alt=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="/azure/creating-dev-s-offline-page-using-blazor-29dl" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Creating DEV's offline page using Blazor&lt;/h2&gt;
      &lt;h3&gt;Aaron Powell for Microsoft Azure ・ Jul 5 '19&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
        &lt;span class="ltag__link__tag"&gt;#showdev&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#webassembly&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#javascript&lt;/span&gt;
        &lt;span class="ltag__link__tag"&gt;#dotnet&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;You do you. Keep your passion alive.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>discuss</category>
    </item>
    <item>
      <title>5 Quick Tips for Junior Level Interviews</title>
      <dc:creator>𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝</dc:creator>
      <pubDate>Tue, 25 Jun 2019 22:57:26 +0000</pubDate>
      <link>https://dev.to/nataliedeweerd/5-quick-tips-for-junior-level-interviews-6j6</link>
      <guid>https://dev.to/nataliedeweerd/5-quick-tips-for-junior-level-interviews-6j6</guid>
      <description>&lt;p&gt;Below are some things I look out for when interviewing junior developers. It's obviously not a comprehensive list, but hopefully gives you a little insight into what some interviewers are looking for.&lt;/p&gt;

&lt;p&gt;For what it's worth, I'm based in the UK. &lt;/p&gt;

&lt;h2&gt;
  
  
  1. Be honest about what you know.
&lt;/h2&gt;

&lt;p&gt;Don't lie in your interview. If you don't know something, be honest. If you're confident you could learn it quickly, say so, and explain why:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"I don't know any Javascript frameworks yet, but I have a good understanding of vanilla Javascript code so believe I could pick this up quickly".&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;By admitting you don't understand something, it adds credibility to everything you've said before.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Don't be afraid to show your passion.
&lt;/h2&gt;

&lt;p&gt;Tell me about your side projects! If you've made a side-project you're super proud of, but are a bit wary of sharing because it's geeky, tell me anyway! It doesn't matter if I understand the reference, it shows a passion for coding.&lt;/p&gt;

&lt;p&gt;If you're passionate I care less about what you know. I can teach you to code, but I can't teach you enthusiasm.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Ask questions.
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;An interview is a 2-way street.&lt;/strong&gt; I'm interviewing &lt;em&gt;you&lt;/em&gt; to see if you're the right candidate for the role just as much as you're interviewing &lt;em&gt;me and the company&lt;/em&gt; to make sure we're a good fit for you. If you accept the role you'll be spending nearly 8 hours a day inside the company's walls - make sure you're happy with that!&lt;/p&gt;

&lt;p&gt;Also ask about the team you'll be joining. How big is it? How supported will you be? Are there frequent social events?&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Ask more questions!
&lt;/h2&gt;

&lt;p&gt;Asking questions also rings true for any "take home" problem you might be given. If you don't understand the problem, ask; just don't ask how for the solution. For example, don't ask: &lt;em&gt;"How do I order an array?"&lt;/em&gt;, but rather &lt;em&gt;"Would you like the array ordered by name, or total?"&lt;/em&gt;).&lt;/p&gt;

&lt;p&gt;This shows a keenness to understand the problem correctly, and also shows off a little of your knowledge because you know arrays can be ordered in different ways.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Research the company.
&lt;/h2&gt;

&lt;p&gt;This is true for any level of interview to be fair, but for God's sake do your research before you go to an interview. I won't be trying to trip you up, or grilling you on what our last product launch was, but I'll know straight away if you haven't even looked at our website.&lt;/p&gt;

&lt;p&gt;One thing I like to do if I'm being interviewed is find one cool project the company has done recently and bring it up in my interview. &lt;/p&gt;

</description>
      <category>interview</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
