<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ewomazino Akpareva</title>
    <description>The latest articles on DEV Community by Ewomazino Akpareva (@zinotrust).</description>
    <link>https://dev.to/zinotrust</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%2F630817%2F9e999c45-4ce2-4655-92ef-82abdd4f8a79.png</url>
      <title>DEV Community: Ewomazino Akpareva</title>
      <link>https://dev.to/zinotrust</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/zinotrust"/>
    <language>en</language>
    <item>
      <title>How to Send Email in Next.js and Node.js for FREE - With MailAPI.dev</title>
      <dc:creator>Ewomazino Akpareva</dc:creator>
      <pubDate>Thu, 06 Nov 2025 10:23:18 +0000</pubDate>
      <link>https://dev.to/zinotrust/how-to-send-email-in-nextjs-and-nodejs-for-free-with-mailapidev-4mhf</link>
      <guid>https://dev.to/zinotrust/how-to-send-email-in-nextjs-and-nodejs-for-free-with-mailapidev-4mhf</guid>
      <description>&lt;p&gt;Sending transactional emails is a crucial feature for most modern web applications.&lt;/p&gt;

&lt;p&gt;That's why you should use &lt;a href="https://mailapi.dev/" rel="noopener noreferrer"&gt;MailAPI.dev&lt;/a&gt; - a developer-first email API that makes sending emails as simple as making a fetch request. Whether you're building a Next.js app, a Node.js backend, or any JavaScript application, MailAPI.dev gives you everything you need to handle emails without the headache.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Makes MailAPI.dev Different?
&lt;/h2&gt;

&lt;p&gt;MailAPI.dev isn't just another email service - it's a complete email infrastructure solution designed specifically for developers who want to move fast. Here's what you get:&lt;br&gt;
✅ Email Verification&lt;br&gt;
✅ Email Verification&lt;br&gt;
📧 Email Templates&lt;br&gt;
💾 Email Storage&lt;br&gt;
⚡ Email Automation&lt;/p&gt;
&lt;h2&gt;
  
  
  Watch It In Action
&lt;/h2&gt;

&lt;p&gt;Before we dive into the code, here's a quick video tutorial showing how easy it is to get started:&lt;/p&gt;

&lt;p&gt;&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/paePeI_2YSc"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting Started with MailAPI.dev in Next.js
&lt;/h2&gt;

&lt;p&gt;Let me show you how ridiculously easy it is to integrate MailAPI.dev into your Next.js application. We'll go from zero to sending emails in under 5 minutes.&lt;/p&gt;

&lt;h2&gt;
  
  
  Installation
&lt;/h2&gt;

&lt;p&gt;First, install the official NPM package:&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;npm install mailapidev&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
`&lt;/p&gt;

&lt;h2&gt;
  
  
  Configuration
&lt;/h2&gt;

&lt;p&gt;Grab your API key from your MailAPI.dev dashboard and add it to your environment variables:&lt;br&gt;
&lt;code&gt;&lt;/code&gt;`&lt;/p&gt;

&lt;h1&gt;
  
  
  .env.local
&lt;/h1&gt;

&lt;p&gt;MAILAPI_KEY=mapi_your_api_key_here&lt;br&gt;
`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Creating Your Email Action
&lt;/h2&gt;

&lt;p&gt;In Next.js 14+, we can use Server Actions to handle email sending securely on the server side. Create a new file for your email actions:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`&lt;br&gt;
// src/actions/emailActions.js&lt;br&gt;
"use server";&lt;/p&gt;

&lt;p&gt;import { MailApiDev } from "mailapidev";&lt;/p&gt;

&lt;p&gt;const client = new MailApiDev(process.env.MAILAPI_KEY);&lt;/p&gt;

