<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Tatenda Carl Sakarombe</title>
    <description>The latest articles on Forem by Tatenda Carl Sakarombe (@sakaz22).</description>
    <link>https://forem.com/sakaz22</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F705720%2Fd8a07d6e-441f-48cd-a848-f6da2881a89b.png</url>
      <title>Forem: Tatenda Carl Sakarombe</title>
      <link>https://forem.com/sakaz22</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/sakaz22"/>
    <language>en</language>
    <item>
      <title>Request Management and Variables in Postman</title>
      <dc:creator>Tatenda Carl Sakarombe</dc:creator>
      <pubDate>Sun, 14 Jan 2024 14:57:50 +0000</pubDate>
      <link>https://forem.com/sakaz22/request-management-and-variables-in-postman-548e</link>
      <guid>https://forem.com/sakaz22/request-management-and-variables-in-postman-548e</guid>
      <description>&lt;p&gt;🔍🚀Exploring API Testing Essentials with Postman!&lt;/p&gt;

&lt;p&gt;👩‍💻 In the world of API testing, mastering tools like Postman is a game-changer. Today, let's unravel key aspects like saving requests, utilizing variables, and decoding query parameters.&lt;/p&gt;

&lt;p&gt;💡🌐It's a journey where precision meets flexibility. Ready to dive in? Let's make API testing a breeze!&lt;br&gt;
**&lt;br&gt;
Saving Requests**&lt;br&gt;
The key to handling requests efficiently is to create collections.&lt;/p&gt;

&lt;p&gt;Before saving a request in Postman, you must start a collection.&lt;/p&gt;

&lt;p&gt;These collections act as organized repositories, designed for a specific API or customized for a specific purpose.&lt;/p&gt;

&lt;p&gt;Imagine them as carefully curated libraries that contain the complex interactions of APIs, guaranteeing a methodical approach to testing.&lt;br&gt;
**&lt;br&gt;
Storing and Creating Variables**&lt;br&gt;
To improve our testing skills, we can utilize variables.&lt;/p&gt;

&lt;p&gt;We start by emphasizing the base URL, which is an essential part of any API request.&lt;/p&gt;

&lt;p&gt;By simply clicking on the 'set variable' button, Postman enables us to effortlessly create and store variables within the collection.&lt;/p&gt;

&lt;p&gt;This not only makes the testing process more efficient but also provides us with the ability to modify variables as required.&lt;br&gt;
**&lt;br&gt;
Modifying Collection Variables**&lt;br&gt;
In the ever-changing world of testing, being adaptable is crucial.&lt;/p&gt;

&lt;p&gt;Postman understands this and offers a convenient way to modify collection variables.&lt;/p&gt;

&lt;p&gt;By going directly to the collection, we can make instant changes, ensuring that our testing environment stays flexible and responsive to changing needs.&lt;br&gt;
**&lt;br&gt;
Query Parameters**&lt;br&gt;
As we explore the API landscape, query parameters play a vital role in exchanging data.&lt;/p&gt;

&lt;p&gt;The use of a question mark indicates the start of query parameters, and it is important to consider their sensitivity to uppercase and lowercase letters.&lt;/p&gt;

&lt;p&gt;Postman, acting as the messenger, sends only the specific parameter category to the API.&lt;/p&gt;

&lt;p&gt;Behind the scenes, the API utilizes this parameter to filter through the data.&lt;/p&gt;

</description>
      <category>apitesting</category>
      <category>postman</category>
      <category>softwaretestinginsights</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Testing Tuesdays: Unveiling the Magic Behind API Testing!</title>
      <dc:creator>Tatenda Carl Sakarombe</dc:creator>
      <pubDate>Fri, 05 Jan 2024 11:05:22 +0000</pubDate>
      <link>https://forem.com/sakaz22/testing-tuesdays-unveiling-the-magic-behind-api-testing-2jm0</link>
      <guid>https://forem.com/sakaz22/testing-tuesdays-unveiling-the-magic-behind-api-testing-2jm0</guid>
      <description>&lt;p&gt;&lt;strong&gt;Scripts&lt;/strong&gt;&lt;br&gt;
