<?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: Asela</title>
    <description>The latest articles on DEV Community by Asela (@zaselalk).</description>
    <link>https://dev.to/zaselalk</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%2F560454%2F0ddc456e-47ad-4465-8e0f-c6a364fdc6bc.jpeg</url>
      <title>DEV Community: Asela</title>
      <link>https://dev.to/zaselalk</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/zaselalk"/>
    <language>en</language>
    <item>
      <title>[Day 01] - My Journey from Laptop to Lab: Building a Headless Debian Server for DevOps &amp; AI</title>
      <dc:creator>Asela</dc:creator>
      <pubDate>Sat, 07 Feb 2026 13:14:17 +0000</pubDate>
      <link>https://dev.to/zaselalk/day-01-my-journey-from-laptop-to-lab-building-a-headless-debian-server-for-devops-ai-pl5</link>
      <guid>https://dev.to/zaselalk/day-01-my-journey-from-laptop-to-lab-building-a-headless-debian-server-for-devops-ai-pl5</guid>
      <description>&lt;p&gt;Hey everyone! As an undergraduate always looking to get my hands dirty, I decided it was time to level up my old Dell Inspiron 15-3567. Instead of letting it gather dust running a resource-heavy desktop OS, I embarked on a mission: transform it into a lean, mean, headless Debian server specifically for my DevOps and Agentic AI experiments.&lt;/p&gt;

&lt;p&gt;This isn't just about getting a machine running; it's about deeply understanding the underlying tech. I hope to learn lot of fundamental concepts throughout the process and hope to share my experience with you.&lt;/p&gt;

&lt;p&gt;Also appreciate your supportive comments and ideas, because I’m not an expert at all and I learn things by searching and asking by AI.&lt;/p&gt;

&lt;p&gt;Here’s a breakdown of what I’ve been up to, and more importantly, what I’ve learned (sometimes the hard way!).&lt;/p&gt;

&lt;h3&gt;
  
  
  The "Before": My Trusty (but Thirsty) Linux Mint Laptop
&lt;/h3&gt;

&lt;p&gt;My Dell Inspiron, sporting an &lt;strong&gt;Intel Core i3-7100U&lt;/strong&gt; and &lt;strong&gt;8GB of RAM&lt;/strong&gt;, was running Linux Mint 21. While Mint is fantastic for daily use, my &lt;code&gt;inxi -Fxxxrz&lt;/code&gt; output revealed its Achilles' heel for my new ambitions: &lt;strong&gt;80% RAM usage just at idle!&lt;/strong&gt; That's not going to cut it when I want to run large language models (LLMs) and Docker containers.&lt;/p&gt;

&lt;p&gt;The goal became clear: strip down the OS to the absolute essentials to free up as much RAM as possible.&lt;/p&gt;

&lt;h3&gt;
  
  
  I chose Debian, because Gemini tell me to try that..
&lt;/h3&gt;

&lt;p&gt;When I search thought what will be the best OS to try for me that can learn things and setup my AI and DevOps environment while learning, Gemini suggest me to try the Debian 12, but when I search on the Bing I discovered that Debian 13 is also available.&lt;/p&gt;

&lt;p&gt;Then Why I try some old, staff, So I decided to learn something new and ignore the Gemini suggested &lt;strong&gt;Debian 12 "Bookworm"&lt;/strong&gt; and download the &lt;strong&gt;Debian 13 "trixie",&lt;/strong&gt; Because I don’t trust AI always.&lt;/p&gt;

&lt;p&gt;As Gemini mentioned here are the feature that I can achieve through the Debian&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Minimalism &amp;amp; Performance:&lt;/strong&gt; A headless Debian server (no fancy graphical desktop environment) can idle at an incredible &lt;strong&gt;150-200MB of RAM&lt;/strong&gt;. This means nearly 7.5GB of my 8GB RAM is available for actual AI tasks!&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Industry Standard:&lt;/strong&gt; Debian is the bedrock for many enterprise servers and forms the base for Ubuntu, making it invaluable for real-world DevOps skills.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Stability:&lt;/strong&gt; For a dedicated lab, I need something that won't randomly break, letting me focus on my projects, not OS debugging.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The Gemini also suggest me to try “Arch Linux” as “As an undergraduate, nothing teaches you how Linux actually works better than an Arch installation”. But right now I think It’s better to try the “Debian way" fist and then move to the Arch later.&lt;/p&gt;