&lt;p&gt;export async function sendTransactionalEmail(emailData) {&lt;br&gt;
  try {&lt;br&gt;
    const { data, error } = await client.emails.send(emailData);&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;if (error) {
  console.error("Email error:", error);
  return { success: false, error: error.message };
}

return { success: true, data };
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;} catch (err) {&lt;br&gt;
    console.error("Failed to send email:", err);&lt;br&gt;
    return { success: false, error: "Email sending failed" };&lt;br&gt;
  }&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;export async function updateContact(contactData) {&lt;br&gt;
  try {&lt;br&gt;
    const { data, error } = await client.emails.update(contactData);&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;if (error) {
  console.error("Contact update error:", error);
  return { success: false, error: error.message };
}

return { success: true, data };
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;} catch (err) {&lt;br&gt;
    console.error("Failed to update contact:", err);&lt;br&gt;
    return { success: false, error: "Contact update failed" };&lt;br&gt;
  }&lt;br&gt;
}&lt;br&gt;
`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Building a Contact Form
&lt;/h2&gt;

&lt;p&gt;Now let's create a simple contact form component that uses our email action:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`&lt;br&gt;
"use client";&lt;/p&gt;

&lt;p&gt;import { useState } from "react";&lt;br&gt;
import { sendTransactionalEmail } from "@/actions/emailActions";&lt;/p&gt;

&lt;p&gt;export default function ContactForm() {&lt;br&gt;
  const [formData, setFormData] = useState({&lt;br&gt;
    email: "",&lt;br&gt;
    subject: "",&lt;br&gt;
    message: ""&lt;br&gt;
  });&lt;br&gt;
  const [status, setStatus] = useState("");&lt;br&gt;
  const [response, setResponse] = useState("");&lt;/p&gt;

&lt;p&gt;const handleChange = (e) =&amp;gt; {&lt;br&gt;
    setFormData({ ...formData, [e.target.name]: e.target.value });&lt;br&gt;
    setStatus("");&lt;br&gt;
    setResponse("");&lt;br&gt;
  };&lt;/p&gt;

&lt;p&gt;const handleSubmit = async (e) =&amp;gt; {&lt;br&gt;
    e.preventDefault();&lt;br&gt;
    setStatus("sending");&lt;br&gt;
    setResponse("");&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const result = await sendTransactionalEmail({
  from: "Contact Form &amp;lt;noreply@mail.mailapi.dev&amp;gt;",
  to: formData.email,
  subject: formData.subject,
  message: formData.message,
});

if (result.success) {
  setStatus("success");
  setResponse("Your message was sent successfully!");
  setFormData({ email: "", subject: "", message: "" });
} else {
  setStatus("error");
  setResponse(result.error || "Something went wrong. Please try again.");
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;};&lt;/p&gt;

&lt;p&gt;return (&lt;br&gt;
    &lt;/p&gt;
&lt;br&gt;
      &lt;h2&gt;Get In Touch&lt;/h2&gt;
&lt;br&gt;
      &lt;br&gt;
        &lt;br&gt;
          
            type="email"&lt;br&gt;
            name="email"&lt;br&gt;
            placeholder="Your email address"&lt;br&gt;
            value={formData.email}&lt;br&gt;
            onChange={handleChange}&lt;br&gt;
            required&lt;br&gt;
            className="w-full px-4 py-2 border rounded-lg"&lt;br&gt;
          /&amp;gt;&lt;br&gt;
        &lt;br&gt;
        &lt;br&gt;
          
            type="text"&lt;br&gt;
            name="subject"&lt;br&gt;
            placeholder="Subject"&lt;br&gt;
            value={formData.subject}&lt;br&gt;
            onChange={handleChange}&lt;br&gt;
            required&lt;br&gt;
            className="w-full px-4 py-2 border rounded-lg"&lt;br&gt;
          /&amp;gt;&lt;br&gt;
        &lt;br&gt;
        &lt;br&gt;
          
            name="message"&lt;br&gt;
            placeholder="Your message"&lt;br&gt;
            value={formData.message}&lt;br&gt;
            onChange={handleChange}&lt;br&gt;
            required&lt;br&gt;
            rows="4"&lt;br&gt;
            className="w-full px-4 py-2 border rounded-lg"&lt;br&gt;
          /&amp;gt;&lt;br&gt;
        &lt;br&gt;
        
          type="submit"&lt;br&gt;
          disabled={status === "sending"}&lt;br&gt;
          className="w-full py-2 px-4 bg-orange-500 text-white rounded-lg hover:bg-orange-600 disabled:opacity-50"&lt;br&gt;
        &amp;gt;&lt;br&gt;
          {status === "sending" ? "Sending..." : "Send Message"}&lt;br&gt;
        &lt;br&gt;
        {response &amp;amp;&amp;amp; (&lt;br&gt;
          &lt;p&gt;&lt;br&gt;
            {status === "success" ? "✅" : "❌"} {response}&lt;br&gt;
          &lt;/p&gt;
&lt;br&gt;
        )}&lt;br&gt;
      &lt;br&gt;
    &lt;br&gt;
  );&lt;br&gt;
}&lt;br&gt;
`&lt;code&gt;&lt;/code&gt;
&lt;h2&gt;
  
  
  Using Email Templates
&lt;/h2&gt;

&lt;p&gt;Want to send beautiful, pre-designed emails? MailAPI.dev makes it incredibly simple with templates:&lt;br&gt;
First go to your mailapi dashboard to create a template. Then get the template id and template data variables.&lt;/p&gt;

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

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`&lt;br&gt;
"use client";&lt;/p&gt;

&lt;p&gt;import { useState } from "react";&lt;br&gt;
import { sendTransactionalEmail } from "@/actions/emailActions";&lt;/p&gt;

&lt;p&gt;export default function WelcomeEmail() {&lt;br&gt;
  const [email, setEmail] = useState("");&lt;br&gt;
  const [status, setStatus] = useState("");&lt;/p&gt;

&lt;p&gt;const sendWelcome = async (e) =&amp;gt; {&lt;br&gt;
    e.preventDefault();&lt;br&gt;
    setStatus("sending");&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const result = await sendTransactionalEmail({
  from: "MailAPI &amp;lt;noreply@mail.mailapi.dev&amp;gt;",
  to: email,
  subject: "Welcome to MailAPI.dev!",
  template_id: "welcome",
  template_data: {
    name: "John Doe",
    url: "https://app.mailapi.dev/login"
  },
  verify_and_save: true // Automatically verify and save to contacts
});

if (result.success) {
  setStatus("success");
  setEmail("");
} else {
  setStatus("error");
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;};&lt;/p&gt;

&lt;p&gt;return (&lt;br&gt;
    &lt;/p&gt;
&lt;br&gt;
      &lt;h2&gt;Send Welcome Email&lt;/h2&gt;
&lt;br&gt;
      &lt;br&gt;
        
          type="email"&lt;br&gt;
          placeholder="Enter email address"&lt;br&gt;
          value={email}&lt;br&gt;
          onChange={(e) =&amp;gt; setEmail(e.target.value)}&lt;br&gt;
          required&lt;br&gt;
          className="w-full px-4 py-2 border rounded-lg"&lt;br&gt;
        /&amp;gt;&lt;br&gt;
        
          type="submit"&lt;br&gt;
          disabled={status === "sending"}&lt;br&gt;
          className="w-full py-2 px-4 bg-orange-500 text-white rounded-lg"&lt;br&gt;
        &amp;gt;&lt;br&gt;
          {status === "sending" ? "Sending..." : "Send Welcome Email"}&lt;br&gt;
        &lt;br&gt;
      &lt;br&gt;
    &lt;br&gt;
  );&lt;br&gt;
}&lt;br&gt;
`&lt;code&gt;&lt;/code&gt;
&lt;h2&gt;
  
  
  Managing Your Email List
&lt;/h2&gt;

&lt;p&gt;MailAPI.dev isn't just about sending emails - it's also a powerful Email List management system. You can update contact information whenever important events happen in your app.&lt;/p&gt;

&lt;p&gt;Track User Session&lt;br&gt;
&lt;code&gt;&lt;/code&gt;`&lt;br&gt;
import { updateContact } from "@/actions/emailActions";&lt;/p&gt;

&lt;p&gt;async function trackUserLogin(userEmail) {&lt;br&gt;
  await updateContact({&lt;br&gt;
    email: userEmail,&lt;br&gt;
    lastSeenAt: new Date().toISOString()&lt;br&gt;
  });&lt;br&gt;
}`&lt;/p&gt;

&lt;h2&gt;
  
  
  Track/Update Subscription Events
&lt;/h2&gt;

&lt;p&gt;When a user subscribes to your service:&lt;/p&gt;

&lt;p&gt;`import { updateContact } from "@/actions/emailActions";&lt;/p&gt;

&lt;p&gt;async function handleNewSubscription(userEmail, planDetails) {&lt;br&gt;
  const result = await updateContact({&lt;br&gt;
    email: userEmail,&lt;br&gt;
    subscriptionStatus: "active",&lt;br&gt;
    plan: {&lt;br&gt;
      id: planDetails.priceId,&lt;br&gt;
      name: planDetails.planName,&lt;br&gt;
      amount: planDetails.amount,&lt;br&gt;
      interval: planDetails.interval&lt;br&gt;
    },&lt;br&gt;
    convertedAt: new Date().toISOString()&lt;br&gt;
  });&lt;/p&gt;

&lt;p&gt;if (result.success) {&lt;br&gt;
    console.log("Subscriber added to contact list!");&lt;br&gt;
  }&lt;br&gt;
}`&lt;/p&gt;

&lt;h2&gt;
  
  
  Track Subscription Cancellations / Churn
&lt;/h2&gt;

&lt;p&gt;When a user cancels their subscription:&lt;/p&gt;

&lt;p&gt;`import { updateContact } from "@/actions/emailActions";&lt;/p&gt;

&lt;p&gt;async function handleCancellation(userEmail, reason) {&lt;br&gt;
  await updateContact({&lt;br&gt;
    email: userEmail,&lt;br&gt;
    subscriptionStatus: "canceled",&lt;br&gt;
    churnedAt: new Date().toISOString(),&lt;br&gt;
    churnReason: reason || "No reason provided",&lt;br&gt;
    lastSeenAt: new Date().toISOString()&lt;br&gt;
  });&lt;br&gt;
}&lt;br&gt;
`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Using MailAPI.dev with Node.js
&lt;/h2&gt;

&lt;p&gt;Not using Next.js? No problem! MailAPI.dev works great with any Node.js application:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;&lt;/code&gt;`&lt;br&gt;
const { MailApiDev } = require('mailapidev');&lt;/p&gt;

&lt;p&gt;const mailapi = new MailApiDev(process.env.MAILAPI_KEY);&lt;/p&gt;

&lt;p&gt;async function sendEmail() {&lt;br&gt;
  const { data, error } = await mailapi.emails.send({&lt;br&gt;
    from: 'Your App &lt;a href="mailto:noreply@mail.mailapi.dev"&gt;noreply@mail.mailapi.dev&lt;/a&gt;',&lt;br&gt;
    to: '&lt;a href="mailto:user@example.com"&gt;user@example.com&lt;/a&gt;',&lt;br&gt;
    subject: 'Hello from Node.js!',&lt;br&gt;
    message: 'This is a test email sent from a Node.js application.'&lt;br&gt;
  });&lt;/p&gt;

&lt;p&gt;if (error) {&lt;br&gt;
    console.error('Error:', error);&lt;br&gt;
  } else {&lt;br&gt;
    console.log('Success:', data);&lt;br&gt;
  }&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;sendEmail();&lt;br&gt;
`&lt;code&gt;&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Get Started Today
&lt;/h2&gt;

&lt;p&gt;Ready to simplify your email infrastructure? Here's how to get started:&lt;/p&gt;

&lt;p&gt;Sign up for a free account at &lt;a href="https://mailapi.dev" rel="noopener noreferrer"&gt;MailAPI.dev&lt;/a&gt;&lt;br&gt;
Install the NPM package: npm install mailapidev&lt;br&gt;
Grab your API key from the dashboard&lt;br&gt;
Start sending emails in minutes&lt;/p&gt;

&lt;p&gt;Check out the complete &lt;a href="https://mailapi.dev/docs" rel="noopener noreferrer"&gt;documentation&lt;/a&gt; for advanced features like email automation, custom templates, and webhook integrations.&lt;/p&gt;

&lt;p&gt;What are you building? Let me know in the comments how you're using MailAPI.dev in your projects!&lt;/p&gt;

</description>
      <category>nextjs</category>
      <category>express</category>
      <category>node</category>
      <category>react</category>
    </item>
    <item>
      <title>ZinoTrust Academy - Web &amp; Mobile Dev Courses</title>
      <dc:creator>Ewomazino Akpareva</dc:creator>
      <pubDate>Wed, 14 Aug 2024 12:41:15 +0000</pubDate>
      <link>https://dev.to/zinotrust/zinotrust-academy-web-mobile-dev-courses-3n1</link>
      <guid>https://dev.to/zinotrust/zinotrust-academy-web-mobile-dev-courses-3n1</guid>
      <description>&lt;p&gt;Hi, I'm zino.  &lt;/p&gt;

&lt;p&gt;I found tech during the third year of my medical program and immediately developed an interest in it.&lt;/p&gt;

&lt;p&gt;I am passionate about teaching and helping people understand the core concepts of web development and software engineering amongst others.&lt;/p&gt;

&lt;p&gt;I know what it feels like to take a course and still feel a disconnect between what you learned in the course and what is expected in the real world.&lt;/p&gt;

&lt;p&gt;This is why I create practical courses that are based on what is obtainable out there.&lt;/p&gt;

&lt;p&gt;Join me in any of my courses and I would be glad to be part of your journey in tech.&lt;/p&gt;

&lt;p&gt;Cheers...&lt;/p&gt;

</description>
      <category>webdev</category>
    </item>
    <item>
      <title>Next.js SEO Best Practices</title>
      <dc:creator>Ewomazino Akpareva</dc:creator>
      <pubDate>Tue, 02 Jul 2024 17:50:28 +0000</pubDate>
      <link>https://dev.to/zinotrust/nextjs-seo-best-practices-2me9</link>
      <guid>https://dev.to/zinotrust/nextjs-seo-best-practices-2me9</guid>
      <description>&lt;p&gt;Next.js is a powerful and versatile framework for building React applications, but when it comes to SEO, there are some best practices you should follow to ensure your site is search engine friendly.&lt;br&gt;&lt;br&gt;
Here are some Next.js SEO best practices to help you optimize your website for better search engine visibility:  &lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Optimize Meta Tags&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Ensure each page has unique and descriptive title tags, meta descriptions, and meta keywords. Use relevant keywords to improve ranking.  &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Create SEO-Friendly URLs&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Use descriptive and keyword-rich URLs for each page to make it easier for search engines to understand the content.  &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Optimize Images&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Use descriptive file names and alt text for images to improve accessibility and provide context to search engines.  &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Enable Server-Side Rendering&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Next.js allows for server-side rendering, which can improve SEO by delivering fully rendered pages to search engines.  &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Utilize Schema Markup&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Implement structured data using JSON-LD to provide search engines with more information about your content.  &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Mobile Optimization&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Ensure your site is responsive and optimized for mobile devices, as mobile-friendliness is a key ranking factor.  &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Page Speed&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Optimize your site's performance to improve loading times, as faster websites tend to rank higher in search results.  &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Internal Linking&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Use internal links between related pages to help search engines discover and index content more effectively.  &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Monitor and Analyze&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Regularly monitor your site's performance using tools like Google Analytics to track SEO metrics and make data-driven decisions.  &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Create Quality Content&lt;/strong&gt;:&lt;br&gt;&lt;br&gt;
Ultimately, creating high-quality and relevant content is key to successful SEO, so focus on providing value to your audience.  &lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;By following these Next.js SEO best practices, you can improve your website's visibility and attract more organic traffic from search engines.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Web Design Trends for 2024: What’s Hot and What’s Not</title>
      <dc:creator>Ewomazino Akpareva</dc:creator>
      <pubDate>Mon, 01 Jul 2024 20:27:43 +0000</pubDate>
      <link>https://dev.to/zinotrust/web-design-trends-for-2024-whats-hot-and-whats-not-2fi9</link>
      <guid>https://dev.to/zinotrust/web-design-trends-for-2024-whats-hot-and-whats-not-2fi9</guid>
      <description>&lt;p&gt;As we move further into 2024, web design continues to evolve rapidly, driven by technological advancements and changing user preferences. Staying current with the latest trends is essential for creating engaging and effective websites. This article explores the hottest web design trends for 2024 and highlights those that are becoming outdated.  &lt;/p&gt;

&lt;h3&gt;
  
  
  What’s Hot in 2024
&lt;/h3&gt;

&lt;h4&gt;
  
  
  1. &lt;strong&gt;Dark Mode&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Dark mode has been trending for a few years and continues to gain popularity in 2024. This design choice reduces eye strain, saves battery life on mobile devices, and gives websites a sleek, modern look.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Why It’s Hot&lt;/strong&gt;: Enhanced user experience and aesthetics.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;How to Implement&lt;/strong&gt;: Provide users with the option to switch between light and dark modes.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  2. &lt;strong&gt;Neumorphism&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Neumorphism combines skeuomorphism and flat design to create soft, realistic shadows and highlights. This trend offers a visually appealing and tactile interface.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Why It’s Hot&lt;/strong&gt;: Provides a fresh, modern look that mimics physical objects.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;How to Implement&lt;/strong&gt;: Use subtle shadows and gradients to create depth and a sense of realism.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  3. &lt;strong&gt;Minimalism&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Minimalist design focuses on simplicity and functionality. By removing unnecessary elements, websites become more user-friendly and visually appealing.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Why It’s Hot&lt;/strong&gt;: Enhances usability and load times.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;How to Implement&lt;/strong&gt;: Use plenty of white space, simple color schemes, and clear typography.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  4. &lt;strong&gt;Micro-Interactions&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Micro-interactions are small animations or design elements that respond to user actions. They enhance the user experience by providing feedback and making interactions more engaging.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Why It’s Hot&lt;/strong&gt;: Improves user engagement and satisfaction.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;How to Implement&lt;/strong&gt;: Add subtle animations for buttons, loading indicators, and hover effects.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  5. &lt;strong&gt;3D Elements and Illustrations&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;3D design and custom illustrations are becoming more prevalent, adding depth and a unique touch to websites. They can make a site stand out and provide a more immersive experience.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Why It’s Hot&lt;/strong&gt;: Offers a distinct, visually engaging user experience.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;How to Implement&lt;/strong&gt;: Incorporate 3D models and custom illustrations into key visual areas of your site.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  6. &lt;strong&gt;Voice User Interface (VUI)&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;With the rise of voice-activated devices, integrating voice user interfaces into websites is becoming increasingly important. VUI can enhance accessibility and provide a hands-free browsing experience.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Why It’s Hot&lt;/strong&gt;: Enhances accessibility and user convenience.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;How to Implement&lt;/strong&gt;: Integrate voice search and navigation capabilities.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  7. &lt;strong&gt;Augmented Reality (AR)&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;AR technology allows users to interact with digital elements in a real-world context. This trend is particularly popular in e-commerce, where customers can visualize products in their own environment before purchasing.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Why It’s Hot&lt;/strong&gt;: Provides an interactive and immersive experience.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;How to Implement&lt;/strong&gt;: Use AR tools to create interactive product previews and visualizations.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  What’s Not in 2024
&lt;/h3&gt;

&lt;h4&gt;
  
  
  1. &lt;strong&gt;Overuse of Stock Photos&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;While stock photos have been a staple in web design, over-reliance on them can make websites feel generic and impersonal. In 2024, authenticity and originality are key.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Why It’s Not Hot&lt;/strong&gt;: Leads to a lack of originality and engagement.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Alternative&lt;/strong&gt;: Use custom photography or illustrations that align with your brand’s identity.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  2. &lt;strong&gt;Complex Navigation&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Complicated menus and navigation structures frustrate users and can lead to higher bounce rates. Simple, intuitive navigation is essential.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Why It’s Not Hot&lt;/strong&gt;: Poor user experience and higher bounce rates.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Alternative&lt;/strong&gt;: Implement clear, straightforward navigation with easily accessible menus.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  3. &lt;strong&gt;Excessive Animation&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;While animations can enhance user experience, too much movement can be distracting and overwhelming. Subtle, purposeful animations are more effective.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Why It’s Not Hot&lt;/strong&gt;: Overwhelms and distracts users.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Alternative&lt;/strong&gt;: Use animations sparingly to highlight important interactions and guide users.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  4. &lt;strong&gt;Pop-Ups and Intrusive Ads&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Pop-ups and intrusive ads are widely disliked by users and can negatively impact user experience and SEO rankings.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Why It’s Not Hot&lt;/strong&gt;: Annoys users and harms SEO.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Alternative&lt;/strong&gt;: Use less intrusive methods like inline calls-to-action and contextual ads.
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  5. &lt;strong&gt;Flash-Based Content&lt;/strong&gt;
&lt;/h4&gt;

&lt;p&gt;Flash is outdated and not supported by many devices and browsers. Modern web technologies like HTML5 and CSS3 offer better performance and compatibility.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  &lt;strong&gt;Why It’s Not Hot&lt;/strong&gt;: Poor compatibility and performance issues.&lt;/li&gt;
&lt;li&gt;  &lt;strong&gt;Alternative&lt;/strong&gt;: Use HTML5, CSS3, and JavaScript for animations and interactive content.
&lt;/li&gt;
&lt;/ul&gt;

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

&lt;p&gt;Web design in 2024 is all about creating a user-friendly, visually appealing, and technologically advanced experience. By embracing trends like dark mode, neumorphism, and voice user interfaces, and moving away from outdated practices like excessive use of stock photos and complex navigation, designers can ensure their websites remain relevant and engaging. Staying informed about these trends and continuously adapting to user preferences will be key to successful web design in the coming year.&lt;/p&gt;

</description>
    </item>
    <item>
      <title>15 Features For Your Next MERN Stack Ecommerce App</title>
      <dc:creator>Ewomazino Akpareva</dc:creator>
      <pubDate>Wed, 13 Sep 2023 10:28:42 +0000</pubDate>
      <link>https://dev.to/zinotrust/15-features-for-your-next-mern-stack-ecommerce-app-2lnb</link>
      <guid>https://dev.to/zinotrust/15-features-for-your-next-mern-stack-ecommerce-app-2lnb</guid>
      <description>&lt;h2&gt;
  
  
  Introduction ~
&lt;/h2&gt;

&lt;p&gt;Hello friends,&lt;br&gt;
So in a highly competitive tech ecosystem, one of the things that helps you stand out as a developer is the quality of your portfolio projects.&lt;br&gt;
I always tell my students not to stuff their portfolio or resume with numerous low-grade projects that you can find 1,000 tutorials on, instead, build two or three strong projects that would make you stand out from the crowd.&lt;br&gt;
An example of such a project is an e-commerce app.&lt;/p&gt;

&lt;p&gt;Project Demo&lt;/p&gt;

&lt;p&gt;To find a complete demo of an advanced e-commerce project, &lt;a href="https://olink.to/shopito"&gt;please click here&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Also if you would like a 20% discount, use the discount code "YOUTUBE" at &lt;a href="https://olink.to/shopito"&gt;checkout&lt;/a&gt;.&lt;br&gt;
Now let's proceed,&lt;br&gt;
&lt;iframe width="710" height="399" src="https://www.youtube.com/embed/ZpS1c0XuNVo"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;List of Project Features&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Elegant home page with animation&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Product Carousel&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;User Authentication&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Smart cart management&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Database synced cart&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Multiple product filters&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Multiple payment gateway&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Wallet system&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Wishlist&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Admin dashboard&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Graphical data presentation&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Multiple Image upload&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Transactional email&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Order management&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Stock management&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;1 &lt;strong&gt;Elegant Home Page with Animation:&lt;/strong&gt;&lt;br&gt;
The home page is the first impression your users get of your e-commerce app. An elegant home page with animations not only grabs users' attention but also enhances the user experience. Animations can be used to highlight featured products, promote discounts, or create visually appealing transitions as users navigate your app.&lt;/p&gt;

&lt;p&gt;2 &lt;strong&gt;Product Carousel:&lt;/strong&gt;&lt;br&gt;
A product carousel is a dynamic way to showcase multiple products in a limited space. It allows users to scroll through and discover a variety of products quickly. This feature improves engagement and helps in cross-selling and upselling.&lt;/p&gt;

&lt;p&gt;3 &lt;strong&gt;User Authentication:&lt;/strong&gt;&lt;br&gt;
User authentication ensures that only authorized individuals can access certain parts of your app. This is crucial for protecting user data, allowing personalized experiences, and securing transactions. Common authentication methods include email/password, social media logins, or two-factor authentication (2FA).&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--zcSMpgxp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmpc37jjqbemzdtqeda6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--zcSMpgxp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmpc37jjqbemzdtqeda6.png" alt="Image description" width="800" height="411"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;4 &lt;strong&gt;Smart Cart Management:&lt;/strong&gt;&lt;br&gt;
Smart cart management involves providing users with an intelligent shopping cart that can calculate prices, apply discounts, and update in real-time. It should also remember user selections, making it convenient for users to review and finalize their purchases.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--2FOjS_VX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5in612jh50ky6nsks1vs.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--2FOjS_VX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5in612jh50ky6nsks1vs.png" alt="Image description" width="800" height="685"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;5 &lt;strong&gt;Database Synced Cart:&lt;/strong&gt;&lt;br&gt;
This feature ensures that the user's shopping cart is synchronized across devices. Users can add items to their cart on one device and access the same cart from another device when logged in. It offers a seamless shopping experience.&lt;/p&gt;

&lt;p&gt;6 &lt;strong&gt;Multiple Product Filters:&lt;/strong&gt;&lt;br&gt;
Multiple product filters allow users to refine their product searches based on various criteria such as category, price range, size, color, and more. It simplifies the process of finding specific products in a vast inventory.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--WBuHqpKU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2h7h6lu8m0lobbz2zlej.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--WBuHqpKU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2h7h6lu8m0lobbz2zlej.png" alt="Image description" width="800" height="961"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;7 &lt;strong&gt;Multiple Payment Gateways:&lt;/strong&gt;&lt;br&gt;
Offering multiple payment gateways (e.g., credit cards, PayPal, digital wallets) increases flexibility for customers, making it easier for them to complete transactions. It also helps capture a broader audience with varying payment preferences.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--tlYIKmeN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifs4qj36xh1996oglll1.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--tlYIKmeN--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ifs4qj36xh1996oglll1.PNG" alt="Image description" width="800" height="312"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;8 &lt;strong&gt;Wallet System:&lt;/strong&gt;&lt;br&gt;
A wallet system enables users to store funds within the app, making checkout faster and more convenient. Users can preload their wallets and use the balance for purchases, reducing the need to enter payment details for every transaction.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Pc85hMcb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rx3c1na7hp9duuno7mm3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Pc85hMcb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rx3c1na7hp9duuno7mm3.png" alt="Image description" width="800" height="809"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;9 &lt;strong&gt;Wishlist:&lt;/strong&gt;&lt;br&gt;
A wishlist feature lets users save products they are interested in for later purchase. It encourages users to return to your app and helps in marketing by sending notifications when items in their wishlist are on sale.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--Tgh38ALV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te5bnxscskji6z2tq9d0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--Tgh38ALV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te5bnxscskji6z2tq9d0.png" alt="Image description" width="800" height="482"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;10 &lt;strong&gt;Admin Dashboard:&lt;/strong&gt;&lt;br&gt;
An admin dashboard provides a centralized platform for managing your e-commerce store. It allows administrators to track orders, manage inventory, add new products, monitor user activity, and make data-driven decisions.&lt;/p&gt;

&lt;p&gt;11 &lt;strong&gt;Graphical Data Presentation:&lt;/strong&gt;&lt;br&gt;
This feature involves using charts and graphs to present data related to sales, customer behavior, and product performance. Visualizing data makes it easier for administrators to identify trends and make informed decisions.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--U9itp37V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thus65tk9qqj6k1j8bhd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--U9itp37V--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thus65tk9qqj6k1j8bhd.png" alt="Image description" width="800" height="411"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;12 &lt;strong&gt;Multiple Image Upload:&lt;/strong&gt;&lt;br&gt;
Enabling multiple image uploads for products allows you to showcase products from different angles and provide a better user experience. High-quality images help users make informed purchase decisions.&lt;/p&gt;

&lt;p&gt;13 &lt;strong&gt;Transactional Email:&lt;/strong&gt;&lt;br&gt;
Transactional emails are automated messages sent to users after specific actions, such as order confirmation, shipping updates, or password resets. These emails keep users informed and engaged throughout the shopping process.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--JgNvqMKL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bnd1nmmn3e236jxaxw4.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JgNvqMKL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bnd1nmmn3e236jxaxw4.PNG" alt="Image description" width="800" height="759"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;14 &lt;strong&gt;Order Management:&lt;/strong&gt;&lt;br&gt;
Order management tools help administrators track and fulfill customer orders efficiently. They include features like order status updates, shipping management, and easy access to order history.&lt;/p&gt;

&lt;p&gt;15 &lt;strong&gt;Stock Management:&lt;/strong&gt;&lt;br&gt;
Effective stock management ensures that products are accurately tracked in terms of availability and quantity. It prevents overselling, reduces errors, and helps maintain a positive customer experience by avoiding disappointments due to out-of-stock items.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Incorporating these 15 features into your MERN Stack Ecommerce App will enhance its functionality, user experience, and overall success in the competitive e-commerce market.&lt;br&gt;
Luckily, I created a course, MERN Ecommerce Course (+ Fintech Digital Wallet) that has all these features and more, Feel free to check it out and get it at a 20% discount.&lt;br&gt;
&lt;a href="https://olink.to/shopito"&gt;Course Link Here&lt;/a&gt;&lt;br&gt;
20% Discount Coupon: YOUTUBE&lt;/p&gt;

&lt;p&gt;Cheers,&lt;br&gt;
Zino...&lt;br&gt;
Website: &lt;a href="https://olink.to/courses"&gt;course.zinotrustacademy.com&lt;/a&gt;&lt;br&gt;
YouTube: &lt;a href="https://olink.to/ztyt"&gt;Subscribe Here&lt;/a&gt;&lt;br&gt;
All course discount: &lt;a href="https://olink.to/subscribe"&gt;Subscribe Here&lt;/a&gt;&lt;/p&gt;

</description>
    </item>
    <item>
      <title>New ReactJS Mini-project Course Alert</title>
      <dc:creator>Ewomazino Akpareva</dc:creator>
      <pubDate>Wed, 29 Dec 2021 07:22:16 +0000</pubDate>
      <link>https://dev.to/zinotrust/new-reactjs-mini-project-course-alert-48e6</link>
      <guid>https://dev.to/zinotrust/new-reactjs-mini-project-course-alert-48e6</guid>
      <description>&lt;p&gt;Hello guys,&lt;br&gt;
I just published a ReactJS Mini-projects course that helps ReactJS beginners sharpen their skills by building mini projects.&lt;/p&gt;

&lt;p&gt;Here is a $9 discount&lt;br&gt;
&lt;a href="https://www.udemy.com/course/reactjs-mini-projects-course/?couponCode=9DOLLARS"&gt;Get Course Here&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Check out other courses on  &lt;a href="https://www.udemy.com/course/reactjs-mini-projects-course/?couponCode=9DOLLARS"&gt;ZinoTrustAcademy.com&lt;/a&gt; &lt;/p&gt;

</description>
    </item>
    <item>
      <title>$9 Discount on Udemy courses</title>
      <dc:creator>Ewomazino Akpareva</dc:creator>
      <pubDate>Wed, 29 Sep 2021 07:57:35 +0000</pubDate>
      <link>https://dev.to/zinotrust/9-discount-on-udemy-courses-4h42</link>
      <guid>https://dev.to/zinotrust/9-discount-on-udemy-courses-4h42</guid>
      <description>&lt;p&gt;Hello Friends,&lt;br&gt;
Today, I am making available $9 discount codes for any of my courses including 100 days of javascript.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;100 Days of JavaScript&lt;/strong&gt;&lt;br&gt;
 &lt;a href="https://www.udemy.com/course/100-days-of-javascript/?couponCode=TWITTER-9"&gt;100 Days of JavaScript&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Modern JavaScript - Beginner To Advanced&lt;/strong&gt;&lt;br&gt;
 &lt;a href="https://www.udemy.com/course/modern-javascript-bootcamp-beginner-to-advanced/?couponCode=TWITTER-9"&gt;Modern JavaScript - Beginner To Advanced&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;HTML, CSS and Sass&lt;/strong&gt;&lt;br&gt;
 &lt;a href="https://www.udemy.com/course/build-website-with-html-css-sass-beginner-to-advanced/?couponCode=TWITTER-9"&gt;HTML, CSS and Sass&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Git and GitHub&lt;/strong&gt;&lt;br&gt;
 &lt;a href="https://www.udemy.com/course/complete-git-and-github-course-beginner-friendly-approach/?couponCode=TWITTER-9"&gt;Git and GitHub&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;To get notified when I publish my ReactJS course, subscribe below&lt;br&gt;
&lt;a href="https://zinotrustacademy.com/subscribe"&gt;https://zinotrustacademy.com/subscribe&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cheers guys...&lt;/p&gt;

</description>
      <category>javascript</category>
    </item>
    <item>
      <title>15 JavaScript Project  For You</title>
      <dc:creator>Ewomazino Akpareva</dc:creator>
      <pubDate>Mon, 09 Aug 2021 07:49:31 +0000</pubDate>
      <link>https://dev.to/zinotrust/15-javascript-project-for-you-4mf9</link>
      <guid>https://dev.to/zinotrust/15-javascript-project-for-you-4mf9</guid>
      <description>&lt;p&gt;Hello friends,&lt;br&gt;
So I decided to publish 15 projects from my 100Days of JavaScript Course on YouTube.&lt;/p&gt;

&lt;p&gt;Feel free to check it out to see my teaching style and please leave a like and comment on the video.&lt;/p&gt;

&lt;p&gt;Here - &lt;a href="https://www.youtube.com/watch?v=MrnzrbaCY7U"&gt;15 JavaScript Projects YouTube &lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Discount Link to 100Days of JavaScript Full Course&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;100 Days of JavaScript Course:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;5 DAY COUPON ($9.99)&lt;br&gt;
&lt;a href="https://www.udemy.com/course/100-days-of-javascript/?couponCode=YOUTUBE-9"&gt;https://www.udemy.com/course/100-days-of-javascript/?couponCode=YOUTUBE-9&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;30 DAY COUPON ($12.99)&lt;br&gt;
&lt;a href="https://www.udemy.com/course/100-days-of-javascript/?couponCode=YOUTUBE-15"&gt;https://www.udemy.com/course/100-days-of-javascript/?couponCode=YOUTUBE-12 &lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thanks guys.&lt;/p&gt;

</description>
      <category>javascript</category>
    </item>
    <item>
      <title>JavaScript is hard – We made it easy</title>
      <dc:creator>Ewomazino Akpareva</dc:creator>
      <pubDate>Mon, 12 Jul 2021 07:35:18 +0000</pubDate>
      <link>https://dev.to/zinotrust/javascript-is-hard-we-made-it-easy-7b7</link>
      <guid>https://dev.to/zinotrust/javascript-is-hard-we-made-it-easy-7b7</guid>
      <description>&lt;p&gt;Hey friends,&lt;br&gt;
Today I just want to talk a bit about my JavaScript journey and the frustration I experienced when I started learning JavaScript and what I have done to make it easy for beginners.&lt;/p&gt;

&lt;p&gt;My first hands-on experience with JavaScript was in 2015 (I think) and I hated it so much that I abandoned it and started learning PHP, which I found more appealing at that time.&lt;/p&gt;

&lt;p&gt;To me, it seemed like&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;There was a disconnect between what instructors were teaching and the real experience of building projects. (Much of that has changed now)&lt;/li&gt;
&lt;li&gt;I also felt like information was scattered all over the internet and going through the trouble of searching and finding well-crafted information was overwhelming as a beginner.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Today I have created and published two courses on JavaScript and I sincerely believe if any beginner takes both courses, they can confidently start learning ReactJS or any other JavaScript Framework.&lt;/p&gt;

&lt;p&gt;Here they are with my &lt;strong&gt;Discount code&lt;/strong&gt; for &lt;strong&gt;Less than $10&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Modern JavaScript Bootcamp for Beginners: &lt;a href="https://www.udemy.com/course/modern-javascript-bootcamp-beginner-to-advanced/?couponCode=LESS-THAN-10"&gt;https://www.udemy.com/course/modern-javascript-bootcamp-beginner-to-advanced/?couponCode=LESS-THAN-10&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;100 Days of JavaScript: &lt;a href="https://www.udemy.com/course/100-days-of-javascript/?couponCode=LESS-THAN-10"&gt;https://www.udemy.com/course/100-days-of-javascript/?couponCode=LESS-THAN-10&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I look forward to being a part of your Tech Journey.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Thanks for reading this article.&lt;/strong&gt;&lt;br&gt;
if you enjoyed it, feel free to connect with me:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website:&lt;/strong&gt;  &lt;a href="https://zinotrustacademy.com/"&gt;ZinoTrustAcademy.com&lt;/a&gt;  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Twitter:&lt;/strong&gt;  &lt;a href="https://twitter.com/zinotrust"&gt;@ZinoTrust &lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;YouTube:&lt;/strong&gt;  &lt;a href="https://www.youtube.com/channel/UClXxZm-GQr4S-NsHGIXgg4Q"&gt;ZinoTrust Academy &lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GitHub:&lt;/strong&gt;  &lt;a href="https://github.com/zinotrust"&gt;ZinoTrust &lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
    </item>
    <item>
      <title>Udemy Course Give away...</title>
      <dc:creator>Ewomazino Akpareva</dc:creator>
      <pubDate>Fri, 25 Jun 2021 07:28:16 +0000</pubDate>
      <link>https://dev.to/zinotrust/udemy-course-give-away-1nio</link>
      <guid>https://dev.to/zinotrust/udemy-course-give-away-1nio</guid>
      <description>&lt;p&gt;Hello friends...&lt;/p&gt;

&lt;p&gt;I am doing a giveaway for my Git and GitHub Udemy course today.&lt;br&gt;
Feel free to take it using the free coupon link below.&lt;/p&gt;

&lt;p&gt;If you would like to share with your followers on Twitter or other platform, that would be great.&lt;/p&gt;

&lt;p&gt;Here is a free coupon link&lt;br&gt;
&lt;a href="https://udemy.com/course/complete-git-and-github-course-beginner-friendly-approach/?couponCode=ZINOTRUST-FREE"&gt;https://udemy.com/course/complete-git-and-github-course-beginner-friendly-approach/?couponCode=ZINOTRUST-FREE&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Would really appreciate it if you tag me on the tweet/post.&lt;br&gt;
My Twitter handle is &lt;a class="mentioned-user" href="https://dev.to/zinotrust"&gt;@zinotrust&lt;/a&gt;
 &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;My Website:&lt;/strong&gt;  &lt;a href="https://zinotrustacademy.com/"&gt;ZinoTrustAcademy.com&lt;/a&gt;&lt;br&gt;&lt;br&gt;
&lt;strong&gt;My YouTube Channel:&lt;/strong&gt;  &lt;a href="https://www.youtube.com/channel/UClXxZm-GQr4S-NsHGIXgg4Q"&gt;ZinoTrust Academy &lt;/a&gt; &lt;/p&gt;

&lt;p&gt;Cheers and have a great day.&lt;/p&gt;

</description>
      <category>github</category>
      <category>webdev</category>
      <category>giveaway</category>
    </item>
    <item>
      <title>How To View JavaScript (console.log) output in VSCode</title>
      <dc:creator>Ewomazino Akpareva</dc:creator>
      <pubDate>Tue, 15 Jun 2021 08:37:46 +0000</pubDate>
      <link>https://dev.to/zinotrust/how-to-view-javascript-console-log-output-in-vscode-2f00</link>
      <guid>https://dev.to/zinotrust/how-to-view-javascript-console-log-output-in-vscode-2f00</guid>
      <description>&lt;p&gt;How To View JavaScript (console.log) output in VSCode&lt;br&gt;
Hello guys,&lt;br&gt;
Today I have another productivity tip for javascript developers.&lt;br&gt;
Let me show you how you can view the output of Console.log() inside of VSCode.&lt;/p&gt;

&lt;p&gt;Here we go.&lt;br&gt;
First, click on the extension tab on VSCode and search for an extension named “Code Runner” by Jun Han.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s---4RDD6Xe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nad304hsphziuctrgm9e.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s---4RDD6Xe--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nad304hsphziuctrgm9e.PNG" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Go ahead and install it. After installation restart VSCode and you would notice a “Play” icon at the top of VSCode.&lt;/p&gt;



&lt;p&gt;Next, I will create a JavaScript file in VSCode and log some text to the console.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;console.log("100 Days Of JavaScript Course");
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, click on the “play” icon at the top of VSCode and your code would output on a new panel inside VSCode.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--E9s9gYgT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbbq3xmrnoc80a3xcaqc.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--E9s9gYgT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wbbq3xmrnoc80a3xcaqc.PNG" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;By the way, &lt;a href="https://www.udemy.com/course/100-days-of-javascript/?referralCode=9FB1A91BA3B143B2A261"&gt;100Days of JavaScript Course &lt;/a&gt; was created to help beginners/intermediate level JavaScript developers sharpen their JavaScript skills by building projects everyday for 100 Days. &lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--qByNG1EG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jw5437cpmjxx31atos39.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--qByNG1EG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jw5437cpmjxx31atos39.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Thanks for reading this article.&lt;/strong&gt;&lt;br&gt;
if you enjoyed it, feel free to connect with me:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website:&lt;/strong&gt;  &lt;a href="https://zinotrustacademy.com/"&gt;ZinoTrustAcademy.com&lt;/a&gt;  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Twitter:&lt;/strong&gt;  &lt;a href="https://twitter.com/zinotrust"&gt;@ZinoTrust &lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;YouTube:&lt;/strong&gt;  &lt;a href="https://www.youtube.com/channel/UClXxZm-GQr4S-NsHGIXgg4Q"&gt;ZinoTrust Academy &lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GitHub:&lt;/strong&gt;  &lt;a href="https://github.com/zinotrust"&gt;ZinoTrust &lt;/a&gt;&lt;/p&gt;

</description>
      <category>productivity</category>
    </item>
    <item>
      <title>10 Visual Studio Code Shortcuts Every Web Developer Must Know</title>
      <dc:creator>Ewomazino Akpareva</dc:creator>
      <pubDate>Mon, 14 Jun 2021 04:59:26 +0000</pubDate>
      <link>https://dev.to/zinotrust/10-visual-studio-code-shortcuts-every-web-developer-must-know-3mhc</link>
      <guid>https://dev.to/zinotrust/10-visual-studio-code-shortcuts-every-web-developer-must-know-3mhc</guid>
      <description>&lt;p&gt;Hello guys,&lt;br&gt;
Today, I would like to share some visual studio shortcuts that I use when I code, and hopefully, you would find some useful.&lt;/p&gt;

&lt;p&gt;Here we go.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt; Duplicate code: I often need to duplicate a line of code when i work. This can be done by copy-pasting the code in a new line but you get to save some time by using the shortcut below.
To duplicate a block of code, highlight the code then use the shortcut below.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ctrl + shift + arrow down (Windows)
cmd + shift + arrow down (Mac)

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

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt; Find and replace all
You may want to change the occurrence of a word, class, or variable in a file or throughout your codebase. This can be done using the shortcut below.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ctrl + shift + h (Windows)
cmd+ shift + h (Mac)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt; Edit multiple lines
There is normally a single cursor when using VSCode, however, you can create multiple cursor points when you need to make multiple changes on a file.
To do this press
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;alt + left-click
Option + left-click 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt; Move a block of code upward/downward
Highlight the block of code and use the shortcut below
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;alt + up/down arrow (Windows)
option + up/down arrow (Mac)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt; Indent a block of code.
Highlight the block of code and use the shortcut below
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ctrl + [ or ](Windows)
cmd + [ or ] (Mac)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt; Toggle the terminal
VSCode has an integrated terminal. You can use the shortcut below to show or hide this terminal.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ctrl + ` (Windows)
cmd + ` (Mac)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt; Select multiple tags
Highlight a tag and use the shortcut below to select the next occurrence of such tag.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ctrl + d (Windows)
cmd + d (Mac)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Add a comment or comment out a block of code
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ctrl + / (Windows)
cmd + / (Mac)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Toggle Wordwrap function
Word wrap is a function that makes your text in VSCode responsive by automatically placing long text into the next line.
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;alt + z (Windows)
option + z(Mac)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;Reopen recently closed file
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ctrl + shift + t (Windows)
cmd+ shift + t (Mac)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Know some useful shortcuts, add them in the comments.&lt;/p&gt;

&lt;p&gt;Feel free to check out my &lt;a href="https://www.udemy.com/course/100-days-of-javascript/?referralCode=9FB1A91BA3B143B2A261"&gt;100Days of JavaScript Course &lt;/a&gt; which I created to help beginners/intermediate level JavaScript developers sharpen their JavaScript skills.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Thanks for reading this article.&lt;/strong&gt;&lt;br&gt;
if you enjoyed it, feel free to connect with me:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Website:&lt;/strong&gt;  &lt;a href="https://zinotrustacademy.com/"&gt;ZinoTrustAcademy.com&lt;/a&gt;  &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Twitter:&lt;/strong&gt;  &lt;a href="https://twitter.com/zinotrust"&gt;@ZinoTrust &lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;YouTube:&lt;/strong&gt;  &lt;a href="https://www.youtube.com/channel/UClXxZm-GQr4S-NsHGIXgg4Q"&gt;ZinoTrust Academy &lt;/a&gt; &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GitHub:&lt;/strong&gt;  &lt;a href="https://github.com/zinotrust"&gt;ZinoTrust &lt;/a&gt;&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
