<?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: Ewe Lin Loo</title>
    <description>The latest articles on DEV Community by Ewe Lin Loo (@elloo).</description>
    <link>https://dev.to/elloo</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%2F30883%2Fe21545cc-22d5-4ab6-9d9d-64eb414bee01.jpeg</url>
      <title>DEV Community: Ewe Lin Loo</title>
      <link>https://dev.to/elloo</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/elloo"/>
    <language>en</language>
    <item>
      <title>My Unsplash Search Cloud</title>
      <dc:creator>Ewe Lin Loo</dc:creator>
      <pubDate>Sun, 05 Sep 2021 11:18:02 +0000</pubDate>
      <link>https://dev.to/elloo/my-unsplash-search-cloud-1gfi</link>
      <guid>https://dev.to/elloo/my-unsplash-search-cloud-1gfi</guid>
      <description>&lt;p&gt;First off: The &lt;a href="https://elloo.github.io/search-tag-cloud/"&gt;eye candy&lt;/a&gt;. And the &lt;a href="https://github.com/elloo/search-tag-cloud"&gt;technical stuff&lt;/a&gt;. I'm only going to go into the highlights of what I learned while working on this project. This post isn't intended to be a tutorial but hopefully it helps other beginners understand how to learn.&lt;/p&gt;

&lt;p&gt;This project truly tested my understanding of &lt;code&gt;async&lt;/code&gt; and &lt;code&gt;await&lt;/code&gt;. It relies on &lt;code&gt;fetch&lt;/code&gt; to interact with the API from &lt;a href="https://unsplash.com/"&gt;Unsplash&lt;/a&gt;. When I first looked at the &lt;a href="https://unsplash.com/documentation"&gt;API documentation&lt;/a&gt;, I was confused about how to use the official libraries and SDKs. Only after watching &lt;a href="https://www.youtube.com/watch?v=m_KtZDl7J1k"&gt;this&lt;/a&gt; helpful video, did I begin to understand how to use the API for my project. It showed me that I was looking at the wrong section of the documentation. It also showed me how to construct a URL from which I could &lt;code&gt;fetch&lt;/code&gt; photo data relating to the given search term.&lt;/p&gt;

&lt;p&gt;Another thing that I learned from looking at a professional developer's code is how to write and refactor code more elegantly. In particular, I learned to break things down into more readable variables and aim for separation of concerns when writing functions. &lt;/p&gt;

&lt;p&gt;This lesson was further reinforced by &lt;a href="https://css-tricks.com/create-a-tag-cloud-with-some-simple-css-and-even-simpler-javascript/"&gt;this&lt;/a&gt; tutorial - which I used to guide my construction of the tag cloud part of my project. From this tutorial, I learned a couple of nifty tricks:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment"&gt;Fragments&lt;/a&gt;, which are DOM node objects that are used to group elements. When the fragment is appended to the DOM tree, the fragment is replaced by all its children.&lt;/li&gt;
&lt;li&gt;Using a combination of &lt;code&gt;box-shadow&lt;/code&gt; and &lt;code&gt;transition&lt;/code&gt; in CSS creates an animated fill effect.&lt;/li&gt;
&lt;li&gt;Using a compare function with &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort"&gt;&lt;code&gt;sort()&lt;/code&gt;&lt;/a&gt; to organise search terms in ascending or descending order.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Although I used a couple of tutorials to help me out, I think the most fun came from the fact that I understood them enough to be able to adapt the code to my needs. I even refactored (and hopefully improved) some of the tutorial code:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Used the spread operator instead of &lt;code&gt;map&lt;/code&gt; to create a shallow copy of an array.&lt;/li&gt;
&lt;li&gt;Replaced the &lt;code&gt;let&lt;/code&gt; keyword with &lt;code&gt;const&lt;/code&gt; where possible.&lt;/li&gt;
&lt;li&gt;Used a different compare function in &lt;code&gt;sort&lt;/code&gt; to allow for the &lt;code&gt;reverse&lt;/code&gt; method to be omitted.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So what tutorials have &lt;em&gt;you&lt;/em&gt; learned the most from?&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>showdev</category>
      <category>beginners</category>
      <category>unsplash</category>
    </item>
    <item>
      <title>Reflections on my portfolio</title>
      <dc:creator>Ewe Lin Loo</dc:creator>
      <pubDate>Sat, 10 Jul 2021 12:52:26 +0000</pubDate>
      <link>https://dev.to/elloo/reflections-on-my-portfolio-2gji</link>
      <guid>https://dev.to/elloo/reflections-on-my-portfolio-2gji</guid>
      <description>&lt;p&gt;I was recently tasked with the project of making a personal webpage out of HTML and CSS. &lt;a href="https://elloo.github.io/portfolio-2021/"&gt;This&lt;/a&gt; is what I ended up with. The following is a little commentary on what I learned and what I will continue working on, amongst other things. Oh, and here's the &lt;a href="https://github.com/elloo/portfolio-2021"&gt;repo&lt;/a&gt; if you're interested in the code. I might add images to this post later on - just gotta find a place to host them.&lt;/p&gt;

&lt;h2&gt;
  
  
  1) What went well? Key Learning.