In the world of API testing, scripts are the building blocks of automation. &lt;br&gt;
These careful lines of code, when created with skill, become the tools that carry out accurate workflows and tests. &lt;br&gt;
Workflows smoothly coordinate the sequence of steps an API call needs to go through, while tests carefully examine every aspect of functionality. &lt;br&gt;
When these three elements come together, API testing becomes a well-coordinated symphony of precision.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Auto API testing&lt;/strong&gt;&lt;br&gt;
The Collection Runner is a fast executor that smoothly handles API requests in a predetermined order, guaranteeing a smooth testing process. &lt;br&gt;
Newman, the pioneer, expands this capability beyond manual execution. &lt;br&gt;
By integrating with CI servers like Jenkins and other CI counterparts, it transforms API testing into a streamlined and continuous process.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;API documentation&lt;/strong&gt;&lt;br&gt;
Comprehensive API documentation plays a crucial role in fostering effective communication between developers and testers. &lt;br&gt;
It acts as a compass, guiding testers through the testing process. &lt;br&gt;
By providing clear and concise information about endpoints, parameters, and expected responses, it promotes collaboration and helps testers navigate the API terrain more easily.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Collaboration&lt;/strong&gt;&lt;br&gt;
Effective collaboration tools are essential in software development. &lt;br&gt;
They act as a bridge between developers and testers, facilitating seamless communication and enabling testers to provide valuable feedback, report bugs, and engage in constructive dialogue with the development team.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Mock server&lt;/strong&gt;&lt;br&gt;
In the world of API testing, the Mock Server plays a crucial role. &lt;br&gt;
By mimicking real-life situations, it enables testers to verify API interactions in a controlled and virtual setting. &lt;br&gt;
This not only guarantees thorough testing but also promotes parallel development, where teams can work independently while still collaborating effectively.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Manual API testing&lt;/strong&gt;&lt;br&gt;
Amidst the rise of automation, manual API testing remains important. &lt;br&gt;
The skilled tester's hands-on approach, navigating endpoints, examining limits, and discovering unique scenarios, brings a human touch to testing. &lt;br&gt;
Manual testing serves as a crucial test, confirming the user's experience and ensuring a comprehensive testing method.&lt;/p&gt;

</description>
      <category>api</category>
      <category>apigateway</category>
      <category>testing</category>
      <category>bug</category>
    </item>
    <item>
      <title>Postman and HTTP in Communication</title>
      <dc:creator>Tatenda Carl Sakarombe</dc:creator>
      <pubDate>Fri, 29 Dec 2023 11:00:42 +0000</pubDate>
      <link>https://forem.com/sakaz22/postman-and-http-in-communication-5gd8</link>
      <guid>https://forem.com/sakaz22/postman-and-http-in-communication-5gd8</guid>
      <description>&lt;p&gt;Postman is an extensively utilized tool for API development, which simplifies the interaction between clients and servers. &lt;/p&gt;

&lt;p&gt;An API, also known as an Application Programming Interface, comprises a set of regulations that enable diverse software applications to exchange information. &lt;/p&gt;

&lt;p&gt;In this particular scenario, Postman functions as a client, serving as a means for users to transmit requests to a server and obtain corresponding responses.&lt;/p&gt;

&lt;p&gt;HTTP, also known as Hypertext Transfer Protocol, serves as the fundamental framework for data exchange on the global network known as the World Wide Web. &lt;/p&gt;

&lt;p&gt;Functioning as an application layer protocol, it facilitates seamless communication between clients, including web browsers and Postman, and servers across the internet. &lt;/p&gt;

&lt;p&gt;HTTP establishes the guidelines for message structure and transmission, as well as the expected responses from web servers and browsers in relation to different commands.&lt;/p&gt;

&lt;p&gt;When a client, such as Postman, initiates an HTTP request to a server, it usually contains details regarding the specific operation to be executed (e.g., GET, POST, PUT, DELETE) along with any essential data or parameters. &lt;/p&gt;

&lt;p&gt;Subsequently, the server handles the request and returns a response that encompasses the requested data or signifies the outcome of the operation, whether it was successful or unsuccessful.&lt;/p&gt;

&lt;p&gt;The interaction between the client and server plays a vital role in numerous web-based applications and services. &lt;/p&gt;

&lt;p&gt;It facilitates the seamless exchange of information, enabling functionalities like data retrieval, form submission, information updates, and more. &lt;/p&gt;

&lt;p&gt;By employing HTTP, these interactions adhere to a standardized and uniform approach, promoting interoperability across diverse systems and technologies.&lt;/p&gt;

