<?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: SpanglishGaby</title>
    <description>The latest articles on DEV Community by SpanglishGaby (@spanglishgaby).</description>
    <link>https://dev.to/spanglishgaby</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%2F963600%2F637bdc83-1dc8-4fc0-add5-e5190c145bd0.jpg</url>
      <title>DEV Community: SpanglishGaby</title>
      <link>https://dev.to/spanglishgaby</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/spanglishgaby"/>
    <language>en</language>
    <item>
      <title>SDLC Software Development Life Cycle</title>
      <dc:creator>SpanglishGaby</dc:creator>
      <pubDate>Wed, 04 Jan 2023 03:24:28 +0000</pubDate>
      <link>https://dev.to/spanglishgaby/sdlc-software-development-life-cycle-23l2</link>
      <guid>https://dev.to/spanglishgaby/sdlc-software-development-life-cycle-23l2</guid>
      <description>&lt;p&gt;The software development life cycle (SDLC) is a process that outlines the steps involved in creating and maintaining a software application. It is a framework that helps organizations plan, develop, test, and deliver high-quality software products.&lt;/p&gt;

&lt;p&gt;There are various models of the SDLC, but they all generally follow the same basic steps:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Planning:&lt;/strong&gt; In this phase, the team defines the goals and objectives of the project, and creates a plan for how to achieve them. This may include identifying the target audience, determining the scope of the project, and creating a timeline.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Analysis:&lt;/strong&gt; During the analysis phase, the team gathers and analyzes information about the project, including the requirements and constraints. This helps the team to understand what needs to be built and how it should work.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Design:&lt;/strong&gt; In the design phase, the team creates a blueprint for the software, including the user interface, data structures, and algorithms. This phase is crucial for ensuring that the software will meet the needs of the users and work as intended.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;4. Implementation:&lt;/strong&gt; During the implementation phase, the team writes the code and builds the software. This is the most time-consuming and resource-intensive phase of the SDLC.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;5. Testing:&lt;/strong&gt; In the testing phase, the team verifies that the software works as intended and meets the requirements specified in the analysis phase. This may involve both manual and automated testing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;6. Deployment:&lt;/strong&gt; Once the software has been tested and is ready to be released, it is deployed to users. This may involve installing the software on users' devices, or making it available through a web application.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;7. Maintenance:&lt;/strong&gt; The software is not finished when it is deployed. It requires ongoing maintenance to fix bugs, add new features, and keep it up to date.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--IuApR6oY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9a7f70td6tqhdp7sez1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--IuApR6oY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9a7f70td6tqhdp7sez1.png" alt="sdlc" width="880" height="489"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The SDLC is an iterative process, meaning that it may involve repeating some or all of these steps multiple times as the software evolves and changes over time. It is important to follow a systematic process like the SDLC in order to produce high-quality software that meets the needs of users and stakeholders.&lt;/p&gt;

&lt;h2&gt;
  
  
  What are the SDLC models/methodologies?
&lt;/h2&gt;

&lt;p&gt;There are several different models or methodologies for the software development life cycle (SDLC), each with its own unique approach to the process of creating and maintaining software. Some of the most popular SDLC models include:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Waterfall:&lt;/strong&gt; The waterfall model is a linear approach to the SDLC, in which each phase must be completed before moving on to the next. This model is based on the idea that progress flows in one direction, like a waterfall.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;-Agile:&lt;/strong&gt; The agile model is a flexible, iterative approach to the SDLC. It is based on the idea of rapid prototyping and frequent delivery of small chunks of working software. This model is well-suited to projects with rapidly changing requirements.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;-Scrum:&lt;/strong&gt; Scrum is an agile framework for managing and completing complex projects. It involves self-organizing teams, regular check-ins (called "sprints"), and continuous improvement.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;-Lean:&lt;/strong&gt; The lean model is a set of principles for optimizing the value of a product or service while minimizing waste. It is based on the principles of the Toyota Production System and is often used in conjunction with agile methodologies.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;-Spiral:&lt;/strong&gt; The spiral model is a hybrid approach that combines elements of the waterfall model and the agile model. It involves repeating cycles of planning, risk analysis, development, and testing, with the goal of reducing risk and improving the quality of the software.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;-V-Model:&lt;/strong&gt; The V-Model is a linear approach to the SDLC that is based on the idea of verification and validation. It involves developing test cases and testing the software at every stage of the development process, with the goal of identifying and fixing defects early on.&lt;/p&gt;