&lt;/h2&gt;

&lt;p&gt;The stand-out thing for my webpage is the CSS art. I'm lucky that my name almost sounds like a phrase "Ewe (L)in Loo" so I just went with that. Making the art allowed me to learn a lot about &lt;code&gt;position: relative&lt;/code&gt; and &lt;code&gt;position: absolute&lt;/code&gt;. I always tend to forget this though - maybe that's a sign that I need to continually be making CSS art.&lt;/p&gt;

&lt;p&gt;The second thing I enjoy about this webpage is the sticky navbar. I feel the use of the border styling on the top and bottom ties together the look of the page while providing functionality. It was the first time I've used &lt;code&gt;position: sticky&lt;/code&gt; before so it was interesting to see it in action.&lt;/p&gt;

&lt;h2&gt;
  
  
  2) What could have been improved?
&lt;/h2&gt;

&lt;p&gt;I had to make the two two-column sections of the webpage in two different ways. Have I written 'two' enough? When I made the first two-column section, I was still in the frame-of-mind to make CSS art. This resulted in a &lt;code&gt;position&lt;/code&gt;-based layout. For some reason, this wouldn't work on my portfolio section. I have a feeling it has something to do with the positioning of the other elements. With a time restriction, I had to quickly find a way to get the layout looking the way I wanted. That's where &lt;code&gt;display: flex&lt;/code&gt; and flexbox came in.&lt;/p&gt;

&lt;p&gt;I also wanted to make the back-to-top button sticky at the bottom, however couldn't figure this out. I guess the webpage is pretty short anyways so maybe this would have been redundant.&lt;/p&gt;

&lt;p&gt;Lastly, there are some small gaps between the navbar and its borders. I'm not sure why.&lt;/p&gt;

&lt;h2&gt;
  
  
  3) The key take aways.
&lt;/h2&gt;

&lt;p&gt;One of the key take-aways would be not to underestimate how long it will take to code something. You never know when things won't function the way you expect them to so you should always have your priorities straight.&lt;/p&gt;

&lt;h2&gt;
  
  
  4) The process you followed?
&lt;/h2&gt;

&lt;p&gt;I started out by creating the CSS piece that's seen on loading the page. I knew I wanted to have something to make my page stand-out and I had this idea of turning my name into a pun. From there, the order of completion was the about section, footer, and portfolio. All throughout the way, I tried to remember to make frequent commits. I only pushed right before I was going to take a break from coding. It was very satisfying to be able to see my changes live.&lt;/p&gt;

&lt;p&gt;Anyways, I hope my little project gave you a bit of a laugh. Let me know if there's anything else you'd like me to talk about or show me your own portfolio in the comments!&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>showdev</category>
      <category>devjournal</category>
      <category>codenewbie</category>
    </item>
    <item>
      <title>Why did I decide to study software engineering?</title>
      <dc:creator>Ewe Lin Loo</dc:creator>
      <pubDate>Fri, 02 Jul 2021 07:28:11 +0000</pubDate>
      <link>https://dev.to/elloo/why-did-i-decide-to-study-software-engineering-47mg</link>
      <guid>https://dev.to/elloo/why-did-i-decide-to-study-software-engineering-47mg</guid>
      <description>&lt;p&gt;Ever thought about what brought you here to dev.to and coding? This article is a short recount of my personal journey and motivations.&lt;/p&gt;

&lt;p&gt;I started dabbling in code when I as a teenager playing around with their Neopets guild page. I was also exposed to coding through GaiaOnline, where I learnt the bare minimum to make an image map work in PHP. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I was fascinated by how interactivity could be produced from &lt;em&gt;'magical'&lt;/em&gt; text&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;However, it wasn't until some years ago when I found all the freely available resources for learning to code that my interest was re-ignited. I think &lt;a href="https://www.freecodecamp.org/"&gt;freecodecamp.org&lt;/a&gt; was the first one that I tried to work through. I particularly loved the community and eventually found the numerous local get-togethers listed on &lt;a href="https://www.meetup.com/"&gt;meetup.com&lt;/a&gt;.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I found great online and local communities of fellow tech enthusiasts&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;It was through one of these communities (possibly a slack channel for &lt;a href="https://github.com/P1xt/p1xt-guides"&gt;p1xt's guide&lt;/a&gt;) that I learnt of &lt;a href="https://online-learning.harvard.edu/course/cs50-introduction-computer-science?delta=0"&gt;CS50x&lt;/a&gt;. Managing to complete that re-awoke the initial feeling of awe I had experienced as a child. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I love the feeling of logic and creativity combined&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Throughout this all, I had been working in a variety of jobs - retail, sales, admin, and captioning. I had yet to find a &lt;strong&gt;career&lt;/strong&gt;. This is my final motivation for my earnest pursuit of software development.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;A decent way to have an interesting, ever-evolving career&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Thanks for coming to my TED talk! I'll be doing more posts in the future about the types of projects I get up to. Follow me if you're interested. &lt;/p&gt;

&lt;p&gt;How did you get into IT? I'd love to hear from anyone, anyone at all! Just leave a comment below.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>career</category>
      <category>learning</category>
      <category>devjournal</category>
    </item>
  </channel>
</rss>