</description>
      <category>postman</category>
      <category>api</category>
      <category>http</category>
      <category>https</category>
    </item>
    <item>
      <title>The significance of APIs in Software Testing</title>
      <dc:creator>Tatenda Carl Sakarombe</dc:creator>
      <pubDate>Wed, 27 Dec 2023 09:57:25 +0000</pubDate>
      <link>https://forem.com/sakaz22/the-significance-of-apis-in-software-testing-306b</link>
      <guid>https://forem.com/sakaz22/the-significance-of-apis-in-software-testing-306b</guid>
      <description>&lt;p&gt;APIs are the crucial link that binds applications to data repositories in the complex realm of software development. They can be likened to a covert gesture that unlocks the vast wealth of information stored on servers, typically nestled within databases. For a seasoned expert in software testing, comprehending the pivotal role APIs play in enabling smooth communication between programs and servers is akin to possessing a potent instrument in the pursuit of thorough and efficient testing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Key to Server Knowledge&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;In its core, an API functions as the key to the revered domain of server-stored data. Envision a stronghold of knowledge, protected by the API, enabling a program to not just communicate but also partake in a graceful exchange of data with the server. Devoid of this crucial interface, the server transforms into an impregnable fortress, rendering its abundance of information completely out of reach for the external realm.&lt;/p&gt;

&lt;p&gt;Now, the fascinating aspect – APIs are not ready-made components. To unleash their capabilities, individuals must immerse themselves in the realm of programming code or utilize the powerful terminal to execute intricate commands. It is the enchantment, the magical formula that grants access to a realm of endless possibilities. As an expert in software testing, this is where your true expertise shines.&lt;/p&gt;

&lt;p&gt;Introducing Postman, the maestro of API testing. Envision it as your enchanted tool, effortlessly establishing connections with servers through APIs and harmonizing the flow of data. There is no requirement to struggle with complex lines of code or commit cryptic terminal commands to memory. Postman streamlines this intricate performance, enabling effortless communication with servers.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Elevating Testing to a Harmonious Communication Ensemble&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For those well-versed in software testing, the importance of Postman lies in its capacity to surpass the intricacies of API interaction. It revolutionizes the testing realm by providing a user-friendly platform that effortlessly navigates the complexities of server communication. Postman assumes the role of an intermediary, enabling a seamless and harmonious conversation between your testing suite and the server.&lt;/p&gt;

</description>
      <category>api</category>
      <category>apigateway</category>
      <category>testing</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Unleashing the Power of Postman: A Comprehensive Guide to API Development and Testing</title>
      <dc:creator>Tatenda Carl Sakarombe</dc:creator>
      <pubDate>Sun, 24 Dec 2023 15:34:45 +0000</pubDate>
      <link>https://forem.com/sakaz22/unleashing-the-power-of-postman-a-comprehensive-guide-to-api-development-and-testing-4c8j</link>
      <guid>https://forem.com/sakaz22/unleashing-the-power-of-postman-a-comprehensive-guide-to-api-development-and-testing-4c8j</guid>
      <description>&lt;p&gt;In the fast-paced world of software development, the smooth communication between applications is extremely important. As we explore the complex world of APIs, it is essential to have a strong tool that can simplify the process. That's where Postman comes in - the perfect companion for developers, testers, and API enthusiasts.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Building Bridges with Postman&lt;/strong&gt;&lt;br&gt;