&lt;p&gt;Each of these models or methodologies has its own strengths and limitations, and the right one for a particular project will depend on the specific needs and goals of the project. It is important to choose the most appropriate model or methodology in order to effectively plan, develop, and deliver high-quality software.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--efi8891i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42lzl3jlrnr9dhkq55y4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--efi8891i--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42lzl3jlrnr9dhkq55y4.png" alt="startinfinity.com" width="880" height="683"&gt;&lt;/a&gt;&lt;br&gt;
That being said, agile methodologies are often popular choices for software development because of their flexibility and emphasis on rapid delivery. In particular, the Scrum framework is widely used and recognized as a leading agile methodology.&lt;/p&gt;

&lt;p&gt;Additional Information &lt;a href="https://startinfinity.com/project-management-methodologies/scrum"&gt;here&lt;/a&gt;&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>productivity</category>
      <category>career</category>
      <category>management</category>
    </item>
    <item>
      <title>TCP/IP and Networking basics for developers</title>
      <dc:creator>SpanglishGaby</dc:creator>
      <pubDate>Mon, 12 Dec 2022 23:03:54 +0000</pubDate>
      <link>https://dev.to/spanglishgaby/tcpip-and-networking-basics-for-developers-2o3b</link>
      <guid>https://dev.to/spanglishgaby/tcpip-and-networking-basics-for-developers-2o3b</guid>
      <description>&lt;p&gt;During our path to becoming a software engineer, we will hear some terms such as &lt;strong&gt;HTTP, URL, PORT, and IP&lt;/strong&gt;, but how do all these terms connect? &lt;/p&gt;

&lt;p&gt;Let's start to explain the way information moves from our computers to the internet.&lt;/p&gt;

&lt;p&gt;First, let's examine the "TCP/IP" model. What is it? The TCP/IP model refers to the Transmission Control Protocol/Internet Protocol Model. This model is a part of the network domain designed specifically for overseeing efficient and error-free transmission of data. Basically, it is the software and hardware infrastructure responsible for making sure our website arrives at the end-user or connects to the servers. &lt;/p&gt;

&lt;p&gt;It is divided into four layers, each representing a step that needs to be taken to move the information from one computer program to another:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Application layer:&lt;/strong&gt; Here is where our website/code lives&lt;br&gt;
Some of the protocols used in this layer are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;HTTP: Hypertext transfer protocol is used for accessing the information available on the internet.&lt;/li&gt;
&lt;li&gt;SMTP: Simple mail transfer protocol, assigned the task of handling e-mail related steps and issues.&lt;/li&gt;
&lt;li&gt;FTP: This is the standard protocol that oversees the transfer of files over the network channel.&lt;/li&gt;
&lt;/ul&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%2Fj88jk8akaxqkjg5luyg7.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%2Fj88jk8akaxqkjg5luyg7.png" alt="TCP/IP" width="800" height="538"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Transport layer:&lt;/strong&gt; This is the suite of programs on your computer responsible for packetizing the data, standardizing the transmission speed, and making sure that the packets sent and received didn't get garbled along the way.&lt;br&gt;
One of the most important protocols used in this layer is:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;TCP: Transmission Control Protocol is responsible for the proper transmission of segments over the communication channel. It also establishes a network connection between the source and destination system.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;One other important thing which is specified by the Transport layer is the source and destination port address. The port is used by the computer to determine which program should receive the message when it reaches the computers that you're communicating with.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Internet layer:&lt;/strong&gt; This layer is responsible for making sure that your computer can communicate with other computers or network devices in general. One of the most famous protocols, the Internetwork Protocol has to do with making sure you have a unique communications address on a network so that messages can be sent from and to your computer. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;IP: This protocol assigns your device with a unique address; the IP address is also responsible for routing the data over the communication channel.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;4. Network Access layer:&lt;/strong&gt; This layer is responsible for actually sending the ones and zeroes from one physical device to the next. Starting at your computer, the network access layer represents either the Network Interface Card (NIC) where an ethernet cable is plugged in, or the wifi modem on your computer which sends signals to the rest of the network.&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%2Fccm7npwhuwlxr17daz0j.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%2Fccm7npwhuwlxr17daz0j.png" alt="avg.com" width="800" height="363"&gt;&lt;/a&gt;Photo: avg.com&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;In conclusion: why do we care?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;It's necessary to understand because there are terms that we use daily, and we need to know where they come from. For example, every time we run tests, we point the browser to:&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%2Fgv4rbcm4eo0h88qseujm.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%2Fgv4rbcm4eo0h88qseujm.png" alt="URL example" width="800" height="382"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What does this actually mean? &lt;/p&gt;