&lt;p&gt;The actual reason is that always I use the Debian based OS for my servers and then I wanna study how to build the Debian base server from ground up.&lt;/p&gt;

&lt;h3&gt;
  
  
  Navigating the ISO Minefield: "Free" vs. "Non-Free" Firmware
&lt;/h3&gt;

&lt;p&gt;This was my first major learning curve! First I login into to the my laptop using &lt;code&gt;SSH&lt;/code&gt; though the local network. That was the first time I log to my laptop using the &lt;code&gt;ssh&lt;/code&gt; , Most time I used the Anydesk for that.&lt;/p&gt;

&lt;p&gt;Then I downloaded the &lt;code&gt;mini.iso&lt;/code&gt; , using the &lt;code&gt;wget&lt;/code&gt; command and I also explore the current available block devices using the &lt;code&gt;lsblk&lt;/code&gt; command which is stands for &lt;strong&gt;List Block Devices&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnkz9dsnwsr8agco0ff40.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnkz9dsnwsr8agco0ff40.png" alt=" " width="646" height="379"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once I got onedrive block, I decided to flashed downloaded os into it, I used the &lt;code&gt;dd&lt;/code&gt; commands for that. (a powerful tool that overwrites everything, so &lt;strong&gt;always double-check your target drive, folks!&lt;/strong&gt;).&lt;/p&gt;

&lt;p&gt;I thought I was golden, but then the installer hit me with this:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh9by424e5nlf0fi88si1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh9by424e5nlf0fi88si1.png" alt=" " width="800" height="800"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Revelation: My Wi-Fi and Ethernet need "Non-Free" Firmware!&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The messages &lt;code&gt;ath10k/QCA9377&lt;/code&gt; and then later &lt;code&gt;rtl_nic&lt;/code&gt; weren't just random errors. They were the installer politely (but firmly!) telling me that my &lt;strong&gt;Qualcomm Atheros Wi-Fi&lt;/strong&gt; and &lt;strong&gt;Realtek Ethernet&lt;/strong&gt; chips needed proprietary binary files to function.&lt;/p&gt;

&lt;p&gt;These are "non-free" not because you have to pay for them, but because their source code isn't openly available, which conflicts with Debian's strict "free software" philosophy in its default installers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Solution:&lt;/strong&gt; I had to scrap that &lt;code&gt;mini.iso&lt;/code&gt; and download the official &lt;strong&gt;Debian 13 Netinst ISO that &lt;em&gt;includes&lt;/em&gt; non-free firmware&lt;/strong&gt;. This version is a godsend for modern laptops as it bundles those closed-source blobs, allowing the hardware to actually turn on.&lt;/p&gt;

&lt;p&gt;Then I started to make bootable device using newly download ios, use the same &lt;code&gt;dd&lt;/code&gt; commands, let’s see what happened next in day 02 blog.&lt;/p&gt;

&lt;p&gt;I'm excited to get this server online and start diving into Docker, Ollama, and building my first Agentic AI prototypes. Stay tuned for Part 2!&lt;/p&gt;

&lt;p&gt;Originally posted : &lt;a href="https://blog.zasela.site/day-01-my-journey-from-laptop-to-lab-building-a-headless-debian-server-for-devops-and-ai" rel="noopener noreferrer"&gt;https://blog.zasela.site/day-01-my-journey-from-laptop-to-lab-building-a-headless-debian-server-for-devops-and-ai&lt;/a&gt;&lt;/p&gt;

</description>
      <category>programming</category>
      <category>linux</category>
      <category>serversetup</category>
    </item>
    <item>
      <title>Understanding Object-Oriented Analysis and Design (OOAD)</title>
      <dc:creator>Asela</dc:creator>
      <pubDate>Sun, 12 May 2024 07:44:03 +0000</pubDate>
      <link>https://dev.to/zaselalk/understanding-object-oriented-analysis-and-design-ooad-loo</link>
      <guid>https://dev.to/zaselalk/understanding-object-oriented-analysis-and-design-ooad-loo</guid>
      <description>&lt;p&gt;Object-oriented analysis and design (OOAD) is a foundational approach to software development that has revolutionized the way systems are conceptualized, designed, and implemented.&lt;/p&gt;

