<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ software - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ software - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Sun, 23 Aug 2026 04:23:07 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/tag/software/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ How Clients and Servers Communicate: Full Handbook on HTTP/1.1, HTTP/2, REST, WebSockets, GraphQL, gRPC, and Protocol Buffers ]]>
                </title>
                <description>
                    <![CDATA[ You've built and consumed APIs. You know what a GET request is, what a JSON response looks like, and how to add an Authorization header. You've used REST, maybe tried GraphQL, and perhaps heard of gRP ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-clients-and-servers-communicate-handbook-http-rest-websockets-graphql-grpc-protobuf/</link>
                <guid isPermaLink="false">6a62a069f97a6bd65ce3cd8f</guid>
                
                    <category>
                        <![CDATA[ server ]]>
                    </category>
                
                    <category>
                        <![CDATA[ clients ]]>
                    </category>
                
                    <category>
                        <![CDATA[ networking ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                    <category>
                        <![CDATA[ engineering ]]>
                    </category>
                
                    <category>
                        <![CDATA[ gRPC ]]>
                    </category>
                
                    <category>
                        <![CDATA[ http ]]>
                    </category>
                
                    <category>
                        <![CDATA[ http2 ]]>
                    </category>
                
                    <category>
                        <![CDATA[ protobuf ]]>
                    </category>
                
                    <category>
                        <![CDATA[ handbook ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Oluwaseyi Fatunmole ]]>
                </dc:creator>
                <pubDate>Thu, 23 Jul 2026 23:14:49 +0000</pubDate>
                <media:content url="https://cdn.hashnode.com/uploads/covers/5e1e335a7a1d3fcc59028c64/b44f7067-5398-492a-b1f7-789f73673c34.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>You've built and consumed APIs. You know what a GET request is, what a JSON response looks like, and how to add an Authorization header. You've used REST, maybe tried GraphQL, and perhaps heard of gRPC.</p>
<p>But do you know what actually happens when your application sends a request? What travels through the wire? Why does HTTP/2 make things faster? Why do WebSockets exist when HTTP already works? What makes Protocol Buffers different from JSON at a fundamental level?</p>
<p>And when you're designing a system, how do you decide which communication approach to use?</p>
<p>These are the questions this handbook answers.</p>
<p>This isn't a beginner's guide to APIs. This is a deep dive into how clients and servers actually communicate: the protocols, the trade-offs, the history of why each approach was built, and the engineering thinking behind choosing one over another.</p>
<p>By the end, you won't just know what these technologies are. You'll understand why they exist, how they work at a level that makes you a better engineer, and how to make deliberate architectural decisions about communication in your systems.</p>
<h2 id="heading-table-of-contents">Table of Contents</h2>
<ul>
<li><p><a href="#the-foundation-how-two-machines-talk-to-each-other">The Foundation: How Two Machines Talk to Each Other</a></p>
</li>
<li><p><a href="#http11-the-protocol-that-built-the-web">HTTP/1.1: The Protocol That Built the Web</a></p>
</li>
<li><p><a href="#the-problems-http11-could-not-solve">The Problems HTTP/1.1 Could Not Solve</a></p>
</li>
<li><p><a href="#http2-rebuilding-the-foundation">HTTP/2: Rebuilding the Foundation</a></p>
</li>
<li><p><a href="#http3-and-quic-the-next-evolution">HTTP/3 and QUIC: The Next Evolution</a></p>
</li>
<li><p><a href="#data-formats-how-information-is-encoded">Data Formats: How Information Is Encoded</a></p>
</li>
<li><p><a href="#rest-the-architecture-that-took-over-the-world">REST: The Architecture That Took Over the World</a></p>
</li>
<li><p><a href="#the-limits-of-rest">The Limits of REST</a></p>
</li>
<li><p><a href="#graphql-letting-the-client-decide">GraphQL: Letting the Client Decide</a></p>
</li>
<li><p><a href="#websockets-when-http-is-not-enough">WebSockets: When HTTP Is Not Enough</a></p>
</li>
<li><p><a href="#server-sent-events-the-simpler-real-time-option">Server-Sent Events: The Simpler Real-Time Option</a></p>
</li>
<li><p><a href="#protocol-buffers-a-new-language-for-data">Protocol Buffers: A New Language for Data</a></p>
</li>
<li><p><a href="#grpc-remote-procedure-calls-at-scale">gRPC: Remote Procedure Calls at Scale</a></p>
</li>
<li><p><a href="#the-complete-comparison">The Complete Comparison</a></p>
</li>
<li><p><a href="#how-to-choose-the-engineering-decision-framework">How to Choose: The Engineering Decision Framework</a></p>
</li>
<li><p><a href="#conclusion">Conclusion</a></p>
</li>
</ul>
<h2 id="heading-the-foundation-how-two-machines-talk-to-each-other">The Foundation: How Two Machines Talk to Each Other</h2>
<p>Before any protocol, data format, or architectural style enters the picture, two machines need to establish a connection. Understanding this foundation makes everything else click.</p>
<h3 id="heading-ip-addresses-and-ports">IP Addresses and Ports</h3>
<p>Every device on a network has an IP address: a unique identifier that works like a postal address. When your application sends a request to <code>api.example.com</code>, the first thing that happens is a DNS lookup, which translates that human-readable name into an IP address like <code>93.184.216.34</code>. That IP address is where the packet is going.</p>
<p>But an IP address alone isn't enough. A single server might be running dozens of different services simultaneously: a web server, a database, an email server, an SSH daemon.</p>
<p>Ports tell the operating system which service should handle the incoming connection. Port 80 is the conventional port for HTTP. Port 443 is for HTTPS. Port 5432 is for PostgreSQL. Port 22 is for SSH. When you call <code>api.example.com/users</code>, you are actually calling <code>api.example.com:443/users</code>. The browser fills in the port automatically.</p>
<h3 id="heading-tcp-the-reliable-foundation">TCP: The Reliable Foundation</h3>
<p>Most web communication runs over TCP (Transmission Control Protocol). TCP is a connection-oriented protocol, which means before any data is exchanged, both parties go through a handshake to establish a connection.</p>
<p>The TCP handshake works in three steps, which is why it's called the three-way handshake:</p>
<pre><code class="language-plaintext">Client                    Server
  |                          |
  |-------- SYN -----------&gt;|   "I want to connect"
  |                          |
  |&lt;------- SYN-ACK --------|   "Okay, I acknowledge. Ready?"
  |                          |
  |-------- ACK -----------&gt;|   "Great, let's go"
  |                          |
  [Connection established]
</code></pre>
<p>SYN stands for synchronize. ACK stands for acknowledge. After these three packets, the connection exists and data can flow.</p>
<p>TCP guarantees three things that make it the foundation of reliable communication:</p>
<ol>
<li><p><strong>Delivery</strong>: if a packet is lost in transit, TCP detects this and retransmits it automatically. The application layer never has to worry about lost packets.</p>
</li>
<li><p><strong>Order</strong>: packets arrive in the same order they were sent. If packets arrive out of order (which happens frequently on real networks), TCP reorders them before delivering them to the application.</p>
</li>
<li><p><strong>Error detection</strong>: every TCP packet includes a checksum. If the data is corrupted in transit, TCP detects and discards the corrupted packet, then requests a retransmission.</p>
</li>
</ol>
<p>This reliability comes at a cost: the overhead of the handshake, the acknowledgment packets, and the retransmission logic.</p>
<p>For many use cases, this cost is worth it. For some (live video streaming, online gaming, DNS lookups), UDP (User Datagram Protocol) is preferred because it sends packets without any of this overhead, accepting some loss in exchange for speed. HTTP/3, which we'll cover later, is built on a protocol that brings reliability to UDP.</p>
<h3 id="heading-tls-encrypting-the-connection">TLS: Encrypting the Connection</h3>
<p>On the modern web, most connections use HTTPS rather than plain HTTP. The S stands for Secure, and the security is provided by TLS (Transport Layer Security), the successor to SSL.</p>
<p>TLS adds an additional handshake on top of the TCP connection. During the TLS handshake:</p>
<ol>
<li><p>The client and the server agree on which version of TLS to use and which encryption algorithms to support</p>
</li>
<li><p>The server presents its digital certificate (issued by a trusted Certificate Authority)</p>
</li>
<li><p>The client verifies the certificate is valid and belongs to the server it intended to reach</p>
</li>
<li><p>They exchange encryption keys using asymmetric cryptography</p>
</li>
<li><p>From that point forward, all communication is encrypted with symmetric encryption</p>
</li>
</ol>
<p>The TLS handshake adds latency. In TLS 1.2, it takes two round trips before any application data can flow. TLS 1.3, released in 2018, reduced this to one round trip, and even supports zero round-trip resumption for returning connections.</p>
<p>Understanding TCP and TLS matters because every protocol we discuss runs on top of them (until HTTP/3, which changes the underlying transport). When people talk about the "overhead" of HTTPS or the "cost" of establishing a connection, they're talking about the time and packets spent on these handshakes before a single byte of your actual request travels.</p>
<h2 id="heading-http11-the-protocol-that-built-the-web">HTTP/1.1: The Protocol That Built the Web</h2>
<p>HTTP (HyperText Transfer Protocol) was invented by Tim Berners-Lee in 1991 to transfer HTML documents between computers. HTTP/1.0 was simple: one request per connection, then the connection closes.</p>
<p>HTTP/1.1, standardized in 1997, brought significant improvements and became the dominant version of HTTP for nearly two decades. It introduced persistent connections (keep connections open across multiple requests), chunked transfer encoding, and more sophisticated caching mechanisms.</p>
<h3 id="heading-how-an-http11-request-works">How an HTTP/1.1 Request Works</h3>
<p>An HTTP request is a text message with a specific structure:</p>
<pre><code class="language-plaintext">POST /api/users HTTP/1.1
Host: api.example.com
Content-Type: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiJ9...
Accept: application/json
Content-Length: 45
User-Agent: MyApp/2.0

{"name": "John Smith", "email": "john@example.com"}
</code></pre>
<p>The first line is the request line: the HTTP method (POST), the path (/api/users), and the protocol version.</p>
<p>Below that are the headers: key-value pairs that provide metadata about the request. The host, the content type, the authorization token, what format the client accepts, and how large the body is.</p>
<p>After a blank line comes the body: the actual data being sent.</p>
<p>The server processes this and responds:</p>
<pre><code class="language-plaintext">HTTP/1.1 201 Created
Content-Type: application/json
Location: /api/users/usr_789
Date: Mon, 21 Jul 2026 09:15:00 GMT
Content-Length: 89

{"id": "usr_789", "name": "John Smith", "email": "john@example.com", "created_at": "..."}
</code></pre>
<p>The response has a status line (the protocol version, the status code, and a reason phrase), headers, and a body.</p>
<h3 id="heading-http-methods-and-their-semantics">HTTP Methods and Their Semantics</h3>
<p>HTTP/1.1 defines several methods, each with specific semantics:</p>
<ul>
<li><p><strong>GET</strong> retrieves a resource. A GET request should have no side effects. It shouldn't create or modify anything. It's safe and idempotent, meaning calling it multiple times has the same effect as calling it once.</p>
</li>
<li><p><strong>POST</strong> submits data to create a new resource or trigger an action. It's neither safe nor idempotent: calling POST twice typically creates two resources.</p>
</li>
<li><p><strong>PUT</strong> replaces a resource entirely with the provided data. It's idempotent: calling PUT twice with the same data has the same effect as calling it once.</p>
</li>
<li><p><strong>PATCH</strong> partially updates a resource. Only the fields provided are changed.</p>
</li>
<li><p><strong>DELETE</strong> removes a resource. It's idempotent: deleting something that doesn't exist is still considered successful.</p>
</li>
<li><p><strong>HEAD</strong> is identical to GET but the server only returns headers, not the body. It's used to check if a resource exists or has been modified without downloading the full content.</p>
</li>
<li><p><strong>OPTIONS</strong> asks the server what methods are allowed for a resource. It's used in CORS preflight requests.</p>
</li>
</ul>
<h3 id="heading-status-codes">Status Codes</h3>
<p>HTTP status codes are three-digit numbers grouped into five categories:</p>
<p><strong>1xx Informational</strong> — the server has received the request and is continuing to process it. These are rarely seen in practice outside of specific use cases like HTTP upgrade (used to establish WebSocket connections).</p>
<p><strong>2xx Success</strong> — the request was received, understood, and accepted.</p>
<ul>
<li><p>200 OK: standard success response</p>
</li>
<li><p>201 Created: a new resource was created</p>
</li>
<li><p>204 No Content: success but nothing to return (common for DELETE)</p>
</li>
</ul>
<p><strong>3xx Redirection</strong> — further action is required to complete the request.</p>
<ul>
<li><p>301 Moved Permanently: the resource has a new URL forever</p>
</li>
<li><p>302 Found: temporary redirect</p>
</li>
<li><p>304 Not Modified: the cached version is still valid (used with ETags)</p>
</li>
</ul>
<p><strong>4xx Client Error</strong> — the request contains bad syntax or can't be fulfilled.</p>
<ul>
<li><p>400 Bad Request: the request is malformed</p>
</li>
<li><p>401 Unauthorized: authentication is required (despite the name, it means unauthenticated)</p>
</li>
<li><p>403 Forbidden: authenticated but not authorized to access this resource</p>
</li>
<li><p>404 Not Found: the resource doesn't exist</p>
</li>
<li><p>422 Unprocessable Entity: the request is syntactically valid but semantically wrong (common for validation errors)</p>
</li>
<li><p>429 Too Many Requests: rate limit exceeded</p>
</li>
</ul>
<p><strong>5xx Server Error</strong> — the server failed to fulfill a valid request.</p>
<ul>
<li><p>500 Internal Server Error: something went wrong on the server</p>
</li>
<li><p>502 Bad Gateway: the server received an invalid response from an upstream server</p>
</li>
<li><p>503 Service Unavailable: the server is temporarily unavailable</p>
</li>
<li><p>504 Gateway Timeout: the upstream server did not respond in time</p>
</li>
</ul>
<h3 id="heading-caching-in-http11">Caching in HTTP/1.1</h3>
<p>One of HTTP/1.1's most powerful features is its built-in caching model. Responses can include headers that tell clients and intermediate caches how long to store a response and when to revalidate it.</p>
<ul>
<li><p><code>Cache-Control: max-age=3600</code> tells the client to cache this response for one hour.</p>
</li>
<li><p><code>Cache-Control: no-cache</code> tells the client to always revalidate with the server before using a cached response.</p>
</li>
<li><p><code>Cache-Control: no-store</code> tells the client never to cache this response.</p>
</li>
</ul>
<p><code>ETag</code> is a fingerprint of the response content. When the client makes a subsequent request, it sends the ETag back in an <code>If-None-Match</code> header. If the content hasn't changed, the server responds with 304 Not Modified and no body, saving bandwidth.</p>
<p><code>Last-Modified</code> works similarly: the client sends <code>If-Modified-Since</code> and the server confirms whether the content has changed.</p>
<p>Caching is one of the key reasons REST over HTTP became dominant. GET requests to well-designed REST APIs can be cached at the CDN level, meaning the same response is served to thousands of users without the request ever reaching your origin server.</p>
<h2 id="heading-the-problems-http11-could-not-solve">The Problems HTTP/1.1 Could Not Solve</h2>
<p>HTTP/1.1 served the web well for two decades. But as the web grew more complex, applications more dynamic, and user expectations higher, its architectural limitations became significant performance bottlenecks.</p>
<h3 id="heading-head-of-line-blocking">Head-of-Line Blocking</h3>
<p>HTTP/1.1 processes requests sequentially on a single connection. The server must finish responding to one request before the next one on the same connection begins.</p>
<pre><code class="language-plaintext">Connection 1:
Request 1 (slow database query) -----&gt; [3 seconds] -----&gt; Response 1
Request 2 (fast in-memory read) -----&gt; [waits 3 seconds] -----&gt; Response 2
Request 3 (static file) -----------&gt; [waits 3+ seconds] -----&gt; Response 3
</code></pre>
<p>Request 2 and Request 3 are fast operations. But they're stuck waiting for Request 1 to complete. This is head-of-line blocking: the head of the queue blocks everything behind it.</p>
<p>Browsers worked around this by opening multiple parallel TCP connections to the same server, typically six. But each connection requires its own TCP handshake and TLS negotiation, consuming resources on both the client and server.</p>
<h3 id="heading-verbose-headers-on-every-request">Verbose Headers on Every Request</h3>
<p>Every HTTP/1.1 request sends its complete headers as plain text. Consider a mobile application making fifty requests during a session. On every single request, the following headers are sent in full:</p>
<pre><code class="language-plaintext">Host: api.example.com
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ1c3JfMTIzIn0...
Content-Type: application/json
Accept: application/json
Accept-Language: en-US,en;q=0.9
Accept-Encoding: gzip, deflate, br
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)...
</code></pre>
<p>The Authorization header alone, carrying a JWT, can be 400 to 600 bytes. Multiplied by fifty requests, that is 20 to 30 kilobytes of data carrying nothing but headers that haven't changed between requests.</p>
<p>On a 4G mobile connection with limited bandwidth, this is waste. On a 2G connection in a network-constrained environment, it's a significant performance penalty.</p>
<h3 id="heading-no-server-push">No Server Push</h3>
<p>HTTP/1.1 is strictly request-response. The server can't send data until the client asks for it. This fundamental limitation means the server can never proactively inform the client of changes.</p>
<p>For applications requiring real-time updates, short polling became a common workaround: the client sends a request every few seconds asking "has anything changed?" This is inefficient because most polling requests receive a "no, nothing has changed" response, consuming bandwidth and server resources for no purpose.</p>
<p>Long polling was a refinement: the client sends a request and the server holds it open until something changes or a timeout occurs. This reduces unnecessary responses but keeps connections open indefinitely, consuming server resources.</p>
<p>Both are workarounds for a fundamental limitation of HTTP/1.1's request-response model.</p>
<h3 id="heading-inefficient-use-of-connections">Inefficient Use of Connections</h3>
<p>Opening a new TCP connection requires the three-way handshake plus the TLS handshake: a process that can take 200 to 500 milliseconds on a mobile connection.</p>
<p>HTTP/1.1 introduced keep-alive connections to reuse connections across multiple requests, but head-of-line blocking made this only partially effective. Browsers opened multiple connections to compensate, but six parallel connections per domain is both a client limitation and a server resource concern at scale.</p>
<h2 id="heading-http2-rebuilding-the-foundation">HTTP/2: Rebuilding the Foundation</h2>
<p>Google published a protocol called SPDY (pronounced "speedy") in 2009, designed to address HTTP/1.1's performance limitations. SPDY demonstrated that significant improvements were possible without changing the fundamental HTTP semantics. HTTP/2, standardized by the IETF in 2015, was heavily based on SPDY and became the successor to HTTP/1.1.</p>
<p>HTTP/2 doesn't change what you send. From the application developer's perspective, requests still have methods, paths, headers, and bodies. Responses still have status codes, headers, and bodies. What HTTP/2 changes is how all of this is transmitted.</p>
<h3 id="heading-binary-framing-the-core-change">Binary Framing: The Core Change</h3>
<p>HTTP/1.1 is a text protocol. Headers, status lines, and method names are all ASCII text. Machines must parse this text character by character to interpret it.</p>
<p>HTTP/2 is a binary protocol. Every piece of information is encoded as binary frames rather than text. Binary is more compact and significantly faster for machines to parse. Instead of tokenizing a string looking for colons and newlines to separate header names from values, a binary parser reads fixed-length fields directly from memory.</p>
<p>The binary framing layer is the foundation everything else in HTTP/2 is built upon.</p>
<h3 id="heading-multiplexing-many-streams-one-connection">Multiplexing: Many Streams, One Connection</h3>
<p>HTTP/2 introduces the concept of streams. A stream is an independent, bidirectional sequence of frames within a single TCP connection. Multiple streams can exist simultaneously on the same connection.</p>
<pre><code class="language-plaintext">Single TCP connection to api.example.com

Stream 1: GET /user/profile ---------&gt; Response arrives
Stream 2: GET /user/balance ---------&gt; Response arrives
Stream 3: POST /transactions --------&gt; Response arrives
Stream 4: GET /notifications --------&gt; Response arrives

All four streams active simultaneously
No stream waits for any other stream
</code></pre>
<p>This is multiplexing: many independent requests and responses interleaved on the same connection. Head-of-line blocking at the HTTP level is eliminated. A slow request on Stream 1 doesn't prevent Stream 2, 3, or 4 from receiving their responses.</p>
<p>One connection replaces six parallel connections. The TCP handshake and TLS negotiation happen once. Connection overhead drops dramatically.</p>
<h3 id="heading-header-compression-with-hpack">Header Compression with HPACK</h3>
<p>HTTP/2 compresses headers using an algorithm called HPACK specifically designed for HTTP headers.</p>
<p>HPACK works in two ways. First, it maintains a table of previously seen headers. Instead of retransmitting a header that was sent on the previous request, it sends a reference to the table entry: a single integer instead of hundreds of bytes of text.</p>
<p>Second, HPACK uses Huffman encoding for new header values, reducing the size of strings that can't be referenced from the table.</p>
<p>The result: a mobile application sending the same Authorization header on every request transmits it in full on the first request, then sends a one-byte or two-byte reference on every subsequent request. What was 500 bytes of overhead becomes 2 bytes.</p>
<p>Across fifty requests in a session, this eliminates thousands of bytes of redundant header transmission.</p>
<h3 id="heading-stream-prioritization">Stream Prioritization</h3>
<p>HTTP/2 allows clients to assign priority to streams. A browser loading a web page can signal that the CSS file (needed to render anything) is higher priority than the analytics script (not needed for initial render). The server can use these priorities to decide the order in which it sends frames when multiple streams are active.</p>
<p>In practice, stream prioritization has been inconsistently implemented and is being redesigned in HTTP/3.</p>
<h3 id="heading-server-push">Server Push</h3>
<p>HTTP/2 allows the server to proactively send resources to the client without waiting for a request. When a browser requests an HTML file, the server can immediately push the CSS and JavaScript files it knows the browser will need next, before the browser has even parsed the HTML to discover it needs them.</p>
<pre><code class="language-plaintext">Client: GET /index.html
Server: Here is index.html
Server: (push) Here is styles.css — you will need this
Server: (push) Here is app.js — you will need this too
</code></pre>
<p>In practice, server push has had mixed adoption due to implementation complexity and the risk of pushing resources the client already has cached. HTTP/3 is reconsidering how push should work.</p>
<h3 id="heading-http2-and-grpc">HTTP/2 and gRPC</h3>
<p>HTTP/2's multiplexing and persistent connections make it the ideal transport for gRPC. A single HTTP/2 connection can carry many concurrent gRPC calls, including long-running streaming calls that push data continuously. This is why gRPC requires HTTP/2: the features that make gRPC efficient are provided by the transport layer.</p>
<h2 id="heading-http3-and-quic-the-next-evolution">HTTP/3 and QUIC: The Next Evolution</h2>
<p>Even with HTTP/2's improvements, one fundamental problem remained: TCP head-of-line blocking.</p>
<p>HTTP/2 eliminated head-of-line blocking at the HTTP level. Multiple HTTP/2 streams can proceed independently. But all of those streams share a single TCP connection. TCP guarantees ordered delivery of all bytes in a connection. If a single TCP packet is lost, the entire connection stalls while TCP retransmits that packet, even for streams that have nothing to do with the lost packet.</p>
<pre><code class="language-plaintext">HTTP/2 over TCP — packet loss scenario:

Stream 1: data in flight...
Stream 2: data in flight...
Stream 3: packet LOST — TCP retransmission required

Stream 1: STALLED (waiting for TCP retransmission)
Stream 2: STALLED (waiting for TCP retransmission)
Stream 3: retransmission in progress...
</code></pre>
<p>Both streams 1 and 2 are blocked by a packet loss that affected only stream 3. This is TCP head-of-line blocking, and HTTP/2 can't eliminate it because it operates above the TCP layer.</p>
<h3 id="heading-quic-a-new-transport-protocol">QUIC: A New Transport Protocol</h3>
<p>Google developed QUIC (Quick UDP Internet Connections) to solve this problem. QUIC is a new transport protocol built on UDP instead of TCP, designed to provide some very helpful new features:</p>
<ol>
<li><p><strong>Multiplexing without head-of-line blocking:</strong> QUIC understands streams natively. A packet loss in one QUIC stream only stalls that stream. Other streams on the same connection continue flowing freely.</p>
</li>
<li><p><strong>Built-in encryption:</strong> Unlike TLS which runs on top of TCP, QUIC has TLS 1.3 built into the protocol itself. The transport and security layers are integrated, reducing the number of round trips required before data can flow.</p>
</li>
<li><p><strong>Faster connection establishment:</strong> A new QUIC connection requires one round trip before data can flow. For returning connections where a session ticket exists, QUIC can send data in zero round trips (0-RTT).</p>
</li>
<li><p><strong>Connection migration:</strong> A TCP connection is identified by the four-tuple of source IP, source port, destination IP, and destination port. If any of these change (say, a mobile device switches from WiFi to cellular), the TCP connection breaks and must be re-established. QUIC connections are identified by a connection ID that survives network changes, enabling seamless handoff.</p>
</li>
</ol>
<h3 id="heading-http3">HTTP/3</h3>
<p>HTTP/3 is HTTP semantics over QUIC. The request and response model remains the same. Headers, status codes, and methods are all identical. The transport underneath is QUIC instead of TCP.</p>
<p>HTTP/3 is particularly impactful for:</p>
<ol>
<li><p><strong>Mobile networks</strong> where packet loss is more common and devices frequently switch between networks.</p>
</li>
<li><p><strong>High-latency connections</strong> where the reduced handshake round trips save meaningful time.</p>
</li>
<li><p><strong>Applications with many concurrent streams</strong> where TCP head-of-line blocking was a real bottleneck.</p>
</li>
</ol>
<p>As of 2026, HTTP/3 is supported by major browsers, CDNs, and an increasing number of backend servers. Adoption continues to grow.</p>
<h2 id="heading-data-formats-how-information-is-encoded">Data Formats: How Information Is Encoded</h2>
<p>Independent of which protocol carries data, systems need to agree on how data is encoded. The most important formats for API communication are JSON and Protocol Buffers.</p>
<h3 id="heading-json-the-universal-language">JSON: The Universal Language</h3>
<p>JSON (JavaScript Object Notation) was derived from JavaScript syntax and formalized as a standalone data format. Its design philosophy is human readability and simplicity.</p>
<p>A JSON object is a collection of key-value pairs enclosed in curly braces. Keys are always strings. Values can be strings, numbers, booleans, null, arrays, or other objects.</p>
<pre><code class="language-plaintext">{
  "id": "usr_001",
  "name": "John Smith",
  "age": 28,
  "is_verified": true,
  "scores": [98, 87, 92],
  "address": {
    "city": "Lagos",
    "country": "Nigeria"
  }
}
</code></pre>
<p>JSON became the dominant API data format for several reasons. It's human-readable: a developer can look at a JSON response in a browser's developer tools and immediately understand it. It maps naturally to data structures in virtually every programming language. It requires no special tooling or schema definition. And it's flexible: fields can be added or removed without necessarily breaking existing clients.</p>
<h3 id="heading-the-structural-cost-of-json">The Structural Cost of JSON</h3>
<p>JSON's human-readable design comes with a structural cost that becomes significant at scale.</p>
<p>Every field name is a string that travels over the network on every single response. In the example above, the strings <code>"is_verified"</code>, <code>"address"</code>, <code>"country"</code> aren't data. They're labels for data. They consume bytes, they must be tokenized and parsed, and they're repeated on every response for every user.</p>
<p>JSON is a text format, which means it must be parsed from text into the application's native data structures. This parsing isn't free: it requires allocating memory for strings, walking the text byte by byte to find delimiters, and constructing objects from the parsed values.</p>
<p>For a fintech platform with an internal API that returns a 1000-field response and is called by dozens of internal services millions of times per day, the cumulative cost of JSON's verbosity and parsing overhead becomes measurable in bandwidth bills and server CPU time.</p>
<p>JSON also has no formal schema at the network level. There's nothing in the JSON format itself that prevents a backend from changing <code>"account_balance"</code> to <code>"balance"</code>. The change compiles fine. The server deploys. Clients that depend on <code>"account_balance"</code> break silently at runtime.</p>
<h3 id="heading-xml-the-predecessor">XML: The Predecessor</h3>
<p>Before JSON, XML (eXtensible Markup Language) was the dominant data format for web services (used in SOAP, the predecessor to REST). XML is more verbose than JSON, wrapping every value in opening and closing tags:</p>
<pre><code class="language-plaintext">&lt;user&gt;
  &lt;id&gt;usr_001&lt;/id&gt;
  &lt;name&gt;John Smith&lt;/name&gt;
  &lt;age&gt;28&lt;/age&gt;
  &lt;is_verified&gt;true&lt;/is_verified&gt;
&lt;/user&gt;
</code></pre>
<p>XML has advantages: it supports schemas (XSD), namespaces, and complex document structures. It's still used in enterprise systems, document formats (DOCX, SVG, RSS), and configuration files. But for API communication, JSON's simplicity won.</p>
<h2 id="heading-rest-the-architecture-that-took-over-the-world">REST: The Architecture That Took Over the World</h2>
<p>REST (Representational State Transfer) was defined by Roy Fielding in his doctoral dissertation in 2000. Fielding was one of the principal authors of the HTTP specification, and REST emerged from his analysis of what made HTTP architecturally successful.</p>
<p>REST isn't a protocol. It's an architectural style: a set of constraints that, when applied to a distributed system, produce desired properties including scalability, simplicity, and modifiability.</p>
<h3 id="heading-the-six-rest-constraints">The Six REST Constraints</h3>
<p>Fielding defined six constraints that define a RESTful architecture. Most APIs described as "REST" implement a subset of these, which is why the term "RESTful" covers a wide spectrum.</p>
<p><strong>1. Client-Server:</strong> The client and server are separate concerns. The client manages the user interface. The server manages data storage and business logic. They evolve independently. This separation allows each to scale and change without affecting the other.</p>
<p><strong>2. Stateless:</strong> Each request from the client to the server must contain all the information needed to understand and process the request. The server doesn't store any session state between requests. If a client needs to be authenticated, the authentication information (typically a token) travels with every request.</p>
<p>Statelessness is what makes REST APIs horizontally scalable. Any server instance can handle any request because no session state needs to be co-located with the request. Load balancers can route requests freely.</p>
<p><strong>3. Cacheable:</strong> Responses must define themselves as cacheable or non-cacheable. If a response is cacheable, clients and intermediate layers (CDN, reverse proxies) can store and reuse the response without hitting the server.</p>
<p>Caching is one of the most powerful properties of REST. A well-designed REST API can serve millions of identical GET requests from CDN cache, with only a fraction ever reaching the origin server.</p>
<p><strong>4. Uniform Interface:</strong> The interface between client and server is standardized. Resources are identified by URIs. Resources are manipulated through representations. Messages are self-descriptive. This uniformity is what makes REST APIs universally accessible: a developer in any language can call a REST API using standard HTTP tooling.</p>
<p><strong>5. Layered System:</strong> The client doesn't need to know whether it's connected directly to the server or to an intermediary (load balancer, CDN, API gateway, caching proxy). Each layer only sees the layer it is interacting with. This enables transparent scaling and security.</p>
<p><strong>6. Code on Demand (Optional):</strong> Servers can extend client functionality by sending executable code (JavaScript). This is the only optional constraint and is the basis for how browsers work, but rarely relevant to API design.</p>
<h3 id="heading-resources-and-uris">Resources and URIs</h3>
<p>The central concept in REST is the resource. A resource is any piece of information that can be named, like a user, an order, a product, or a collection of transactions.</p>
<p>Resources are identified by URIs (Uniform Resource Identifiers). The URI identifies what the resource is, not what to do with it. The HTTP method expresses the operation.</p>
<pre><code class="language-plaintext">GET    /users           — retrieve all users
GET    /users/123       — retrieve user 123
POST   /users           — create a new user
PUT    /users/123       — replace user 123 entirely
PATCH  /users/123       — partially update user 123
DELETE /users/123       — delete user 123

GET    /users/123/orders        — orders belonging to user 123
POST   /users/123/orders        — create an order for user 123
GET    /users/123/orders/456    — order 456 belonging to user 123
</code></pre>
<p>The URI structure forms a hierarchy that reflects the relationships between resources. This makes APIs predictable: a developer who understands the resource model can guess the correct URIs.</p>
<h3 id="heading-why-rest-won">Why REST Won</h3>
<p>REST became the dominant architectural style for web APIs for reasons that go beyond technical merit:</p>
<p><strong>Universal accessibility:</strong> Any device, any language, any framework that can make an HTTP request can call a REST API. There's no special client library needed.</p>
<p><strong>HTTP alignment:</strong> REST leverages HTTP's existing infrastructure. CDN caching works for free. Load balancers understand HTTP. Monitoring tools speak HTTP. The entire ecosystem is built around HTTP semantics.</p>
<p><strong>Simplicity:</strong> A REST API can be designed, documented, and consumed with minimal tooling. A developer can test endpoints in a browser or with <code>curl</code> immediately.</p>
<p><strong>Developer experience:</strong> JSON over HTTP is something every web developer already understands. The learning curve is essentially zero.</p>
<p><strong>Ecosystem maturity:</strong> OpenAPI/Swagger provides standardized documentation. Postman provides testing. Every programming language has robust HTTP client libraries.</p>
<h3 id="heading-the-limits-of-rest">The Limits of REST</h3>
<p>REST's success is real. But so are its limitations, and understanding them is essential to knowing when to reach for something else.</p>
<h4 id="heading-overfetching-getting-more-than-you-need">Overfetching: Getting More Than You Need</h4>
<p>A REST endpoint returns a fixed shape of data. The <code>/users/123</code> endpoint returns the full user object: name, email, phone, address, preferences, account status, and thirty other fields.</p>
<p>A mobile screen that displays only the user's name and avatar must receive all of those fields to use two of them. The rest is waste: wasted bandwidth, serialization on the server, and deserialization on the client.</p>
<p>On a constrained mobile connection, this overfetching isn't just inefficient. It's a measurable degradation of user experience.</p>
<h4 id="heading-underfetching-not-getting-enough-at-once">Underfetching: Not Getting Enough at Once</h4>
<p>The opposite problem is equally common. A screen needs data from multiple resources: the user's profile, their recent orders, their notification count, and their account balance.</p>
<p>A REST API typically models these as separate endpoints. Loading this screen requires four separate HTTP requests, each with its own round-trip latency.</p>
<pre><code class="language-plaintext">GET /users/123         → profile data
GET /users/123/orders  → orders data
GET /notifications?user=123 → notification count
GET /accounts/123/balance   → balance data
</code></pre>
<p>Four sequential round trips. On a 200ms latency connection, that's 800ms of network time before the screen can render completely.</p>
<h4 id="heading-the-n1-problem">The N+1 Problem</h4>
<p>A common variant of underfetching: you fetch a list of resources, then must fetch additional data for each item in the list.</p>
<pre><code class="language-plaintext">GET /orders            → returns 20 orders (each with a user_id)
GET /users/1           → user for order 1
GET /users/2           → user for order 2
...
GET /users/20          → user for order 20
</code></pre>
<p>21 requests to load one screen. This pattern appears constantly in REST APIs and is addressed in various ways: including nested data in responses, adding query parameters to expand related resources, or creating purpose-built endpoints for specific screens.</p>
<p>All of these workarounds create tension: the API becomes less general as it's optimized for specific client needs.</p>
<h4 id="heading-no-native-real-time-support">No Native Real-Time Support</h4>
<p>REST is request-response. The client initiates every interaction. The server can never proactively push data.</p>
<p>Real-time features like live notifications, collaborative editing, and streaming data require either polling (inefficient), long-polling (complex), or a separate real-time technology bolted alongside the REST API.</p>
<h4 id="heading-the-documentation-drift-problem">The Documentation Drift Problem</h4>
<p>A REST API contract lives in documentation. Nothing in the HTTP protocol enforces that the documentation accurately reflects the API's actual behavior. As APIs evolve, documentation falls behind. Fields are renamed, types change, endpoints are deprecated. Clients built against outdated documentation break.</p>
<p>This isn't a theoretical problem. It's a daily reality in engineering teams where the backend and frontend evolve at different speeds.</p>
<h2 id="heading-graphql-letting-the-client-decide">GraphQL: Letting the Client Decide</h2>
<p>GraphQL was developed at Facebook starting in 2012 and open-sourced in 2015. Facebook built it to solve a specific problem: their mobile app needed to fetch complex, interconnected social data from a REST API, and the resulting overfetching and multiple round trips were degrading performance on mobile devices.</p>
<p>GraphQL's core insight is simple and radical: instead of the server deciding what data to return, let the client specify exactly what it needs.</p>
<h3 id="heading-the-query-language">The Query Language</h3>
<p>GraphQL is both a query language for APIs and a runtime for executing those queries. Rather than calling different endpoints for different data, all GraphQL requests go to a single endpoint (typically <code>/graphql</code>) and include a query that describes precisely what data is needed.</p>
<p>A GraphQL query for a user profile screen:</p>
<pre><code class="language-plaintext">query UserProfile {
  user(id: "usr_123") {
    name
    avatarUrl
    recentOrders(limit: 3) {
      id
      total
      status
      createdAt
    }
    notificationCount
  }
}
</code></pre>
<p>The response contains exactly and only the fields requested. Nothing more. If the client needs only <code>name</code> and <code>avatarUrl</code>, it requests only those two fields. The response contains only two fields.</p>
<h3 id="heading-mutations-and-subscriptions">Mutations and Subscriptions</h3>
<p>GraphQL has three operation types:</p>
<ol>
<li><p><strong>Queries</strong> fetch data. They're the GraphQL equivalent of GET requests.</p>
</li>
<li><p><strong>Mutations</strong> modify data: creating, updating, or deleting resources. They're the GraphQL equivalent of POST, PUT, PATCH, and DELETE.</p>
</li>
<li><p><strong>Subscriptions</strong> establish a persistent connection and push data in real-time when specified events occur. A subscription to <code>orderStatusChanged</code> receives a push every time any order's status changes. This is GraphQL's real-time capability, typically implemented over WebSockets.</p>
</li>
</ol>
<h3 id="heading-the-schema">The Schema</h3>
<p>Every GraphQL API is defined by a schema written in the Schema Definition Language (SDL). The schema declares every type, query, mutation, and subscription the API supports.</p>
<pre><code class="language-plaintext">type User {
  id: ID!
  name: String!
  email: String!
  orders: [Order!]!
  notificationCount: Int!
}

type Order {
  id: ID!
  total: Float!
  status: OrderStatus!
  createdAt: String!
}

enum OrderStatus {
  PENDING
  PROCESSING
  SHIPPED
  DELIVERED
}

type Query {
  user(id: ID!): User
  orders(userId: ID!, limit: Int): [Order!]!
}

type Mutation {
  createOrder(userId: ID!, items: [OrderItemInput!]!): Order!
}
</code></pre>
<p>The schema is introspectable: clients can query the schema itself to discover what types and operations are available. This enables powerful tooling: GraphQL IDEs can autocomplete queries, validate them against the schema before sending, and display documentation inline.</p>
<h3 id="heading-where-graphql-wins">Where GraphQL Wins</h3>
<p><strong>Precise data fetching:</strong> Clients request exactly what they need. Overfetching is eliminated by design.</p>
<p><strong>Single round trip for complex data:</strong> Data from multiple resources is fetched in a single request. The N+1 problem is solved at the query level rather than requiring the client to make multiple requests.</p>
<p><strong>Strongly typed schema:</strong> The schema is the contract. Clients can validate their queries against it at build time. Type mismatches are caught before deployment.</p>
<p><strong>Frontend agility:</strong> Frontend teams can evolve their data requirements without asking backend teams to create new endpoints. New screens, data combinations, and features are all handled by writing a new query.</p>
<p><strong>Excellent tooling:</strong> GraphiQL and Apollo Studio provide interactive schema exploration, query building, and performance analysis.</p>
<h3 id="heading-where-graphql-struggles">Where GraphQL Struggles</h3>
<p><strong>Query complexity:</strong> A malicious or poorly written query can request enormous amounts of nested data. A query that fetches every user, each user's orders, each order's items, and each item's product details can bring a server to its knees.</p>
<p>REST endpoints can be individually optimized. GraphQL requires query complexity analysis, depth limiting, and rate limiting to protect the server.</p>
<p><strong>Caching is harder:</strong> REST GET requests are cacheable at the HTTP level by default. GraphQL queries all go through POST requests to a single endpoint, breaking standard HTTP caching. Clients must implement their own caching (Apollo Client does this), but CDN-level caching is essentially unavailable for dynamic queries.</p>
<p><strong>Over-engineering simple APIs:</strong> If your API is straightforward CRUD operations with no complex data relationships and no mobile clients with aggressive data constraints, GraphQL's added setup cost exceeds its benefit.</p>
<p><strong>Real-time at scale is complex:</strong> GraphQL subscriptions work, but scaling WebSocket connections for thousands of concurrent subscribers is infrastructure-intensive and requires careful architecture.</p>
<p><strong>Error handling is non-standard:</strong> A GraphQL request can partially succeed: some fields resolve successfully while others fail. The response includes both data and errors simultaneously. Handling this gracefully requires more nuanced error handling logic than a simple HTTP status code.</p>
<h2 id="heading-websockets-when-http-is-not-enough">WebSockets: When HTTP Is Not Enough</h2>
<p>HTTP, in all its versions, is fundamentally request-response. The client speaks first. The server responds. The conversation ends. Even with HTTP/2's server push, the client initiates every new exchange.</p>
<p>But some applications genuinely need both sides to be able to speak at any moment, without waiting for the other to ask first. For example, a chat application where both parties send messages freely. A live collaborative document where every keystroke is broadcast to co-editors. An online game where the server pushes state updates as they happen and the client sends actions continuously.</p>
<p>For these cases, WebSockets provide a fundamentally different communication model.</p>
<h3 id="heading-the-websocket-handshake">The WebSocket Handshake</h3>
<p>A WebSocket connection starts as an HTTP request and then upgrades to a WebSocket connection. This upgrade mechanism means WebSockets work through existing HTTP infrastructure (firewalls, proxies, load balancers) without requiring special configuration.</p>
<p>The upgrade request:</p>
<pre><code class="language-plaintext">GET /chat HTTP/1.1
Host: api.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Sec-WebSocket-Version: 13
</code></pre>
<p>The server confirms the upgrade:</p>
<pre><code class="language-plaintext">HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
</code></pre>
<p>Status code 101 means "Switching Protocols." From this point forward, the HTTP connection is replaced by a WebSocket connection. The protocol has changed. HTTP headers, status codes, and methods no longer apply.</p>
<h3 id="heading-full-duplex-persistent-communication">Full-Duplex, Persistent Communication</h3>
<p>The WebSocket connection is:</p>
<ul>
<li><p><strong>Full-duplex:</strong> both the client and server can send messages at any time, simultaneously, without waiting for the other to finish.</p>
</li>
<li><p><strong>Persistent:</strong> the connection stays open until explicitly closed by either party or until a network interruption occurs.</p>
</li>
<li><p><strong>Low overhead:</strong> once established, WebSocket messages have minimal framing overhead compared to HTTP. A small WebSocket message may have only 2 to 10 bytes of overhead, versus potentially hundreds of bytes of HTTP headers.</p>
</li>
</ul>
<pre><code class="language-plaintext">WebSocket connection open

Client: "Hello, I'm user 123"
Server: "Welcome, user 123"
Server: "User 456 just sent you a message: Hey!"
Client: "Thanks, here's my reply: Hi there!"
Server: "New notification: your payment was confirmed"
Client: "Great, show me my balance"
Server: "Your balance is NGN 500,000"
Server: "Another notification: transfer from user 789 received"

[Both sides communicate freely, at any time, simultaneously]
</code></pre>
<h3 id="heading-where-websockets-win">Where WebSockets Win</h3>
<p><strong>True real-time bidirectional communication</strong>: Applications where both client and server need to send messages at unpredictable times and at high frequency. For example, chat, live collaboration, multiplayer games, financial trading terminals.</p>
<p><strong>Low-latency messaging:</strong> Once the connection is established, message round-trip times can be in the single-digit milliseconds, limited only by network latency rather than connection setup overhead.</p>
<p><strong>Native browser support:</strong> The WebSocket API is built into every modern browser. No libraries are needed for the fundamental connection.</p>
<p><strong>Event-driven architecture on the client:</strong> WebSocket events (message, close, error) map naturally to event-driven client code.</p>
<h3 id="heading-where-websockets-struggle">Where WebSockets Struggle</h3>
<p><strong>Stateful connections:</strong> Each WebSocket connection must be maintained by a specific server instance. When scaling horizontally, a client connected to Server A can't receive messages from Server B without a shared pub/sub layer (like Redis) that all server instances publish to and subscribe from. This adds infrastructure complexity.</p>
<p><strong>No built-in request-response correlation:</strong> WebSockets are a message stream. If you send a message and expect a response, there's no built-in mechanism to correlate which response corresponds to which request. You have to build this yourself.</p>
<p><strong>No schema or contract:</strong> WebSockets send raw text or binary. The format of messages is defined entirely by the application. Two systems communicating over WebSockets must agree on message format out of band, in documentation, and there's nothing to enforce it at the connection level.</p>
<p><strong>Firewall and proxy complications:</strong> Some corporate networks and older proxies don't support the HTTP upgrade mechanism correctly, breaking WebSocket connections. This is less common than it was but still occurs in enterprise environments.</p>
<p><strong>Reconnection must be handled manually:</strong> WebSocket connections can drop due to network instability. Applications must implement reconnection logic, including managing state across reconnections.</p>
<h2 id="heading-server-sent-events-the-simpler-real-time-option">Server-Sent Events: The Simpler Real-Time Option</h2>
<p>Between REST's pure request-response and WebSocket's full bidirectional communication lies a middle option that most developers overlook: Server-Sent Events (SSE).</p>
<p>SSE establishes a one-directional persistent connection: the server pushes data to the client over a regular HTTP connection, and the client listens. The client can't send data back through the same connection.</p>
<h3 id="heading-how-sse-works">How SSE Works</h3>
<p>The client makes a standard HTTP GET request with an <code>Accept: text/event-stream</code> header:</p>
<pre><code class="language-plaintext">GET /notifications HTTP/1.1
Host: api.example.com
Accept: text/event-stream
Authorization: Bearer token123
</code></pre>
<p>The server responds with a 200 OK and keeps the connection open, periodically sending events:</p>
<pre><code class="language-plaintext">HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache

data: {"type": "balance_update", "balance": 500000}

data: {"type": "transaction", "id": "txn_001", "amount": -5000}

event: notification
data: {"message": "Your transfer has been confirmed"}

id: 42
data: {"type": "order_status", "status": "shipped"}
</code></pre>
<p>Each event is separated by a blank line. Events can include a <code>data</code> field, an optional <code>event</code> type, and an optional <code>id</code> for resumability.</p>
<h3 id="heading-automatic-reconnection">Automatic Reconnection</h3>
<p>One of SSE's most practical features is automatic reconnection. If the connection drops, the browser automatically reconnects, sending the last received event ID in a <code>Last-Event-ID</code> header. The server can resume from that point, ensuring no events are missed.</p>
<h3 id="heading-where-sse-wins">Where SSE Wins</h3>
<p><strong>Simplicity:</strong> SSE works over plain HTTP. There's no protocol upgrade needed, and no special infrastructure. It works through every HTTP/2 connection, load balancer, and CDN that supports streaming.</p>
<p><strong>Native browser support:</strong> The <code>EventSource</code> API is built into every modern browser. Automatic reconnection is built in.</p>
<p><strong>Perfect for one-directional feeds:</strong> Live dashboards, notification streams, news feeds, real-time analytics, server logs: any scenario where the server pushes a continuous stream of updates and the client only reads.</p>
<p><strong>HTTP/2 multiplexing:</strong> Over HTTP/2, multiple SSE connections can share a single TCP connection. The browser connection limit that affected SSE over HTTP/1.1 doesn't apply.</p>
<p><strong>Natural fit for existing infrastructure:</strong> SSE responses are just HTTP responses. Existing load balancers, authentication middleware, and monitoring tools work without modification.</p>
<h3 id="heading-where-sse-struggles">Where SSE Struggles</h3>
<p><strong>One direction only:</strong> The client can't send data back through the SSE connection. For bidirectional scenarios, SSE isn't sufficient on its own.</p>
<p><strong>Text only (natively):</strong> SSE events are text. Binary data must be base64-encoded, adding overhead.</p>
<p><strong>No native support in all environments.</strong> SSE is a browser API. In other environments (mobile apps, server-to-server), it requires an HTTP client configured to handle streaming responses.</p>
<h3 id="heading-sse-vs-websockets-the-decision">SSE vs WebSockets: The Decision</h3>
<p>Choose SSE when the server pushes data and the client only reads: notifications, live feeds, dashboards, or streaming responses from an AI model. SSE is simpler, works over plain HTTP, and has automatic reconnection built in.</p>
<p>Choose WebSockets when both the client and server need to send messages freely and simultaneously: chat, collaborative editing, and games. The added complexity of WebSockets is justified when you genuinely need bidirectional communication.</p>
<h2 id="heading-protocol-buffers-a-new-language-for-data">Protocol Buffers: A New Language for Data</h2>
<p>Protocol Buffers (protobuf) is a binary serialization format developed by Google. Where JSON encodes data as human-readable text, protobuf encodes data as compact binary. This single difference has cascading implications for payload size, parsing speed, type safety, and schema enforcement.</p>
<h3 id="heading-the-schema-first-approach">The Schema-First Approach</h3>
<p>Unlike JSON, where you simply start writing key-value pairs, protobuf requires defining a schema first. You describe your data structures in a <code>.proto</code> file using Protocol Buffer Language, a language-agnostic schema definition language.</p>
<p>The schema definition:</p>
<pre><code class="language-plaintext">syntax = "proto3";

message User {
  string id = 1;
  string name = 2;
  string email = 3;
  double balance = 4;
  bool is_verified = 5;
  int32 kyc_level = 6;
}

message Order {
  string id = 1;
  string user_id = 2;
  double total = 3;
  string status = 4;
  int64 created_at = 5;
}
</code></pre>
<p>Each field has a name and a type, as in any structured data format. But it also has a field number: the small integer after the equals sign. This field number is the key to protobuf's efficiency.</p>
<h3 id="heading-binary-encoding-why-field-numbers-matter">Binary Encoding: Why Field Numbers Matter</h3>
<p>When protobuf encodes data to binary, field names don't appear in the output. Instead, only the field number and the encoded value are written. Field 1 (id) becomes a tag byte indicating "field 1, type string" followed by the string's length and bytes. Field 4 (balance) becomes a tag byte indicating "field 4, type 64-bit float" followed by eight bytes of IEEE 754 double-precision float.</p>
<p>No <code>"id":</code> string, <code>"balance":</code> string, quotation marks, colons, or braces. Just field tags and values in a compact binary stream.</p>
<p>The same user object that occupies approximately 100 bytes in JSON occupies approximately 35 bytes in protobuf. For a 1000-field enterprise API response called millions of times per day, this difference translates directly to reduced bandwidth consumption and infrastructure cost.</p>
<p>Parsing binary is also fundamentally faster than parsing text. A binary parser reads a fixed-length tag, determines the type and length of the following value, reads that value, and moves to the next field. A JSON parser must tokenize a text stream character by character, handle escape sequences, infer types from value format, and construct a dynamic object from parsed key-value pairs.</p>
<p>On constrained devices or in high-throughput server-to-server communication, this parsing speed difference is meaningful.</p>
<h3 id="heading-code-generation-the-contract-comes-alive">Code Generation: The Contract Comes Alive</h3>
<p>The <code>.proto</code> schema file is the input to the <code>protoc</code> compiler. This compiler generates data classes in any supported language from the same schema definition.</p>
<p>The same <code>user.proto</code> file generates:</p>
<ul>
<li><p>A <code>User</code> class in Go for the backend server</p>
</li>
<li><p>A <code>User</code> class in Dart for the Flutter client</p>
</li>
<li><p>A <code>User</code> class in Python for the data processing service</p>
</li>
<li><p>A <code>User</code> class in TypeScript for the web frontend</p>
</li>
</ul>
<p>Every generated class has typed fields, serialization/deserialization methods, and equality comparison. There's no manual JSON parsing, type casting, or risk of field name typos. The compiler guarantees that every language's representation of a <code>User</code> is identical.</p>
<p>When the schema changes — a new field is added or a field is removed, for example — every team regenerates their classes. If the change is breaking (a required field removed or a type changed in an incompatible way), the compiler reports errors in every affected codebase. The problem is caught before any code reaches production.</p>
<h3 id="heading-schema-evolution-rules">Schema Evolution Rules</h3>
<p>Protobuf's field number system enables backward-compatible schema evolution. Because fields are identified by number rather than name, the following changes are safe:</p>
<ul>
<li><p>Adding a new field with a new number is always safe. Existing clients ignore fields they don't recognize. New clients receive the new field.</p>
</li>
<li><p>Removing a field by marking it as reserved is safe. Existing encoded data that contains the removed field is simply ignored when decoded. The field number must be marked reserved to prevent its reuse.</p>
</li>
<li><p>Renaming a field is safe. Names aren't encoded. Only the number matters at the binary level.</p>
</li>
<li><p>Changing a field's type in incompatible ways is unsafe and breaks existing encoded data.</p>
</li>
</ul>
<p>This evolution model means protobuf schemas can grow over time without coordinated updates across all clients and servers.</p>
<h3 id="heading-trade-offs">Trade-offs</h3>
<p>Protobuf's efficiency comes with costs that make it inappropriate for all contexts.</p>
<p>Binary data isn't human-readable. You can't open a protobuf response in a browser's developer tools and see what it contains. Debugging requires either decoding the binary with the schema or using specialized tools.</p>
<p>Protobuf also requires tooling. Every consumer of a protobuf-encoded API needs the schema and a protobuf library to decode it. For public APIs consumed by unknown third parties, this is a significant barrier. JSON requires nothing: every programming environment can parse it with built-in libraries.</p>
<p>Schema changes require coordination. When a schema changes, every consumer must update. For internal systems where you control all consumers, this is manageable. For public APIs, it requires versioning and migration strategies.</p>
<h2 id="heading-grpc-remote-procedure-calls-at-scale">gRPC: Remote Procedure Calls at Scale</h2>
<p>gRPC combines Protocol Buffers with HTTP/2 and Remote Procedure Call semantics to produce a framework for service-to-service communication that is faster, more structured, and more powerful than REST for specific use cases.</p>
<h3 id="heading-remote-procedure-calls-the-core-concept">Remote Procedure Calls: The Core Concept</h3>
<p>A Remote Procedure Call (RPC) framework makes calling a function on a remote server feel like calling a local function. Instead of constructing an HTTP request, serializing a body, parsing a response, and handling status codes, you call a function with typed arguments and receive a typed return value. The network communication is abstracted away.</p>
<pre><code class="language-plaintext">// Without RPC (manual REST)
const response = await http.post('/users', headers: {...}, body: json.encode(data));
const user = User.fromJson(json.decode(response.body));

// With RPC (gRPC)
final user = await userService.createUser(CreateUserRequest(name: "John", email: "john@example.com"));
</code></pre>
<p>The second form is simpler, type-safe, and requires no knowledge of HTTP methods, endpoints, or serialization formats.</p>
<h3 id="heading-the-four-communication-patterns">The Four Communication Patterns</h3>
<p>gRPC's most significant advantage over REST is its support for four distinct communication patterns, all defined in the same <code>.proto</code> schema and accessible through the same generated client.</p>
<p><strong>Unary RPC</strong> is the familiar request-response pattern. One request and one response. It's equivalent to a REST API call.</p>
<pre><code class="language-plaintext">Client ——— LoginRequest ——→ Server
Client ←—— LoginResponse —— Server
</code></pre>
<p><strong>Server Streaming RPC</strong> sends one request and receives a continuous stream of responses. The server pushes messages as they become available without the client needing to request each one.</p>
<pre><code class="language-plaintext">Client ——— WatchBalanceRequest ——→ Server
Client ←— BalanceResponse ———————— Server (balance: 500,000)
Client ←— BalanceResponse ———————— Server (balance: 495,000)
Client ←— BalanceResponse ———————— Server (balance: 1,000,000)
[Stream stays open, server pushes on every change]
</code></pre>
<p><strong>Client Streaming RPC</strong> sends a stream of messages to the server and receives one response at the end. The server processes all received messages and responds once.</p>
<pre><code class="language-plaintext">Client ——— DocumentChunk 1 ——→ Server
Client ——— DocumentChunk 2 ——→ Server
Client ——— DocumentChunk 3 ——→ Server
Client ←————— UploadResponse —— Server (all chunks processed)
</code></pre>
<p><strong>Bidirectional Streaming RPC</strong> allows both client and server to send streams of messages simultaneously, in any order.</p>
<pre><code class="language-plaintext">Client ——— ChatMessage ——→ Server
Server ←— ChatMessage ——— Client
Client ——— ChatMessage ——→ Server
Server ←— ChatMessage ——— Client  (server-initiated)
[Both sides communicate freely and simultaneously]
</code></pre>
<h3 id="heading-why-http2-and-protobuf-make-grpc-efficient">Why HTTP/2 and Protobuf Make gRPC Efficient</h3>
<p>gRPC's efficiency comes from the combination of its two underlying technologies working together.</p>
<p>HTTP/2's multiplexed persistent connections mean many concurrent gRPC calls, including long-running streaming calls, share a single connection. There's no connection setup overhead per call. Multiple streams proceed in parallel without blocking each other.</p>
<p>Protocol Buffer's binary encoding means payloads are compact and parsing is fast. A high-frequency service-to-service call that would transmit 100 bytes of JSON transmits 35 bytes of protobuf. At thousands of calls per second between microservices, this difference is significant.</p>
<p>The generated clients eliminate all serialization and deserialization code. The schema enforces that client and server agree on the contract. Breaking changes are caught by the compiler.</p>
<h3 id="heading-the-organizational-contract">The Organizational Contract</h3>
<p>In organizations using gRPC at scale, <code>.proto</code> files live in a dedicated repository separate from any individual service. This repository is the single source of truth for every service contract.</p>
<p>When an engineer wants to add a new field to an API, they open a pull request in the proto repository. Engineers from every affected team review it. The change is discussed, refined, and approved before any implementation begins. When it merges, every team regenerates their clients. Changes that break existing behavior are caught in code review, not in production.</p>
<p>This governance model transforms API evolution from a coordination problem into a code review process.</p>
<h3 id="heading-grpcs-limitations">gRPC's Limitations</h3>
<p>gRPC doesn't work natively in web browsers. Browsers can't directly make HTTP/2 requests with the necessary control required for gRPC. A proxy layer (gRPC-Web) is required to translate between gRPC-Web's browser-compatible format and standard gRPC. This adds infrastructure complexity and limits gRPC's applicability for browser-based clients.</p>
<p>gRPC also requires HTTP/2. Environments that don't support HTTP/2 can't use gRPC.</p>
<p>Binary encoding makes debugging harder as well. Inspecting gRPC traffic requires specialized tools and access to the proto schema.</p>
<p>For public APIs consumed by third-party developers, gRPC's tooling requirements are a higher barrier than REST's universally accessible JSON over HTTP.</p>
<h2 id="heading-the-complete-comparison">The Complete Comparison</h2>
<table>
<thead>
<tr>
<th></th>
<th>HTTP/1.1</th>
<th>HTTP/2</th>
<th>REST</th>
<th>GraphQL</th>
<th>WebSockets</th>
<th>SSE</th>
<th>gRPC</th>
</tr>
</thead>
<tbody><tr>
<td>Protocol</td>
<td>HTTP/1.1</td>
<td>HTTP/2</td>
<td>HTTP/1.1 or 2</td>
<td>HTTP/1.1 or 2</td>
<td>WebSocket</td>
<td>HTTP</td>
<td>HTTP/2</td>
</tr>
<tr>
<td>Data format</td>
<td>Any</td>
<td>Any</td>
<td>JSON (typical)</td>
<td>JSON</td>
<td>Any</td>
<td>Text</td>
<td>Protobuf (binary)</td>
</tr>
<tr>
<td>Communication</td>
<td>Request-Response</td>
<td>Request-Response</td>
<td>Request-Response</td>
<td>Request-Response + Subscriptions</td>
<td>Bidirectional</td>
<td>Server to Client</td>
<td>All four patterns</td>
</tr>
<tr>
<td>Contract</td>
<td>None</td>
<td>None</td>
<td>Documentation</td>
<td>Schema (SDL)</td>
<td>None</td>
<td>None</td>
<td>.proto file</td>
</tr>
<tr>
<td>Code generation</td>
<td>No</td>
<td>No</td>
<td>Optional</td>
<td>Optional</td>
<td>No</td>
<td>No</td>
<td>Mandatory</td>
</tr>
<tr>
<td>Real-time</td>
<td>No</td>
<td>Limited (push)</td>
<td>No (polling)</td>
<td>Subscriptions</td>
<td>Yes</td>
<td>Yes (one-way)</td>
<td>Yes (built-in)</td>
</tr>
<tr>
<td>Browser native</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>No (needs proxy)</td>
</tr>
<tr>
<td>Caching</td>
<td>Excellent</td>
<td>Excellent</td>
<td>Excellent</td>
<td>Difficult</td>
<td>Not applicable</td>
<td>Not applicable</td>
<td>Not applicable</td>
</tr>
<tr>
<td>Payload size</td>
<td>Medium</td>
<td>Medium</td>
<td>Medium (JSON)</td>
<td>Medium (JSON)</td>
<td>Low overhead</td>
<td>Low overhead</td>
<td>Small (binary)</td>
</tr>
<tr>
<td>Human readable</td>
<td>Yes</td>
<td>No (binary frames)</td>
<td>Yes</td>
<td>Yes</td>
<td>Depends</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<td>Schema enforcement</td>
<td>None</td>
<td>None</td>
<td>None</td>
<td>Compile-time</td>
<td>None</td>
<td>None</td>
<td>Compile-time</td>
</tr>
</tbody></table>
<hr>
<h2 id="heading-how-to-choose-the-engineering-decision-framework">How to Choose: The Engineering Decision Framework</h2>
<p>No single communication approach is universally best. Each exists because it solves specific problems better than the alternatives. The engineering decision involves matching the tool to your requirements.</p>
<h3 id="heading-when-to-use-rest">When to Use REST</h3>
<p>Use REST when the API is public or consumed by third parties. REST's universal accessibility makes it the only reasonable choice for public APIs. Any developer in any language can call a REST API with standard HTTP tools. There are no schema files, generated clients, or special libraries.</p>
<p>REST is also a good fit when caching is a priority. REST GET responses can be cached at every layer: CDN, reverse proxy, and browser. For content that doesn't change frequently, REST with proper cache headers can serve millions of requests without hitting the origin server.</p>
<p>It's also solid when the operation is simple request-response. If you're building straightforward CRUD operations with no streaming requirements and no complex data relationships, REST is simpler to implement, document, and debug than any alternative.</p>
<p>And finally use REST when developer experience for the consumer matters. REST APIs are immediately accessible in a browser. They can be tested with <code>curl</code>. Every developer already understands them.</p>
<h3 id="heading-when-to-use-graphql">When to Use GraphQL</h3>
<p>Use GraphQL when multiple client types have significantly different data needs. A mobile app that needs minimal data for a list view and richer data for a detail view, alongside a desktop app that needs comprehensive data, are ideal GraphQL consumers. Each queries exactly what it needs.</p>
<p>GraphQL also works well for complex interconnected data with many relationships. Social graphs, product catalogs with deeply nested attributes, or content management systems with rich content relationships: GraphQL's ability to traverse relationships in a single query is a genuine advantage.</p>
<p>It's also a good choice for frontend teams that need to iterate quickly. When the frontend can evolve its data requirements without backend changes, development velocity increases. New screens, new data combinations, no new endpoints needed.</p>
<p>And finally, GraphQL works well if you're comfortable with the operational complexity. GraphQL requires query complexity protection, custom caching strategies, and more sophisticated error handling. These are worth the effort when the data fetching advantages are real.</p>
<h3 id="heading-when-to-use-websockets">When to Use WebSockets</h3>
<p>Use WebSockets when both the client and server need to send messages at any time. Genuine bidirectional real-time communication where either party can initiate a message at any moment.</p>
<p>WebSockets also work great for chat, collaboration, and games. Live chat applications, collaborative document editing, multiplayer real-time games are the canonical WebSocket use cases.</p>
<p>And WebSockets is a solid choice when low-latency messaging is critical. The minimal framing overhead and persistent connection make WebSockets the lowest-latency option for frequent message exchange.</p>
<h3 id="heading-when-to-use-server-sent-events">When to Use Server-Sent Events</h3>
<p>Use SSE when the server needs to push updates but the client only reads. Notification feeds, live dashboards, streaming AI responses, real-time analytics, or any scenario where the server has a continuous stream of data to deliver and the client only consumes.</p>
<p>SSE also works well when you value simplicity over full bidirectionality. SSE is significantly simpler to implement and operate than WebSockets for one-directional use cases. Automatic reconnection is built in. It works over plain HTTP.</p>
<h3 id="heading-when-to-use-grpc">When to Use gRPC</h3>
<p>Use gRPC when multiple internal services share the same contract. When several teams build services that call each other, a <code>.proto</code> schema enforced by the compiler prevents contract drift. Everyone generates their clients from the same source of truth.</p>
<p>gRPC also works well for high-frequency service-to-service communication. Two microservices exchanging thousands of calls per second benefit from protobuf's compact binary encoding and HTTP/2's persistent multiplexed connections.</p>
<p>It's also a solid choice for large payloads that are consumed by many internal systems. An internal enterprise API with hundreds of fields called by dozens of internal applications benefits enormously from protobuf's size reduction. Less bandwidth, less parsing overhead, and compiled contract enforcement.</p>
<p>gRPC also works great when low-bandwidth networks matter. For mobile applications in markets where network conditions are variable or constrained, protobuf's binary encoding reduces payload size by 3 to 10 times compared to JSON. The difference between a 15 kilobyte response and a 3 kilobyte response is the difference between a 3-second load and a sub-second load on a 2G connection.</p>
<p>And finally, use gRPC when streaming is a core requirement and you want one framework. gRPC's four communication patterns (unary, server streaming, client streaming, and bidirectional) cover every scenario without requiring separate WebSocket infrastructure alongside your API.</p>
<h3 id="heading-the-hybrid-reality">The Hybrid Reality</h3>
<p>Most sophisticated systems use multiple approaches, each where it genuinely wins:</p>
<pre><code class="language-plaintext">A Large Engineering Organization

Public REST API
  External developers, partners, open integrations
  JSON over HTTPS. OpenAPI documentation.
  CDN caching for frequently accessed resources.

Internal gRPC Network
  Service-to-service communication
  Auth service, payment service, notification service,
  fraud detection: all communicating with typed contracts
  over efficient binary protobuf on HTTP/2.

Real-Time Layer
  WebSockets for bidirectional features (live chat, collaboration)
  SSE for one-directional feeds (notifications, live dashboards)
  gRPC streaming for real-time data with typed contracts

Mobile API
  REST for standard operations (profile, settings, history)
  gRPC for high-frequency or large payload calls
  SSE for notification streaming
</code></pre>
<p>There's no architectural purity requirement. Each layer uses what fits its requirements. The discipline is in making these choices deliberately rather than by habit or default.</p>
<h2 id="heading-conclusion">Conclusion</h2>
<p>The history of how clients and servers communicate is the history of engineers discovering the limitations of existing tools and building better ones.</p>
<p>HTTP/1.1 gave us a universal request-response protocol that built the web. Its text-based format and sequential connection model worked well for the web of the 1990s and 2000s. As applications became more complex and performance expectations rose, its limitations became bottlenecks.</p>
<p>HTTP/2 rebuilt the transport layer with binary framing and multiplexing, eliminating head-of-line blocking at the HTTP level, compressing headers, and enabling server push. HTTP/3 took this further by replacing TCP with QUIC, addressing the remaining head-of-line blocking at the transport level and making connection establishment faster.</p>
<p>JSON became the dominant data format because of its human readability and universal support. Protocol Buffers emerged as an alternative for contexts where JSON's verbosity and lack of schema enforcement create real problems: internal services, high-frequency communication, constrained networks, and teams needing compile-time contract enforcement.</p>
<p>REST codified HTTP's architectural strengths into a style that made APIs universally accessible and HTTP-native. Its success wasn't purely technical: it aligned with what developers already understood and what the HTTP ecosystem already supported. Its limitations in data fetching efficiency and real-time communication opened the door for GraphQL and streaming alternatives.</p>
<p>GraphQL solved REST's overfetching and underfetching problems by inverting control: the client specifies exactly what it needs. WebSockets solved REST's inability to support genuine bidirectional real-time communication. Server-Sent Events provided a simpler real-time option for one-directional streaming. gRPC combined Protocol Buffers, HTTP/2, and RPC semantics into a framework that excels at typed service-to-service communication at scale.</p>
<p>Understanding all of these tools, along with why each was built, what problem it solves, and where it struggles, is what enables you to make deliberate architectural decisions rather than defaulting to whatever is most familiar.</p>
<p>The right communication approach is always the one that fits the specific requirements of the system you're building: the clients consuming it, the data being exchanged, the network conditions it operates in, the teams building and maintaining it, and the operational complexity you are prepared to manage.</p>
<p>That clarity of fit is what engineering judgment looks like in practice.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ What is Firmware? Definition and Examples ]]>
                </title>
                <description>
                    <![CDATA[ Did you know that firmware is literally everywhere? It might be strange to think about – but it's just as common as hardware and software. In fact, it is thanks to firmware that: Printers work Defibrillators work Car radios works and more … Based o... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/what-is-firmware/</link>
                <guid isPermaLink="false">66ba536002e3361751683723</guid>
                
                    <category>
                        <![CDATA[ firmware ]]>
                    </category>
                
                    <category>
                        <![CDATA[ hardware ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Tiago Capelo Monteiro ]]>
                </dc:creator>
                <pubDate>Thu, 21 Apr 2022 18:40:08 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2022/04/postimage.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Did you know that firmware is literally everywhere? It might be strange to think about – but it's just as common as hardware and software.</p>
<p>In fact, it is thanks to firmware that:</p>
<ul>
<li>Printers work</li>
<li>Defibrillators work</li>
<li>Car radios works</li>
<li>and more …</li>
</ul>
<p>Based on the examples above, you probably already have some idea of what firmware is. But you don't have a clear definition of it.</p>
<p>In order to truly understand what firmware is, we must first understand software, then hardware, and finally we can jump into firmware.</p>
<p>In this tutorial, I'll explain each topic with an analogy. By doing so, everyone can understand.</p>
<p>It doesn't matter if you're just getting into technology!</p>
<p>With that, I would like to make sure that everyone understands what software, hardware, and firmware is. I will not elaborate on the technical terms.</p>
<h3 id="heading-in-this-article-we-will-explore">In this article we will explore:</h3>
<ul>
<li>What exactly is software?</li>
<li>What exactly is hardware?</li>
<li>What exactly is firmware?</li>
</ul>
<h2 id="heading-what-is-software">What is Software?</h2>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/03/book.jpeg" alt="Image" width="600" height="400" loading="lazy">
_Photo by [<strong>Pexels</strong>](https://www.pexels.com/@kubra-dogu-80605500?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels" rel="noopener"&gt;<strong>Kübra Doğu</strong> from &lt;a href="https://www.pexels.com/photo/food-wood-dawn-coffee-9222655/?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm<em>source=pexels" rel="noopener)</em></p>
<p>Imagine, if you will, that you have no idea what to make for dinner today.</p>
<p>Luckily, you find an old cookbook you have and decide to cook one of the recipes in it.</p>
<p>The cookbook has many recipes. Each of these recipes has its own instructions.</p>
<p>In the <strong>cookbook</strong>, a <strong>recipe</strong> can be seen as a <strong>set of steps</strong> (or instructions) that together make a <strong>meal</strong>.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/04/cooking-instruction.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Photo by <a target="_blank" href="https://www.pexels.com/photo/open-bible-2294878/">Luis Quintero on Pexels</a></em></p>
<p>You can also create your own meals based on your experience in cooking many different recipes, right?</p>
<p>Software is no different.</p>
<p><strong>Software programs</strong> can be seen as a <strong>set of instructions</strong> that work together to form a <strong>program</strong>.</p>
<pre><code class="lang-assembly"> global  _main
    extern  _printf

    section .text
_main:
    push    message
    call    _printf
    add     esp, 4
    ret
message:
    db  'Hello, World', 10, 0
</code></pre>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/04/HelloWorld.asm.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Then, applications are a big sets of instructions that perform specific tasks.</p>
<p>Operating systems are big sets of instructions that coordinate software and hardware resources.</p>
<ul>
<li>Cookbook = software</li>
<li>Dinner cookbook = type of software (application or operating system)</li>
<li>Recipe = program</li>
</ul>
<p>You need a recipe to make dinner. You must follow each step in the cookbook to create a recipe.</p>
<p>Once you have completed all the steps, your dinner is ready.</p>
<p>You need software to accomplish a particular task. A computer has to follow all instructions for the software to function. </p>
<p>Therefore, the software is running either while the instructions are being followed or after they have been completed.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/04/recipie---cooking-instructions.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h2 id="heading-what-is-hardware">What is Hardware?</h2>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/03/food.jpeg" alt="Image" width="600" height="400" loading="lazy">
_Photo by [<strong>Pexels</strong>](https://www.pexels.com/@elevate?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels" rel="noopener"&gt;<strong>ELEVATE</strong> from &lt;a href="https://www.pexels.com/photo/chef-preparing-vegetable-dish-on-tree-slab-1267320/?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm<em>source=pexels" rel="noopener)</em></p>
<p>In order to make dinner, you need a series of steps from the cookbook that tell you how to make a particular meal.</p>
<p>You also need various tools to cook with - like pots and pans, knives, and the food itself. This is like hardware.</p>
<p>So a cookbook gives you instructions that allow you to cook.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/04/cooking-process-1.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>For hardware to work, it needs software (a set of instructions) to tell it what to do.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/04/CPU-process-2.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Software then, gives instructions to hardware that lets it work.</p>
<ul>
<li>Meal prep tools = hardware</li>
<li>Recipe = software</li>
</ul>
<p>Without software, you can't make hardware work.</p>
<p>Without a recipe, you won't know what to do with your various tools and ingredients to make a meal.</p>
<p>Like hardware without software, you can also eat a meal with just uncooked food. Gross.</p>
<p>In the same way that there are various types of meals, there are also various types of computer hardware.</p>
<p>For example:</p>
<ul>
<li>CPU</li>
<li>RAM</li>
<li>GPU</li>
<li>and so much more…</li>
</ul>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/04/comparason-of-processes.png" alt="Image" width="600" height="400" loading="lazy">
<em>Comparison of processes</em></p>
<h2 id="heading-what-is-firmware">What is Firmware?</h2>
<p><img src="https://www.freecodecamp.org/news/content/images/2022/03/dessert.jpeg" alt="Image" width="600" height="400" loading="lazy">
_Photo by [<strong>Pexels</strong>](https://www.pexels.com/@ella-olsson-572949?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels" rel="noopener"&gt;<strong>Ella Olsson</strong> from &lt;a href="https://www.pexels.com/photo/close-up-photo-of-chocolate-mousse-3026810/?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm<em>source=pexels" rel="noopener)</em></p>
<p>A program is a set of instructions read by a computer.</p>
<p>Let's say you just want to make a snack or dessert. You probably don't need as many ingredients as when making a dinner for your family, right?</p>
<p>Let's say you want software that runs on a microwave. You don't need all the hardware the computer has to make the microwave work, right? You just need that specific to making the microwave work.</p>
<p>Or say you want software running on a printer. You don't need all the hardware the computer has to make the printer work right? Just the software for the printer.</p>
<ul>
<li>Microwave software = firmware</li>
<li>Printers software = firmware</li>
</ul>
<p>So this means that firmware is nothing more than software, but in a hardware device. Not in a computer.</p>
<p>Firmware lets very specific hardware complete very specific tasks.</p>
<h2 id="heading-wrapping-up">Wrapping up</h2>
<p>Thanks for reading! Now you know more about:</p>
<ul>
<li>Software</li>
<li>Hardware</li>
<li>Firmware</li>
</ul>
<p>Microprocessor photo by <strong><a target="_blank" href="https://www.pexels.com/@pok-rie-33563?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels">Pok Rie</a></strong> from <strong><a target="_blank" href="https://www.pexels.com/photo/dell-motherboard-and-central-processing-unit-1432675/?utm_content=attributionCopyText&amp;utm_medium=referral&amp;utm_source=pexels">Pexels</a></strong> </p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Your Developer Career Questions Answered ]]>
                </title>
                <description>
                    <![CDATA[ Will AI ever replace developers? Which programming language should you learn first? What's the best way to learn programming? Learn the answers to these questions and more from a group of experienced developers and technical course creators. We just ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/your-developer-career-questions-answered/</link>
                <guid isPermaLink="false">66b2072c125aeccef6f65d1a</guid>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                    <category>
                        <![CDATA[ youtube ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Beau Carnes ]]>
                </dc:creator>
                <pubDate>Wed, 09 Feb 2022 16:54:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2022/02/questions10.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Will AI ever replace developers? Which programming language should you learn first? What's the best way to learn programming?</p>
<p>Learn the answers to these questions and more from a group of experienced developers and technical course creators.</p>
<p>We just published a video on the freeCodeCamp.org YouTube channel where experienced developers answer the top questions asked by people new to the software field. </p>
<p>You will get wisdom from the following people:</p>
<ul>
<li>Gerald Versluis, Senior Software Engineer at Microsoft</li>
<li>Mama Samba Braima Nelson, Software Engineer</li>
<li>Gwendolyn Faraday, Principal Software Engineer at Relevize</li>
<li>Ania Kubow, Software Developer and Course Creator</li>
<li>Marius Espejo, Senior Software Engineer</li>
<li>Ave Coders, ML Engineer</li>
<li>Jack Herrington, Principal Web Developer</li>
<li>Nana Janashia (TechWorld with Nana), DevOps Engineer &amp; Trainer</li>
<li>Gift Egwuenu, Frontend Developer &amp; Content Creator</li>
<li>Jesse (codeSTACKr), Developer Advocate</li>
<li>James Perkins, Developer Advocate</li>
<li>Gio (ProgramWithGio), Full-Stack Web Developer</li>
<li>Delia Lazarescu, Software Engineer at Google</li>
<li>Islem (CoderOne), Full-Stack Developer and Content Creator</li>
</ul>
<p>Watch the video below or <a target="_blank" href="https://youtu.be/GwHX6FM-BHw">on the freeCodeCamp.org YouTube channel</a> (1-hour watch).</p>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/GwHX6FM-BHw" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Software Definition ]]>
                </title>
                <description>
                    <![CDATA[ Software, or computer software, is a generic term for instructions and/or data that run on a computer. Software is synonymous with the terms program and application. Software can describe an operating system like Windows 10 or macOS, or their underly... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/software-definition/</link>
                <guid isPermaLink="false">66c35f19e9895571912a0d22</guid>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Tech Terms ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Thu, 01 Apr 2021 02:40:00 +0000</pubDate>
                <media:content url="https://cdn-media-2.freecodecamp.org/w1280/606d1b79d5756f080ba95600.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Software, or computer software, is a generic term for instructions and/or data that run on a computer.</p>
<p>Software is synonymous with the terms program and application.</p>
<p>Software can describe an operating system like Windows 10 or macOS, or their underlying processes. Software can also describe things like Microsoft Word or Adobe Photoshop.</p>
<p>The term software is often contrasted with hardware.</p>
<p>Computer hardware, is physical or "hard", and is difficult to change once it's produced.</p>
<p>Software runs on computer hardware, and is "soft", or easy to change in comparison to hardware.</p>
<h2 id="heading-related-tech-terms">Related Tech Terms:</h2>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/hardware-definition/">Hardware Definition</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/macintosh-definition/">Macintosh Definition</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/pc-definition/">PC Definition</a></li>
</ul>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Setup an LED Light and Make it Blink with Code ]]>
                </title>
                <description>
                    <![CDATA[ Coding an LED Light is introductory project that shows you how software and hardware interact with each other. It's a simple project you can complete in a weekend that'll help you learn some basic aspects of hardware. By the end of the project, you w... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/code-behind-an-led-light/</link>
                <guid isPermaLink="false">66d45f33230dff0166905811</guid>
                
                    <category>
                        <![CDATA[ Electronics ]]>
                    </category>
                
                    <category>
                        <![CDATA[ hardware ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Ilknur Eren ]]>
                </dc:creator>
                <pubDate>Mon, 08 Jun 2020 21:50:21 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/05/Screen-Shot-2020-05-25-at-4.15.01-PM-1.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Coding an LED Light is introductory project that shows you how software and hardware interact with each other. It's a simple project you can complete in a weekend that'll help you learn some basic aspects of hardware.</p>
<p>By the end of the project, you will code your own LED light, have the knowledge to manipulate the LED to on/off in intervals you choose, and learn basic principles of hardware.</p>
<p>The <a target="_blank" href="https://www.amazon.com/ELEGOO-Project-Tutorial-Controller-Projects/dp/B01D8KOZF4">Elegoo Uno</a> starter kit has all the hardware as well as instructions you need to make a simple LED Light. The LED Light is the first project offered with their kit.</p>
<p>Elegoo Uno comes with many other projects and takes you through from beginner to advanced projects. Each project in the box advances your skills in a simple, easy to follow way.</p>
<h2 id="heading-components-youll-need">Components You'll Need</h2>
<h3 id="heading-elegoo-uno-r3">Elegoo Uno R3</h3>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/Screen-Shot-2020-05-24-at-7.49.14-PM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><em>Elegoo Uno R3</em></p>
<p>The Elogoo Uno R3 is a microcontroller board. Microcontrollers are embedded inside devices to control the actions and features of a product. They are compact integrated circuits designed to control operations.</p>
<p>The microcontroller that is included in the Elogoo Uno R3 has 14 digital input/output pins, 6 analog inputs, a USB connection, a power jack, and a reset button. This board has everything you need to support the microcontroller. Simply plug in the USB Cable to turn the microcontroller on.</p>
<h3 id="heading-usb-cable">USB Cable</h3>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/Screen-Shot-2020-05-24-at-7.49.22-PM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><em>USB Cable</em></p>
<p>You need a USB Cable to connect the Elegoo Uno R3 to your computer and turn it on. USB stands for Universal Serial Bus. The USB is used to connect your computer to devices such as digital cameras, printers, scanners, and external hard drives.</p>
<p>In our project, we will use a USB cable to connect our microcontroller to our computer.</p>
<h3 id="heading-leds">LEDs</h3>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/image-161.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><em>LED Light</em></p>
<p>LED stands for light emitting diode. It has a positive and negative lead. The longer side is the positive lead.</p>
<h2 id="heading-how-to-assemble-the-components">How to assemble the components</h2>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/Screen-Shot-2020-05-25-at-4.15.01-PM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>In this project, we are only going to make the LED blink.</p>
<p>First, we need to plug in the USB Cable to the board and then the computer.</p>
<p>Then we need to plug in the LED to GND (GND is the reference point in an electrical circuit from which voltages are measured, and is a common return path for electric current) and the 13 input on the board.</p>
<h3 id="heading-code-to-make-the-led-flash-onoff">Code to make the LED flash on/off:</h3>
<p>After the microcontroller board is plugged into the computer and the LED is on the board itself, we need to write some simple code to make the LED blink.</p>
<pre><code class="lang-php"><span class="hljs-comment">// the setup function runs once when you press reset or power the board</span>

<span class="hljs-keyword">void</span> setup() {
  <span class="hljs-comment">// initialize digital pin LED_BUILTIN as an output.</span>
  pinMode(LED_BUILTIN, OUTPUT);
}

<span class="hljs-comment">// the loop function runs over and over again forever</span>
<span class="hljs-keyword">void</span> loop() {
  digitalWrite(LED_BUILTIN, HIGH);   <span class="hljs-comment">// turn the LED on </span>
  delay(<span class="hljs-number">1000</span>);                       <span class="hljs-comment">// wait for a second</span>
  digitalWrite(LED_BUILTIN, LOW);    <span class="hljs-comment">// turn the LED off</span>
  delay(<span class="hljs-number">1000</span>);                       <span class="hljs-comment">// wait for a second</span>
}
</code></pre>
<p>The code above basically turns the LED on for 1 second and then turns it off for one second.</p>
<p>This function is in a continuous loop. The <code>digitalWrite</code> is a function that takes in 2 parameters, <code>LED_BUILTIN</code> and <code>HIGH || LOW</code> . The loop basically takes in the LED, and then turns the volt to <code>HIGH</code> which turns it on. Then after 1 second it turns the same LED off by turning the volt to <code>LOW</code> .</p>
<h3 id="heading-heres-the-final-product">Here's the Final Product:</h3>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/D6IkSkKcY5s" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<p> </p>
<p>The goal of this little LED Light Coding project was to introduce you to elementary principles of how hardware and software can be combined. I hope you enjoyed it!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ What is Kanban? The Agile Methodology Defined, and How to Use it For Your Software Development Team ]]>
                </title>
                <description>
                    <![CDATA[ By Bertil Muth Kanban was invented in the Japanese automotive industry in the first half of the 20th century. Inspired by how supermarkets stock their shelves based on demand, Toyota's goal was to reduce inventory and to improve the flow throughout t... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/what-is-kanban-the-agile-methodology-defined-and-how-to-use-it-for-your-software-development-team-2/</link>
                <guid isPermaLink="false">66d45df8bc9760a197a10368</guid>
                
                    <category>
                        <![CDATA[ agile ]]>
                    </category>
                
                    <category>
                        <![CDATA[ kanban ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Scrum ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                    <category>
                        <![CDATA[ technology ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Tue, 19 May 2020 11:12:13 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/05/grafik-8.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Bertil Muth</p>
<p>Kanban was invented in the Japanese automotive industry in the first half of the 20th century. Inspired by how supermarkets stock their shelves based on demand, Toyota's goal was to reduce inventory and to improve the flow throughout their whole production system.</p>
<p>In his book <em>Kanban: Successful Evolutionary Change for Your Technology Business</em>, David Anderson described how to apply the Kanban principles to software development. These principles are:</p>
<ul>
<li>Start with what you do now</li>
<li>Agree to pursue incremental, evolutionary change</li>
<li>Respect the current process, roles, responsibilities, and titles</li>
</ul>
<h2 id="heading-what-does-that-mean-for-agile-software-development">What does that mean for agile software development?</h2>
<p>In my training courses, I ask the attendees what they already know about <a target="_blank" href="https://agilemanifesto.org/">agile software development</a>. Common answers are: "Work in Sprints", "There's a product owner", "Manage user stories in a backlog." People are influenced by the arguably most popular agile framework today, Scrum. </p>
<p>Scrum comes with its own predefined roles, events and artifacts. Scrum requires you to follow the rules defined in the <a target="_blank" href="https://www.scrumguides.org/">Scrum Guide</a>, if you want to call what you're doing Scrum. Kanban is different.</p>
<p>Kanban starts with the process that you follow in your company now. Visualize the steps on a Kanban board. They can include everything you do, from idea to delivery. </p>
<p>Each step becomes the title of a column on the board.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/grafik-7.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>To track your day to day work, it's best to break it down into small items. Maybe user stories that can be implemented in, at most, 2 days. Write each item on a stickie note, and hang it on the board. You can use the vertical order on the board for prioritization.</p>
<p>The cards move from left to right. The people doing the work pull items that have been finished by the previous process step. When they have capacity to do so. So the developers in the example pull the <em>Upload Image</em> card into <em>Dev</em> when they have the capacity to implement it.</p>
<h2 id="heading-pursuing-incremental-evolutionary-change">Pursuing incremental, evolutionary change</h2>
<p>So you have created a Kanban board that shows your process? You are making your work visible, which is a great start!</p>
<p>To get the benefits of Kanban, you need to do some more things. You need to:</p>
<ul>
<li>Limit work in process and queues</li>
<li>Observe and improve flow</li>
<li>Collaborate effectively</li>
</ul>
<h3 id="heading-limit-work-in-process-and-queues">Limit work in process and queues</h3>
<p>Limiting work in process means: you set a maximum for the number of items you work on. That's called the Work-in-Process limit, or in short WiP limit. Here's the Kanban board with a WiP limit for some process steps.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/04/grafik-9.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>The developers can work on 5 items at a time. At most. If their column contains 5 items, they are not allowed to pull items any more. This has two consequences.</p>
<p>First of all: it encourages people to finish their work, instead of starting more work. Started work that isn't finished bears risks. How happy will your customers be when you can't release your software as planned? Because you started to work on all these great ideas, but you didn't go through with them? </p>
<p>The second consequence of limiting work in process: bottlenecks become visible. When a process step starts work that it can't finish, people will feel it immediately. Because the next process step won't be able to pull items.</p>
<p>Apart from limiting the work in process, you should limit queue sizes, too. In the board above, they are shown as the dotted lines between the columns. It works the same way as limiting the work in process.</p>
<p>In summary: <em>Stop starting, start finishing</em> is the motto. From concept to delivery in as little time as possible.</p>
<h3 id="heading-observe-and-improve-flow">Observe and improve flow</h3>
<p>Observing a bottleneck can be painful at first. But at least you know where the major problems are in your process. And Kanban encourages you to improve the flow by removing the bottleneck.  A consistent flow enables you to deliver more reliably, and that's good for all stakeholders, including developers.</p>
<p>To observe the flow, you record the time at which a card enters a process step. And the time at which you complete the process step. So you know how much time the card spends in each step, and in each queue between the steps.</p>
<p>Based on the data, you can set up metrics that help you to improve the flow. Common metrics include:</p>
<ul>
<li>Cycle time: the time a card takes from the moment a team starts working on it (i.e. <em>Dev</em>) to delivery (i.e. <em>Release</em>). Improving this metric can help you improve your time to market.</li>
<li>Throughput: the number of cards that move through the system in a given time. Improving this metric can help you improve the performance of your delivery organization.</li>
</ul>
<p>A common way to get an overview of how many cards are in which process step over time is a cumulative flow chart. Ideally, the number of cards in each step but the last stays roughly the same over time. The number of released cards should mount. When the chart deviates from that, you might have a bottleneck.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/Cumulative_Flow_Chart.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-collaborate-effectively">Collaborate effectively</h3>
<p>The Kanban metrics are a powerful tool to analyze and improve what you're doing. But they are worthless without the people doing the work. Everybody involved in the process steps should be open to the transparency that Kanban creates. </p>
<p>People should work together constructively to remove bottlenecks, instead of blaming individuals. Look at the current state regularly. Are there any bottlenecks? Is there too much or too little work available for a certain process step? Is throughput sufficient? Are there other sources of discontent? What needs to be improved?</p>
<p>Agree on experiments that try out small changes to the system. Realize the changes. Later, look if the experiments worked out as expected. To be able to implement the changes, management support is often crucial.</p>
<h2 id="heading-when-to-use-kanban">When to use Kanban</h2>
<p>Kanban is very flexible. It can be used in combination with Scrum, which is called <a target="_blank" href="https://en.wikipedia.org/wiki/Scrumban">Scrumban</a>. It can be used outside of product development. You can even use it to plan a trip or organize what you do in your free time.</p>
<p>I found it especially helpful when working in Scrum Sprints is not possible or is difficult. Example: two companies where one is customer, and the other is supplier, and a hand-off is inevitable. Another example is when you're working on a product that involves both software and hardware, and multiple engineering disciplines are involved. </p>
<p>Kanban can also be used inside your company when development works in an agile fashion, but not all of the rest of the company does.  It can be used to facilitate the cooperation between strategic planning and software development.</p>
<p>Don't think that just because you have trouble implementing Scrum, there's no way to become more agile. Kanban starts with what you do now. And if you take it seriously, it will help you improve. One small step at a time.</p>
<p><em>To</em> <a target="_blank" href="https://skl.sh/2Cq497P"><em>learn more about agile software development</em></a><em>, visit my online course. To keep up with what I’m doing or drop me a note, follow me on</em> <a target="_blank" href="https://dev.to/bertilmuth"><em>dev.to</em></a><em>,</em> <a target="_blank" href="https://www.linkedin.com/in/bertilmuth/"><em>LinkedIn</em></a> <em>or</em> <a target="_blank" href="https://twitter.com/BertilMuth"><em>Twitter</em></a><em>. Or visit my</em> <a target="_blank" href="https://github.com/bertilmuth/requirementsascode"><em>GitHub project</em></a><em>.</em></p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ What is Agile and How You Can Become an Epic Storyteller ]]>
                </title>
                <description>
                    <![CDATA[ Running a team of developers is hard. Trying to coordinate a mountain of work while keeping everyone productive is a challenge itself. But on top of that, you have to keep open communications with a client. How can we use agile to relieve some of tho... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/what-is-agile-and-how-youcan-become-an-epic-storyteller/</link>
                <guid isPermaLink="false">66b8e3940cedc1f2a4f706a1</guid>
                
                    <category>
                        <![CDATA[ Software Requirements ]]>
                    </category>
                
                    <category>
                        <![CDATA[ agile ]]>
                    </category>
                
                    <category>
                        <![CDATA[ agile development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ development process  ]]>
                    </category>
                
                    <category>
                        <![CDATA[ project management ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Scrum ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Software Engineering ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                    <category>
                        <![CDATA[ technology ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Colby Fayock ]]>
                </dc:creator>
                <pubDate>Tue, 12 May 2020 14:45:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/05/intro-to-agile-1.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Running a team of developers is hard. Trying to coordinate a mountain of work while keeping everyone productive is a challenge itself. But on top of that, you have to keep open communications with a client. How can we use agile to relieve some of those pain points?</p>
<ul>
<li><a class="post-section-overview" href="#heading-what-is-agile">What is agile?</a></li>
<li><a class="post-section-overview" href="#heading-what-are-some-concepts-you-should-know">What are some concepts you should know?</a></li>
<li><a class="post-section-overview" href="#heading-stories">Stories</a></li>
<li><a class="post-section-overview" href="#heading-epics">Epics</a></li>
<li><a class="post-section-overview" href="#heading-sprints">Sprints</a></li>
</ul>
<div class="embed-wrapper">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/1GPYnoG_nkE" style="aspect-ratio: 16 / 9; width: 100%; height: auto;" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" loading="lazy"></iframe></div>
<h2 id="heading-what-is-agile">What is agile?</h2>
<p>Agile is a software development methodology that stems from the idea of breaking up large amounts of work into smaller pieces. This gives product managers, developers, and any stakeholder a better understanding of the work.</p>
<p>Historically, software development was a slow process where major changes to requirements could put large strains on teams. </p>
<p>When following the agile methodology, the smaller chunks of work help teams become more flexible, and dare I say <em>agile</em>. And in the process it helps them deliver features faster and respond to changes quicker.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/jira-project-board.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Example Jira project board from <a target="_blank" href="https://www.atlassian.com/software/jira">atlassian.com/software/jira</a></em></p>
<p>These ideas have been broken up into different frameworks of approaching this methodology. Two of the common ones are <a target="_blank" href="https://www.scrum.org/resources/what-is-scrum">Scrum</a> and <a target="_blank" href="https://en.wikipedia.org/wiki/Kanban_(development)">Kanban</a>. </p>
<p>For this walkthrough, most of these concepts follow along the Scrum framework, but there are certainly concepts that apply to both and others.</p>
<h2 id="heading-what-are-some-concepts-you-should-know">What are some concepts you should know?</h2>
<p>I'd argue half of being productive as a developer in an agile world is simply understanding the terms. Typically the project manager runs the show, so if you can be on the same page with what they're talking about, it will make the process a lot easier.</p>
<p>There are books, courses, and certifications based around learning the nuances of the agile methodology. I'm not going to go deep into some of the philosophical aspects or some of the deeper parts, but I'm going to cover a good set of key concepts that will help you hit the ground running when you start your new job with an agile team.</p>
<h2 id="heading-stories">Stories</h2>
<p>A story is typically the smallest defined piece of work. This usually comes in the form of a new ticket that you create in the project tool you're using whether it's <a target="_blank" href="https://www.atlassian.com/software/jira">Jira</a> or even <a target="_blank" href="https://help.github.com/en/github/managing-your-work-on-github/about-issues">Github Issues</a>.</p>
<h3 id="heading-expressing-stories">Expressing stories</h3>
<p>When working on a project, you'll probably run into a variety of ways people express stories. But a good guideline is to work through the concept of the word "story" itself and explain the work that needs to be done in that way.</p>
<p>For instance, if you would like to provide the ability for the people who use your website to share a blog post on Twitter, you may want to write the story as: As a reader, I want to share the post I just read to Twitter.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/jira-story-summary.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Creating a new story in Jira</em></p>
<p>Using that pattern of "as a [person], I want to [action]" helps provide context as what state somebody may be in when visiting their site and what they're trying to achieve. This can be particularly helpful if you're developing features for people who are logged in that are different from guests.</p>
<h3 id="heading-details-and-requirements">Details and requirements</h3>
<p>While the title of a story is an important representation of the work, you'll also want to provide additional specifics. </p>
<p>At a minimum, that should be done by adding a thorough description and a set of acceptance criteria that can help give the developer context and requirements. Depending on the team, this can also include tools like tags or categorizations that make it easier for the team to visualize groups of work.</p>
<p>Providing a strong set of requirements helps both the developer working on the story and the person reviewing it have a measurement to determine if it's actually complete. Without it, everyone's just guessing.</p>
<p>A good way to phrase these are: verify [requirement]. Back to my example of sharing a post on Twitter, maybe some of the requirements to that story would be:</p>
<ul>
<li>Verify when clicking the share button a new tweet is created</li>
<li>Verify the tweet includes a link to the current blog post</li>
</ul>
<h3 id="heading-amount-of-work-or-level-of-difficulty">Amount of work or level of difficulty</h3>
<p>Each story is represented by a number of points. Those points are a way to express how much effort a team of developers expects one story to be. That effort can mean a variety of things though whether it's simply how difficult the team expects the work to be or the amount of risk or uncertainty a particular story has.</p>
<p>One way teams represent this is with the <a target="_blank" href="https://en.wikipedia.org/wiki/Fibonacci_number">fibonacci sequence</a>, where the amount of points can be 1, 2, 3, 5, 8, etc. Where a negligible text update might be 1 point, adding a new form to a page could be 3 points.</p>
<p>Typically you'll want to avoid pointing stories too high, as you get above 5 points, there's more than likely a way you can break up the work to make it more manageable. While you could easily create a massive 13 point story to accomplish all aspects of a feature, it usually makes sense to tackle the work in smaller, more focused chunks.</p>
<p>Either way, these points all add up together to give your team a rough estimate of how much work a group of stories would take to complete.</p>
<h2 id="heading-epics">Epics</h2>
<p>While stories have a goal of defining a bite-sized piece of work, epics are a way to group those pieces of work together to represent a feature.</p>
<h3 id="heading-defining-stories-as-a-feature">Defining stories as a feature</h3>
<p>A good way to explain this is with another example. If you're working on an application that requires the integration of authentication, you may want to create a new epic simply called "Authentication". </p>
<p>Inside that epic, you could find stories like:</p>
<ul>
<li>As a guest, I want to sign into the application with my email address</li>
<li>As an authenticated user, I want to change my password</li>
<li>As the security team, I want to prevent spam and abuse of user authentication</li>
</ul>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/jira-epic-authentication.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Example of an Authentication epic in Jira</em></p>
<p>With your epic defined, you're giving your team a path to calling a feature complete while also understanding the entire scope of that work. This is important when it comes to planning out the work to be done.</p>
<p>Defining your stories in your epic gives you a sense of how much work something takes, but it doesn't help you figure out how long it would take, which is where sprints come in.</p>
<h2 id="heading-sprints">Sprints</h2>
<p>Sprints are a way of planning out how the work will actually get done. While similar to epics in that they are a way to group chunks of work, sprints typically represent a period of time in which a particular chunk of work will be done.</p>
<h3 id="heading-time-per-sprint">Time per sprint</h3>
<p>A common way of defining a sprint is two weeks of work. During those two weeks, your team will have a particular velocity, or average amount of work you can complete, for an individual sprint. This velocity is represented by a number of points that is a sum of the average velocity of each of the developers working on that sprint.</p>
<h3 id="heading-points-per-sprint">Points per sprint</h3>
<p>Though many fiercely argue you shouldn't use time to represent that velocity, points will roughly translates to an average amount of time of work for each developer. While 1 point for an experienced developer could be 1 hour, that same 1 point could mean 3 hours for a less experienced developer.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/05/jira-project-roadmaps.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Example project roadmap from <a target="_blank" href="https://www.atlassian.com/software/jira">atlassian.com/software/jira</a></em></p>
<p>But once you have this number of points that your team averages in a sprint, you'll know how many story points you can expect to plan to be completed. This planning goes sprint to sprint as you spread out a group of stories or an epic so you can predict when a feature will be complete.</p>
<h2 id="heading-how-agile-fits-with-your-team">How agile fits with your team</h2>
<p>Try to remember that the Agile methodology through Scrum, Kanban, or any other framework is just that – a framework. While it's probably a good idea to follow the process when you first start out, listen to your team and try to mold it to your own experiences.</p>
<p>Each team works a little bit differently and forcing a process onto that team can cause more harm than good, but there will always be a learning curve for any process. Fight the eye rolls until everyone gets the hang of it and have frequent retrospectives to see what works and what doesn't.</p>
<p>At the end of the day, the processes your team follows should mostly be invisible, working for you instead of against you. Find what works best for your team and share your experiences for others to learn!</p>
<h2 id="heading-whats-your-teams-process">What's your teams process?</h2>
<p><a target="_blank" href="https://twitter.com/colbyfayock">Share with me on Twitter!</a></p>
<div id="colbyfayock-author-card">
  <p>
    <a href="https://twitter.com/colbyfayock">
      <img src="https://res.cloudinary.com/fay/image/upload/w_2000,h_400,c_fill,q_auto,f_auto/w_1020,c_fit,co_rgb:007079,g_north_west,x_635,y_70,l_text:Source%20Sans%20Pro_64_line_spacing_-10_bold:Colby%20Fayock/w_1020,c_fit,co_rgb:383f43,g_west,x_635,y_6,l_text:Source%20Sans%20Pro_44_line_spacing_0_normal:Follow%20me%20for%20more%20JavaScript%252c%20UX%252c%20and%20other%20interesting%20things!/w_1020,c_fit,co_rgb:007079,g_south_west,x_635,y_70,l_text:Source%20Sans%20Pro_40_line_spacing_-10_semibold:colbyfayock.com/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_68,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_145,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_222,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/w_300,c_fit,co_rgb:7c848a,g_north_west,x_1725,y_295,l_text:Source%20Sans%20Pro_40_line_spacing_-10_normal:colbyfayock/v1/social-footer-card" alt="Follow me for more Javascript, UX, and other interesting things!" width="2000" height="400" loading="lazy">
    </a>
  </p>
  <ul>
    <li>
      <a href="https://twitter.com/colbyfayock">? Follow Me On Twitter</a>
    </li>
    <li>
      <a href="https://youtube.com/colbyfayock">?️ Subscribe To My Youtube</a>
    </li>
    <li>
      <a href="https://www.colbyfayock.com/newsletter/">✉️ Sign Up For My Newsletter</a>
    </li>
  </ul>
</div>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Why Your Legacy Software is Hard to Maintain - and What to Do About it. ]]>
                </title>
                <description>
                    <![CDATA[ By Alfrick Opidi Believe it or not, some organizations still rely on legacy software to carry out operations even though newer and more versatile options are available. We know that “old is gold”, but legacy applications cannot glitter forever. As su... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/legacy-software-maintenance-challenges/</link>
                <guid isPermaLink="false">66d45d9dc7632f8bfbf1e3db</guid>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Fri, 28 Feb 2020 17:06:30 +0000</pubDate>
                <media:content url="https://cdn-media-2.freecodecamp.org/w1280/5f9c9c5f740569d1a4ca31cb.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Alfrick Opidi</p>
<p>Believe it or not, some organizations still rely on legacy software to carry out operations even though newer and more versatile options are available. We know that “old is gold”, but legacy applications cannot glitter forever. As such, these old and outdated programs have become hard to maintain.</p>
<p>Recently, the U.S. Government Accountability Office (GAO) gave a <a target="_blank" href="https://www.gao.gov/products/gao-19-471#summary">report</a> that pointed out the most critical federal legacy systems that need to be modernized. This is because they are based on antiquated programming languages, are prone to security loopholes, and are difficult to maintain.</p>
<p>Are you in the same shoes?</p>
<p>In this article, I’m going to talk frankly about the challenges you'll face when maintaining legacy software applications, and how you can overcome them.</p>
<h2 id="heading-legacy-systems-are-inefficient">Legacy systems are inefficient</h2>
<p>Software maintenance is important – it helps enhance the efficiency of the product and narrows the margin for error. Without sufficient maintenance, an application can become inefficient and difficult to operate.</p>
<p>First of all, maintaining <a target="_blank" href="https://www.freecodecamp.org/news/conquer-legacy-code-f9e23a6ab758/">a legacy system</a> can be difficult because the code used is old when compared to the code used in any modern software. Old code usually tends to be bulky, lengthy, and incompatible with most modern systems.</p>
<p>For example, JavaScript arrow functions, which were introduced in ES6 in 2015, offer developers a way to write shorter and cleaner function syntax, which is easier to maintain.</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">let</span> total = <span class="hljs-function">(<span class="hljs-params">x, y</span>) =&gt;</span> x + y;

<span class="hljs-comment">/* This arrow function is a shorter form of:
let total = function(x, y) {
  return x + y;
};
*/</span>

<span class="hljs-built_in">console</span>.log(total(<span class="hljs-number">5</span>, <span class="hljs-number">2</span>) ); 
<span class="hljs-comment">// 7</span>
</code></pre>
<h2 id="heading-high-maintenance-costs">High maintenance costs</h2>
<p>Another challenge facing most legacy systems is the high cost of maintenance, which may be out of reach for most enterprises. </p>
<p>For example, according to the GAO report mentioned above, the U.S. government planned to spend more than $90 billion in 2019 on IT services, most of which went towards maintaining aging systems.</p>
<p>Furthermore, as technology is evolving, compliance is becoming a major issue for the protection of consumer-facing applications. Achieving compliance with legacy systems is time-consuming and expensive. It will not happen as quickly compared to new applications who are often compliant by default. It also requires a lot of testing to ensure a legacy infrastructure is compliant with the given regulations.</p>
<p>The cost of maintaining a legacy system often increases with time, as it slowly becomes obsolete due to technological enhancements. Also, modification of an existing system is a risky venture, which requires a lot of time and resources.</p>
<h2 id="heading-lack-of-sufficient-skill-sets">Lack of sufficient skill sets</h2>
<p>For legacy software to be maintained, you need a developer conversant with its operations. However, most developers are future-proofing their applications with new technologies. So, getting someone who can work with an old system can be a challenge.</p>
<p>In some cases, you might need to re-train developers on how the legacy system works, which increases a company’s operating costs. </p>
<p>Furthermore, managing and controlling changes occurring in the software can be difficult. A lot of time and effort is required to keep the systems operational, which is expensive and time-consuming.</p>
<h2 id="heading-incompatibility-with-other-it-solutions">Incompatibility with other IT solutions</h2>
<p>Currently, there are modern tools that can be used to enable fast and smooth maintenance of software. However, most legacy IT infrastructure is incompatible with such solutions, which complicates their maintenance. </p>
<p>If the features in a legacy system are not compatible with those of new IT solutions, developers may find it difficult to integrate them into their environments.</p>
<p>The difficulty of introducing new features to legacy systems also adds to the challenges in their maintenance. Since most legacy systems break easily, trying to restructure and make them more maintainable may not work as expected.</p>
<h2 id="heading-solutions-to-the-challenges">Solutions to the challenges</h2>
<p>To compete favorably in today’s dynamic IT landscape, legacy technologies need modernization. Updated legacy applications lead to more user productivity, reduced maintenance costs, and more helpful experiences.</p>
<p>According to recent research by <a target="_blank" href="https://www.avanade.com/en/media-center/press-releases/it-modernization-research">Avanade</a>, modernizing IT systems can lead to a revenue growth of about 14%. Therefore, choosing <a target="_blank" href="https://www.scnsoft.com/services/application/modernization">different software modernization options</a> could lead to significant benefits to your business.</p>
<p>It’s important to note that software should not be declared obsolete just because it’s old. Some of the ‘old’ software may still contain rich features, which can be useful to the optimal functioning of an application.</p>
<p>Therefore, to overcome the challenges of maintaining aging software, developers can opt to refactor the source code of the system. This way, they can use clean and modern code that is reusable and easy to debug.</p>
<p>In refactoring, you alter your software system to enhance its internal structure. But you don't interfere with the external behavior of the code. This way, the features of the software are optimized due to the code's internal improvements.</p>
<p>When refactoring legacy code, updates and modifications should be sufficiently tested to avoid breakages and poor functioning of the application. For example, regression tests can be done to ensure that everything is working as desired.</p>
<p>Additionally, where resources permit, developers can opt to rewrite the entire source code of the software, while employing modern programming approaches.</p>
<p>If you want to continue maintaining your legacy code without breaking it, you can use any of the following three methods:</p>
<ol>
<li>Identifying change points in the code</li>
<li>Isolating your code</li>
<li>Wrapping the code</li>
</ol>
<p>Let's talk about each of the methods.</p>
<h3 id="heading-identify-change-points-in-the-code">Identify change points in the code</h3>
<p>As pointed out earlier, maintaining legacy code can be challenging. Sometimes the issue can be caused by a section that has been poorly programmed. Therefore, you can overcome this by identifying a location that can allow you to change the application's behavior without altering the source code. </p>
<p>For example, let's say you have the following JavaScript code in a legacy application that connects to a database:</p>
<pre><code class="lang-js"><span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">DataConnection</span> </span>{
     <span class="hljs-comment">//some code here</span>

  connector() {
    <span class="hljs-comment">// some code to connect to database</span>
  }
}
</code></pre>
<p>If you want to run some tests on the above code but the the <strong>connector()</strong> method is causing problems, you can identify where to modify the code behavior without affecting the source code.</p>
<p>In this case, you can extend the <strong>DataConnection</strong> class and stop it from establishing a connection to an actual database:</p>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">FakeConnection</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">DataConnection</span> </span>{

    connector() {
    <span class="hljs-comment">// solve the issues of making calls to DB</span>

    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Establishing a connection"</span>)
  }
}
</code></pre>
<p>Consequently, after modifying the code behavior without affecting the source code, you can run tests on the code and maintain it without any problems. </p>
<h3 id="heading-isolate-your-code">Isolate your code</h3>
<p>Another technique that can allow you to maintain your legacy code easily is to isolate and make any changes on a different environment. You just need to identify an insertion point where you can call that changed code from the existing legacy code. </p>
<p>Here is an example:</p>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">BooksData</span> </span>{
  <span class="hljs-comment">// some code here</span>

  addBooks(books) {
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> book <span class="hljs-keyword">of</span> books) {
      book.addDate()
    }

    <span class="hljs-comment">// some code here</span>

    booksRecords.getNumberOfBooks().add(books)
  }

  <span class="hljs-comment">// some code here</span>
}
</code></pre>
<p>Let's say you want to optimize the <strong>books</strong> reference in the above legacy code, but <strong>addBooks()</strong> is giving you problems. </p>
<p>So, you can isolate the code in another new method, like <strong>newBooks().</strong> </p>
<p>Then you can run tests on this new method successfully because it is separate from the rest of the code. Afterwards, you can include a call to the new method in the existing, non-changed code. This way, there'll be minimal changes and minimal risks to the legacy code. </p>
<p>Here it is:</p>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">BooksData</span> </span>{
  <span class="hljs-comment">// some code here</span>

  newBooks(books) {
    <span class="hljs-comment">// some smart and testable logic to optimize books</span>
  }

  addBooks(books) {
    <span class="hljs-keyword">const</span> newBooks = <span class="hljs-built_in">this</span>.newBooks(books)

    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> book <span class="hljs-keyword">of</span> newBooks) {
      book.addDate()
    }

    <span class="hljs-comment">// some code here</span>

     booksRecords.getNumberOfBooks().add(books)
  }

  <span class="hljs-comment">// some code here</span>
}
</code></pre>
<h3 id="heading-wrap-the-code">Wrap the code</h3>
<p>If you want to make changes that should take place before or after the existing code, wrapping it can also be another solution. </p>
<p>You can achieve this by giving the old method you intend to wrap a new name, adding a new method with the same name and signature just like the old method, and calling the new method from the new method. Lastly, you should place the new logic before or after the previous method call. </p>
<p>With the new logic, you can run tests or make any changes you want – without affecting the source code. </p>
<p>For example, here is the code we used previously:</p>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">BooksData</span> </span>{
  <span class="hljs-comment">// some code here</span>

  addBooks(books) {
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> book <span class="hljs-keyword">of</span> books) {
      book.addDate()
    }

    <span class="hljs-comment">// some code here</span>

    booksRecords.getNumberOfBooks().add(books)
  }

  <span class="hljs-comment">// some code here</span>
}
</code></pre>
<p>Here is how to solve the problem through wrapping:</p>
<pre><code class="lang-js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">BooksData</span> </span>{
  <span class="hljs-comment">// some code here</span>

  addBooks(books) {
    <span class="hljs-comment">// some smart logic to get books</span>
    <span class="hljs-built_in">this</span>.addMoreNewBooks(moreBooks)
  }

  addMoreNewBooks(books) {
    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> book <span class="hljs-keyword">of</span> books) {
      book.addDate()
    }

    <span class="hljs-comment">// some code here</span>

    booksRecords.getNumberOfBooks().add(books)
  }

  <span class="hljs-comment">// some code here</span>
}
</code></pre>
<h2 id="heading-conclusion">Conclusion</h2>
<p>Although modernizing antique software is complicated, demanding, and risky, the results are usually worth the risk. Continuing to rely on legacy IT systems is the same as continuing to use the post office to send an urgent message, while an email could do the trick at the click of the button.</p>
<p>Furthermore, as a programmer, do you equip yourself with modern coding skills? Or, do you still rely on old approaches?</p>
<p>For example, in the exciting world of JavaScript programming, we’ve witnessed a surge of frameworks, like React and Angular, which are defining the future of the language. Spending some time learning about them could prevent you from falling into obsoleteness.</p>
<p>Do you agree?</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ SDLC Guide – Software Development Life Cycle Phases and Methodologies ]]>
                </title>
                <description>
                    <![CDATA[ By Jonathan Sexton When I decided to teach myself how to code almost four years ago I had never heard of, let alone thought about, the software development life cycle. As a brand new developer I was focused on learning the technologies that would hel... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/get-a-basic-understanding-of-the-life-cycles-of-software-development/</link>
                <guid isPermaLink="false">66d45f6a36c45a88f96b7cef</guid>
                
                    <category>
                        <![CDATA[ agile development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ learning ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Mon, 24 Feb 2020 12:00:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/02/suzanne-d-williams-VMKBFR6r_jg-unsplash.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Jonathan Sexton</p>
<p>When I decided to teach myself how to code almost four years ago I had never heard of, let alone thought about, the software development life cycle.</p>
<p>As a brand new developer I was focused on learning the technologies that would help me land that coveted first developer job, not the nuances of how those teams operated.</p>
<p>When I did learn of them, I thought they would be useless to me because I considered myself a web developer not a software developer.</p>
<p>I've since learned that this couldn't be further from the truth and these principles/practices play a large role in my day-to-day activities (whether I realize it or not).</p>
<p>I'm fortunate enough to see how the code I write, the features I build, and the bugs I inadvertently introduce (more than I care to admit) affect the end user and their experience. That experience has helped shape how I think about the process of building products and solving problems for my users.</p>
<p>I've had some time to think about the differences (and similarities) each of these approaches offer. At their core, each is focused on delivering high quality software as efficiently and as cost effectively as possible.</p>
<p>Professionally, I've only used one or two of these methodologies. But I still find value in at least a basic understanding of all of them.</p>
<p>All of these methodologies follow a series of phases similar to this diagram:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2020/02/SDLC_-_Software_Development_Life_Cycle.jpg" alt="Image" width="600" height="400" loading="lazy">
<em>Requirement Analysis -&gt; Design -&gt; Implementation -&gt; Testing -&gt; Evolution</em></p>
<p>So, here are the software development life cycle methods (in no particular order):</p>
<ul>
<li><a target="_blank" href="https://en.wikipedia.org/wiki/Lean_software_development">Lean</a></li>
<li><a target="_blank" href="https://www.agilealliance.org/agile101/">Agile</a></li>
<li><a target="_blank" href="https://en.wikipedia.org/wiki/Waterfall_model">Waterfall</a></li>
<li><a target="_blank" href="https://en.wikipedia.org/wiki/Iterative_and_incremental_development">Iterative</a></li>
<li><a target="_blank" href="https://en.wikipedia.org/wiki/Spiral_model">Spiral</a></li>
<li><a target="_blank" href="https://en.wikipedia.org/wiki/DevOps">Dev Ops</a></li>
</ul>
<p>Let's dig in to the differences and similarities of each method.</p>
<h2 id="heading-lean">Lean</h2>
<p>The Lean methodology relies heavily on and is comprised of seven principles. </p>
<p>In no specific order they are:</p>
<ol>
<li>Eliminate Waste</li>
<li>Amplify Learning</li>
<li>Decide As Late As Possible</li>
<li>Deliver As Fast As Possible</li>
<li>Empower The Team</li>
<li>Build Integrity</li>
<li>See/Optimize The Whole</li>
</ol>
<p>Each principle has a specific purpose with benefits that compliment each other.</p>
<p><em>Eliminating waste</em> (extra features, incomplete work, managerial engagements, etc) creates more value for the customer which, in turn, enhances satisfaction.</p>
<p><em>Amplifying learning</em> allows teams to reinvest in their ability to deliver products to customers.</p>
<p><em>Deciding as late as possible</em> refers to all major decisions, giving teams an option based or a set based approach.  This allows teams to gather facts rather than opinions to help influence decisions when made.</p>
<p><em>Delivering as fast as possible</em> is self explanatory - build the product as quickly as possible to deliver it to customers for evaluation/iteration.</p>
<p>In a typical scenario, the managers dole out assignments/work to the developers. In the Lean methodology developers "teach" managers how to listen to the "people in the trenches" thus influencing the decisions/choices of management.</p>
<p>This helps teams feel more <em>empowered</em> to speak up about ides and solutions.</p>
<p>Making <em>integrity</em> a rule instead of an exception means that the customer is confident in the system being built. The customer knows the system is being built to withstand the appropriate amount of growth and "stretching" if need be.</p>
<p>I like to think of the integrity part along the same lines as sitting in a chair. When you sit in the chair you believe it was constructed with the best material that will hold you up every time you sit in it for the life of the chair. The customer needs to that same confidence in the product being built.</p>
<p>Lastly, <em>seeing and optimizing the whole</em> refers to the entirety of the system being built. By optimizing for the whole we look at software not as a sum of many components, but as one large entity that is optimized for efficiency.</p>
<p>This means that during development, the product is broken into manageable pieces and that inadvertent bugs are not only discovered but resolved swiftly.</p>
<h2 id="heading-agile">Agile</h2>
<p>This is the "fail fast" approach to building software.</p>
<p>It places emphasis on small, incremental releases with on-going release cycles. With each iteration teams strive to identify and address small issues before they become big problems.</p>
<p>This also means that the teams must engage stakeholders (people/organizations that the code can ultimately affect such as managers, technical leads, CTOs, and customers) to get their feedback.</p>
<p>If you're a freelance, your stakeholder(s) would be your customers - ultimately you need to ensure their satisfaction with the work before moving on.</p>
<p>Agile is technically an offshoot of the Lean methodology with some notable differences - mainly it prioritizes customer satisfaction from the outset and allows teams to respond quickly to customer feedback.</p>
<p>Although it is beyond the purview of this article, there is another more complex framework within Agile that is called <a target="_blank" href="https://en.wikipedia.org/wiki/Scrum_%28software_development%29">SCRUM</a>. This methodology is used for large, extremely complex projects and has even been used outside of software development.</p>
<h2 id="heading-waterfall">Waterfall</h2>
<p>The waterfall methodology is, by most accounts, the oldest one in the list. It was never meant to be a model for software development and got its start in the construction and manufacturing worlds.</p>
<p>This approach is simple in its structure - finish all parts of a phase before moving on to the next phase with more momentum building towards the project finish as stages are completed. Each stage's beginning (except for the first) and completion is contingent on the previous stage's completion/transfer of information.</p>
<p>Under the waterfall approach each stage has its own rigid project plan that finishes off with testing for previously completed work. It should be noted that this approach is not recommended for larger/longer lasting projects because of the aforementioned rigidity.</p>
<p>Think about the genesis of this methodology and you'll understand it more. It came from the construction/manufacturing world where it is common to complete one phase at a time. During the building of a house you wouldn't start putting in the plumbing before the frame has been put up.</p>
<p>That's not the way software development works generally. As we all know it sometimes becomes necessary to revisit a phase that was previously thought to be finished.</p>
<h2 id="heading-iterative">Iterative</h2>
<p>This is known as the "repetitive approach" or the "make it better the next go around" approach because of the different opportunities it provides to improve the product with each cycle iteration.</p>
<p>I'm biased (as we all are :D) but this happens to be my favorite life cycle for development.  I believe it works best for my current situation  both in my freelance and career path because it allows me to constantly "move forward while making things better."</p>
<p>With the iterative approach, teams implement a solution, test that solution, evaluate its effectiveness/throughput, and then pinpoint further areas for improvement. This happens for each cycle (iteration) of the development process.</p>
<p>With each version released comes another iteration until the final product is completed and ready for rollout to users.</p>
<p>One of the great features of the iterative approach is you and your team get a working version of software early on in the development process.  This can be especially useful to show to stakeholders to gauge their response/feedback.</p>
<p>One of the big drawbacks to this approach is it can consume a large amount of resources very quickly. Imagine all of the people, hours, bug fixes and wages that go into each iteration of the development cycle and you'll get a good picture of the resource usage.</p>
<p>Within this approach is a subset of principles developed by Rational Software Corporation (bought by IBM) called the <a target="_blank" href="https://en.wikipedia.org/wiki/Rational_Unified_Process">Rational Unified Process (R.U.P.)</a> which consists of 4 phases:</p>
<ul>
<li>Inception</li>
<li>Elaboration</li>
<li>Construction</li>
<li>Transition (product release)</li>
</ul>
<p>This set of principles is meant to be flexible and tailored to the needs of each team using it.</p>
<h2 id="heading-spiral">Spiral</h2>
<p>The spiral methodology is likely the most flexible out of the six.  It's a methodology built on risks - identifying and negating them. Risk (identification &amp; aversion) drives every decision in this model. It is broken into four sub-phases:</p>
<ul>
<li>Planning (objectives)</li>
<li>Risk Analysis (identify possible roadblocks)</li>
<li>Develop &amp; Test (current &amp; next version)</li>
<li>Evaluation (review of current phase &amp; plan for next phase)</li>
</ul>
<p>Each iteration of each phase begins with planning for the next phase. This way potential risks are identified before they are encountered. This also allows for a plan of action when said risks arise.</p>
<p>During phases teams also work to mitigate these risks and their impact on future iterations of the spiral development.</p>
<p>As the development process continues, each of these four sub-phases is repeated in spiral fashion. This allows for multiple rounds of refinement for each sub-phase until completion.</p>
<h2 id="heading-dev-ops">Dev Ops</h2>
<p>If you do a quick search, you will find no shortage of information on this development life cycle method. It is the new kid on the block that brings software development and information-technology operations teams into the same fold.</p>
<p>These teams work in conjunction to provide small, but impactful, updates to products that come at a frequent pace. In turn, this creates a continuous feedback and improvement loop that drives development.</p>
<p>This particular methodology is known for automating the manual parts of development as well (think deployment).</p>
<p>The overall goal of this methodology is, like most others, the shorten the development life cycle and provide quality products.</p>
<p>One of the drawbacks to this methodology is the significant mindset and culture changes within an organization. Teams that may have been accustomed to working on many things find their tasks narrowed to only one or two.</p>
<p>For example, a general purpose developer may find they are now being tasked with only the testing portion or the end-user experience portion.</p>
<h2 id="heading-bringing-it-all-home">Bringing It All Home</h2>
<p><img src="https://jonathansexton.me/blog/wp-content/uploads/2020/02/clever-visuals-iMwiPZNX3SI-unsplash-1024x690.jpg" alt="a light bulb on a book" width="600" height="400" loading="lazy">
_Photo by [Unsplash](https://unsplash.com/@clever_visuals?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText"&gt;Clever Visuals on &lt;a href="https://unsplash.com/s/photos/bright-idea?utm_source=unsplash&amp;utm_medium=referral&amp;utm<em>content=creditCopyText)</em></p>
<p>I hope you can now see the importance and the benefits of each of these methodologies. Each of these possess their own strengths and weaknesses.</p>
<p>They are, at their most basic level, a set of guidelines and principles that seek to deliver high quality, efficient work to stakeholders.</p>
<p>When I first started learning to code I didn't have a mentor. By sharing what I've learned I hope to help those who are learning to code when/where they can.</p>
<p>I want to share as much information and experience as I possibly can with other developers.  If you are teaching yourself to code or if you're a seasoned developer I hope this article helps, even if in a small way.</p>
<p>Check out my <a target="_blank" href="https://jonathansexton.me/blog">blog</a> where I frequently post articles about web development.</p>
<p>While you're there why not sign up for my newsletter? You can do  that at the top right of the main blog page.  I like to send out  interesting articles (mine and others), resources, and tools for  developers every now and then.</p>
<p>If you have questions about this article or just in general my DMs are open -- come say hi on <a target="_blank" href="https://twitter.com/jj_goose">Twitter</a> or any of my other social media accounts which you can find below the  newsletter sign up on the main page or on my profile here :)</p>
<p>Have an awesome day and happy coding, friend!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Software Resources for Nonprofits ]]>
                </title>
                <description>
                    <![CDATA[ Please note that freeCodeCamp is not partnered with, nor do we receive a referral fee from, any of the following providers. We simply want to help guide you toward a solution for your organization. Skills-based Volunteer Organizations: FindCollabs G... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/software-resources-for-nonprofits/</link>
                <guid isPermaLink="false">66b8d57fbebc010ace8fe6da</guid>
                
                    <category>
                        <![CDATA[ nonprofit ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Quincy Larson ]]>
                </dc:creator>
                <pubDate>Sat, 09 Nov 2019 18:03:00 +0000</pubDate>
                <media:content url="https://cdn-media-2.freecodecamp.org/w1280/5f9c9f79740569d1a4ca42c5.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Please note that freeCodeCamp is not partnered with, nor do we receive a referral fee from, any of the following providers. We simply want to help guide you toward a solution for your organization.</p>
<h3 id="heading-skills-based-volunteer-organizations">Skills-based Volunteer Organizations:</h3>
<ul>
<li><a target="_blank" href="https://findcollabs.com">FindCollabs</a></li>
<li><a target="_blank" href="http://givecamp.org/">Give Camp</a></li>
<li><a target="_blank" href="http://www.volunteermatch.com/">Volunteer Match</a></li>
<li><a target="_blank" href="http://www.catchafire.org/">Catchafire</a></li>
<li><a target="_blank" href="http://anyonecanhaveawebsite.com/">Anyone Can Have A Website</a></li>
</ul>
<h3 id="heading-building-a-website">Building a website:</h3>
<ul>
<li><a target="_blank" href="https://www.youtube.com/watch?v=4AXDKWuY9QM">How to build and deploy a website without writing any code for free</a></li>
<li><a target="_blank" href="http://www.wix.com/">Wix</a></li>
<li><a target="_blank" href="https://www.squarespace.com/">Square Space</a></li>
<li><a target="_blank" href="https://wordpress.com/">WordPress</a></li>
<li><a target="_blank" href="https://xprs.imcreator.com/">Imcreator.com</a></li>
</ul>
<h3 id="heading-donor-and-volunteer-management-systems">Donor and Volunteer Management Systems:</h3>
<ul>
<li><a target="_blank" href="http://causesignal.com/">Cause Signal</a></li>
<li><a target="_blank" href="https://www.thedatabank.com/">The Data Bank</a></li>
<li><a target="_blank" href="http://www.donorsnap.com/">Donor Snap</a></li>
<li><a target="_blank" href="http://www.donorperfect.com/">Donor Perfect</a></li>
<li><a target="_blank" href="https://www.blackbaud.com/fundraising-crm/etapestry-donor-management">E Tapestry</a></li>
<li><a target="_blank" href="http://www.z2systems.com/">Z2 Systems</a></li>
<li><a target="_blank" href="http://www.regpacks.com/volunteer-management">Reg Packs</a></li>
<li><a target="_blank" href="http://sumac.com/">Sumac</a></li>
<li><a target="_blank" href="http://www.volgistics.com/">Volgistics</a></li>
</ul>
<h3 id="heading-inventory-management-systems">Inventory Management Systems:</h3>
<ul>
<li><a target="_blank" href="https://www.ordoro.com/">Ordoro</a></li>
<li><a target="_blank" href="http://www.unleashedsoftware.com/">Unleashed Software</a></li>
<li><a target="_blank" href="https://www.ezofficeinventory.com/industries/non-profits">EZ Office Inventory</a></li>
</ul>
<h3 id="heading-e-learning-platforms">E-Learning platforms:</h3>
<ul>
<li><a target="_blank" href="http://www.dokeos.com/">Dokeos</a></li>
<li><a target="_blank" href="http://www.efrontlearning.net/">E Front Learning</a></li>
<li><a target="_blank" href="https://moodle.org/">Moodle</a></li>
<li><a target="_blank" href="https://sakaiproject.org/">Sakai Project</a></li>
</ul>
<h3 id="heading-community-management">Community Management:</h3>
<ul>
<li><a target="_blank" href="https://civicrm.org/">CiviCRM</a></li>
<li><a target="_blank" href="http://tcmgr.com/">Total Community Manager</a></li>
</ul>
<h3 id="heading-electronic-forms">Electronic Forms:</h3>
<ul>
<li><a target="_blank" href="http://www.typeform.com/">Typeform</a></li>
<li><a target="_blank" href="http://www.google.com/forms">Google Forms</a></li>
</ul>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to boost your front-end application’s performance ]]>
                </title>
                <description>
                    <![CDATA[ By Dimitris Kiriakakis If your website takes longer than 3 seconds to load, you could already be losing nearly half of your visitors. Yes this is a fact, proven by several research studies. Long loading times can have a devastating impact on your app... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-boost-your-front-end-applications-performance-72ce872b08c/</link>
                <guid isPermaLink="false">66d45e3dd1ffc3d3eb89ddd5</guid>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                    <category>
                        <![CDATA[ performance ]]>
                    </category>
                
                    <category>
                        <![CDATA[ General Programming ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Thu, 18 Apr 2019 19:19:17 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*Vmq3ETGdUZPZe9vZu6CkVg.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Dimitris Kiriakakis</p>
<p>If your website takes longer than 3 seconds to load, you could already be losing nearly half of your visitors.</p>
<p>Yes this is a fact, proven by several research studies. Long loading times can have a <strong>devastating</strong> impact on your application’s conversion rates. On the other hand, optimising page load time leads to noticeable improvements in customer experience, conversion rates, SEO and ultimately, your product’s <strong>success</strong>.</p>
<p>So let’s say that you have recently built a website or a frontend application using a modern JS framework (Angular, React, VueJS etc.). How can we make sure that performance is not going to hold it back from success?</p>
<p>First things first. We have to somehow gather some <strong>data</strong>. When it comes to measuring a frontend application’s performance, the tools I trust the most are:</p>
<ul>
<li>Google chrome’s <a target="_blank" href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a></li>
<li><a target="_blank" href="https://speedcurve.com/">Speedcurve</a></li>
</ul>
<p>Both tools can help you keep track of all the major performance KPIs (Pagespeed Index, Time to Interactive, First Contentful Paint, etc.).</p>
<p><strong>Lighthouse</strong> is included in your Chrome’s dev-tools, and by analysing your website/web-app, it can give you some really useful hints on how to boost it up.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/To1jGG1giiJeWCpEVTGl1v2Hznyz4eKcRncT" alt="Image" width="800" height="331" loading="lazy">
<em>Chrome’s lighthouse can give you some really helpful hints</em></p>
<p>With <strong>Speedcurve</strong> you can have all these KPIs, plus the ability to monitor them across time.</p>
<p>So now that we are able to measure our success, let’s move on with optimising the parts of our website that play the biggest role.</p>
<h3 id="heading-images">Images</h3>
<p>Images are a key part of every website. On average, images make up for more than 60% of data that are loaded on web pages. Being such a critical component of almost all websites, image optimisation is, in my opinion, the most important, and perhaps the lowest hanging fruit.</p>
<h4 id="heading-1-resize-your-images-and-make-them-responsive">1. Resize your images and make them responsive.</h4>
<p>The most important thing to check is that you are not using a bigger resolution than the one you really need. So you have to resize your images to fit exactly the requirements of your layout.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/PqV7uCLjZMyaZwwkQbMDtml61iC9UktvPOjm" alt="Image" width="639" height="380" loading="lazy">
<em>Responsive layouts need responsive images</em></p>
<p>Furthermore, you have to make sure that your images are as <strong>responsive</strong> as your layout is. There is a great tool that I have been using lately, which can help you generate all the different versions of the images that you might need and also generate the HTML5 code that can utilise them. It’s called <a target="_blank" href="https://www.responsivebreakpoints.com/">Responsive Image Breakpoints Generator</a>. I usually prefer generating 8–10 different images.</p>
<p>Of course you can use the generated HTML5 code in any frontend app or website. In addition, if you are into gulp, you could automate this process with the <a target="_blank" href="https://github.com/mahnunchik/gulp-responsive">gulp-responsive</a> plugin.</p>
<h4 id="heading-2-make-sure-they-are-lazy-loaded">2. Make sure they are lazy loaded.</h4>
<p>Lazy loading basically means that we defer the loading of images that are not required immediately. Typically, any image that is not visible to the users on their current viewport, can be loaded at a later point in time, when the image enters or is about to enter the viewport.</p>
<p>No matter which framework you are using, you can find a plugin that can lazy-load the images for you (e.g. <a target="_blank" href="https://github.com/alexjoverm/v-lazy-image">v-lazy-image</a> in VueJS), however you could build your own implementation too. Just make sure that you are utilising the modern way to detect when an element enters or exits the browser’s viewport, the <a target="_blank" href="https://github.com/alexjoverm/v-lazy-image">IntersesectionObserver API</a>.</p>
<h4 id="heading-bonus-use-a-cdn-for-image-delivery">Bonus: Use a CDN for image delivery</h4>
<p>If you have already optimised the size and the number of images that your website loads, and especially if it’s going to be available globally, you could also use a <strong>content delivery network</strong> (CDN) to serve them.</p>
<p>In a few words, a CDN caches your images on its globally distributed network of servers. So if a user from Australia requests an image from your website, instead of retrieving that image from your server in Europe, the CDN is going to deliver it from another one, closer to that user in Australia. This cuts down the round trip time needed to load the image.</p>
<h3 id="heading-css-js-and-html">CSS, JS and HTML</h3>
<p>All modern frameworks optimise your code during the production build time (code-splitting, tree-shaking, minification, etc.). What you can do on top of that?</p>
<h4 id="heading-1-optimise-the-main-html-document">1. Optimise the main HTML document</h4>
<p>HTML is the backbone of nearly every web app. When it comes to referencing resources within your HTML document there are a few best practices you should follow. It is recommended to:</p>
<ul>
<li>Place CSS references at the top of your HTML document’s header in order to ensure progressive rendering.</li>
<li>Place JavaScript attributes at the bottom of your HTML body and <a target="_blank" href="https://www.w3schools.com/tags/att_script_async.asp">prefer async script loading</a>. This will prevent any <code>&lt;scri</code>pt&gt; tags from blocking the HTML rendering process.</li>
</ul>
<h4 id="heading-2-make-sure-you-only-load-what-you-need">2. Make sure you only load what you need</h4>
<p><img src="https://cdn-media-1.freecodecamp.org/images/YjYDfAVFIYx91chGjMBSGUhruQJs4vWHxMKB" alt="Image" width="560" height="315" loading="lazy">
<em>Lazy loading components and modules</em></p>
<p>Angular, React, and VueJS all provide you with lazy-loading features. You only have to split your code properly, according to your own needs and load only the modules that you need, as soon as you really need them. For instance, if you have an e-commerce app, you have to make sure that the Basket module or the Payments module are not loaded when the user is in the home page.</p>
<h3 id="heading-compression-amp-caching">Compression &amp; Caching</h3>
<p>In general, for all the assets that are essential to your frontend (images &amp; code) you should apply compression and cache them properly.</p>
<p>File compression will make your app’s assets a bit lighter and decrease the round trip time needed to serve them. One of the most commonly used file compression methods is <strong>Gzip</strong>, an excellent method for shrinking code chunks, documents, images and audio files.</p>
<p><a target="_blank" href="https://github.com/google/brotli"><strong>Brotli</strong></a> is another file compression algorithm, and it’s growing in popularity. This open source algorithm is regularly updated by software engineers from Google and other organisations. It has proven itself to compress files at a <strong>much better ratio</strong> than other existing methods.</p>
<p>You can enable your preferred compression method on nginx, apache or whichever server you are using, by modifying their configuration files (<a target="_blank" href="https://www.howtoforge.com/tutorial/how-to-install-nginx-with-brotli-compression-on-ubuntu-1804/">enabling brotli on nginx</a> or <a target="_blank" href="https://ayesh.me/apache-brotli">enabling brotli on apache</a>).</p>
<p>When it comes to caching, the most commonly used caching technique (also recommended by Lighthouse) is called <strong>Leverage Browser Caching</strong>. Again, you can enable it by modifying your server’s configuration files (<a target="_blank" href="https://www.keycdn.com/blog/leverage-browser-caching">enabling Leverage Browser Caching</a>).</p>
<h3 id="heading-summary">Summary</h3>
<p>When it comes to websites and frontend applications, performance is a huge topic and we should take it seriously.</p>
<p>I hope this article helped you understand and enabled you to tackle some of the most important things that we need to take care of when we want to improve an application’s performance.</p>
<p>For a detailed checklist, make sure that you check out the <a target="_blank" href="http://ront-End-Performance-Checklist">Front-End-Performance-Checklist</a>.</p>
<p>Cheers! ?</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ A Dummy’s Guide to Distributed Queues ]]>
                </title>
                <description>
                    <![CDATA[ By Zhia Hwa Chong If you’ve ever wondered what Kafka, Heron, real-time streaming, SQS or RabbitMQ are all about, then this article is for you. I’ll discuss in detail why we need a queue for today’s modern software architecture, what are some common t... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/a-dummys-guide-to-distributed-queues-2cd358d83780/</link>
                <guid isPermaLink="false">66c34276790a62b5fbf7b84a</guid>
                
                    <category>
                        <![CDATA[ coding ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Microservices ]]>
                    </category>
                
                    <category>
                        <![CDATA[ General Programming ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Thu, 18 Apr 2019 18:07:41 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*Zocw-AFNgC0VDbNWp8dD_g.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Zhia Hwa Chong</p>
<p>If you’ve ever wondered what <em>Kafka, Heron, real-time streaming, SQS or RabbitMQ</em> are all about, then this article is for you. I’ll discuss in detail why we need a queue for today’s modern software architecture, what are some common technologies used, and how queues are commonly used in the industry. If you enjoy this article, I have <a target="_blank" href="https://docs.google.com/document/d/1PeK69h4H82rwKjhactiE_sAIorCcZgXgXTY7k-nXpnE/edit#heading=h.hs0b333nsxch">a course</a> on scaling distributed systems where I discuss these topics in more detail.</p>
<p>OK, let’s get into it!</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/K6pTed3Kg7OFpcJQ0Xnw7Et3tZfnBxE7eyYA" alt="Image" width="800" height="349" loading="lazy">
<em>A Dummy’s Guide to Queues</em></p>
<h3 id="heading-first-and-foremost-why-do-you-need-a-queuemessage-broker">First and foremost, why do you need a queue/message broker?</h3>
<h4 id="heading-the-story-of-how-a-queue-saved-the-lemonade-stands">The story of how a queue saved the lemonade stands</h4>
<p>Imagine that you are running a lemonade ? stand, and you built out a nifty little web-app that k<strong>eeps track of how often your clients return to your lemonade stand.</strong></p>
<p>Your web-app has an endpoint, say <em>yourlemonade.com/traffic,</em> and every time you click on a button, the traffic count goes up by 1. Beautiful.</p>
<p>As the traffic to your lemonade stand increases, you click the button more and more. Well, since you’re living in a relatively small neighborhood, you only get 10–20 people per day. Your sales proceed as usual, the web-app handles the traffic just fine, and everything is fine and dandy. Perfect.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/jrK32XGr77EfzxDmZeW826mPAjdk6UtC2H8M" alt="Image" width="800" height="403" loading="lazy">
<em>Your lemonade stand web-app</em></p>
<h4 id="heading-the-nightmare-of-a-booming-business">The nightmare of a booming business</h4>
<p>Now that your lemonade stand has made a name for itself, people from across the city are flocking in to get a taste of your famous lemonade. And on a beautiful Sunday morning, the local news decided to promote your stand, and the traffic <strong><em>EXPLODES</em></strong><em>.</em></p>
<p>As you can imagine, the traffic to your lemonade stand increases from 10–20 people per day to 10,000 per day. You’re tapping the traffic button furiously, which in turns triggers a call to <em>yourlemonade.com/traffic,</em> and your web app keeps incrementing the amount of traffic.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/CAfEJi3inzoxhwfo9TkAfFqZcmEufwwoDwcG" alt="Image" width="800" height="334" loading="lazy">
<em>Lemonade stand business runs into bottleneck</em></p>
<p>Unfortunately, your web-app is hosted on an 8-bit, 128MB RAM server in your house garage. With the booming business and increased traffic, your web-app cannot handle the scale of traffic any longer.</p>
<p>Eventually, your server dies. ☠️</p>
<p>With that, your entire web app is brought down. You can’t keep track of traffic anymore. People are rushing in, orders are piling up, yet your web-app is down and you can’t handle any transactions until you can start logging the traffic again.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/-DgDUsY9jVdJr2WNoenY0K1gyLH1KvM9kw4m" alt="Image" width="800" height="328" loading="lazy">
<em>Traffic brought down your web-app, and business too.</em></p>
<p>What do you do?</p>
<h4 id="heading-queue-to-the-rescue">Queue to the rescue</h4>
<p>A moment of brilliance strikes you, <em>what if I place a box in front of the counter where each client can just drop a note saying they were there?</em></p>
<p>Every time a client walks through the door and places an order, you ask them politely to drop their order sheets in a small box placed in front of the payment counter. Outstanding! You have essentially introduced a mechanism to keep track of arrivals while still allowing your business to function as usual.</p>
<p>This is what we call <a target="_blank" href="https://stackoverflow.com/questions/748175/asynchronous-vs-synchronous-execution-what-does-it-really-mean"><em>asynchronous processing</em></a>, and, <em>welcome to the world of queues</em>. ?</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/VhVBpQZAbs0L2aVInfL57IzZdEudOuGDv2aA" alt="Image" width="800" height="348" loading="lazy">
<em>Hero to the rescue!</em></p>
<p>When you start out building software, much like the lemonade stand I mentioned above, it is common for a task to</p>
<ol>
<li>call a service, then</li>
<li>wait for the service to finish, and then</li>
<li>move on to the next task.</li>
</ol>
<p>This is what’s called <em>synchronous processing. Asynchronous processing</em>, on the other hand, allows a task to call a service, and <em>move on to the next task</em> while the service processes the request at its own pace. That’s why a queue is a beautiful, elegant way to unblock your systems because it puts a layer in front of your services and allows them to tackle the tasks at their own pace.</p>
<h4 id="heading-if-a-queue-is-so-powerful-why-dont-we-just-put-it-in-front-of-everything">If a queue is so powerful, why don’t we just put it in front of everything?</h4>
<p><img src="https://cdn-media-1.freecodecamp.org/images/ogAKQKM90Kep2cU2jneEkMeke7e0SMK28eHC" alt="Image" width="593" height="421" loading="lazy">
_Image courtesy of [imgflip.com](https://imgflip.com/i/2xylc5" rel="noopener" target="<em>blank" title=")</em></p>
<p>As anyone who has dabbled in distributed systems can attest to, scaling a distributed system is extremely tricky and complicated. There are a few things to know about queues that might make a queue an unattractive proposition for your system.</p>
<p>Some questions I’d ask before deciding if a queue is the right solution for you:</p>
<ul>
<li>Is your service having issues due to high traffic? If it’s not, maybe you should look into what the bottleneck is before jumping into queues. As Donald Knuth famously said, <a target="_blank" href="https://en.wikiquote.org/wiki/Donald_Knuth">premature optimization is the root of all evil.</a></li>
<li>Do you have in-house expertise in managing a queue? Or do you need to potentially hire a team to do it for you? Maintenance costs, like scaling the queue, can skyrocket if you’re not careful. There are services like <a target="_blank" href="https://aws.amazon.com/sqs/">Amazon SQS</a> (Simple Queueing Service) which offer a <em>managed</em> solution (i.e. you don’t need to maintain anything on your own).</li>
<li>Is it possible to have duplicate entries in the queue? If so, is that acceptable?</li>
<li>Do you need to keep a record of all transactions, in case a queue goes down?</li>
<li>In the case that a queue goes down, does the queue need to be able to replay all the entries? What are your backup options?</li>
</ul>
<p>There are many more concerns that might be specific to your use case, but hopefully, I’ve made my point that adding a queue isn’t as easy as snapping your fingers.</p>
<h3 id="heading-how-queues-are-used-in-modern-architecture">How Queues Are Used in Modern Architecture</h3>
<p>Queues are ubiquitous in today’s modern distributed systems architecture — adopted across various industries for different use cases, and there are more novel use cases every day.</p>
<p>Here are some of the real-world use cases for queues:</p>
<h4 id="heading-real-time-streaming">Real-time streaming</h4>
<p>When MapReduce came around, it was a huge phenomenon in the industry because it allowed mere mortals to process petabytes of data in a reasonable amount of time, anywhere from days to hours. This might seem absurd today when data’s available in almost seconds, but pre-MapReduce, it wasn’t easy to extract usable data from extremely large data sets.</p>
<p>The appetite for data analytics has grown, and we’re now looking at processing data within hours, and sometimes, <em>milliseconds</em>.</p>
<p>To achieve low-latency analytics and performance in a continuous fashion, the concept of real-time streaming was conceived.</p>
<p>A useful example here is to think of ads: ads on Twitter, for example, are shown to millions of people per day. Yet in order to make sure users don’t see the same ads multiple times within a set period of time, Twitter needs to somehow know the last time a user was exposed to a certain ad.</p>
<p>If we had relied on MapReduce to perform this action, it would not even be considered a solution because it’ll take upwards of hours to process all that data. Instead, real-time streaming allows us to process ad impressions as they arrive. This is all made possible because of queues <strong>that allow data to be continuously streamed and processed in real time.</strong></p>
<p>Some technologies you’ll often hear about in real-time streaming use cases are Kafka, Kafka streams, Redis, Spark Streaming (which is different from Spark) and so on.</p>
<h4 id="heading-event-driven-architecture">Event-driven architecture</h4>
<p>Queues are used as a critical component of an <a target="_blank" href="https://en.wikipedia.org/wiki/Event-driven_architecture">event-driven architecture</a>, or colloquially known as <strong>Pub</strong>(lisher)-<strong>Sub</strong>(scriber). Event-driven architecture is, according to Wikipedia:</p>
<blockquote>
<p>Event-driven architecture (EDA), is a software architecture pattern promoting the production, detection, consumption of, and reaction to events.</p>
</blockquote>
<p>I’d like to think of this as subscribing to a newsletter: as a producer of a newsletter, you know who’s subscribed to your newsletter and who’s not. You write the content, and then you send it to your subscribers.</p>
<p>On the other hand, as a subscriber, you might be subscribed to multiple newsletters, but you don’t know who the other subscribers are. But you don’t really care about that. This is a really nice feature because you can now write software that listens to a bunch of events and only responds to the ones you’re interested in.</p>
<p>RabbitMQ and Amazon SQS (Simple Queuing Service) are some of the technologies often used for these types of use cases.</p>
<h4 id="heading-distributed-fault-tolerant-scalable-infrastructure">Distributed, fault-tolerant, scalable infrastructure</h4>
<p>Distributed systems are prone to errors, and a queue is one of several ways to increase resiliency in the architecture. In a microservice architecture (or <a target="_blank" href="https://en.wikipedia.org/wiki/Service-oriented_architecture">service-oriented architecture</a>), multiple microservices communicate with each other through queues as shared interfaces.</p>
<p>When a microservice fails unexpectedly, a queue is still able to accept messages. This essentially <em>provides a buffer</em> for our microservice to recover. Once the microservice comes back online, it can pick up the messages from the queue and process them again.</p>
<p>Think of it as your mailbox. While you’re out on vacation in Hawaii, the mailperson will still deliver your mail into the mailbox. Once you return from vacation, you can pick up the mail and process them at your leisure.</p>
<p>Thank you for reading! I hope you’ve learned a thing or two about distributed queues from my article. If you enjoyed reading this, please leave a clap, and feel free to join my newsletter <a target="_blank" href="http://eepurl.com/dnt9Sf">here</a> where I write about software and technical interviews!</p>
<h4 id="heading-resources-i-recommend">Resources I Recommend</h4>
<p>To further your understanding of queues and various topics mentioned above, I would highly recommend these resources below. Or <a target="_blank" href="https://docs.google.com/document/d/1PeK69h4H82rwKjhactiE_sAIorCcZgXgXTY7k-nXpnE/edit#heading=h.hs0b333nsxch"><strong>join my course</strong></a> on scaling distributed systems to learn more about queues :)</p>
<ul>
<li><a target="_blank" href="https://amzn.to/2I80wup">Designing Data-Intensive Applications</a>: Awesome book for learning about scaling distributed systems! Highly recommended.</li>
<li><a target="_blank" href="https://amzn.to/2D8FUxS">Kafka the Guide</a>: I used this book as a reference guide, and enjoyed it for the high-level description.</li>
<li><a target="_blank" href="https://www.confluent.io/blog/introducing-kafka-streams-stream-processing-made-simple/">Kafka Streams</a>: This is an informative article from Confluent that talks in some high-level detail about Kafka’s implementation of stream processing.</li>
<li><a target="_blank" href="http://amzn.to/2Dcs6Qd">Elements of Programming Interviews</a>: Great for solving coding problems.</li>
<li><a target="_blank" href="http://amzn.to/2Hj91OH">Cracking The Coding Interview</a>: Great for covering foundational CS coding problems.</li>
<li><a target="_blank" href="https://www.dailycodingproblem.com/zhiachong">Daily Coding Problem.com</a>: This is a free-to-try website that offers free daily coding problems. You can sign up for interesting daily coding challenges, and you can pay for solutions if you’d like. If you use my referral link (<a target="_blank" href="http://www.dailycodingproblem.com/zhiachong">dailycodingproblem.com/zhiachong</a>), you get $10 off!</li>
</ul>
<p>(FYI, I share more resources on my website: <a target="_blank" href="http://www.zhiachong.com/resources">zhiachong.com</a> where I’ve personally tried and tested, and recommend for software engineers of all levels.)</p>
<p>Cheers!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to run GETH from a Docker container ]]>
                </title>
                <description>
                    <![CDATA[ By Vince Tabora Installing the Ethereum node client on a machine can be a tedious process. There is a simpler way this can be done using a Docker client. This is a guide for running the GETH (Ethereum-Go) node client from inside a Docker container. G... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-run-geth-from-a-docker-container-b6d30620ca74/</link>
                <guid isPermaLink="false">66c35437b1d4339762339fb5</guid>
                
                    <category>
                        <![CDATA[ Blockchain ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Docker ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Ethereum ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Wed, 27 Mar 2019 18:56:55 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*QZk8YSNM8shw4Trn8YtvAA.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Vince Tabora</p>
<p>Installing the Ethereum node client on a machine can be a tedious process. There is a simpler way this can be done using a Docker client. This is a guide for running the <strong>GETH</strong> (Ethereum-Go) node client from inside a Docker container. GETH is the GoLang implementation of the Ethereum protocol. There is an image available to pull from the Docker hub repository that can run the environment.</p>
<p>The <a target="_blank" href="https://geth.ethereum.org/"><strong>GoEthereum</strong></a> website lists the following available images with descriptions.</p>
<ul>
<li><code>ethereum/client-go:latest</code> is the latest develop version of Geth</li>
<li><code>ethereum/client-go:stable</code> is the latest stable version of Geth</li>
<li><code>ethereum/client-go:{version}</code> is the stable version of Geth at a specific version number</li>
<li><code>ethereum/client-go:release-{version}</code> is the latest stable version of Geth at a specific version family</li>
</ul>
<p>The following ports are opened by default when running from the container.</p>
<ul>
<li><code>8545</code> TCP, used by the HTTP based JSON RPC API</li>
<li><code>8546</code> TCP, used by the WebSocket based JSON RPC API</li>
<li><code>30303</code> TCP and UDP, used by the P2P protocol running the network</li>
<li><code>30304</code> UDP, used by the P2P protocol's new peer discovery overlay</li>
</ul>
<p>The Docker client software must be installed on the machine you are going to run the container from. Containers can only run if you have the Docker client installed. Depending on your operating system, the correct version of the client will be needed.</p>
<p>There are separate versions for Windows, Linux and the MacOS. The container can even be run on a Linux instance running on AWS, like a typical Linux installation. Once the Docker client is installed, the underlying platform doesn’t matter. The commands will be the same for all.</p>
<h2 id="heading-getting-the-image">Getting The Image</h2>
<p>Open a <strong><em>terminal</em></strong> on Linux or MacOS, or <strong><em>PowerShell</em></strong> command prompt from Windows. In the CLI prompt, type the following command:</p>
<p><strong>docker pull ethereum/client-go</strong></p>
<p>This pulls the Docker image from the hub repository where it was uploaded by the Ethereum developers. Once you have issued this command, the following verbose or similar should be displayed:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/08/image-48.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>I have already pulled the image, so the verbose may look different. When you issue the pull command it will always download the latest image available, which is good practice.</p>
<h2 id="heading-running-the-node">Running The Node</h2>
<p>Now you can start the node by issuing the following command:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/08/image-49.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>We want to run the node with the flag options <strong>-i</strong> and <strong>-t</strong> to display information from our container. The <strong>-p</strong> indicates the use of a port number, in this case 30303. Likewise, the command can be run without the flags and it will simply use the default ports and settings from inside the container.</p>
<p>The following information should appear from the terminal.</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/08/image-51.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>The INFO line that shows the config reveals what the node client software has installed. The node client is running the latest (as of this posting) version of the Ethereum software which is Constantinople that is a user activated hard fork at block height 7280000.</p>
<p>When running in JSON-RPC API:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/08/image-52.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Take note that running the option rpcaddr “0.0.0.0” is not secure, since you are opening up your node to all traffic. If your ETH wallet were unlocked, a hacker can get to your node in this way and take your coins. I don’t cover security in this article, but you can read more about that <a target="_blank" href="https://medium.com/coinmonks/securing-your-ethereum-nodes-from-hackers-8b7d5bac8986">here</a> (securing your GETH node’s RPC ports). Always abide to safe and best practices.</p>
<p>If the node displays the following in the INFO line, there will be a problem:</p>
<p>config=”{ChainID: 1 Homestead: 1150000 DAO: 1920000 DAOSupport: true EIP150: 2463000 EIP155: 2675000 EIP158: 2675000 Byzantium: 4370000 Constantinople:  Engine: ethash}”</p>
<p>The Constantinople:  indicates the software was not updated. There is also no line for ConstantinopleFix, which appears in the correct configuration.</p>
<h2 id="heading-persistent-data">Persistent Data</h2>
<p>For persistent blockchain data, Docker data volumes should be used with the option <strong>-v</strong>. The <code>/path/on/host</code> should be replaced with the location you specify. For this the following command must be used:</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/08/image-54.png" alt="Image" width="600" height="400" loading="lazy"></p>
<h2 id="heading-checking-node-status">Checking Node Status</h2>
<p>You can check the container’s status using the following command:</p>
<p><strong>docker ps</strong></p>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/08/image-55.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>This will display the Container ID with the image name, status and ports used.</p>
<pre><code>
#These are the commands to run <span class="hljs-keyword">from</span> the Docker CLI to run the Ethereum Go node client

#GETTING THE IMAGE

docker pull ethereum/client-go


#RUNNING THE NODE

docker run -it -p <span class="hljs-number">30303</span>:<span class="hljs-number">30303</span> ethereum/client-go

#RUNNING NODE USING API

docker run -it -p <span class="hljs-number">8545</span>:<span class="hljs-number">8545</span> -p <span class="hljs-number">30303</span>:<span class="hljs-number">30303</span> ethereum/client-go --rpc --rpcaddr <span class="hljs-string">"0.0.0.0"</span>

#Note, warning about using --rpcaddr <span class="hljs-string">"0.0.0.0"</span> <span class="hljs-keyword">in</span> a live environment. It is an insecure way <span class="hljs-keyword">of</span> opening your node.
#There are different ways to secure your ports, but <span class="hljs-built_in">this</span> is one thing to take note <span class="hljs-keyword">of</span> <span class="hljs-keyword">if</span> you plan to use the API.


#PERSISTENT DATA

docker run -it -p <span class="hljs-number">30303</span>:<span class="hljs-number">30303</span> -v /path/on/host:<span class="hljs-regexp">/root/</span>.ethereum ethereum/client-go
</code></pre><hr>
<p><img src="https://www.freecodecamp.org/news/content/images/2019/08/image-56.png" alt="Image" width="600" height="400" loading="lazy">
<em>Running GETH from a Docker Container</em></p>
<p>Take note that this does not automatically mine ETH. That is a different process. For getting quick access to the Ethereum blockchain, this is the purpose for running GETH.</p>
<p>For full code source, visit: <a target="_blank" href="https://github.com/Play3rZer0/GETHDocker.git">https://github.com/Play3rZer0/GETHDocker.git</a></p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ My journey in completing 100 days of code ]]>
                </title>
                <description>
                    <![CDATA[ By Pramono Winata Here I’ll tell you my story how I completed 100 days of code, how I started, how I keep it going, and how I finally finished it. What I have produced in my 100 days of code Starting Point About a year ago I actually heard a ]]>
                </description>
                <link>https://www.freecodecamp.org/news/my-journey-in-completing-100-days-of-code-e657428b1fa6/</link>
                <guid isPermaLink="false">66d46099d1ffc3d3eb89de3c</guid>
                
                    <category>
                        <![CDATA[ open source ]]>
                    </category>
                
                    <category>
                        <![CDATA[ General Programming ]]>
                    </category>
                
                    <category>
                        <![CDATA[ self-improvement  ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                    <category>
                        <![CDATA[ technology ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Sun, 03 Mar 2019 06:20:06 +0000</pubDate>
                <media:content url="https://cdn-media-2.freecodecamp.org/w1280/5f9ca4cd740569d1a4ca6517.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Pramono Winata</p>
<p>Here I’ll tell you my story how I completed 100 days of code, how I started, how I keep it going, and how I finally finished it.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/J858KaVeHd1w82cHzm-Fq3M3kgKMf7EmXbTU" alt="Image" width="762" height="749" loading="lazy">
<em>What I have produced in my 100 days of code</em></p>
<h3 id="heading-starting-point"><strong>Starting Point</strong></h3>
<p>About a year ago I actually heard a lot about the 100 days of code challenge, but I had never thought of doing it. The very sound of <strong>one hundred days</strong> felt so intimidating for me back then that I was not sure that I could actually finish it.</p>
<p>Then one day I read <a target="_blank" href="https://android.jlelse.eu/100-days-of-code-in-open-source-3ceb38474a89">this article</a>, and after reading so many inspiring stories from people doing 100 days of code on Twitter, I finally decided that the time for me to start was now or never. And I finally started doing my 100 days of code, about 100 days ago from when I am writing this article.</p>
<h3 id="heading-managing-and-planning-my-work"><strong>Managing and Planning my work</strong></h3>
<p>First things first, I planned on what coding I would do and I decide that I would contribute to the <a target="_blank" href="https://github.com/pramonow">GitHub open-source community</a>. I would spend each day coding for about 1 hour and I would try to keep it to that timeframe — because I have got my me-time too ;)</p>
<p>My main challenge for this was actually <strong>finding out what to do</strong> every single day. For that, I always prepared <strong>two kinds of notes</strong> on my phone:</p>
<p>The first type of note was a list of my progress in 100 days of code, each and every day. Not only that, but this note also served as my note on what to do the next day. I always planned on what I was going to do at night. Then the next day I would know what to work on, so I would not waste my time thinking of what to do when I should have been coding.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/IU0FMqLNMbsxXcOpMw-EMp4B0l18II-fUyTO" alt="Image" width="800" height="711" loading="lazy">
<em>made it into two notes since there is actually a limit in android Memo App</em></p>
<p>My second note is was list of what open source things I wanted to make, something like a bucket list or a wish list, but instead it is a code list.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/5Z2HqA1kzrGE6OGnbOH5D700XVfYRt1F0BHs" alt="Image" width="270" height="480" loading="lazy">
<em>I named this open source wish list</em></p>
<p>Finding an idea for what to do was also a difficult task to do every day. That’s why I always <strong>spent my days reading Medium articles</strong> to find inspiration for what I should be exploring.</p>
<p>Since my expertise is in Android mobile application development, I started most of my repositories based on Android applications with Kotlin. Then after I started getting used to it, I finally started making repositories based on other things such as Serverless with <a target="_blank" href="https://github.com/pramonow/Serverless-go">go</a> and <a target="_blank" href="https://github.com/pramonow/Serverless-nodejs">nodejs</a>, <a target="_blank" href="https://github.com/pramonow/flutter-example">Flutter</a> and <a target="_blank" href="https://github.com/pramonow/try-rust">Rust</a>.</p>
<p>Nearing the day that I finished my 100 days of code, I also made another note which listed my leftover tasks that usually had something to do with refactoring.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/HvMmQr93dqvKzx8S48eOtpzyILhnWdXBeYIp" alt="Image" width="270" height="480" loading="lazy">
<em>refactor job, everyone loves clean code</em></p>
<h3 id="heading-keeping-myself-going"><strong>Keeping myself going</strong></h3>
<p>100 days is quite a long time. You might wonder if there were actually days where I was thinking of quitting.</p>
<p>Yes, there actually were — there have been several days where I doubted myself. Was I actually doing the right thing or was I just wasting my time doing this thing?</p>
<p>But I always kept myself going because of everything I have learned. Living in this Technology Era as a Software Engineer, I must always strive to learn new things and never stop. The moment I stop learning is the moment I stop growing as a Software Engineer. And seeing the stories about how people are finishing 100 days of code and even 360 days of code made me feel challenged since there were so many people out there doing it. If they could do it and even do more, why couldn’t I finish it?</p>
<p>It’s very important to push yourself as much as you’re able. But don’t forget to limit yourself and give yourself a break sometimes. If you reach your limit, you can then call it a day and continue on tomorrow. There were also days when all I did was refactoring and making a new repository. It is always important to keep up, but <strong>do not forget to give yourself a break</strong>.</p>
<p>And also, the most important part of keeping myself going: <strong>Consistency.</strong></p>
<h3 id="heading-completing-my-100-days-of-code"><strong>Completing my 100 days of code</strong></h3>
<p>When I finally finished my 100 days of code, the first two things I felt were feelings of <strong>accomplishment and relief</strong>.</p>
<p>People may ask me why I did it. I didn’t gain things from it — no profit, no one is looking at my mediocre GitHub repositories, no forks or stars. But of course I learned a lot of things from a technical point of view. Also, most of the people that saw me doing this 100 days of code acknowledged me for being consistent and continuing to do it.</p>
<p>One thing I always believe is that <strong>people may betray you, but hard work will not betray you. Keep sharpening yourself. At the end of the day, you will see yourself reaping the good things that you have sown</strong>.</p>
<p>Feel free to check out my <a target="_blank" href="https://github.com/pramonow">GitHub</a>! I will be very thankful for any issue opened or any PR. I have produced several android components which are usable and tested.</p>
<p><strong>So then, this ends my story on my first 100 days of code. Where is your story?</strong></p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Learn Regular Expressions with this free course ]]>
                </title>
                <description>
                    <![CDATA[ By Beau Carnes “Some people, when confronted with a problem, think ‘I know, I’ll use regular expressions.’ Now they have two problems.” -Jamie Zawinski For some people, using regular expressions can be a problem. But it doesn’t have to be a problem... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/learn-regular-expressions-with-this-free-course-37511963d278/</link>
                <guid isPermaLink="false">66c359caf83dfae169b2c00d</guid>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                    <category>
                        <![CDATA[ General Programming ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Regex ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Mon, 21 Jan 2019 16:46:07 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*Sg2Vdih6v1wDWRPtgnX0DA.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Beau Carnes</p>
<blockquote>
<p>“Some people, when confronted with a problem, think ‘I know, I’ll use regular expressions.’ Now they have two problems.” <em>-Jamie Zawinski</em></p>
</blockquote>
<p>For some people, using regular expressions can be a problem. But it doesn’t have to be a problem for you. This article is a full course on Regular Expressions.</p>
<h3 id="heading-1-introduction">1. Introduction</h3>
<p>Regular Expressions, or just RegEx, are used in almost all programming languages to define a search pattern that can be used to search for things in a string.</p>
<p>I’ve developed a <a target="_blank" href="https://scrimba.com/g/gregularexpressions">free, full video course</a> on Scrimba.com to teach the basics of regular expressions.</p>
<p>This article contains the course in written form. But if you would prefer to watch the video version with interactive lessons, you can check it out on <a target="_blank" href="https://scrimba.com/g/gregularexpressions">Scrimba</a>. The sections in this article correspond to the sections in the Scimba course.</p>
<p>This course follows along with the <a target="_blank" href="https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/regular-expressions">RegEx</a> curriculum at freeCodeCamp.org. You can check that out for coding challenges and to earn a certificate.</p>
<p>These lessons focus on using RegEx in JavaScript, but the principles apply in many other programming languages you might choose to use. If you don’t already know basic JavaScript, it could be helpful if you cover it a bit first. I also have a basic JavaScript course that you can access on <a target="_blank" href="https://scrimba.com/p/pPgdYTV/cEv4Lh6">Scrimba</a> and on the <a target="_blank" href="https://www.youtube.com/watch?v=PkZNo7MFNFg">freeCodeCamp.org YouTube channel</a>.</p>
<p>So let’s get started! You’ll be saving the day in no time. ?</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/mR0hvYGgyvAY9jIH9iiSUNj1gz-dI39-34RS" alt="Image" width="600" height="607" loading="lazy">
_From [https://xkcd.com/208/](https://xkcd.com/208/" rel="noopener" target="<em>blank" title=")</em></p>
<h3 id="heading-2-using-the-test-method">2. Using the Test Method</h3>
<p>To match parts of strings using RegEx, we need to create patterns that help you to do that matching. We can indicate that something is a RegEx pattern by putting the pattern between slashes <code>/</code>, like so <code>/pattern-we-want-to-match/</code>.</p>
<p>Let’s look at an example:</p>
<pre><code><span class="hljs-comment">// We want to check the following sentencelet sentence = "The dog chased the cat."</span>
</code></pre><pre><code><span class="hljs-comment">// and this is the pattern we want to match.let regex = /the/</span>
</code></pre><p>Notice how we use <code>/the/</code> to indicate that we are looking for “the” in our <code>sentence</code>.</p>
<p>We can use RegEx <code>test()</code> method to tell if a pattern is present in a string or not.</p>
<pre><code><span class="hljs-comment">// String we want to testlet myString = "Hello, World!";</span>
</code></pre><pre><code><span class="hljs-comment">// Pattern we want to findlet myRegex = /Hello/;</span>
</code></pre><pre><code><span class="hljs-comment">// result is now truelet result = myRegex.test(myString);</span>
</code></pre><h3 id="heading-3-match-literal-strings">3. Match Literal Strings</h3>
<p>Let’s now find Waldo.</p>
<pre><code><span class="hljs-keyword">let</span> waldoIsHiding = <span class="hljs-string">"Somewhere Waldo is hiding in this text."</span>;<span class="hljs-keyword">let</span> waldoRegex = <span class="hljs-regexp">/Waldo/</span>;
</code></pre><pre><code><span class="hljs-comment">// test() returns true, so result is now also truelet result = waldoRegex.test(waldoIsHiding);</span>
</code></pre><p>Note that in this example <code>waldoRegex</code> is case sensitive, so if we were to write <code>/waldo/</code> with a lowercase ‘w’, then our <code>result</code> would be false.</p>
<h3 id="heading-4-match-a-literal-string-with-different-possibilities">4. Match a Literal String with Different Possibilities</h3>
<p>RegEx also has <code>OR</code> operator which is <code>|</code> character.</p>
<pre><code><span class="hljs-keyword">let</span> petString = <span class="hljs-string">"James has a pet cat."</span>;
</code></pre><pre><code><span class="hljs-comment">// We can now try to find if either of the words are in the sentencelet petRegex = /dog|cat|bird|fish/;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = petRegex.test(petString);
</code></pre><h3 id="heading-5-ignore-case-while-matching">5. Ignore Case While Matching</h3>
<p>So far, we have looked at patterns when the case of the letters mattered. How can we make our RegEx patterns to be case insensitive?</p>
<p>To ignore case we can do it by adding the <code>i</code> flag at the end of a pattern, like so <code>/some-pattern/i</code>.</p>
<pre><code><span class="hljs-keyword">let</span> myString = <span class="hljs-string">"freeCodeCamp"</span>;
</code></pre><pre><code><span class="hljs-comment">// We ignore case by using 'i' flaglet fccRegex = /freecodecamp/i;</span>
</code></pre><pre><code><span class="hljs-comment">// result is truelet result = fccRegex.test(myString);</span>
</code></pre><h3 id="heading-6-extract-matches">6. Extract Matches</h3>
<p>When we want to extract the matched value we can use <code>match()</code> method.</p>
<pre><code><span class="hljs-keyword">let</span> extractStr = <span class="hljs-string">"Extract the word 'coding' from this string."</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> codingRegex = <span class="hljs-regexp">/coding/</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> result = extractStr.match(codingRegex);
</code></pre><pre><code><span class="hljs-built_in">console</span>.log(result);
</code></pre><pre><code><span class="hljs-comment">// Terminal will show: // &gt; ["coding"]</span>
</code></pre><h3 id="heading-7-find-more-than-the-first-match">7. Find More Than the First Match</h3>
<p>Now when we know how to extract one value and it’s also possible to extract multiple values using the<code>g</code> flag</p>
<pre><code><span class="hljs-keyword">let</span> testStr = <span class="hljs-string">"Repeat, Repeat, Repeat"</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> ourRegex = <span class="hljs-regexp">/Repeat/g</span>;
</code></pre><pre><code>testStr.match(ourRegex); <span class="hljs-comment">// returns ["Repeat", "Repeat", "Repeat"]</span>
</code></pre><p>We can also combine the<code>g</code> flag with the<code>i</code> flag, to extract multiple matches and ignore casing.</p>
<pre><code><span class="hljs-keyword">let</span> twinkleStar = <span class="hljs-string">"Twinkle, twinkle, little star"</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> starRegex = <span class="hljs-regexp">/twinkle/ig</span>;<span class="hljs-comment">// writing /twinkle/gi would have the same result.</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = twinkleStar.match(starRegex);
</code></pre><pre><code><span class="hljs-built_in">console</span>.log(result);
</code></pre><pre><code><span class="hljs-comment">// Terminal will show: // &amp;gt; ["Twinkle", "twinkle"]</span>
</code></pre><h3 id="heading-8-match-anything-with-wildcard-period">8. Match Anything with Wildcard Period</h3>
<p>In RegEx <code>.</code> is a wildcard character that would match anything.</p>
<pre><code><span class="hljs-keyword">let</span> humStr = <span class="hljs-string">"I'll hum a song"</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> hugStr = <span class="hljs-string">"Bear hug"</span>;
</code></pre><pre><code><span class="hljs-comment">// Looks for anything with 3 characters beginning with 'hu'let huRegex = /hu./;</span>
</code></pre><pre><code>humStr.match(huRegex); <span class="hljs-comment">// Returns ["hum"]</span>
</code></pre><pre><code>hugStr.match(huRegex); <span class="hljs-comment">// Returns ["hug"]</span>
</code></pre><h3 id="heading-9-match-single-character-with-multiple-possibilities">9. Match Single Character with Multiple Possibilities</h3>
<p>Matching any character is nice, but what if we want to restrict the matching to a predefined set of characters? We can do by using <code>[]</code> inside our RegEx.</p>
<p>If we have <code>/b[aiu]g/</code>, it means that we can match ‘bag’, ‘big’ and ‘bug’.</p>
<p>If we want to extract all the vowels from a sentence, this is how we can do it using RegEx.</p>
<pre><code><span class="hljs-keyword">let</span> quoteSample = <span class="hljs-string">"Beware of bugs in the above code; I have only proved it correct, not tried it."</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> vowelRegex = <span class="hljs-regexp">/[aeiou]/ig</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> result = quoteSample.match(vowelRegex);
</code></pre><h3 id="heading-10-match-letters-of-the-alphabet">10. Match Letters of the Alphabet</h3>
<p>But what if we want to match a range of letters? Sure, let’s do that.</p>
<pre><code><span class="hljs-keyword">let</span> quoteSample = <span class="hljs-string">"The quick brown fox jumps over the lazy dog."</span>;
</code></pre><pre><code><span class="hljs-comment">// We can match all the letters from 'a' to 'z', ignoring casing. let alphabetRegex = /[a-z]/ig;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = quoteSample.match(alphabetRegex);
</code></pre><h3 id="heading-11-match-numbers-and-letters-of-the-alphabet">11. Match Numbers and Letters of the Alphabet</h3>
<p>Letters are good, but what if we also want numbers?</p>
<pre><code><span class="hljs-keyword">let</span> quoteSample = <span class="hljs-string">"Blueberry 3.141592653s are delicious."</span>;
</code></pre><pre><code><span class="hljs-comment">// match numbers between 2 and 6 (both inclusive), // and letters between 'h' and 's'. let myRegex = /[2-6h-s]/ig;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = quoteSample.match(myRegex);
</code></pre><h3 id="heading-12-match-single-characters-not-specified">12. Match Single Characters Not Specified</h3>
<p>Sometimes it’s easier to specify characters that you don’t want to watch. These are called ‘Negated Characters’ and in RegEx you can do it by using <code>^</code>.</p>
<pre><code><span class="hljs-keyword">let</span> quoteSample = <span class="hljs-string">"3 blind mice."</span>;
</code></pre><pre><code><span class="hljs-comment">// Match everything that is not a number or a vowel. let myRegex = /[^0-9aeiou]/ig;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = quoteSample.match(myRegex);<span class="hljs-comment">// Returns [" ", "b", "l", "n", "d", " ", "m", "c", "."]</span>
</code></pre><h3 id="heading-13-match-characters-that-occur-one-or-more-times">13. Match Characters that Occur One or More Times</h3>
<p>If you want to match a characters that occurs one or more times, you can use <code>+</code>.</p>
<pre><code><span class="hljs-keyword">let</span> difficultSpelling = <span class="hljs-string">"Mississippi"</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> myRegex = <span class="hljs-regexp">/s+/g</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> result = difficultSpelling.match(myRegex);<span class="hljs-comment">// Returns ["ss", "ss"]</span>
</code></pre><h3 id="heading-14-match-characters-that-occur-zero-or-more-times">14. Match Characters that Occur Zero or More Times</h3>
<p>There is also a <code>*</code> RegEx quantifier. This one matches even 0 occurrences of a character. Why might this be useful? Most of the time it’s usually in combination with other characters. Let’s look at an example.</p>
<pre><code><span class="hljs-keyword">let</span> soccerWord = <span class="hljs-string">"gooooooooal!"</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> gPhrase = <span class="hljs-string">"gut feeling"</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> oPhrase = <span class="hljs-string">"over the moon"</span>;
</code></pre><pre><code><span class="hljs-comment">// We are trying to match 'g', 'go', 'goo', 'gooo' and so on. let goRegex = /go*/;</span>
</code></pre><pre><code>soccerWord.match(goRegex); <span class="hljs-comment">// Returns ["goooooooo"]</span>
</code></pre><pre><code>gPhrase.match(goRegex); <span class="hljs-comment">// Returns ["g"]</span>
</code></pre><pre><code>oPhrase.match(goRegex); <span class="hljs-comment">// Returns null</span>
</code></pre><h3 id="heading-15-find-characters-with-lazy-matching">15. Find Characters with Lazy Matching</h3>
<p>Sometimes your pattern matches can have more than one outcome. For example, let’s say I’m looking for a pattern in a word <code>titanic</code> and my matched values must begin with a ‘t’ and end with an ‘i’. My possible results are ‘titani’ and ‘ti’.</p>
<p>This is why RegEx has a concepts of ‘Greedy Match’ and ‘Lazy Match’.</p>
<p>Greedy match finds <em>the</em> <em>longest possible match</em> of the string that fits the RegEx pattern, this is a default RegEx match:</p>
<pre><code><span class="hljs-keyword">let</span> string = <span class="hljs-string">"titanic"</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> regex = <span class="hljs-regexp">/t[a-z]*i/</span>;
</code></pre><pre><code>string.match(regex);<span class="hljs-comment">// Returns ["titani"]</span>
</code></pre><p>Lazy match finds <em>the</em> <em>shortest possible match</em> of the string that fits the RegEx pattern and to use it we need to use <code>?</code>:</p>
<pre><code><span class="hljs-keyword">let</span> string = <span class="hljs-string">"titanic"</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> regex = <span class="hljs-regexp">/t[a-z]*?i/</span>;
</code></pre><pre><code>string.match(regex);<span class="hljs-comment">// Returns ["ti"]</span>
</code></pre><h3 id="heading-16-find-one-or-more-criminals-in-a-hunt">16. Find One or More Criminals in a Hunt</h3>
<p>Now let’s have a look at a RegEx challenge. We need to find all the criminals (‘C’) in a crowd. We know that they always stay together and you need to need to write a RegEx that would find them.</p>
<pre><code><span class="hljs-keyword">let</span> crowd = <span class="hljs-string">'P1P2P3P4P5P6CCCP7P8P9'</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> reCriminals = <span class="hljs-regexp">/./</span>; <span class="hljs-comment">// Change this line</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> matchedCriminals = crowd.match(reCriminals);
</code></pre><p>You can find me walking through <a target="_blank" href="https://scrimba.com/p/peyvVAN/c3nEpta">the solution in this Scrimba cast</a>.</p>
<h3 id="heading-17-match-beginning-string-patterns">17. Match Beginning String Patterns</h3>
<p>RegEx also allows you to match patterns that are only at the beginning of a string. We’ve already talked about <code>^</code> creating a negating set. We can use the same symbol to find a match <em>only</em> at the beginning of a string.</p>
<pre><code><span class="hljs-keyword">let</span> calAndRicky = <span class="hljs-string">"Cal and Ricky both like racing."</span>;
</code></pre><pre><code><span class="hljs-comment">// Match 'Cal' only if it's at the beginning of a string. let calRegex = /^Cal/;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = calRegex.test(calAndRicky); <span class="hljs-comment">// Returns true</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> rickyAndCal = <span class="hljs-string">"Ricky and Cal both like racing."</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> result = calRegex.test(rickyAndCal); <span class="hljs-comment">// Returns false</span>
</code></pre><h3 id="heading-18-match-ending-string-patterns">18. Match Ending String Patterns</h3>
<p>What about matching a pattern at the end of a string? We can use <code>$</code> for that.</p>
<pre><code><span class="hljs-keyword">let</span> caboose = <span class="hljs-string">"The last car on a train is the caboose"</span>;
</code></pre><pre><code><span class="hljs-comment">// Match 'caboose' if it's at the end of a string.let lastRegex = /caboose$/;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = lastRegex.test(caboose); <span class="hljs-comment">// Returns true</span>
</code></pre><h3 id="heading-19-match-all-letters-and-numbers">19. Match All Letters and Numbers</h3>
<p>Earlier in parts 10 and 11 I showed you how we can match ranges of letters and numbers. If I asked you to write a RegEx that matches all the letters and numbers and ignore their cases you probably would have written something like <code>/[a-z0-9]/gi</code> and that’s exactly right. But it’s a bit too long.</p>
<p>RegEx has something called <em>‘Shorthand Character Classes’</em>, which is basically a shorthand for common RegEx expression. For matching all letters and numbers we can use <code>\w</code> and we also get underscore <code>_</code> matched as a bonus.</p>
<pre><code><span class="hljs-keyword">let</span> quoteSample = <span class="hljs-string">"The five boxing wizards jump quickly."</span>;
</code></pre><pre><code><span class="hljs-comment">// Same as /[a-z0-9_]/gi to match a-z (ignore case), 0-9 and _let alphabetRegexV2 = /\w/g;</span>
</code></pre><pre><code><span class="hljs-comment">// The length of all the characters in a string// excluding spaces and the period. let result = quoteSample.match(alphabetRegexV2).length;</span>
</code></pre><pre><code><span class="hljs-comment">// Returns 31</span>
</code></pre><h3 id="heading-20-match-everything-but-letters-and-numbers">20. Match Everything But Letters and Numbers</h3>
<p>If we want to do the opposite and match everything that is not a letter or a number (also exclude underscore <code>_</code>), we can use <code>\W</code></p>
<pre><code><span class="hljs-keyword">let</span> quoteSample = <span class="hljs-string">"The five boxing wizards jump quickly."</span>;
</code></pre><pre><code><span class="hljs-comment">// Match spaces and the periodlet nonAlphabetRegex = /\W/g;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = quoteSample.match(nonAlphabetRegex).length;
</code></pre><pre><code><span class="hljs-comment">// Returns 6</span>
</code></pre><h3 id="heading-21-match-all-numbers">21. Match All Numbers</h3>
<p>Ok, what about if you want only numbers? Is there a shorthand character class for that? Sure, it’s <code>\d</code>.</p>
<pre><code><span class="hljs-keyword">let</span> numString = <span class="hljs-string">"Your sandwich will be $5.00"</span>;
</code></pre><pre><code><span class="hljs-comment">// Match all the numberslet numRegex = /\d/g;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = numString.match(numRegex).length; <span class="hljs-comment">// Returns 3</span>
</code></pre><h3 id="heading-22-match-all-non-numbers">22. Match All Non-Numbers</h3>
<p>Would you like the opposite and match all the non-numbers? Use <code>\D</code></p>
<pre><code><span class="hljs-keyword">let</span> numString = <span class="hljs-string">"Your sandwich will be $5.00"</span>;
</code></pre><pre><code><span class="hljs-comment">// Match everything that is not a numberlet noNumRegex = /\D/g;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = numString.match(noNumRegex).length; <span class="hljs-comment">// Returns 24</span>
</code></pre><h3 id="heading-23-restrict-possible-usernames">23. Restrict Possible Usernames</h3>
<p>So far so good! Well done for making it this far. RegEx can be tricky as it’s not the most easily readable way to code. Let’s now look at a very real-life example and make a username validator. In this case you have 3 requirements:</p>
<ul>
<li>If there are numbers, they must be at the end.</li>
<li>Letters can be lowercase and uppercase.</li>
<li>At least two characters long. Two-letter names can’t have numbers.</li>
</ul>
<p>Try to solve this on your own and if you find it difficult or just want to check the answer, <a target="_blank" href="https://scrimba.com/p/peyvVAN/cmb6nf9">check out my solution.</a></p>
<h3 id="heading-24-match-whitespace">24. Match Whitespace</h3>
<p>Can we match all the whitespaces? Of course, we can use a shorthand for that too and it’s <code>\s</code></p>
<pre><code><span class="hljs-keyword">let</span> sample = <span class="hljs-string">"Whitespace is important in separating words"</span>;
</code></pre><pre><code><span class="hljs-comment">// Match all the whitespaceslet countWhiteSpace = /\s/g;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = sample.match(countWhiteSpace);
</code></pre><pre><code><span class="hljs-comment">// Returns [" ", " ", " ", " ", " "]</span>
</code></pre><h3 id="heading-25-match-non-whitespace-characters">25. Match Non-Whitespace Characters</h3>
<p>Can you guess how to match all non-whitespace characters? Well done, it’s <code>\S</code>!</p>
<pre><code><span class="hljs-keyword">let</span> sample = <span class="hljs-string">"Whitespace is important in separating words"</span>;
</code></pre><pre><code><span class="hljs-comment">// Match all non-whitespace characterslet countWhiteSpace = /\S/g;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = sample.match(countWhiteSpace);
</code></pre><h3 id="heading-26-specify-upper-and-lower-number-of-matches">26. Specify Upper and Lower Number of Matches</h3>
<p>You can specify the lower and upper number of pattern matches with <em>‘Quantity Specifiers’.</em> They can be used with <code>{}</code> syntax, for example <code>{3,6}</code>, where <code>3</code> is the lower bound and <code>6</code> is the upper bound to be matched.</p>
<pre><code><span class="hljs-keyword">let</span> ohStr = <span class="hljs-string">"Ohhh no"</span>;
</code></pre><pre><code><span class="hljs-comment">// We want to match 'Oh's that have 3-6 'h' characters in it. let ohRegex = /Oh{3,6} no/;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = ohRegex.test(ohStr); <span class="hljs-comment">// Returns true</span>
</code></pre><h3 id="heading-27-specify-only-the-lower-number-of-matches">27. Specify Only the Lower Number of Matches</h3>
<p>When we want to specify only the lower bound, we can do it by omitting the upper bound, for example to match at least three characters we can write <code>{3,}</code>. Notice that we still need a comma, even when we don’t specify the upper limit.</p>
<pre><code><span class="hljs-keyword">let</span> haStr = <span class="hljs-string">"Hazzzzah"</span>;
</code></pre><pre><code><span class="hljs-comment">// Match a pattern that contains at least for 'z' characterslet haRegex = /z{4,}/;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = haRegex.test(haStr); <span class="hljs-comment">// Returns true</span>
</code></pre><h3 id="heading-28-specify-exact-number-of-matches">28. Specify Exact Number of Matches</h3>
<p>In the previous section I mentioned that we need a comma in <code>{3,}</code> when we specify only the lower bound. The reason is when you write <code>{3}</code> without a comma, it means that you are looking to match exactly 3 characters.</p>
<pre><code><span class="hljs-keyword">let</span> timStr = <span class="hljs-string">"Timmmmber"</span>;
</code></pre><pre><code><span class="hljs-comment">// let timRegex = /Tim{4}ber/;</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = timRegex.test(timStr); <span class="hljs-comment">// Returns true</span>
</code></pre><h3 id="heading-29-check-for-all-or-none">29. Check for All or None</h3>
<p>There are times when you might want to specify a possible existence of a character in your pattern. When a letter or a number is optional and we would use <code>?</code> for that.</p>
<pre><code><span class="hljs-comment">// We want to match both British and American English spellings // of the word 'favourite'</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> favWord_US = <span class="hljs-string">"favorite"</span>;<span class="hljs-keyword">let</span> favWord_GB = <span class="hljs-string">"favourite"</span>;
</code></pre><pre><code><span class="hljs-comment">// We match both 'favorite' and 'favourite' // by specifying that 'u' character is optionallet favRegex = /favou?rite/; // Change this line</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result1 = favRegex.test(favWord_US); <span class="hljs-comment">// Returns truelet result2 = favRegex.test(favWord_GB); // Returns true</span>
</code></pre><h3 id="heading-30-positive-and-negative-lookahead">30. Positive and Negative Lookahead</h3>
<p>‘<em>Lookaheads</em>’ are patterns that tell your JS to lookahead to check for patterns further along. They are useful when you’re trying to search for multiple patterns in the same strings. There 2 types of lookaheads — positive and negative.</p>
<p>Positive lookahead uses <code>?=</code> syntax</p>
<pre><code><span class="hljs-keyword">let</span> quit = <span class="hljs-string">"qu"</span>;
</code></pre><pre><code><span class="hljs-comment">// We match 'q' only if it has 'u' after it. let quRegex= /q(?=u)/;</span>
</code></pre><pre><code>quit.match(quRegex); <span class="hljs-comment">// Returns ["q"]</span>
</code></pre><p>Negative lookahead uses <code>?!</code> syntax</p>
<pre><code><span class="hljs-keyword">let</span> noquit = <span class="hljs-string">"qt"</span>;
</code></pre><pre><code><span class="hljs-comment">// We match 'q' only if there is no 'u' after it. let qRegex = /q(?!u)/;</span>
</code></pre><pre><code>noquit.match(qRegex); <span class="hljs-comment">// Returns ["q"]</span>
</code></pre><h3 id="heading-31-reuse-patterns-using-capture-groups">31. Reuse Patterns Using Capture Groups</h3>
<p>Let’s imagine we need to capture a repeating pattern.</p>
<pre><code><span class="hljs-keyword">let</span> repeatStr = <span class="hljs-string">"regex regex"</span>;
</code></pre><pre><code><span class="hljs-comment">// We want to match letters followed by space and then letterslet repeatRegex = /(\w+)\s(\w+)/;</span>
</code></pre><pre><code>repeatRegex.test(repeatStr); <span class="hljs-comment">// Returns true</span>
</code></pre><p>Instead of repeating <code>(\w+)</code> at the end we can tell RegEx to repeat the pattern, by using <code>\1</code>. So the same as above can be written again as:</p>
<pre><code><span class="hljs-keyword">let</span> repeatStr = <span class="hljs-string">"regex regex"</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> repeatRegex = <span class="hljs-regexp">/(\w+)\s\1)/</span>;
</code></pre><pre><code>repeatRegex.test(repeatStr); <span class="hljs-comment">// Returns true</span>
</code></pre><h3 id="heading-32-use-capture-groups-to-search-and-replace">32. Use Capture Groups to Search and Replace</h3>
<p>When we find a match, it’s sometimes handy to replaced it with something else. We can use <code>replace()</code> method for that.</p>
<pre><code><span class="hljs-keyword">let</span> wrongText = <span class="hljs-string">"The sky is silver."</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> silverRegex = <span class="hljs-regexp">/silver/</span>;
</code></pre><pre><code>wrongText.replace(silverRegex, <span class="hljs-string">"blue"</span>);
</code></pre><pre><code><span class="hljs-comment">// Returns "The sky is blue."</span>
</code></pre><h3 id="heading-33-remove-whitespace-from-start-and-end">33. Remove Whitespace from Start and End</h3>
<p>Here’s a little challenge for you. Write a RegEx that would remove any whitespace around the string.</p>
<pre><code><span class="hljs-keyword">let</span> hello = <span class="hljs-string">"   Hello, World!  "</span>;
</code></pre><pre><code><span class="hljs-keyword">let</span> wsRegex = <span class="hljs-regexp">/change/</span>; <span class="hljs-comment">// Change this line</span>
</code></pre><pre><code><span class="hljs-keyword">let</span> result = hello; <span class="hljs-comment">// Change this line</span>
</code></pre><p>If you get stuck or just want to check my solution, feel free to have a look at <a target="_blank" href="https://scrimba.com/p/peyvVAN/cZVvkH7">the Scrimba cast where I solve this challenge</a>.</p>
<h3 id="heading-34-conclusion">34. Conclusion</h3>
<p>Congratulations! You have finished this course! If you’d like to keep learning more, feel free to checkout <a target="_blank" href="https://www.youtube.com/playlist?list=PLWKjhJtqVAbleDe3_ZA8h3AO2rXar-q2V">this YouTube playlist</a>, that has a lot of JavaScript projects you can create.</p>
<p>Keep learning and thanks for reading!</p>
<p>You are now ready to play regex golf. ?</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/sRhyrBTA9B-XwaBVwi00yiBYdaIX2rHopdBJ" alt="Image" width="740" height="271" loading="lazy">
_From [https://xkcd.com/1313/](https://xkcd.com/1313/" rel="noopener" target="<em>blank" title=")</em></p>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