Postman's main strength lies in its ability to simplify the complex process of creating, testing, and documenting APIs. Think of this tool as the conductor leading the way in your API development journey.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Building Request: Creating Strong Connections with Accuracy&lt;/strong&gt;&lt;br&gt;
Postman enables developers to create requests with exceptional accuracy. Whether you're dealing with RESTful APIs, SOAP, or any other web services, the platform offers a user-friendly interface for constructing requests that effortlessly interact with your endpoints.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Collections: Simplifying Complexity, Unlocking Simplicity&lt;/strong&gt;&lt;br&gt;
In the vast world of API development, being organized is crucial for efficiency. Postman introduces collections, which help developers group requests in a logical manner. This improves clarity and speeds up the testing and validation process.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Environment Variables: Tailoring for Versatility&lt;/strong&gt;&lt;br&gt;
Postman understands that every development environment is unique, which is why it introduces the concept of environment variables. With this feature, developers can adjust requests in real-time to suit different environments, making the testing process flexible and adaptable.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Assertions&lt;/strong&gt;&lt;br&gt;
Testing involves more than just sending requests; it involves making sure the responses match what is expected. Postman's assertion capabilities enable developers to establish predetermined criteria, automatically validate responses, and guarantee accuracy in API interactions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Automated Testing&lt;/strong&gt;&lt;br&gt;
In the age of agile development, efficiency is essential. Postman leads the way with its automated testing features. Developers can create test scenarios, enabling quick and consistent testing, minimizing manual work, and improving productivity.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Documentation&lt;/strong&gt;&lt;br&gt;
Postman is exceptional at ensuring transparency in API development. It effortlessly reveals the complexities of your APIs, generating detailed documentation that serves as a clear guide for both developers and stakeholders.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Mock Servers&lt;/strong&gt;&lt;br&gt;
Postman takes testing to the next level with the addition of mock servers. These servers imitate API endpoints, enabling developers to try out various scenarios and conduct experiments without impacting the real production environment. This is extremely beneficial for iterative development and testing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Monitoring&lt;/strong&gt;&lt;br&gt;
In the fast-moving software development industry, being alert is crucial. Postman's monitoring feature enables developers to closely monitor API performance in real-time. By identifying bottlenecks, tracking down times, and ensuring the well-being of your APIs, this feature proves to be invaluable.&lt;/p&gt;

&lt;p&gt;As I continue to discuss API topics at greater length, I will provide more practical uses for them and how you can implement these principles in your professional life.&lt;/p&gt;

</description>
      <category>api</category>
      <category>postman</category>
      <category>postmanapi</category>
      <category>testing</category>
    </item>
    <item>
      <title>The Upwork currency: Connects</title>
      <dc:creator>Tatenda Carl Sakarombe</dc:creator>
      <pubDate>Wed, 08 Mar 2023 18:55:19 +0000</pubDate>
      <link>https://forem.com/sakaz22/the-upwork-currency-connects-21n1</link>
      <guid>https://forem.com/sakaz22/the-upwork-currency-connects-21n1</guid>
      <description>&lt;p&gt;Hello Dev family! Today, I became aware of a feature that I found interesting on Upwork and it is called "Connects". Connects can be a form of digital currency on Upwork and it is used by freelancers to 'buy' the clients attention in the hope of an actual exchange of money if the 2 parties agree to work together. Of course, when starting out, Upwork gives the feelancer Connects so that they can start to bid for jobs/positions. I am keen to find out more about being a freelancer on Upwork and I am excited to be able to share my experience here on Dev. Thank you for reading and cheers!&lt;/p&gt;

&lt;h1&gt;
  
  
  currency #upwork
&lt;/h1&gt;

</description>
    </item>
    <item>
      <title>Three js: Scene, Camera and Renderer</title>
      <dc:creator>Tatenda Carl Sakarombe</dc:creator>
      <pubDate>Fri, 03 Feb 2023 09:35:09 +0000</pubDate>
      <link>https://forem.com/sakaz22/three-js-scene-camera-and-renderer-3jd6</link>
      <guid>https://forem.com/sakaz22/three-js-scene-camera-and-renderer-3jd6</guid>
      <description>&lt;p&gt;From what I can gather , there are 3 necessary components that make Three.js function and these are: &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Scene&lt;/li&gt;
&lt;li&gt;Camera&lt;/li&gt;
&lt;li&gt;Renderer&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;To understand what I scene is, you can take movie scenes as an example. The scene is where all the objects are displayed, where they are positioned and what they look like.&lt;/p&gt;

&lt;p&gt;A Renderer is what it's name implies and they allow the 3D graphics to be displayed. Webgl is the default renderer.&lt;/p&gt;

&lt;p&gt;Cameras determine the way in which the scene is going to be viewed. This can be a perspective view, orthographic view etc.&lt;/p&gt;

&lt;p&gt;As I delve deeper into uncovering the world of 3D graphics in Javascript, I am sure that I will encounter very interesting topics that will challenge me. Till next time...&lt;/p&gt;

</description>
      <category>cryptocurrency</category>
      <category>blockchain</category>
      <category>ethereum</category>
      <category>web3</category>
    </item>
    <item>
      <title>Front-End development vs. UI Design. or are both equally important</title>
      <dc:creator>Tatenda Carl Sakarombe</dc:creator>
      <pubDate>Thu, 09 Jun 2022 17:05:26 +0000</pubDate>
      <link>https://forem.com/sakaz22/front-end-development-vs-ui-design-or-are-both-equally-important-3bdm</link>
      <guid>https://forem.com/sakaz22/front-end-development-vs-ui-design-or-are-both-equally-important-3bdm</guid>
      <description>&lt;p&gt;One hurdle I have recently come across in my web development career is really defining exactly what I do. What I mean by this is that I have 2 very similar interests, which are designing interfaces from scratch and then developing those designs into feasible front-end websites. As I have been looking for internships and junior roles lately, being a UI designer seems very attractive at this point as my design skills currently surpass my development skills. My question is, would it be better to abandon one at this point and solely focus on the other or should I do both?&lt;/p&gt;