&lt;p&gt;In this article, we explore the core principles, methodologies, and both advantages and disadvantages of object orientation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Object Orientation: A Paradigm Shift in Software Development
&lt;/h3&gt;

&lt;p&gt;At its core, object orientation is a paradigm that views systems as collections of interacting and interrelated objects. Each object encapsulates both data (attributes) and behavior (methods), mirroring real-world entities and their interactions. &lt;/p&gt;

&lt;p&gt;Object-oriented systems development emphasizes building modular, self-contained modules that facilitate reusability, modifiability, and scalability.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxbhvbeu7365knnr26sdo.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxbhvbeu7365knnr26sdo.gif" alt="Why Object Oriented Approach ? " width="480" height="360"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Why Object Oriented Approach ?
&lt;/h3&gt;

&lt;p&gt;Object orientation offers numerous benefits compared to traditional procedural approaches to software development:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Reusability:&lt;/strong&gt; Objects and classes can be reused across different projects, reducing development time and effort.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Increased Quality:&lt;/strong&gt; The modular design of object-oriented systems promotes better code organization and reduces the likelihood of errors.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Faster Development:&lt;/strong&gt; Reusable components and modular design lead to faster development cycles and improved time-to-market.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Maintainability:&lt;/strong&gt; Changes to one part of the system can be localized, minimizing the impact on other components, thus enhancing maintainability.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Scalability:&lt;/strong&gt; Object-oriented systems can easily accommodate changes in requirements and scale to meet evolving needs.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Modularity:&lt;/strong&gt; The modular structure of object-oriented systems promotes better code organization, making it easier to manage and extend.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  What are the Disadvantages ?
&lt;/h3&gt;

&lt;p&gt;While object-oriented analysis and design (OOAD) offers numerous advantages, it's important to acknowledge its limitations and potential drawbacks.&lt;/p&gt;

&lt;p&gt;Here are some disadvantages associated with the object-oriented approach:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Complexity:&lt;/strong&gt; Object-oriented systems can become complex, especially as the number of classes and their interactions increase. Managing the complexity of large-scale object-oriented projects requires careful design and planning.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Learning Curve:&lt;/strong&gt; Transitioning from procedural programming to object-oriented programming may pose a steep learning curve for developers, particularly those unfamiliar with the concepts of classes, objects, inheritance, and polymorphism.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Performance Overhead:&lt;/strong&gt; Object-oriented systems may incur performance overhead compared to procedural counterparts. The overhead arises from features such as dynamic dispatch, inheritance, and polymorphism, which can introduce runtime inefficiencies.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Inheritance Issues:&lt;/strong&gt; While inheritance promotes code reuse, it can also lead to issues such as tight coupling between classes, the fragile base class problem, and difficulty in understanding class hierarchies. Inappropriate use of inheritance can result in rigid, inflexible designs.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You know more from your experience or not agree with me, feel free to comment your ideas.&lt;/p&gt;

&lt;p&gt;Now Let's move to the process In Object oriented development process we called "Object-Oriented Development Lifecycle", there are three main steps.&lt;/p&gt;

&lt;h4&gt;
  
  
  The Object-Oriented Development Lifecycle
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Object-Oriented Analysis (OOA):&lt;/strong&gt; This phase focuses on identifying and describing objects or concepts within the problem domain. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Object-Oriented Design (OOD):&lt;/strong&gt; In OOD, structures are developed to define software objects and their interactions. It involves defining classes, specifying attributes, and determining how objects collaborate to fulfill system requirements.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Object-Oriented Programming (OOP):&lt;/strong&gt; OOP involves implementing the designed objects in a programming language. It translates the abstract design into executable code, where classes are instantiated as objects, and methods are invoked to perform specific tasks.&lt;br&gt;
This is the step that we get a help of Object oriented programming language like JAVA.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;There is a another important thing that you should now that is,&lt;/p&gt;

&lt;h3&gt;
  
  
  Core Principles of Object Orientation
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Abstraction:&lt;/strong&gt; Abstraction involves representing only the essential aspects of a system while hiding irrelevant details. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Encapsulation:&lt;/strong&gt; Encapsulation involves bundling data and methods into a single unit (class) and restricting access to the internal state of objects. It promotes information hiding, data integrity, and modular design.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Inheritance:&lt;/strong&gt; Inheritance allows classes to inherit attributes and behaviors from parent classes, enabling code reuse and promoting hierarchy and specialization.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Polymorphism:&lt;/strong&gt; Polymorphism enables objects to exhibit different behaviors based on their context or inputs. It allows for flexibility and extensibility by enabling the same method to behave differently in different contexts.&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Conclusion
&lt;/h3&gt;