&lt;p&gt;First, we're telling the computer that it should try to use the &lt;strong&gt;HyperText Transport Protocol (http)&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Second, we're telling the computer to talk to the computer called &lt;strong&gt;'localhost'&lt;/strong&gt;. The name 'localhost' corresponds to the loopback address on our computer, and has a default IP (127.0.0.1). It is useful for testing programs on your computer, without sending information over the internet. This helps when you are testing applications that aren’t ready for the world to see.&lt;/p&gt;

&lt;p&gt;Finally, we're telling the computer to connect to &lt;strong&gt;'port' 3000&lt;/strong&gt;. If an IP address is like an apartment complex address, the port number is like the apartment number. It lets us make sure that our messages get to and from the right recipient once they reach the address we've specified. In a computer, every program should use a different port number!&lt;/p&gt;

&lt;p&gt;In conclusion, we don't need to be networking experts, but it's always good to have extra information that clarifies what we're doing daily.&lt;/p&gt;

&lt;p&gt;Additional information:&lt;br&gt;
&lt;a href="https://www.avg.com/en/signal/what-is-tcp-ip" rel="noopener noreferrer"&gt;What is TCP/IP and what does it stand for?&lt;/a&gt;&lt;br&gt;
&lt;a href="https://cheapsslsecurity.com/blog/what-is-the-tcp-model-an-exploration-of-tcp-ip-layers/" rel="noopener noreferrer"&gt;TCP/IP: What Is the TCP IP Model?&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.hostinger.com/tutorials/what-is-localhost" rel="noopener noreferrer"&gt;What is a localhost&lt;/a&gt;&lt;/p&gt;

</description>
      <category>aws</category>
      <category>lambda</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Tips and Tricks to style your React App</title>
      <dc:creator>SpanglishGaby</dc:creator>
      <pubDate>Mon, 12 Dec 2022 21:13:13 +0000</pubDate>
      <link>https://dev.to/spanglishgaby/tips-and-tricks-to-style-your-react-app-414f</link>
      <guid>https://dev.to/spanglishgaby/tips-and-tricks-to-style-your-react-app-414f</guid>
      <description>&lt;p&gt;Styling your project is one of the most difficult things to do especially when you are just starting in your career and want to build a nice portfolio.&lt;/p&gt;

&lt;p&gt;Here you will find some tips and tricks that can help you to build a project that looks professional.&lt;/p&gt;

&lt;p&gt;*&lt;em&gt;1. Define the *&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Colors: primary and secondary colors, typography layout on colored backgrounds, primary colors for highlights, link and button colors, etc.&lt;br&gt;
Typography: the size of the main titles (H1-H5), the size of the body text, quotes, spacing between titles and body text, typography color and background colors where the text can appear.&lt;br&gt;
Grid: determining the spacing inside the elements, styles.&lt;br&gt;
Graphics: drawing the key icons that will represent the main content. The color of icons and graphics.&lt;/p&gt;

</description>
      <category>discuss</category>
    </item>
    <item>
      <title>Styling your React App for beginners.</title>
      <dc:creator>SpanglishGaby</dc:creator>
      <pubDate>Mon, 05 Dec 2022 03:09:03 +0000</pubDate>
      <link>https://dev.to/spanglishgaby/tips-and-tricks-to-style-your-react-app-for-beginners-4j8d</link>
      <guid>https://dev.to/spanglishgaby/tips-and-tricks-to-style-your-react-app-for-beginners-4j8d</guid>
      <description>&lt;p&gt;Styling your project is one of the most difficult things to do especially when you are just starting in your career and want to build a nice portfolio.&lt;/p&gt;