</description>
      <category>frontend</category>
      <category>webdev</category>
      <category>uidesign</category>
      <category>career</category>
    </item>
    <item>
      <title>1 and a half years learning JavaScript. Here is what I'd tell the past me.</title>
      <dc:creator>Tatenda Carl Sakarombe</dc:creator>
      <pubDate>Tue, 03 May 2022 18:03:55 +0000</pubDate>
      <link>https://forem.com/sakaz22/1-and-a-half-years-learning-javascript-here-is-what-id-tell-the-past-me-41o1</link>
      <guid>https://forem.com/sakaz22/1-and-a-half-years-learning-javascript-here-is-what-id-tell-the-past-me-41o1</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YA87xO-m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxzdu4c3lmzj9exwkhen.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YA87xO-m--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxzdu4c3lmzj9exwkhen.png" alt="Image description" width="720" height="720"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;So, it has been about 1 and a half years of me learning JavaScript and honestly it has been a roller-coaster journey. If I could talk to the one year ago version of me, this is what I'd tell him:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Watch more coding videos&lt;/strong&gt;. Watching videos of people coding shows you their thought process and it also shows you their mistakes, just to show you that everyone is human. This is especially important if you are self-taught and are experiencing some form of imposter syndrome.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Start blogging&lt;/strong&gt;. It's very ironic that I am mentioning blogging in a blog but blogging actually helps with getting your ideas down and being able to explain your code. Another great thing is that the developer community is very friendly and people are always keen to see you improve.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Finding discord servers&lt;/strong&gt;.  This point ties in with the second one. Just find a community on discord and you'll be able to engage with different developers around the globe.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Visit different sites and try to mimic them&lt;/strong&gt;. The most growth I have ever experienced is when I have visited professionally built websites and trying to mimic them. This essentially throws you into the deep and and forces you to find weird and out-of-the box ways to solve the problems.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;In order to have structure, Read and follow &lt;em&gt;a&lt;/em&gt; book&lt;/strong&gt;. In the beginning of my JavaScript journey, I would just try to learn whatever I could without any kind of structure which really left me with looks of holes in my knowledge. Topics will become much clearer and if you can, write down notes just to keep track of what you have learnt. &lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;As I progress further with my coding journey, I expect to encounter new and challenging topics and concepts and I am ready for the challenge. The ride has been good so far and I am far from reaching my destination so I might as well just enjoy the view!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Settling your priorities back on track...</title>
      <dc:creator>Tatenda Carl Sakarombe</dc:creator>
      <pubDate>Thu, 21 Apr 2022 15:17:36 +0000</pubDate>
      <link>https://forem.com/sakaz22/settling-your-priorities-back-on-track-5ei8</link>
      <guid>https://forem.com/sakaz22/settling-your-priorities-back-on-track-5ei8</guid>
      <description>&lt;p&gt;It feels weird to blog again after a couple of months away from the coding world. Actually, it feels weird being back in the coding world in general. The reason why I say this is because I, unintentionally, got caught up preparing for university that I did not leave too much time in my day to continue coding. Now that I am back, it feels as though I need to revisit the things I had learnt before I can proceed onto learning newer and more advanced things.&lt;/p&gt;

&lt;p&gt;My time away has also allowed me to take things in and put things into perspective a little more. As I am more artistically inclined, I have found Three.js to be a fascinating realm of JavaScript as it involves both coding and 3D environments. In school, we have recently gotten to grips with C# and so far I can say that it has a lot of similarities with JavaScript.&lt;/p&gt;