&lt;p&gt;Object-oriented analysis and design represent a paradigm shift in software development, offering a more intuitive, modular, and maintainable approach to building complex systems. &lt;/p&gt;

&lt;p&gt;Event though it have some disadvantages overall It provide well define approach to building complex systems. Then choose wisely according to your requirement. &lt;/p&gt;

</description>
      <category>oop</category>
      <category>beginners</category>
      <category>learning</category>
      <category>softwaredevelopment</category>
    </item>
    <item>
      <title>AI-Generated Animal-Based Quotes + Dynamic Image : Cloudfare AI 🤯</title>
      <dc:creator>Asela</dc:creator>
      <pubDate>Sat, 13 Apr 2024 20:01:17 +0000</pubDate>
      <link>https://dev.to/zaselalk/inspirational-quotes-creator-base-on-animal-ai-image-cloudfare-ai-354m</link>
      <guid>https://dev.to/zaselalk/inspirational-quotes-creator-base-on-animal-ai-image-cloudfare-ai-354m</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99"&gt;Cloudflare AI Challenge&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I have build a simple cloudfare worker application that randomly generated quote with nice looking image for background base on &lt;code&gt;openchat-3.5-0106&lt;/code&gt; and &lt;code&gt;dreamshaper-8-lcm&lt;/code&gt; models.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://cloudfareworkers.infoaselalk.workers.dev/"&gt;https://cloudfareworkers.infoaselalk.workers.dev/&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  My Code
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/zaselalk/animal-inspired-ai-quote"&gt;https://github.com/zaselalk/animal-inspired-ai-quote&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Journey
&lt;/h2&gt;

&lt;p&gt;Building this application was an amazing journey for me, I have learn lot about different type of cloudflare services including Cloudflare workers, R2 and more echo system that provided by Cloudflare for developers.&lt;/p&gt;

&lt;p&gt;Even though I'm not using all those services provided by Cloudflare, to what I build, I learn lot about them by when I go through the documentation.&lt;/p&gt;

&lt;p&gt;I also go through the video published by Cloudflare then I have studies several sample application provided in the example and as well as the project on Github.&lt;/p&gt;

&lt;p&gt;Video : &lt;a href="https://youtu.be/H7Qe96fqg1M?si=jKhlzvjaigrPV3an"&gt;https://youtu.be/H7Qe96fqg1M?si=jKhlzvjaigrPV3an&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I also did experiment with hono framework as well, then I started building the application which make me struggle few hours due to internet connection issues, the npm refuse to install packages on my local machine abut luckily Github codespace save my day.&lt;/p&gt;

&lt;p&gt;First I tried to develop AI post drafted application and but when I try different models, I realized these models are well suited for short text generation, after hours of testing different models I selected the &lt;code&gt;openchat-3.5-0106&lt;/code&gt; model and then try with text to image models as well, The model of &lt;code&gt;dreamshaper-8-lcm&lt;/code&gt; is fine for me.&lt;/p&gt;

&lt;p&gt;Then I release app with some basic design and share with my friends to take some feedback, the feedback was positive and then some of them are asking about the feature of selecting animal, which I planned to add as next update.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Multiple Models and/or Triple Task Types&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;I have use two models to achive the quote creation task&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;openchat-3.5-0106&lt;/code&gt; for text generation &lt;/li&gt;
&lt;li&gt;
&lt;code&gt;dreamshaper-8-lcm&lt;/code&gt; for image generation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;there are some other quotes generated by application, try your self as well.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fei9jpien5vdc8vvr3srm.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fei9jpien5vdc8vvr3srm.png" alt="Image description" width="800" height="357"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv2j8ym8w580dqhpee7yv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv2j8ym8w580dqhpee7yv.png" alt="Image description" width="800" height="387"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>cloudflarechallenge</category>
      <category>devchallenge</category>
      <category>ai</category>
      <category>webdev</category>
    </item>
    <item>
      <title>How to Access JavaScript Arrays in Objects</title>
      <dc:creator>Asela</dc:creator>
      <pubDate>Thu, 26 Aug 2021 17:08:01 +0000</pubDate>
      <link>https://dev.to/zaselalk/how-to-access-javascript-arrays-in-objects-4pph</link>
      <guid>https://dev.to/zaselalk/how-to-access-javascript-arrays-in-objects-4pph</guid>
      <description>&lt;p&gt;Have an Object that contains an array, Then How to Access Arrays in Object,&lt;/p&gt;