&lt;p&gt;Here you will find some tips and tricks that can help you to build a project that looks professional.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;1. First considerations:&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;There are four primary elements that need to be considered when designing the style of your project&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Colors:&lt;/strong&gt;Define the primary and secondary &lt;a href="https://colorhunt.co/palette/343a407952b3ffc107e1e8eb" rel="noopener noreferrer"&gt;colors&lt;/a&gt; that you will use in your background, titles, and components.&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%2F0ue16xa5l9lrbkpt49lg.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%2F0ue16xa5l9lrbkpt49lg.png" alt="colorhunt.co" width="800" height="486"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Typography:&lt;/strong&gt; Choose a font that is easy to read. &lt;a href="https://www.websitebuilderexpert.com/designing-websites/pick-best-font-style-for-website/" rel="noopener noreferrer"&gt;This&lt;/a&gt; post will show you some of the most popular fonts that web designers use.&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%2Fbausksc57y9f7dh0sneo.jpg" 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%2Fbausksc57y9f7dh0sneo.jpg" alt="Post about the font style for website" width="720" height="334"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Grid:&lt;/strong&gt; determining the spacing of the elements, define where your images and components will be located.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;- Graphics:&lt;/strong&gt; Graphics and images add the chef's kiss to every design. Here are some great websites where you can find  &lt;a href="https://unsplash.com/" rel="noopener noreferrer"&gt;license-free photos&lt;/a&gt; and &lt;a href="https://www.freepik.com/illustrations" rel="noopener noreferrer"&gt;illustrations&lt;/a&gt;. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;One tip for using these images is to always credit the artist, and use should be limited to personal projects, not commercial works.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&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%2Fwtfhvfeaxv6hu1cjbcuy.png" alt="www.freepik.com" width="800" height="404"&gt;
&lt;/h2&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;2. Use the React Styling Packages:&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;When building an application in react, you can style everything in CSS, but styling your application that way can be tedious. Instead, consider using react packages for styling. Examples of great packages are:&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%2Foergsd9q6a3mz8d32mjd.jpg" 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%2Foergsd9q6a3mz8d32mjd.jpg" alt="CSS meme" width="460" height="420"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Semantic UI - &lt;a href="https://react.semantic-ui.com/" rel="noopener noreferrer"&gt;click here&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&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%2F1iyimkdp5cyrpjiar5gz.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%2F1iyimkdp5cyrpjiar5gz.png" alt="Semantic UI" width="800" height="472"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Material UI - &lt;a href="https://mui.com/material-ui/react-list/" rel="noopener noreferrer"&gt;click here&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&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%2Fx0fskvl8t1drleae5fkg.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%2Fx0fskvl8t1drleae5fkg.png" alt="Material UI" width="800" height="550"&gt;&lt;/a&gt;&lt;br&gt;
*Fluent UI - &lt;a href="https://developer.microsoft.com/en-us/fluentui#/get-started" rel="noopener noreferrer"&gt;click here&lt;/a&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%2Fy14i0c4u91vz3weyy2gu.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%2Fy14i0c4u91vz3weyy2gu.png" alt="Fluent UI" width="800" height="481"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Tailwind UI - &lt;a href="https://tailwindui.com/" rel="noopener noreferrer"&gt;click here&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&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%2Fnx177ei9timg69vz5rdb.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%2Fnx177ei9timg69vz5rdb.png" alt="Tailwind UI" width="800" height="442"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Using React packages can be very useful but even by using then we cannot totally escape CSS: to make an stylish project we ultimatily need to combine both CSS and React packages.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>The Coding Monster</title>
      <dc:creator>SpanglishGaby</dc:creator>
      <pubDate>Mon, 21 Nov 2022 13:58:36 +0000</pubDate>
      <link>https://dev.to/spanglishgaby/the-coding-mounster-3op4</link>
      <guid>https://dev.to/spanglishgaby/the-coding-mounster-3op4</guid>
      <description>&lt;p&gt;Programming has a reputation for being one of the most difficult disciplines to master; believe me: it is totally true, but mastering it is not impossible.&lt;/p&gt;

&lt;p&gt;I am a faithful believer that everything happens at the right time and that nothing in our life is a coincidence; it is rather a result of our actions and decisions.&lt;/p&gt;

&lt;p&gt;Several years ago, sitting in a Microcontrollers class, I told myself that Coding was not for me and that I would never be good at programming. Those words haunted me for many years. I did not dare to apply to any job that involved programming, and every time I saw a few lines of code my mind automatically told me: "you do not understand 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%2F4y0irr2rimmkzzvwwm8n.jpg" 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%2F4y0irr2rimmkzzvwwm8n.jpg" alt="Image description" width="740" height="493"&gt;&lt;/a&gt;&lt;br&gt;
For many years I lived in fear of the Coding Monster, until one day I decided that I could no longer escape my destiny and that it was time to take action. I began my search for a bootcamp and 6 weeks later I am here writing this post before entering my first Ruby class.&lt;/p&gt;