&lt;p&gt;Now that I am a student, in a completely foreign country, my ambition and determination to be the best coder I can be has been magnified because nothing is going to be given to me so I need to at least give 101% in order to achieve my short-term goals and ,eventually, the long term ones as well.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Building simple CSS cards that have transitions</title>
      <dc:creator>Tatenda Carl Sakarombe</dc:creator>
      <pubDate>Wed, 26 Jan 2022 19:12:17 +0000</pubDate>
      <link>https://forem.com/sakaz22/building-simple-css-cards-that-have-transitions-29ed</link>
      <guid>https://forem.com/sakaz22/building-simple-css-cards-that-have-transitions-29ed</guid>
      <description>&lt;p&gt;Ever wanted to make your site more interactive with just some simple HTML and CSS? If so, this is the post for and &lt;br&gt;
I will be explaining how to make an interactive card that uses flex and scale. &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--zbN98CWj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qi55qxuameygpjlgda8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zbN98CWj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qi55qxuameygpjlgda8.png" alt="Image description" width="880" height="406"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Firstly, let us set up the HTML.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;body&amp;gt;
    &amp;lt;!--The card is a div itself and the div is comprised of subsections--&amp;gt;
    &amp;lt;div class="card"&amp;gt;
        &amp;lt;!--Setting two divs allows us to use flex--&amp;gt;
        &amp;lt;div class="img"&amp;gt;

        &amp;lt;/div&amp;gt;
        &amp;lt;div class="text"&amp;gt;

        &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;
&amp;lt;/body&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Notice that the div has 2 other divs in it. This makes it easier to apply flex in them.&lt;/p&gt;