&lt;p&gt;Here is the simple Solution&lt;/p&gt;

&lt;p&gt;Here's  my Object&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const myobj = {
"name":"John",
"age":30,
"cars":["Ford", "BMW", "Fiat"],
"PetName":"Dogee"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Think if you need to access value in &lt;code&gt;cars&lt;/code&gt; array. Just Code Like this&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;myobj.cars[value_index]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So simple, isn't it? So Keep Following for tips like this.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>How to Loop JS Object Values</title>
      <dc:creator>Asela</dc:creator>
      <pubDate>Thu, 26 Aug 2021 15:13:26 +0000</pubDate>
      <link>https://dev.to/zaselalk/how-to-loop-js-object-values-422p</link>
      <guid>https://dev.to/zaselalk/how-to-loop-js-object-values-422p</guid>
      <description>&lt;p&gt;So, How to Loop JavaScript Object Values ?&lt;/p&gt;

&lt;p&gt;Here It's&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (let x in myObj) {
  text += myObj[x] + ", ";
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Updated&lt;/strong&gt;:&lt;br&gt;
I find simple one line code for that without use loop from comment section.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const text = Object.values(myObj).join(',')
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Comment By &lt;a href="https://dev.to/rancy98"&gt;rancy98&lt;/a&gt; , Thank you rancy&lt;br&gt;
So Simple, Isn't it? Have a Nice day and Don't forget to follow.&lt;/p&gt;

</description>
      <category>javascript</category>
    </item>
    <item>
      <title>Check Every property Before JSON Parse Data into a JS Object.</title>
      <dc:creator>Asela</dc:creator>
      <pubDate>Thu, 26 Aug 2021 13:49:34 +0000</pubDate>
      <link>https://dev.to/zaselalk/check-every-property-before-json-parse-data-into-a-js-object-31gj</link>
      <guid>https://dev.to/zaselalk/check-every-property-before-json-parse-data-into-a-js-object-31gj</guid>
      <description>&lt;p&gt;Today, I'll explain how to check each property when you parser JSON into a  JS Object.&lt;/p&gt;

&lt;p&gt;The answer is simple; We add a second parameter to our code which call reviver, to accomplish this.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
 } else {
    return value;
  }
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;According to this example, we get two parameters: ' key' and 'value. We check if the key is equal to "birth," and if it does, the value will change as data format, and If not, nothing will happen. &lt;/p&gt;

&lt;p&gt;So cool and short, Isn't it? If this is helpful, don't ignore following me&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>json</category>
    </item>
    <item>
      <title>How To Create Chess Pattern With HTML, CSS And a Little bit of JS</title>
      <dc:creator>Asela</dc:creator>
      <pubDate>Sat, 21 Aug 2021 16:03:45 +0000</pubDate>
      <link>https://dev.to/zaselalk/how-to-create-chess-pattern-with-html-and-css-little-bit-of-js-1gpa</link>
      <guid>https://dev.to/zaselalk/how-to-create-chess-pattern-with-html-and-css-little-bit-of-js-1gpa</guid>
      <description>&lt;p&gt;Hello everyone, Today I'll tell you how to create a simple 8 X 8 chess pattern using HTML, CSS and a little JS.&lt;/p&gt;

&lt;p&gt;Complete Source Code: &lt;a href="https://github.com/zaselalk/Chess-Pattern-CSS-JS"&gt;https://github.com/zaselalk/Chess-Pattern-CSS-JS&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;First things first, Here's my little piece of HTML code.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;index.html&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang="en"&amp;gt;
&amp;lt;head&amp;gt;
    &amp;lt;meta charset="UTF-8"&amp;gt;
    &amp;lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&amp;gt;
    &amp;lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp;gt;
    &amp;lt;title&amp;gt;Chess-Pattern-CSS-JS &amp;lt;/title&amp;gt;
    &amp;lt;link rel="stylesheet" href="style.css"&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
    &amp;lt;div id="board"&amp;gt;
    &amp;lt;/div&amp;gt;   
    &amp;lt;script src="script.js"&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;What Next?&lt;/strong&gt; &lt;/p&gt;