&lt;p&gt;Each person has a different way of learning. Some people learn faster and others learn slower. I am not going to say that coding is an easy discipline; it is certainly complicated but it is not impossible. Like everything in life, practice makes perfect and that's what makes a good programmer.&lt;/p&gt;

&lt;p&gt;This path is long and like all careers related to engineering it is a constant learning process. The journey of a programmer does not end when you get a job or finish a BootCamp. From here on there will be a long journey of learning and updating skillsets.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Welcome to the coding world, Are you ready to beat the coding monster?&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>cloud</category>
      <category>ai</category>
      <category>cloudflarechallenge</category>
    </item>
    <item>
      <title>How to use the Javascript Date Object to count days until a specific date</title>
      <dc:creator>SpanglishGaby</dc:creator>
      <pubDate>Mon, 14 Nov 2022 00:28:55 +0000</pubDate>
      <link>https://dev.to/spanglishgaby/how-to-use-the-javascript-date-object-to-count-days-until-a-specific-date-2bdo</link>
      <guid>https://dev.to/spanglishgaby/how-to-use-the-javascript-date-object-to-count-days-until-a-specific-date-2bdo</guid>
      <description>&lt;p&gt;Finding out the number of days until a specific date sounds tricky, but using Javascript's built-in date object we can do it easily.&lt;/p&gt;

&lt;p&gt;First, we need to understand what the &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date"&gt;Date object&lt;/a&gt; is, and how it works. At it's core, the date object contains a number which represents a specific instant in time, specifically, the number of seconds since January 1, 1970. By using a number of seconds to store the time, we can easily avoid problems related to day shifts caused by leap years and daylight savings time. &lt;/p&gt;

&lt;h1&gt;
  
  
  Making a new Date object
&lt;/h1&gt;

&lt;p&gt;Getting today's date is easy. Simply use the Date object's constructor:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; // Get today's date
const now = new Date();
// Sun Nov 13 2022 18:28:22 GMT-0500 (Eastern Standard Time)

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

&lt;/div&gt;



&lt;p&gt;To make a different date, for example, Christmas, you would use a different constructor, where the date is specified by a string:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;// Make a date object for christmas
const christmas = new Date("Dec 25, 2022 00:00:00")
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  How to get the year, month, or day from the Date
&lt;/h2&gt;

&lt;p&gt;Now that we have our time in a Date object, finding the Year, Month, or Day is as simple using Date's methods:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const year = christmas.getFullYear() \\ 2022
const month = christmas.getMonth()\\ 11 - Get month as a number (0-11)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Other Methods&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;getFullYear() Get year as a four digit number (yyyy)&lt;/li&gt;
&lt;li&gt;getMonth()    Get month as a number (0-11)&lt;/li&gt;
&lt;li&gt;getDate() Get day as a number (1-31)&lt;/li&gt;
&lt;li&gt;getDay()  Get weekday as a number (0-6)&lt;/li&gt;
&lt;li&gt;getHours()    Get hour (0-23)&lt;/li&gt;
&lt;li&gt;getMinutes()  Get minute (0-59)&lt;/li&gt;
&lt;li&gt;getSeconds()  Get second (0-59)&lt;/li&gt;
&lt;li&gt;getMilliseconds() Get millisecond (0-999)&lt;/li&gt;
&lt;li&gt;getTime() Get time (milliseconds since January 1, 1970)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now that we know about Date's methods, getting the difference in milliseconds between two dates is as easy as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const msUntilChristmas = christmas.getTime() - now.getTime();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Which can easily be converted to days until christmas by dividing by the number of ms per day:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const daysUntilChristmas = Math.floor(msUntilChristmas / (1000 * 60 * 60 * 24));
\\ use Math.floor() to round down
\\ 1000 ms per second
\\ 60 seconds per minute
\\ 60 minutes per hour
\\ 24 hours per day
console.log(`${daysUntilChristmas} days!`) /// 41 days!
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now you can calculate the exact number of days until Christmas, even if there is a leap year! Using the same concepts explained above, you can calculate the number of days, hours, or even minutes until, or since any day or time of your choosing!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programing</category>
      <category>tutorial</category>
      <category>countdown</category>
    </item>
  </channel>
</rss>