&lt;p&gt;The CSS is relatively easy too!&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.card {
  height: 200px;
  width: 400px;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Giving the card a width of 400px may also make to possible to put the cards side-by-side and flex-wrap can easily be used to wrap the other &lt;br&gt;
cards for a more responsive feel.&lt;/p&gt;

&lt;p&gt;Secondly, let us add the image.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;body&amp;gt;
    &amp;lt;!--The card is a div itself and the div is comprised of subsections--&amp;gt;
    &amp;lt;div class="card"&amp;gt;
        &amp;lt;!--Setting two divs allows us to use flex--&amp;gt;
        &amp;lt;div class="img"&amp;gt;
            &amp;lt;img src="/Folder/img.png" alt="Vector Image" class="card-pics"&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div class="text"&amp;gt;

        &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;
&amp;lt;/body&amp;gt;

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

&lt;/div&gt;



&lt;p&gt;To avoid size problems, set the preferred image sizes and in this case, I want an image height of 200px and a width of 175px.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.card-pics {
  height: 200px;
  width: 175px;
}

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

&lt;/div&gt;



&lt;p&gt;*Note&lt;br&gt;
Instead of setting all the images to 200 x 150 I created a class for the cards because you may want to place&lt;br&gt;
other images on your website and overriding each image can be a tedious task.&lt;/p&gt;

&lt;p&gt;The third part involves the inclusion of text and the flex feature within the card class.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;div class="card"&amp;gt;
        &amp;lt;!--Setting two divs allows us to use flex--&amp;gt;
        &amp;lt;div class="img"&amp;gt;
            &amp;lt;img src="/Folder/img.png" alt="Vector Image" class="card-pics"&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div class="text"&amp;gt;
            &amp;lt;h1 class="card-header"&amp;gt;Lorem&amp;lt;/h1&amp;gt;
            &amp;lt;p class="card-para"&amp;gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima eveniet quisquam reiciendis eum vitae?&amp;lt;/p&amp;gt;
        &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.card {
  height: 200px;
  width: 400px;
  display: flex;
}

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

&lt;/div&gt;



&lt;p&gt;The text is too close to the image.Let us give it some breathing space.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.text {
  padding: 20px;
}

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

&lt;/div&gt;



&lt;p&gt;The fourth part includes border-radius. It works by rounding the corners you want rounded. If you enter four values, expect them to be set in a clockwise manner.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.card {
  height: 200px;
  width: 400px;
  display: flex;
  align-items: center;
  background: #ddd;
  border-radius: 30px 0 30px 0;
}
.card-pics {
  position: relative;
  border-radius: 30px 0 0 0;
  height: 200px;
  width: 175px;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So we now have everything set, what about the zoom in effect? The zoom-in event is triggered by an event. Events include :focus and :hover. &lt;br&gt;
Scale helps increase the image size. &lt;br&gt;
A common problem that people encounter here is that they often set their code in such a way that instead of triggering the image to grow on card:hover,&lt;br&gt;
 they set it on img:hover. &lt;br&gt;
To avoid this we can say that when we hover on card, we want the image to grow. Check the code below.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.card:hover {
  .card-pics {
    scale: 1.05;
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;After following the above code, you may have noticed that the image is outgrowing it confines. The solution is simple. Since the image is within the card div, you can&lt;br&gt;
easily set the can in such a way that it hides any overflow.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.card {
  height: 200px;
  width: 400px;
  display: flex;
  align-items: center;
  background: #ddd;
  border-radius: 30px 0 30px 0;
  overflow: hidden;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now that is taken care of, let us get a little bit fancy. Maybe some transitions.&lt;br&gt;
When we hover, we want it to animate.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.card:hover {
  .card-pics {
    transition: all 300ms ease-out;
    scale: 1.05;
  }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The transition when we hover works but as soon as we leave, there is no animation. We can fix this by leaving another transition in the card-pics&lt;br&gt;
but this time it will be an ease-in effect.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.card-pics {
  position: relative;
  border-radius: 30px 0 0 0;
  height: 200px;
  width: 175px;
  transition: all 300ms ease-in;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This that we have a good looking card, we can use this concept to apply it to many different problems we encounter in&lt;br&gt;
the CSS world. Have fun!&lt;/p&gt;

</description>
      <category>css</category>
      <category>html</category>
    </item>
    <item>
      <title>Hiding and Revealing things with JavaScript pageYOffset</title>
      <dc:creator>Tatenda Carl Sakarombe</dc:creator>
      <pubDate>Wed, 19 Jan 2022 18:31:06 +0000</pubDate>
      <link>https://forem.com/sakaz22/hiding-and-revealing-things-with-javascript-pageyoffset-4f2i</link>
      <guid>https://forem.com/sakaz22/hiding-and-revealing-things-with-javascript-pageyoffset-4f2i</guid>
      <description>&lt;p&gt;Quite a while ago I was cloning a website and I stumbled on something I was not familiar with. It took me a while to comprehend what exactly I was looking at. The website had a Navigation bar and that bar would hide itself when you would scroll down the page and shows p when you scroll up. Weird!&lt;/p&gt;

&lt;p&gt;My first instinct told me that I could fix this using CSS at first.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.nav-bar{
display:hidden;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Hidden display was my first guess but I quickly realized that it completely hides the nav-bar (without ever returning). I thought a little harder and came to the conclusion that it has something to do with JavaScript because I believed that it could trigger a function that could execute IF a condition is met. The condition was that IF I scroll down, the nav-bar should be hidden or ELSE, keep showing the nav-bar. In order to deepen this explanation, an example can be provided. Jimmy wants a chocolate but his mother will not give him one. The chocolates are located in the kitchen cabinet. The only way Jimmy can get a chocolate is if he gets it into the kitchen, without his mom knowing, and taking from there. IF mom is not there then he can sneak into the kitchen quietly. But if she does come into the kitchen then he should hide quickly behind the kitchen counter.&lt;/p&gt;

&lt;p&gt;Firstly, let us add an event listener. An event listener method allows JavaScript to constantly monitor the browser to see if specific conditions are being met (in your declared function). In this case, we want JavaScript to listen in on a scroll event. I named my function scrollDown because the conditions I shall list down only apply when I scroll down.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;window.addEventListener("scroll", scrollDown);
/* 'e' parameter stands for event */
function scrollDown(e) {
    let navigation = document.getElementById("nav-bar");
    if(window.pageYOffset &amp;gt; 500){
        navigation.style.display = "none";
    }
    else{
        navigation.style.display = "block";
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Start by declaring a navigation variable that get the Identification from your html so that Js knows what your are referring to. Secondly, we shall refer to the Y-axis because we are scrolling vertically. JavaScript calls this pageYOffset. So, If the pageYOffset is greater than 500px then hide the navigation. If the condition is false then show it again. The code works but only half way. We need to work on the other half, the part when we scroll up. The problem is that when we scroll up, the nav-bar does not appear again.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;window.addEventListener("scroll", scrollUp);

function scrollUp(e) {
    let navigation= document.getElementById("nav-bar");
    if(window.pageYOffset &amp;lt;500){
        navigation.style.display = "block";
    }
    else{
        navigation.style.display = "none";
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now that the code works, go and have fun with it. Maybe you can change the words of a heading as your scroll down. Or change the color of the nav-bar as you scroll.&lt;/p&gt;

&lt;p&gt;Thanks for reading!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>tutorial</category>
      <category>webdev</category>
      <category>scroll</category>
    </item>
  </channel>
</rss>