&lt;p&gt;Now Let's add some styles for our chessboard pattern,&lt;/p&gt;

&lt;p&gt;&lt;code&gt;style.css&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;#board{
    display: flex;
    flex-wrap: wrap;
    width: 640px;
    height: 640px;
    border:1px solid black;
    background-color: #fff;

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

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Explain&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use &lt;code&gt;#board&lt;/code&gt; Element as a Flex-Container and Add &lt;code&gt;display:flex&lt;/code&gt; property to it.&lt;/li&gt;
&lt;li&gt;Add &lt;code&gt;flex-warp&lt;/code&gt; property to make sure that your square warp to lines.&lt;/li&gt;
&lt;li&gt;Define our chess board &lt;code&gt;width&lt;/code&gt; and &lt;code&gt;height&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;use 1px &lt;code&gt;border&lt;/code&gt; and white as `background-color' to make sure your chess board more decent.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Next, We're going to Style small square on a chessboard, in this Code there're Two types of squares,&lt;br&gt;
Which are,&lt;br&gt;
*&lt;code&gt;.esquare&lt;/code&gt; - Square that in even line&lt;br&gt;
*&lt;code&gt;.osquare&lt;/code&gt; - Sqaure in odd line&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Two Types? But Why?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;That's because chessboard have 64 squares and there're 8 squares in one line. There're 8 lines on board. But these lines are not in the same pattern.&lt;/p&gt;

&lt;p&gt;As an example, If we select black squares and numbered them.Look you can see they are changing as odd and even pattern.&lt;/p&gt;

&lt;p&gt;Now let's Back to our code.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;style.css&lt;/code&gt; . &lt;/p&gt;

&lt;p&gt;`&lt;br&gt;
&lt;/p&gt;

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

.esquare, .osquare{
    width: 80px;
    height: 80px;
    border:1px solid black;
    box-sizing:border-box;
  }



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

&lt;/div&gt;



&lt;p&gt;Nice! We Finished most of CSS Codes and finally we have to style our Black Squares like chess pattern. Let's achieve this.&lt;/p&gt;

&lt;p&gt;more code for &lt;code&gt;style.css&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; .esquare:nth-of-type(2n){
    background-color: #000;
  }
  .osquare:nth-of-type(2n+1){
    background-color: #000;
  }

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

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Explain&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;As I said this is the final part of our CSS code. Within this part , We're going to design pattern of black squares in our chessboard.&lt;/p&gt;

&lt;p&gt;As I mention before, We group squares as &lt;code&gt;esqaures&lt;/code&gt; and &lt;code&gt;osqaures&lt;/code&gt; to style our chessboard.&lt;/p&gt;

&lt;p&gt;Now you are end of line and final one is our js file.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;But Why JS?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The truth is normally JS isn't use for the simple codes like this, But to have a more clean code I added little JS code to multiply &lt;code&gt;.square&lt;/code&gt; elements.&lt;/p&gt;

&lt;p&gt;Here is My Js Code&lt;br&gt;
&lt;code&gt;script.js&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const board = document.getElementById('board');
let patterneven = " &amp;lt;div class='esquare'&amp;gt;&amp;lt;/div&amp;gt;" ;
let patternodd = " &amp;lt;div class='osquare'&amp;gt;&amp;lt;/div&amp;gt;" ;

for(i=0;i&amp;lt;4;i++){
    board.innerHTML += patterneven.repeat(8);
    board.innerHTML += patternodd.repeat(8);
}

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

&lt;/div&gt;



&lt;p&gt;Using JS to create a loop so that we could easily make our code more clear and Easy to enhanced.&lt;/p&gt;

&lt;p&gt;Mission complete !, Now you have Chess Pattern 😎 &lt;/p&gt;

&lt;p&gt;Would you like to try Live demo ? Then click the link below.  &lt;/p&gt;

&lt;p&gt;Live Demo: &lt;a href="http://gestyy.com/epXRuq"&gt;http://gestyy.com/epXRuq&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Do you know this is my first post for dev.to and feel free to add comments about this post.&lt;/p&gt;

</description>
      <category>css</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
