DEV Community: Unclebigbay

Best End-to-End Testing Tools for Web Apps in 2026 (AI Options Included)

Unclebigbay — Wed, 25 Jun 2025 06:53:34 +0000

The QA Crisis: Why 85% of Bugs Still Reach Production in 2026

Every developer knows this pain: you ship a "simple" feature on Friday, and by Monday morning, your Slack is exploding with bug reports. Users are frustrated, your team is scrambling, and you're wondering how that "thoroughly tested" checkout flow completely broke on mobile Safari.

Here's the uncomfortable truth: 85% of website bugs are discovered by users, not during testing. Every developer knows this pain: you ship a "simple" feature on Friday, and by Monday morning, your Slack is exploding with bug reports from customers who found issues your tests missed. Source.

But 2026 is different. AI-powered testing tools have finally matured enough to make comprehensive QA accessible to lean teams. Whether you're a solo developer shipping side projects or a startup racing toward product-market fit, you now have options that would have required a full QA department just two years ago.

This guide breaks down 20+ tools across four categories - from battle-tested frameworks to cutting-edge AI QA services - so you can pick what actually works for your team, budget, and sanity.

🎯 Quick Navigation

Decision Flowchart ← Start here if you're in a hurry
Test Frameworks ← DIY approach
Cloud Platforms ← Scale existing tests
AI QA Tools ← Smart automation
QA-as-a-Service ← Full outsourcing
Comparison Table ← Side-by-side analysis

🧩 How to Choose Your Tool (Decision Flowchart)

👥 What's your team size?

├── Solo dev / 2-3 engineers
│   ├── No QA experience? → Bug0, QA Wolf, or Autify
│   ├── Want to learn? → Playwright + GitHub Actions
│   └── Need quick setup? → Testsigma or BlinqIO
│
├── 4-10 engineers
│   ├── Existing tests? → BrowserStack/LambdaTest + current framework
│   ├── No tests yet? → Bug0, Mabl, or Functionize
│   └── Strong dev team? → Playwright/Cypress + CI/CD
│
└── 10+ engineers
    ├── Enterprise compliance? → Sauce Labs or QASource
    ├── Scaling existing QA? → BrowserStack + dedicated QA hire
    └── Building from scratch? → Bug0 Enterprise or Playwright + AI tools

Budget reality check:

💰 $0-500/month: Open source frameworks + GitHub Actions
💰💰 $500-2000/month: AI QA tools or simple QA service
💰💰💰 $2000-5000/month: Premium AI platforms or cloud infra
💰💰💰💰 $5000+/month: Full-service QA or enterprise solutions

🚧 What Makes a Great E2E Tool in 2026?

(End-to-end testing simulates real user interactions - clicking buttons, filling forms, navigating pages - to ensure your entire app works as expected.)

Based on feedback from 200+ developers and my experience implementing QA at three startups, here are the non-negotiables:

The Must-Haves

⚡ Fast setup (hours, not weeks)
🔄 CI/CD integration (GitHub Actions, GitLab CI, etc.)
📱 Cross-browser support (at minimum: Chrome, Firefox, Safari)
🛠️ Low maintenance burden (tests shouldn't break every UI change)
📊 Clear reporting (know exactly what broke and why)

The 2026 Differentiators

🧠 AI-powered test generation (write tests in English, not code)
🔧 Self-healing tests (adapt to UI changes automatically)
🚫 Flaky test detection (identify and quarantine unreliable tests)
📈 Performance insights (catch slow pages before users do)
♿ Accessibility checking (WCAG compliance built-in)

🧪 Category 1: Test Frameworks (For Engineers Who Want Full Control)

Best for: Teams with strong engineering resources who want to own their QA pipeline

These open-source frameworks give you complete control over test creation, execution, and maintenance. You write the code, manage the infrastructure, and customize everything to your exact needs.

💡 Pro tip: All frameworks below integrate well with GitHub Actions. I'll show you a sample workflow at the end of this section.

1. Playwright ⭐ Developer Favorite

Microsoft's modern automation framework that's quickly becoming the gold standard for E2E testing.

// Playwright test example - notice how clean this is
import { test, expect } from '@playwright/test';

test('user can complete checkout', async ({ page }) => {
  await page.goto('/products');
  await page.click('[data-testid="add-to-cart"]');
  await page.click('[data-testid="checkout"]');
  await expect(page.locator('h1')).toContainText('Order Confirmed');
});

🌟 GitHub Stars: 65,000+ (very active community)
📚 Learning Curve: Medium (great docs, lots of examples)
🌐 Browser Support: Chrome, Firefox, Safari, Edge
📱 Mobile: Excellent (real device testing)
⚡ Performance: Fast parallel execution

Why developers love it: Modern API, excellent debugging tools, built-in waiting strategies that eliminate flaky tests.

Reality check: You'll need 1-2 weeks to get comfortable, and ongoing maintenance as your app evolves.

🔗 Playwright.dev

2. Cypress ⭐ Beginner Friendly

The framework that made E2E testing accessible to frontend developers. Great developer experience with real-time debugging.

// Cypress test - very readable for frontend devs
describe('User Authentication', () => {
  it('should log in successfully', () => {
    cy.visit('/login');
    cy.get('[data-cy="email"]').type('user@example.com');
    cy.get('[data-cy="password"]').type('password123');
    cy.get('[data-cy="submit"]').click();
    cy.url().should('include', '/dashboard');
  });
});

🌟 GitHub Stars: 46,000+
📚 Learning Curve: Low (excellent getting started guide)
🌐 Browser Support: Chrome, Firefox, Edge (⚠️ no Safari)
📱 Mobile: Limited
⚡ Performance: Good for most use cases

Best for: Frontend-heavy teams who want quick wins and great developer UX.

Gotcha: Safari testing requires additional tools, and it can struggle with complex SSR applications.

🔗 Cypress.io

3. Selenium

The grandfather of browser automation. Still relevant for enterprise and legacy applications.

🌟 GitHub Stars: 30,000+
📚 Learning Curve: High (lots of boilerplate)
🌐 Browser Support: Excellent (everything)
📱 Mobile: Good with Appium
⚡ Performance: Slower than modern alternatives

Best for: Large enterprises with existing Selenium infrastructure or teams using non-JavaScript languages.

Reality check: Higher maintenance overhead and slower execution compared to Playwright/Cypress.

🔗 Selenium.dev

4. TestCafe

Simple, zero-config testing framework that runs tests in real browsers without WebDriver.

🌟 GitHub Stars: 10,000+
📚 Learning Curve: Low
🌐 Browser Support: Good
📱 Mobile: Basic
⚡ Performance: Good

Best for: Teams wanting simplicity over advanced features.

🔗 Testcafe.io

5. Nightwatch.js

Selenium-based framework with a focus on simplicity and built-in test runner.

🌟 GitHub Stars: 12,000+
📚 Learning Curve: Medium
🌐 Browser Support: Good (via Selenium)
📱 Mobile: Via Appium
⚡ Performance: Moderate

Best for: Teams already familiar with Selenium who want a simpler API.

🔗 Nightwatch.js

🚀 Quick Start: Playwright + GitHub Actions

Here's a complete setup that takes 15 minutes:

# .github/workflows/e2e.yml
name: E2E Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Install Playwright browsers
        run: npx playwright install

      - name: Run E2E tests
        run: npm run test:e2e

      - name: Upload test results
        uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

Cost reality: Framework is free, but you'll spend $5,000-10,000/month on engineering time for setup, maintenance, and infrastructure.

☁️ Category 2: Traditional Cloud Testing Platforms

Best for: Teams with existing test suites who need scalable infrastructure

These platforms don't write tests for you, but they provide robust cloud infrastructure to run your existing tests across thousands of browser/device combinations.

1. BrowserStack ⭐ Industry Standard

The gold standard for cloud testing infrastructure. If you're already writing Playwright/Cypress tests and need to scale them, BrowserStack is your best bet.

🔧 Setup Time: 1-2 hours (excellent documentation)
🌐 Coverage: 3,000+ browser/device combinations
📊 Analytics: Comprehensive dashboards and debugging tools
🔌 Integrations: Everything (GitHub, Slack, Jira, Jenkins, etc.)
💰 Pricing: $29-199/month per user

// Run your existing tests on BrowserStack
const capabilities = {
  'bstack:options': {
    'os': 'Windows',
    'osVersion': '10',
    'browserName': 'Chrome',
    'browserVersion': 'latest'
  }
};

Why teams choose it: Rock-solid reliability, excellent debugging tools, works with any existing framework.

Consider if: You have tests written but need them to run on more browsers/devices than your local setup allows.

🔗 Website

2. LambdaTest

Affordable BrowserStack alternative with strong focus on ease of use and developer experience.

🔧 Setup Time: 1 hour
🌐 Coverage: 3,000+ browser/OS combinations
📊 Analytics: Good dashboards, video recordings
🔌 Integrations: GitHub, GitLab, Slack, Asana
💰 Pricing: $15-58/month per user

Best for: Budget-conscious teams who want 80% of BrowserStack's features at 60% of the cost.

🔗 Website

3. Sauce Labs

Enterprise-focused platform with advanced debugging and compliance features.

🔧 Setup Time: 2-3 hours
🌐 Coverage: 2,000+ combinations
📊 Analytics: Advanced performance insights
🔌 Integrations: Enterprise tools (Jenkins, Azure DevOps)
💰 Pricing: Custom enterprise pricing

Best for: Large enterprises with compliance requirements (SOC 2, ISO 27001).

🔗 Website

4. TestingBot

Solid BrowserStack alternative with competitive pricing and good customer support.

🔧 Setup Time: 1 hour
🌐 Coverage: 1,500+ combinations
📊 Analytics: Standard reporting
🔌 Integrations: Major CI/CD tools
💰 Pricing: $50-200/month per user

🔗 Website

5. CrossBrowserTesting (SmartBear)

Part of the SmartBear testing suite, good for teams already using their tools.

🔧 Setup Time: 1-2 hours
🌐 Coverage: 2,000+ combinations
📊 Analytics: Integrated with SmartBear suite
🔌 Integrations: SmartBear tools, major CI/CD
💰 Pricing: $39-249/month per user

🔗 Website

🧠 Category 3: AI QA Tools (Self-Serve Platforms, In-House Execution)

Best for: Teams with some QA bandwidth who want AI to handle the heavy lifting

These tools let your team maintain control while AI handles test creation, maintenance, and optimization. Think of them as smart assistants for your QA process.

1. Autify ⭐ No-Code Champion

Record tests by clicking through your app, then let AI maintain them as your UI evolves.

How it works:
1. Record: Click through your app normally
2. Review: AI converts actions into test steps
3. Run: Tests execute automatically on every deploy
4. Maintain: AI auto-heals when UI changes

🤖 AI Features: Auto-healing, smart element detection
🔧 Setup Time: 30 minutes (truly no-code)
📚 Learning Curve: Very low (if you can use your app, you can test it)
🔌 Integrations: GitHub, GitLab, Slack, Jira
💰 Pricing: ~$2,000-4,000/month

Perfect for: Non-technical teams or developers who want to focus on building, not testing.

Reality check: Less flexible than coded solutions, but 10x faster to implement.

🔗 Website

2. Functionize

Write tests in plain English, and AI converts them into robust browser automation.

Example test in Functionize:
"Navigate to login page, enter email 'test@example.com',
enter password 'secure123', click login button,
verify dashboard page loads with welcome message"

🤖 AI Features: NLP test generation, visual validation, self-healing
🔧 Setup Time: 2-3 hours
📚 Learning Curve: Low (write tests like instructions to a human)
🔌 Integrations: Major CI/CD tools, Slack notifications
💰 Pricing: ~$5,000-10,000/month

Best for: Teams who want the power of coded tests without writing code.

🔗 Website

3. Testsigma

Low-code platform that turns natural language into automated tests across web, mobile, and APIs.

Natural language test:
"Open application URL, click on 'Sign Up' button,
enter 'john@example.com' in email field,
verify error message 'Email already exists' is displayed"

🤖 AI Features: NLP test creation, flaky test detection, auto-suggestions
🔧 Setup Time: 1-2 hours
📚 Learning Curve: Low
🔌 Integrations: GitHub, Jira, Slack, Teams
💰 Pricing: ~$1,500-3,500/month

Best for: Teams testing web + mobile + APIs who want one unified platform.

🔗 Website

4. Qase

Modern test management platform with AI-powered test planning and execution insights.

🤖 AI Features: Test case auto-generation, planning assistance, analytics
🔧 Setup Time: 1 hour
📚 Learning Curve: Low (focuses on organization, not test creation)
🔌 Integrations: Everything (50+ integrations)
💰 Pricing: ~$1,000-2,500/month

Best for: Teams who need better test organization and reporting alongside existing tools.

🔗 Website

5. Mabl

Comprehensive platform combining AI testing with performance monitoring and accessibility scanning.

🤖 AI Features: Self-healing tests, visual regression, performance insights
🔧 Setup Time: 2-3 hours
📚 Learning Curve: Medium
🔌 Integrations: GitHub, Jenkins, Slack
💰 Pricing: ~$3,000-6,000/month

Best for: Teams who want testing + performance monitoring + accessibility in one tool.

🔗 Website

6. BlinqIO

Turn plain English into Playwright tests. Perfect for teams who love Playwright but want AI assistance.

English: "Go to homepage, click pricing link, verify Enterprise plan shows $99/month"
↓ AI converts to ↓
Playwright: await page.goto('/'), await page.click('a[href="/pricing"]'),
           await expect(page.locator('.enterprise .price')).toContainText('$99');

🤖 AI Features: English-to-Playwright conversion, auto-maintenance
🔧 Setup Time: 30 minutes
📚 Learning Curve: Low (if you know Playwright basics)
🔌 Integrations: GitHub Actions, CLI tools
💰 Pricing: ~$500-3,000/month

Best for: Playwright teams who want to speed up test creation.

🔗 Website

✅ Category 4: AI QA-as-a-Service (Managed QA Execution + AI Tools)

Best for: Lean teams who want comprehensive QA without building it in-house

These services combine AI tools with expert QA professionals. You focus on building product; they handle testing entirely.

1. Bug0 ⭐ Startup, Modern teams’ Favorite

AI agents explore your app like real users, generate tests automatically, and include human QA review for accuracy.

How Bug0 works:
Week 1: AI agents explore your staging app, map user flows
Week 2: Generate comprehensive test suite, human QA review
Week 3: Integrate with GitHub, tests run on every PR
Week 4: 100% critical flow coverage, ongoing maintenance

🤖 AI Approach: Autonomous agents + human verification
🔧 Setup Time: Instant (just provide staging URL)
📚 Learning Curve: Zero (they do everything)
🔌 Integrations: GitHub, GitLab, Slack notifications
💰 Pricing: $700-2,000/month (all-inclusive)
📊 Coverage: 100% critical flows in 1 week, 80% total coverage in 4 weeks

Perfect for: Startups and lean teams who want enterprise-level QA without the enterprise complexity.

Real user feedback: "Bug0 is the closest thing to plug-and-play QA testing at scale. Since we started using it at Dub, it's helped us catch multiple bugs before they made their way to prod." - Steven Tey, Founder of Dub

🔗 Website

2. Rainforest QA

Natural language test writing combined with AI automation and human testers for validation.

🤖 AI Approach: Automation + crowd-sourced human testing
🔧 Setup Time: 1-2 weeks
📚 Learning Curve: Low (write tests in English)
🔌 Integrations: GitHub, GitLab, Jira
💰 Pricing: ~$4,000-8,000/month

Best for: Teams who want fast feedback cycles with human validation.

🔗 Website

3. QASource

Dedicated offshore QA engineers with AI-enhanced workflows and reporting.

🤖 AI Approach: Human QA teams + AI optimization tools
🔧 Setup Time: 2-4 weeks
📚 Learning Curve: None (they handle everything)
🔌 Integrations: Enterprise tools, custom reporting
💰 Pricing: ~$8,000-15,000/month

Best for: Mid-to-large companies who want dedicated QA teams without hiring internally.

🔗 Website

4. BugRaptors

Blends manual and automated testing using custom AI tools like RaptorGen and RaptorVision.

🤖 AI Approach: Custom AI tools + experienced QA teams
🔧 Setup Time: 2-3 weeks
📚 Learning Curve: None
🔌 Integrations: Custom integrations available
💰 Pricing: ~$5,000-10,000/month

Best for: Companies needing compliance reporting and audit trails.

🔗 Website

5. QA Wolf

Playwright-based end-to-end test coverage delivered as a fully managed service.

🤖 AI Approach: Playwright + AI maintenance + human oversight
🔧 Setup Time: 1 week
📚 Learning Curve: None
🔌 Integrations: Direct workflow integration
💰 Pricing: ~$5,000-9,000/month

Best for: Teams who love Playwright but want someone else to manage it.

🔗 Website

📊 Comprehensive Comparison Table

Tool	Category	GitHub Stars	AI Support	Setup Time	Learning Curve	Monthly Cost Range	Best For
Playwright	Test Framework	65,000+	❌	1-2 weeks	Medium	$5,000-10,000*	Modern apps, technical teams
Cypress	Test Framework	46,000+	❌	1 week	Low	$5,000-10,000*	Frontend-heavy teams
Selenium	Test Framework	30,000+	❌	2-3 weeks	High	$8,000-15,000*	Enterprise, legacy systems
TestCafe	Test Framework	10,000+	❌	1 week	Low	$5,000-8,000*	Simple testing needs
Nightwatch	Test Framework	12,000+	❌	1-2 weeks	Medium	$6,000-10,000*	Selenium users wanting simplicity
BrowserStack	Cloud Platform	N/A	❌	1-2 hours	Low	$350-2,400/year	Scaling existing tests
LambdaTest	Cloud Platform	N/A	❌	1 hour	Low	$180-700/year	Budget-conscious teams
Sauce Labs	Cloud Platform	N/A	❌	2-3 hours	Medium	Custom pricing	Enterprise compliance
TestingBot	Cloud Platform	N/A	❌	1 hour	Low	$600-2,400/year	BrowserStack alternative
Autify	AI QA Tool	N/A	✅	30 min	Very Low	$2,000-4,000	No-code test creation
Functionize	AI QA Tool	N/A	✅	2-3 hours	Low	$5,000-10,000	English-to-test conversion
Testsigma	AI QA Tool	N/A	✅	1-2 hours	Low	$1,500-3,500	Multi-platform testing
Qase	AI QA Tool	N/A	✅	1 hour	Low	$1,000-2,500	Test management & reporting
Mabl	AI QA Tool	N/A	✅	2-3 hours	Medium	$3,000-6,000	Testing + performance monitoring
BlinqIO	AI QA Tool	N/A	✅	30 min	Low	$500-3,000	Playwright + AI assistance
Bug0	QA-as-a-Service	N/A	✅	Instant	None	$700-2,000	Lean teams, full coverage
Rainforest	QA-as-a-Service	N/A	✅	1-2 weeks	Low	$4,000-8,000	AI + human validation
QASource	QA-as-a-Service	N/A	✅	2-4 weeks	None	$8,000-15,000	Dedicated QA teams
BugRaptors	QA-as-a-Service	N/A	✅	2-3 weeks	None	$5,000-10,000	Compliance & reporting
QA Wolf	QA-as-a-Service	N/A	✅	1 week	None	$5,000-9,000	Managed Playwright service

Framework costs include engineering time (1 QA engineer + infrastructure)

🚀 Getting Started: Your Action Plan

If you're starting from zero (no existing tests)

Small team (1-5 devs): Start with Bug0 or Autify for instant coverage
Want to learn: Playwright + GitHub Actions (invest 1-2 weeks)
No-code preference: Autify or Testsigma

If you have existing tests (need to scale)

Playwright/Cypress tests: Add BrowserStack or LambdaTest
Flaky tests problem: Try Mabl or Functionize for self-healing
Maintenance burden: Consider Bug0 or QA Wolf (managed Playwright)

If you're enterprise (compliance, large team)

Build in-house: Playwright + Sauce Labs + dedicated QA team
Outsource: Bug0, QA Wolf, QASource or BugRaptors
Hybrid: BrowserStack + Bug0 enterprise plan

🔍 Common Pitfalls (And How to Avoid Them)

❌ Starting too big

Don't try to test everything on day one. Pick 3-5 critical user flows and perfect those first.

❌ Ignoring flaky tests

One flaky test will make your entire team ignore test failures. Use tools with built-in flaky test detection.

❌ Testing the wrong things

Focus on user workflows that generate revenue: signup, purchase, core product features. Skip testing your 404 page styling.

❌ Over-engineering

You don't need 100% code coverage. You need 100% critical flow coverage. There's a big difference.

❌ No clear ownership

Decide upfront: who fixes broken tests? Who adds new tests for features? Who reviews test results?

📈 ROI Timeline: What to Expect

Week 1-2: Setup & Learning

Investment: High (time/money)
Value: Zero (you're still learning)
Common reaction: "This is harder than I thought"

Month 1-3: Building Momentum

Investment: Medium (adding tests, fixing issues)
Value: Low (catching some bugs)
Common reaction: "Starting to see some value"

Month 3-6: Hitting Stride

Investment: Low (maintenance only)
Value: High (preventing major bugs)
Common reaction: "How did we ship without this?"

Month 6+: Compound Benefits

Investment: Very low (mostly automated)
Value: Very high (fast deploys, confidence)
Common reaction: "QA is our competitive advantage"

Real numbers: Teams typically see positive ROI within 3-4 months, with bug detection improving by 60-80% in the first year.

🤔 FAQ: Developer Questions Answered

Q: How do I convince my team to invest in E2E testing?

A: Start with data. Track these metrics for 2 weeks:

Hours spent fixing production bugs
Customer complaints about broken features
Deployment delays due to manual testing

Then present the cost: "We spent 40 hours last month fixing bugs that E2E tests would have caught. That's $6,000 in engineering time."

Q: What's the difference between unit tests and E2E tests?

A: Unit tests check individual functions work. E2E tests check that your entire application flow works from a user's perspective. You need both, but E2E tests catch integration issues that unit tests miss.

Q: How many E2E tests should we have?

A: Start with 10-15 tests covering your most critical user flows:

User signup/login
Core product workflows
Payment/checkout process
Critical admin functions

Add more gradually. 50-100 tests is plenty for most applications.

Q: Should we test in staging or production?

A: Always test in staging first. Some teams also run smoke tests in production, but your comprehensive suite should run against staging environments that mirror production.

Q: How do we handle dynamic content in tests?

A: Use data attributes (data-testid="submit-button") instead of CSS classes or text content. Most modern tools also have smart waiting strategies that handle dynamic loading.

Q: What about mobile testing?

A: Start with responsive desktop testing (mobile viewport sizes). Add real device testing later if you have mobile-specific features or notice desktop tests don't catch mobile bugs.

🎯 The Bottom Line

The QA landscape in 2026 offers something for every team:

No budget, high technical skill: Playwright + GitHub Actions
Small budget, want simplicity: Bug0 or Autify
Medium budget, scaling existing tests: BrowserStack + current framework
Large budget, enterprise needs: Sauce Labs or QASource

The key insight: you don't need perfect tests on day one. You need reliable tests for your critical flows. Start small, ship with confidence, and iterate.

AI has fundamentally changed the game. Tools that required months of setup now work in hours. Tests that broke with every UI change now self-heal. The barrier to comprehensive QA has never been lower.

My recommendation: If you're reading this and don't have E2E tests yet, pick one tool from this list and start this week. Your future self (and your users) will thank you.

What's your experience with E2E testing? Which tools have worked best for your team? Share your thoughts in the comments below! 👇

Introducing LearnEase - an AI Learning Platform for People in Tech

Unclebigbay — Tue, 25 Apr 2023 18:07:34 +0000

Excited to announce my latest and first AI project - LearnEase. It's a learning platform powered by AI that enables you to effortlessly learn any concept using simple technical language.

Demo 📺

How it works 🧑‍💻

Learning a new concept can be challenging, especially when it involves complex topics. That's why LearnEase is here to help. With LearnEase, you can easily define any concept you're interested in learning, and it'll provide you with a simple technical explanation of what you want to learn.

Click on any of the prompt suggestion buttons or enter what you wish to learn then click the "GENERATE" button as shown below.

The AI response framework of LearnEase AI entails the following:

A definition of the concept you're interested in learning 🤖

The AI provides you with clear definitions of any concept you want to learn 🤖
An analogy that breaks down the concept 🧑‍💻

But that's not all. LearnEase goes beyond providing definitions. It also includes an analogy section that breaks down the concept into more understandable terms, making it easier for you to relate to it. Additionally, it also provides you with real-world applications of the concept to help you understand how it can be used in practical scenarios.
A real-world application of the concept 💼

To make learning more fun and engaging, LearnEase also suggests fun projects to help you practice the concept. This way, you can apply what you've learned and solidify your understanding of the concept.
Fun projects to help you practice the concept 🌟
Recommendations on what to learn next 🤔

After you've learned the concept, LearnEase provides recommendations on what to learn next. This way, you can keep building on your knowledge and exploring related topics.
A wrap-up summary 🎁

Finally, LearnEase wraps up with a summary of what you've learned. This way, you can easily recall the key points of the concept and have a quick reference for future use. With LearnEase, learning new concepts has never been easier or more enjoyable.

You can also share your feedback on any response on their usefulness.

White Board Menu 🚥

The whiteboard menu provides options such as switching focus mode, saving and deleting the AI-generated response, marking responses as favorites and regenerating the AI response.

Dashboard

The LearnEase dashboard provides access to various features such as creating a new whiteboard, viewing saved and favorite responses and checking your credit balance. The following demonstrates these functionalities:

Learning Personalization 🧑‍🏫

You can set the language and professional level preference to suit your learning needs.

Currently supported languages:

English (Default)
Spanish
Yoruba
Nigeria Pidgin
French

If you would like me to include more languages, please let me know in the comments section, and I will make sure to index them.

Classic Mode 💃

The LearnEase whiteboard is in focus 🧘🏽‍♂️ mode by default, you can turn on the classic mode from the whiteboard menu as demonstrated below.

Feedback from Beta Testers! 🌍

Here's what beta testers are saying!

It's on Product Hunt 🤸‍♂️

LearnEase has been listed on Product Hunt, and you're welcome to show your support by giving it an upvote. Check it out here.

It's open-source 🤩

LearnEase source code is available on GitHub as part of learning - feel free to read, review, or contribute to it in any way you see fit! Check it out here.

Don't forget to give it a star ⭐️

unclebigbay

@unclebigbay143

As promised, it's fully open source. Here's the link to the GitHub repo! 🤸‍♂️

dub.sh/learnease-gith…

10:23 AM - 25 Apr 2023

Wrapping Up 👋

Learn any topic on the go with LearnEase! It offers a seamless learning experience from anywhere, anytime. Start expanding your knowledge today!

Thank you for checking out LearnEase!

INTRODUCING InvoiceEase: The Simple Solution for Managing Invoices

Unclebigbay — Tue, 21 Mar 2023 14:50:46 +0000

I'm excited to share what I and @Adeyemo Peter have been working on for a while now- InvoiceEase.

What is InvoiceEase?

InvoiceEase is an invoicing tool designed to simplify and streamline the invoicing process for freelancers and small businesses. By providing an intuitive and easy-to-use platform, InvoiceEase helps users create and manage invoices more efficiently with a range of features, such as easy profile management, client management, and invoice management.

Demo 📺

%[https://youtu.be/W-nIyNmNshA]

Guide to Using InvoiceEase

Step 1: Create an account

Visit InvoiceEase to sign up for an account with either your Google or LinkedIn account.

Step 2: Onboarding

You'll be redirected to your dashboard which looks something like below. Follow the onboarding to-do guide widget to complete your onboarding.

Step 3: Update your profile

You can update your profile and logo from the settings page on your dashboard: The information provided on the profile page will be reusable while creating your invoices, so you won't repeat yourself each time.

If you're setting up your account for the first time. The onboarding wizard will guide you on what next as shown below:

Step 4: Add a payment method

Payment methods are means by which you want your client to pay you for your service while creating your invoice.

You can add the following payment methods:

Bank payment method
Paypal
Stripe (coming soon)

Please comment on this post if you have any payment method you'd want to see on InvoiceEase.

From your settings dashboard, click on the "Add payment method" button.

Next, select the payment method you'd like to add from the modal list.

and provide the required details in the form modal:

Lastly, your payment method will be displayed in the payment methods tab as shown below, where you can also manage them.

If you're setting up your account for the first time. You can now, proceed to add your client record to which you want to send an invoice.

Step 5: Add a client record

To add a new client record in InvoiceEase, simply click on the "Add New Client" option located in the sidebar. From there, you'll be prompted to fill out a form with the required information for the client.

Once you've added a client, you won't need to fill out their information again each time you create an invoice for them. The information you provide here will be readily available when you create an invoice for the client.

If you're setting up your account for the first time. The onboarding wizard will guide you on what's next in the onboarding.

The clients you add will be displayed on the Clients page of your dashboard. From there, you can easily manage and update their information as needed.

Step 6: Create an Invoice

Once you have updated your profile, added a payment method, and created a client's record, you are ready to start creating invoices for them.

To navigate to the page where you can create a new invoice, simply click on the "Create Invoice" option located in the sidebar, or click on the "+ New Invoice" button on your dashboard. This will take you to the new invoice page where you can start creating a new invoice for your clients.

On the invoice page, your profile logo will automatically appear as the default logo on the invoice form. However, you can also choose to update the logo for a specific invoice.

To get started, simply select the client you want to create the invoice for, followed by the invoice date and due date. Then, choose a payment method from the ones you've previously created in your settings, and fill out the items and amounts for the invoice as demonstrated below.

Click on the "Generate Invoice" button once you're done and wait for the invoice to be generated.

After successfully generating the invoice, you will be directed to the Invoice page, where you can view, manage, and download the invoice as needed.

Step 7: Managing Invoice

The invoices you create will be displayed on the Invoices page, as illustrated below.

To manage an invoice, simply click on the ellipsis icon located in front of the respective invoice on the Invoices page. From there, you can download the invoice, delete it, or update its status according to your needs.

Dashboard Widgets

The widgets on your dashboard provide valuable insights into your invoice statistics. They display information ranging from pending payments and total paid invoices to the amount earned for each currency, as well as your ten most recent invoices.

These components help you stay on top of your invoicing activities and give you a quick snapshot of your business finances.

Total Invoice Widget

The "Total Invoice" widget provides a quick overview of the total number of invoices you've created since you first created your InvoiceEase account. This count excludes any invoices that have been deleted.

This widget displays the total number of invoices you've created since you created your account excluding deleted invoices.

Awaiting Payments Widget

The "Awaiting Payments" widget on your dashboard displays the number of invoices that are currently awaiting payment, with the client name of the most recently created invoice displayed at the top.

Total Paid Invoice in Currency Widget

The "Total Paid Invoice in Currency" widget provides an overview of the total amount earned across all invoices in a specific currency. It helps you keep track of your earnings and provides valuable insights into the currencies in which you conduct business.

Recent Invoices Widget

The "Recent Invoices" widget on your dashboard displays the ten most recent invoices you've created, with the latest invoice appearing at the top.

This widget allows you to quickly access and manage your recent invoices by clicking on the ellipsis icon next to each invoice. From there, you can download, delete, or update the status of the invoice as needed.

Wrapping Up

In conclusion, InvoiceEase is an invoicing tool designed to simplify and streamline the invoicing process for freelancers and small businesses. It provides an intuitive and easy-to-use platform, helping users create and manage invoices more efficiently with a range of features such as easy profile management, client management, and invoice management.

The tool also offers an onboarding wizard to guide users through the initial setup process, and dashboard widgets that provide valuable insights into invoice statistics. Overall, InvoiceEase aims to make invoicing a hassle-free experience for freelancers and small businesses.

We Want to Hear Your Thoughts

We would greatly appreciate your thoughts and feedback on InvoiceEase. Whether it's about our site or product, we value your opinion and would love to hear from you.

You can leave a comment here or send me a direct message on Twitter (@unclebigbay143).

Thank you for taking the time to check out our launch. If you enjoyed our product, we would be grateful if you could share your feedback and give us an upvote on ProductHunt.

We hope to continue improving InvoiceEase and providing a better invoicing experience for freelancers and small businesses alike.

How to Add Horizontal Lines Before and After a Text in HTML

Unclebigbay — Mon, 28 Feb 2022 12:58:32 +0000

This article will guide you on how to add a horizontal line to the right and left side of a text as shown below:

if(busy){

Jump to complete code!

} else {

1. Create an HTML text tag.

In your HTML file create an h2 tag and give it a class name of hr-lines

<h2 class="hr-lines">PEACE</h2>

2. Adding the Left Line

We'll make use of the CSS :before pseudo-element to add a line to the left side of the text. Apply the code below to your CSS file:

.hr-lines:before{
  content:" ";
  display: block;
  height: 2px;
  width: 130px;
  position: absolute;
  top: 50%;
  left: 0;
  background: red;
}

From the above code, we're creating a new element with a height of 2px and width of 130px before the hr-lines element using the content property, then giving it an absolute position in order to move it around, we set the top to 50% to make it align with the text at the middle.

3. Set the `hr-lines` to relative

For the pseudo-elements to be applied to the target element, we must set the position of the element to a relative, this will make all the movement of the :before and :after be relative to the parent (text).

Add the following lines to your CSS files.

.hr-lines{
  position: relative;
}

Resulting output

We can fix this by setting the max-width and adding margin to the element.

.hr-lines{
  position: relative;
  /*  new lines  */
  max-width: 500px;
  margin: 100px auto;
  text-align: center;
}

We're setting the :before to the left side of the text by setting the left:0.

4. Adding the Right Line

We'll make use of the :after pseudo-element to add the right line.

Add the following lines of code to your CSS file to add the right line to the text.

.hr-lines:after{
  content:" ";
  height: 2px;
  width: 130px;
  background: red;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
}

We're setting the :after to the right side of the text by setting the right:0.

Final Output:

}

The Complete Code

index.html

<h2 class="hr-lines"> PEACE </h2>

<section>
  <div>
    <p>I wish for peace in Russia & Ukraine</p>
  </div>
<section>

index.css

.hr-lines{
  position: relative;
  max-width: 500px;
  margin: 100px auto;
  text-align: center;
}

.hr-lines:before{
  content:" ";
  height: 2px;
  width: 130px;
  background: red;
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
}

.hr-lines:after{
  content:" ";
  height: 2px;
  width: 130px;
  background: red;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
}

p{
  text-transform: uppercase;
  color: red;
}

section{
  display: flex;
  justify-content: center;
  align-items:center;
  gap: 1rem;

}

div{
  width: 500px;
    border: 1px solid #ccc;
  padding: 10px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.4;
}

Wrapping Up

I hope that this article will assist you in creating a text with horizontal right and left lines at some point in the future.

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.

Let's connect on

See you in the next article. Bye Bye 🙋‍♂️

How to build a Flash Title Notification with JavaScript

Unclebigbay — Sat, 05 Feb 2022 07:49:52 +0000

The user's attention is important. How do you call the attention of a user who is on another tab to your website?

In this article, you will learn how to implement a flash title using LinkedIn sample that looks like this 👇

When a user is on another tab, flash titles are useful for drawing their attention to the website as shown below.

You have probably seen a flash title on Facebook and some other websites when you have a new notification on their website.

So, let's get started with building your own flash title.

This article is in two parts, the HTML part, and the JavaScript part

1. The HTML Part

Create a new index.html and add the HTML5 boilerplate that I've created below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- SCRIPT -->
    <script src="index.js"></script>
</body>
</html>

A version with LinkedIn Favicon

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LinkedIn</title>
    <link rel="shortcut icon" href="https://static-exp1.licdn.com/sc/h/al2o9zrvru7aqj8e1x2rzsrca" id="favicon-ico">
    <link rel="apple-touch-icon" href="https://static-exp1.licdn.com/sc/h/2if24wp7oqlodqdlgei1n1520">
    <link rel="apple-touch-icon-precomposed" href="https://static-exp1.licdn.com/sc/h/eahiplrwoq61f4uan012ia17i">
    <link rel="apple-touch-icon-precomposed" href="https://static-exp1.licdn.com/sc/h/2if24wp7oqlodqdlgei1n1520"
        sizes="57x57">
    <link rel="apple-touch-icon-precomposed" href="https://static-exp1.licdn.com/sc/h/eahiplrwoq61f4uan012ia17i"
        sizes="144x144">
</head>

<body>

    <script src="index.js"></script>
</body>

</html>

Ensure to add a title tag to your script, because it is where the flashing notifications will be implemented.

2. The JavaScript part

Create an index.js or whateverfilename.js that you want. We will create a function that will change the title tag and toggle between the current page title and the new notification messages that you want to toast to the user.

We will be making use of the document.title to have access to the title tag text in the HTML document.

The code below will change the title of the page to the assigned string.

document.title = '1 new notification';

The output of the above code.

Let's move on!

The Flash Title Function

Create a flashTitle function. The function will accept two parameters, the pageTitle and the newTitle, then we will check if the current page title is the same as the pageTitle parameter, if they are the same, then we want to set the current page title to the newTitle parameter.

But if the current page title is not the same as the pageTitle parameter, then we want to display the pageTitle.

The code below is the translation of the explanation given above.

function flashTitle(pageTitle, newTitle) {
  if (document.title == pageTitle) {
    document.title = newTitle;
  } else {
    document.title = pageTitle;
  }
}

Calling the flashTitle function at this point will only display the pageTitle parameter, you will need the toggle effect.

The Toggle Effect

The toggle effect adds the continuous swap of the page title and the new notification message, the toggle effect will be implemented using the setInterval() method.

The setInterval() method is used to call a function continuously at a specified time (in milliseconds), and its syntax is shown below

setInterval(functionNameWithoutBracket, NumberOfIntervalInMiliseconds);

We can call the flashTitle function to run at an interval of 1500 milliseconds.

setInterval("flashTitle('LinkedIn', '(18) New Feeds | LinkedIn')", 1500);

The double quotation is required because we are passing arguments to the flashTitle function, and setInterval does not require a parenthesis for a callback function

The Flash Title

The JavaScript Complete Code

Below is the complete code snippet for the flash title JavaScript part.

function flashTitle(pageTitle, newTitle) {
  if (document.title == pageTitle) {
    document.title = newTitle;
  } else {
    document.title = pageTitle;
  }
}

setInterval("flashTitle('LinkedIn', '(18) New Feeds | LinkedIn')", 1500);

Using Ternary Operator

We can replace the if statements with the ternary operator as well.

function flashTitle(pageTitle, newTitle) {
  document.title == pageTitle
    ? (document.title = newTitle)
    : (document.title = pageTitle);
}

setInterval("flashTitle('LinkedIn', '(18) New Feeds | LinkedIn')", 1500);

Kudos, you have successfully learned how to implement a flash title to a web application using JavaScript.

Conclusion

Flash titles are very useful to alert the user of their new notifications when they are away on another website, and in this article, we have learned how to implement a flash title notification using JavaScript.

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.

Let's connect on

See you in the next article. Bye Bye 🙋‍♂️

If you found my content helpful and want to support my blog, you can also buy me a coffee below, my blog lives on coffee 🙏.

Automate your GitHub pull requests with a PR Questionnaire Template

Unclebigbay — Thu, 06 Jan 2022 10:17:57 +0000

Pull request is a means of submitting contributions to fix a bug or add a new feature to a publicly accessible project or a private project you've been granted write access to.

A good pull request should answer what the pull request does, why the pull request is needed, and how the pull request can be tested.

Pull request is the summary of the 1 liner or 200k lines of code you're adding to the repository, this summary will enable the maintainer to understand what changes you're making, why you're making the change, and what approach you're taking to make the changes.

As a contributor, you should always have in mind that your pull request must answer the WHAT, WHY, and HOW of the changes you are requesting to be added to the project.

But how do you do that?

In this guide, you will learn how to set up a Pull Request Questionnaire Template that will help you and your team have a standard and uniform pull request throughout your project.

This questionnaire will pop up for each of the new pull requests that are being opened on the repository

Step 1:

🔵 Create a pull_request_template.md file

You can create a pull_request_template.md file directly on GitHub or on your local branch.

Step 2:

🔵 Create your pull request questionnaire template.

These are questions you will like the contributors to answer for each pull request.

You can edit the markdown sample below to suit your project preference.

# What does this PR do?

xxx

# Why this PR?

xxx

# How did you get it done?

xxx

# Screenshots (if appropriate)

xxx

# How can this be tested?

xxx

Click on the commit changes when you're done.

Congratulations!!! you have successfully added a pull request questionnaire for every pull request on your project repository.

Conclusion

You have learned from this article how to create a pull request questionnaire template for your GitHub repositories.

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.

Let's connect on

See you in the next article. Bye Bye 🙋‍♂️

Turning My 2021 Hashnode Tech Awards into NFTS - A walkthrough of how I did it

Unclebigbay — Mon, 03 Jan 2022 09:05:42 +0000

So, After reading How To Mint an NFT - A Step-by-Step Guide To Creating Your First NFT by @Favor Onuoha, I decided to Mint my Hashnode award badges as my first NFT and I will be showing you how I did it.

I don't know if that's actually a good idea, but who cares, that's what I feel like minting.

Minting simply means to create something new on the blockchain, so in this article, you will experience how I created my first ever NFT on the blockchain.

Let's get started.

I will be making use of metamask and opensea

What is Metamask

balance/authentication/authorization

In case you are hearing about MetaMask for the first time, MetaMask is basically a cryptocurrency wallet holder that allows you to interact with your Ethereum blockchain wallet account and can be used to connect to other blockchain applications.

Meta mask is available for iOS/Android devices and browser extensions, click here to get yours up and running.

Keep your security phrase and password safe like your life depends on it, there's no reset phrase (password) like web2.

What is OpenSea

OpenSea is an online marketplace for non-fungible tokens (NFTs). It was founded by Devin Finzer and Alex Atallah in New York on December 20, 2017.

OpenSea has been around for a very long time, thanks to the Web3 and NFTs popularity explosion, we get to know about it now.

It is where buying and selling of NFTs take place, this is the Alibaba of web3, you can upload your images, music, documents, and any other thing you wish to mint on the blockchain.

Super happy to be minting my badges there, maybe someone will actually buy them, but I am not selling 🤪

Setting up OpenSea Account

I head to opensea.io and click on the create button.

There are several wallet options to connect with, but MetaMask is the most popular and that's what I already installed.

The MetaMask browser extension pops up immediately after selecting the MetaMask provider option.

Click on the Next button.

Now you can be authenticated on the OpenSea marketplace, hit the connect button.

Sometimes you will see the sign button instead.

And that's it, I'm in, we're in the OpenSea market.

This is my OpenSea dashboard.

But I'm unclebigbay and not unnamed, it makes sense because my blockchain wallet doesn't carry a username in my profile object for OpenSea to retrieve from, web3 only cares about my wallet address.

Hover on the user profile avatar on the navbar and select the setting link to update your profile on OpenSea.

Fill in your profile details and hit the save button.

Profile updated.

Minting My Badges

The business of the day, which is to mint my hashnode badges, you can check out the awards on LinkedIn if you haven't seen them yet.

Create NFT

Click on the create navigation link on the navbar.

NFT profile

The two required detail of the new NFT you want to mint is the document you want to upload, check the supported document first, and the name of the NFT.

I will be providing an external link to redirect to my hashnode badge page and a short description of the awards.

I will be skipping the rest of the forms since I won't be selling my award badges 🤪.

Click on the create button to submit the NFT.

Done and Dusted

Congratulations to me and you, we just successfully minted my very own first NFT together.

You can view my Hashnode award NFT badges HERE on OpenSea Marketplace.

Takeaways

Minting your awards, documents, or any asset that you own as demonstrated in this walkthrough article guarantees ownership of a unique digital asset. You can mint-supported digital assets such as JPG, PNG, GIF, SVG, MP4, WEBM, MP3, WAV, OGG, GLB, GLTF, with a max size of 100 MB on OpenSea.

Sounds cool, right? You can go ahead and mint yours using the step-by-step guide in this article.

Conclusion

I will be minting one of my articles very soon.

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.

Let's connect on

See you in the next article. Bye Bye 🙋‍♂️

Introduction to JavaScript Again?

Unclebigbay — Tue, 07 Dec 2021 10:22:56 +0000

Hello buddy 👋 , It actually took me a while to understand what to learn first in JavaScript and how to get started, and if you're in the same shoe right now, then this article is for you.

In this episode, I will be introducing you to JavaScript, what to expect and how to get started as a JavaScript developer.

Prerequisites

Before you continue with this introductory article, ensure you:

Have a working knowledge of HTML and CSS
Else check out the Skeleton of HTML, CSS and JavaScript

Because you will always see HTML, CSS, and JavaScript.

What is JavaScript

JavaScript is basically a programming language for the web, you can see JavaScript as the official language for web development and the only programming language that allows you to build frontend applications (web interface), backend applications (server+database) down to mobile applications, and machine learning.

This definition only means one thing, and it's that JavaScript knowledge can be applied in multiple fields, and their application also follows the same patterns.

Why Learn JavaScript?

Imagine a website showing the same profile information for every logged-in user, or a button not responding to the action it's labeled, these are properties of static web pages, and a static webpage does not interact with the user because they lack little or no JavaScript (programming).

With JavaScript we can add actions to our web pages, we can define what should happen when a button is clicked or a specific action is being taken or triggered on a web application.

What is a Static Webpage?

A static webpage inherently displays hardcoded contents from the HTML file that won't change based on any user actions.

The contents of the dashboard above can only be updated from the HTML document and not based on the currently logged-in user.

What is a Dynamic Webpage?

A dynamic webpage interacts with the user through triggered actions and a set of conditional rules, the contents of a dynamic web page change based on events and conditions.

The username and profile image are dynamic, which means the dashboard contents change each time a new user logs in.

Getting started with JavaScript

There are a few concepts you should be aware of in order to start creating interactive applications with JavaScript, these concepts are important whether you're interested in using JavaScript for frontend or backend development, mobile applications, or any other area that JavaScript can be applied.

Below are a few concepts you should learn first when learning JavaScript.

1. Learn JavaScript Data Types

Data types are basically the data that can be legally used in JavaScript or any specific programming language.

Just as we have A, B, C to Z as alphabets, and digit 0 to 9 as numerics, similarly JavaScript has a name for each of its acceptable data, which includes a string, number, array, object, undefined, null, and boolean, they are referred to as data types.

The difference between the data types in JavaScript is their syntax, structure, and the operations you can perform with them.

It is important to understand how each of these data types works in JavaScript so that you won't end up performing an addition operation on A, B, C alphabets instead of 0 to 9 numbers.

Learn more about JavaScript data types on w3schools
Check out JavaScript Syntax Profile

2. Learn JavaScript Variables

Variables are like containers that can hold items for later use, we use variables to store any data type in JavaScript so that we can make reference to them later in our code.

A variable can only hold one data type at a time.

Learn more from Generations of JavaScript Variables article

2.1. Variable Declaration

Variable declaration in JavaScript is all about booking a space (allocating memory) for a data type or value that you're not ready to store yet, it's basically an act of keeping a container to keep a cube of sugar that you're yet to purchase.

There are three major techniques in which variables are created in JavaScript that you need to know, these techniques determine what operation or rules you want to allow for a particular variable you're declaring.

Variable keyword declaration technique includes:

The var keyword
The const keyword, and
The let keyword

2.2. Variable Initilization

Since variable declaration is the act of keeping space for later use, then variable initialization is the process of assigning or putting the value you're keeping the space for into the declared variable, which then means our container is not empty anymore.

Check out the Generations of JavaScript Variables for full explanations.

3. Learn JavaScript Scope

The term Scope in JavaScript refers to the current context of code, and it determines how variables can be referenced or accessed in the code.

There are 3 main types of JavaScript scopes, which includes:

Global scope
Local scope/function scope, and
Block scope

These 3 scopes provide ways to either secure a variable from being accessed outside or within a particular scope.

You can learn more about JavaScript scope from Mr. @Tapas Adhikary JavaScript Scope Fundamentals with Tom and Jerry

4. Learn JavaScript Functions

JavaScript functions are like procedures, they contain a set of instructions to be executed or invoked (called) when an event is been triggered.

Functions are capable of accepting inputs and generating output based on the logic in the function.

There are two types of JavaScript functions:

1. Regular function (ES5)

This is the default method of writing functions in JavaScript.

2. Arrow function (ES6)

JavaScript arrow functions came with the release of ECMAScript 2015, also known as ES6, arrow function has a concise syntax and it has some unique features that make it the favorite of several Javascript developers.

Do not bother much about arrow functions if you're still very new to it, you will figure the difference as you code more.

Learn more about the difference between regular functions and arrow functions

5. Learn JavaScript Hoisting

Hoisting is the next concept to learn when you're done with learning variables scope in JavaScript.

Hoisting is a JavaScript mechanism where variable declarations are moved to the top of their scope before code execution.

This concept will expose you to how JavaScript handles variables in each scope before execution, JavaScript basically moves all the declared variables to the top of every scope whether global or local scope.

You need to know-how var, const, and let works to understand this concept better.

Here is a detailed article to help you understand Variable Hoisting in Javascript by @Vivek Sharma

6. Learn JavaScript Closures

The JavaScript closure is basically a function inside of another function and this gives the inner function the ability to have access to the variable in the outer function.

Learn about JavaScript closures here

7. Learn JavaScript Callback functions

A callback is any function that is being passed to another function as an argument (input) and is executed later.

Learn callback here

8. Learn JavaScript Array and Array Methods.

Array is one of JavaScript's data types that you cannot do without when you're convenient with variables and have a grasp of how functions works then you can proceed to learn JavaScript Arrand its methods.

An array is also a container that can hold items, but unlike a variable that only holds a single data type at a time, the array data type on the other side can store as many collections of different data types at a time.

9. Learn JavaScript Fetch.

Chances are you will not be working with static data forever, learning JavaScript fetch will enable you to interact with backend APIs and perform some HTTPS calls.

Learn JavaScript fetch

10. Learn JavaScript Promises and Async/Await.

While working with Fetch or backend generally, you need a way to resolve failure or success calls from the backend, which might take a while to arrive.

The JavaScript promises is a technique of handling asynchronous operations in JavaScript.

Check out JavaScript Promises - Explain Like I'm Five by @Tapas Adhikary
JavaScript async and await - in plain English, please by @Tapas Adhikary

11. Learn DOM manipulation

The Document Object Model is used to access HTML elements in JavaScript, this concept allows us to interact with the HTML elements directly from the JavaScript code.

DOM can be used to modify the text, color, background color, and other HTML element properties using JavaScript.

You can learn more about DOM manipulation from here

12. Build Projects

The best way to know you've really understood a concept is by implementing those concepts in a project. Ensure to apply all these concepts in a side project as your learning continues.

JavaScript projects you can work on.

Todo list.
Count down.
Tic Tac Toe.
Pong game.
Vanilla JavaScript stopwatch.
JavaScript clock.
JavaScript calculator.
A Quiz Application
A Game Application
Music App.
File Converter.
Interactive Map.

These projects will help you to make use of the JavaScript concepts that you've learned, you can proceed to build more advanced projects with JavaScript when you're convenient understanding how these applications work.

Conclusion

This article covers the important basics of JavaScript that are essential for you to know before proceeding to any of the JavaScript frameworks, I hope this article has helped you to know some concepts to focus on more in JavaScript.

See you in the next one.

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.

Let's connect on

See you in the next article. Bye Bye 🙋‍♂️

Data Visualization with Chart.js

Unclebigbay — Tue, 30 Nov 2021 08:21:41 +0000

Hello my gorgeous friend on the internet, I have written this article specially for you to guide you on how to get started with data visualization using chart.js.

Shall we?

Introduction
What is Chart.js
Getting Started with Chart.js
Bar Chart
Line Chart
Pie Chart
Conclusion

Prerequisites

Before you continue with this tutorial article, you should:

Have working experience with JavaScript
Know the basics of HTML attributes such as an id and class
Have a code editor (I will be using VSCode )

Introduction

One of the most important features that a developer should be able to implement on a web application is a diagrammatic representation of data, which allows users to have a clear visual of data on a website.

Whether it's financial data, page view analytics, or statistics of items, which are mostly found on the dashboard.

In this tutorial article, we'll learn how to make use of *chart.js * to create a visual representation of data in JavaScript.

Demo

You can check out the demo of what we will be building together in this article here.

Or watch the demo video below.

What is Chart.JS?

Chart.js is an open source JavaScript library that is used for data visualization that supports up to eight different charts including the bar chart, line chart, area chart, pie chart, bubble chart, radar chart, polar chart, and scatter chart.

For this tutorial, we will be focusing on the bar chart, line chart, and pie chart, and at the end of this article, you will learn how to implement these three charts.

Getting Started with Chart.js

There are three major ways of adding chart.js to your project:

1. Through Package Manager (Highly recommended)

You can install Chart.js through npm, yarn, or any other package manager installer for your Node, React, Vue, Angular, or any other supporting frameworks.

2. Through CDNJS (Recommended)

Another way of adding chart.js to a project is through the Content Delivery Network, which means all the built files of chart.js can be accessed directly from the cdnjs or jsDelivr.

3. Through GitHub (Less recommended)

Chart.js is an open source project, which means you can download the latest version of chart.js directly from GitHub here, but this method requires you to fork, clone, build and test the chart.js before getting it to work on your machine, this method is way too tedious.

In this tutorial, we will be making use of the cdnjs method to add chart.js to our project, you can always try out other methods on your own using this guide.

How Chart.js Works in HTML

In this section, I will lay out how chart.js works and explain the minimum things you need to set up a chart with the chart.js library.

I will break this section down into two parts; The HTML part and The JavaScript part.

The Html Part:

This part involves importing the chart.js cdn link into your html document and setting up a <canvas> html tag.

The <canvas> html tag is used to draw graphics on a web page using JavaScript, now you understand why there are two parts to cover when working with chart.js.

1. Import chart.js cdn in your HTML document.

You can get the latest version of chart.js from here.

<!-- Chart.js Script -->
<script src="Chart-cdn-goes-here"></script>

2. Specify where you what to display the chart in your HTML document, also note that it is very important to wrap the canvas tag inside of a container, as the canvas tag needs the parent container to make the chart responsive, we will address this issue later in this guide.

The canvas id will be used later to make reference to the canvas element in the JavaScript part.

<section class="chart-wrapper">
  <!-- chart canvas -->
  <canvas id="chart-name"></canvas>
</section>

The JavaScript Part

Welcome to the JavaScript part, there are a couple of things that are common and important when working with any chart in chart.js, this includes;

The canvas reference to display the chart.
The chart configuration.
- The chart type.
- The chart labels, the horizontal labels of the chart.
- The chart datasets.
- The chart data, the vertical labels of the chart.
- The chart label, which is the title or name of the chart.
The chart instance, which is needed to initiate a new type of chart.

Let me show you the code.

// 1. The canvas reference to display the chart.
const chartCanvas = document.getElementById('chart-canva').getContext('2d');

// 2. The chart configuration.
const config = {
  type: 'bar', // chart type
  data: {
    // The chart labels, the horizontal labels of the chart.
    labels: ['label-1', 'label-2', 'label-3', 'label-4', 'label-5'],

    // The chart datasets
    datasets: [
      {
        // The chart data, the horizontal labels of the chart.
        data: [67.7, 63.1, 54.7, 44.1, 40.2],

        // Chart label
        label: 'Chart Label',
      },
    ],
  },
  // Canvas are not responsive by default
  options: {
    responsive: true,
  },
};

// 3. The chart instance, which is needed to initiate a new type of chart.
const newBarChart = new Chart(chartCanvas, config);

The getContext('2d') gives us access to the 2D drawing on the canvas HTML tag, this configuration is optional and document.getElementById('chart-canva') is enough.

The code above will produce the output below:

And that's not responsive, the canvas tag is not responsive by default, and we might need a small size chart for our application, the chart.js has a configuration option named responsive, which you need to set to true for the chart to resize when the parent container or element resizes, this will make the chart take the width and height of its parent element.

The methods below do not work 😢

<canvas width="50vw" height="50vh"></canvas>
<canvas style="width: 50vw; height: 50vh;"></canvas>

The code below demonstrates how to make your charts in chart.js responsive.


<section class="chart-wrapper">
   <!-- chart canvas -->
   <canvas id="chart-name"></canvas>
</section>

<style>
   .chart-wrapper {
      position: relative;
      width: 50vw;

      /* align at page center*/
      margin: 0 auto;
   }
</style>

The chart wrapper position should be set to relative for the chart to be responsive with the container across different sizes.

Now we have a responsive bar chart.

So far, working with chart.js is not as difficult as it seems, right? All you need to get started with any type of chart are what has been demonstrated above, you can go ahead and change the type of chart to line, pie, or any other type of chart.

And you should have the corresponding charts displayed on your screen.

The chart label will be undefined if the label is not set as shown below.

Down to this point, we have learned the concepts to build any type of chart using chart.js and with these concepts at your reach, you will be able to handle any chart in chart.js.

In the next section, we'll use a real-world use case of charts to visualize data and also add styles to our not-so-cute charts.

Task

Let's apply what we've learned to a real-world scenario: Our task is to display the most popular technologies from the 2020 Stack Overflow Developer Survey results using a Bar Chart, Line Chart, and Pie Chart.

Result of the Most Popular Technologies Survey.

Technology	Vote Percentage
JAVASCRIPT	67.7%
HTML/CSS	63.1%
SQL	54.7%
PYTHON	44.1%
JAVA	40.2%

We won't go into detail about the CSS part of the solution because this tutorial is focused on building charts with the chart.js JavaScript library.

Copy and paste the HTML and CSS code below as a starter kit, most CSS styles are just to make our page look more attractive.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./chart.css">
    <title>Getting Started with chart.js</title>
</head>

<body>

    <!-- HEADER SECTION -->
    <header>
        <!-- NAVBAR SECTION -->
        <nav>
            <a href="" class="nav-links read-guide">Read Guide</a>
            <div class="nav-right">
                <a href="#bar-chart" class="nav-links">Bar Chart</a>
                <a href="#line-chart" class="nav-links">Line Chart</a>
                <a href="#pie-chart" class="nav-links">Pie Chart</a>
            </div>
        </nav>
        <!-- HERO SECTION -->
        <section class="hero">
            <h1 class="hero-text">Getting Started with Chart.js <br /> (DEMO)</h1>
        </section>
    </header>

    <main>
        <!-- Charts goes in here -->
    </main>

    <footer>
        <h2>Design with 🧡 by <span>UNCLEBIGBAY</span></h2>
    </footer>


    <!-- Chart.js Script -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"
        integrity="sha512-GMGzUEevhWh8Tc/njS0bDpwgxdCJLQBWG3Z2Ct+JGOpVnEmjvNx6ts4v6A2XJf1HOrtOsfhv3hBKpK9kE5z8AQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <!-- Bar Chart Script -->
    <script src="./bar-chart.js"></script>
    <!-- Line Chart Script -->
    <script src="./line-chart.js"></script>
    <!-- Pie Chart Script -->
    <script src="./pie-chart.js"></script>
</body>

</html>

Create the following files: chart.css, bar-chart.js, line-chart.js, and pie-chart.js, we will be writing our code in them very soon.

Open your chart.css file and put the CSS code below inside.

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

* {
  margin: 0;
  box-sizing: border-box;
}

:root {
  --primary-color: #0b0d60;
  --app-white: #ffffff;
  --bar-chart-bg: #3a0ca3;
  --line-chart-bg: #560bad;
  --pie-chart-bg: #7209b7;
}

html {
  scroll-behavior: smooth;
}

body {
  line-height: 1.3;
  font-family: 'Ubuntu';
  background-color: var(--pie-chart-bg);
}

header {
  padding: 0.9rem;
  background-color: var(--primary-color);
  height: 100vh;
}

/* FIX THE NAVBAR ACROSS ALL SECTIONS */
nav {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav-links.read-guide {
  opacity: 1;
  font-size: 22px;
  margin-bottom: 0.6rem;
  text-decoration-line: unset;
  opacity: 0.7;
}

.nav-links.read-guide:hover {
  opacity: 0.9;
}

.nav-right {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.nav-links {
  padding: 0.5rem;
  color: #fff;
  text-decoration: none;
  opacity: 0.9;
  font-size: 1.1em;
  font-weight: 600;
  transition: 0.5s;
  text-decoration-line: underline;
  text-underline-offset: 10px;
}

.nav-links:hover {
  opacity: 1;
  text-underline-offset: 12px;
}

/* HERO SECTION */

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
}

.hero-text {
  color: #fff;
  font-size: 48px;
  line-height: 1.5;
}

/* CHART SECTION */

.chart-section {
  height: 100vh;
  padding-top: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chart-wrapper {
  width: 95%;
  background-color: white;
}

.chart-heading {
  font-size: 38px;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--app-white);
  opacity: 0.8;
}

.chart-section.bar-chart {
  background-color: var(--bar-chart-bg);
}

.chart-section.line-chart {
  background-color: var(--line-chart-bg);
}

.chart-section.pie-chart {
  background-color: var(--pie-chart-bg);
}

/* FOOTER */
footer {
  text-align: center;
  color: var(--app-white);
  padding: 2rem;
  font-size: 12px;
  opacity: 0.8;
}

footer span {
  font-weight: 900;
}

@media (min-width: 900px) {
  header {
    padding: 1rem 0.9rem;
  }

  nav {
    padding: 0 2rem;
    flex-direction: row;
  }

  .nav-links.read-guide {
    margin-bottom: 1rem;
  }

  .nav-right {
    width: 40%;
  }

  /* HERO SECTION */
  .hero {
    height: 80vh;
  }

  .hero-text {
    font-size: 48px;
    line-height: 1.6;
  }

  /* CHART SECTION */
  .chart-wrapper {
    width: 55vw;
  }

  .chart-heading {
    font-size: 48px;
  }
}

Save your files, and open the chart.html on your browser, your starter template should look something like this.

Building Bar Chart in Chart.js

In this section, we will be creating a visual of the survey result in a bar chart using the concept we've learned from the previous section.

Create a section for the bar chart in the chart.html file as shown below.

<!-- BAR CHART SECTION -->
<section class="chart-section bar-chart" id="bar-chart">
    <h2 class="chart-heading">Bar Chart</h2>
    <div class="chart-wrapper">
        <!-- chart canva -->
        <canvas id="js-bar-chart"></canvas>
    </div>
</section>

Our bar chart should look something like this at the end of this section.

The difference between the above bar chart and the basic bar chart is the different background color of the bars, the dark borders around the bars, the percentage (%) symbol of the data, and the label background color.

The chart.js library allows us to style anything we can see on the chart through the dataset object and not CSS, I will show you how in a bit.

The chart label will take the background color of the first data in the data array, which is the JavaScript yellow in the example given above.

Anything you see, you can style - Anonymous

Another tricky part is adding the percentage (%) symbol to the bar chart data on the vertical labels.

We won't do this, because it won't work.

{
 data: ["67.7%", "63.1%", "54.7%", "44.1%", "40.2%"]
}

Rather, we will be making use of a callback function to add the percentage (%) symbol to each of the data.

Adding Background Color to Chart.js

To add background colors to each of the data been represented on a chart.js chart, pass a backgroundColor property inside of the dataset as shown in bar-chart.js below.

{
  // Chart label horizontal
    labels: ['JAVASCRIPT', 'HTML/CSS', 'SQL', 'PYTHON', 'JAVA'],
    datasets: [
      {
        // Chart label
        label: 'Programming languages votes',
        // Chart data
        data: [67.7, 63.1, 54.7, 44.1, 40.2],
        // Chart data background color
        backgroundColor: [
          'yellow',
          'blue',
          'brown',
          'purple',
          'indigo',
          'gray',
        ],
      },
    ],
},

Ensure to import the bar-chart.js if you're not working with the HTML template.

The arrangement of the backgroundColor array must match the arrangement of the data array and the labels array.

This is what I mean.

JAVASCRIPT -> 67.7 -> yellow
HTML/CSS -> 63.1 -> blue
SQL -> 54.7 -> brown
PYTHON -> 44.1 -> purple
JAVA -> 40.2 -> indigo

And you can add borderWidth and borderColor to your chart like this.

{
    ...

   // Chart border styles
   borderWidth: 0.3,
   borderColor: 'black',
},

Adding Symbols to Chart.js Data

To add any symbol to data in chart.js, we need to define a callback function in the chart configuration option, which is defined as shown below.

 options: {
    scales: {
      y: {
        ticks: {
          callback: function (value) {
            return value + '%';
          },
        },
      },
    },
  },

The y represents the y-axis of the chart which is also the vertical side of the chart, where the chart data is been displayed.

The callback function gives us access to each of the values in the chart data array before they are been rendered to the UI and it returns the new format we define, which is to append the percentage (%) symbol to the data in this case.

I have created a gist here for the complete JavaScript code of the bar chart.

Building Line Chart in Chart.js

In this section, we will visualize the survey data in a line chart.

Our final line chart will look like this.

Create a new section for the line chart with a canvas tag, always remember to wrap the canvas tag with a parent element like below.

<!-- LINE CHART SECTION -->
<section class="chart-section line-chart" id="line-chart">
    <h2 class="chart-heading">Line Chart</h2>
    <div class="chart-wrapper">
        <!-- chart canva -->
        <canvas id="js-line-chart"></canvas>
    </div>
</section>

Now, copy and paste the code below into your line-chat.js file.

// Grab the bar chart canva
const lineChartContext = document
  .getElementById('js-line-chart')
  .getContext('2d');

// Creating a new chart instance
const newLineChart = new Chart(lineChartContext, {
  // Chart configuration
  type: 'line',
  data: {
    // Chart Label Vertical
    labels: ['JAVASCRIPT', 'HTML/CSS', 'SQL', 'PYTHON', 'JAVA'],
    datasets: [
      {
        // Chart lable
        label: 'Programming languages votes',
        // Chart data
        data: [67.7, 63.1, 54.7, 44.1, 40.2],
        // Chart data background color
        backgroundColor: ['yellow', 'blue', 'brown', 'purple', 'indigo'],
        // Chart border styles
        borderWidth: 0.3,
        borderColor: 'black',
      },
    ],
  },
  options: {
    responsive: true,
    scales: {
      y: {
        ticks: {
          callback: function (value) {
            return value + '%';
          },
        },
      },
    },
  },
});

The only differences between the code in bar-chart.js and the code in line-chart.js are the variable name and the chart type.

You should be more familiar with the code structure of the charts by now.

Building a Pie Chart in Chart.js

Finally in this section, we'll represent the survey result in a pie chart.

Create a new section for the pie chart in your html document like this.

<!-- PIE CHART SECTION -->
<section class="chart-section pie-chart" id="pie-chart">
    <h2 class="chart-heading">Pie Chart</h2>
    <div class="chart-wrapper">
        <!-- chart canva -->
        <canvas id="js-pie-chart"></canvas>
    </div>
</section>

Now Create a pie-chart.js file and copy-paste the code below.

// Grab the bar chart canva
const pieChartContext = document
  .getElementById('js-pie-chart')
  .getContext('2d');

// Creating a new chart instance
const newPieChart = new Chart(pieChartContext, {
  // Chart configuration
  type: 'pie',
  data: {
    // Chart Label Vertical
    labels: ['JAVASCRIPT', 'HTML/CSS', 'SQL', 'PYTHON', 'JAVA'],
    datasets: [
      {
        // Chart data
        data: [67.7, 63.1, 54.7, 44.1, 40.2],
        label: 'Programming languages votes',
        backgroundColor: ['yellow', 'blue', 'brown', 'purple', 'indigo'],
        borderWidth: 0.3,
        borderColor: 'black',
      },
    ],
  },
  options: {
    responsive: true,
    // Maintain the original canvas aspect ratio (width / height) when resizing.
    maintainAspectRatio: false,
  },
});

The code for the pie chart above is pretty much the same as the bar chart, and line chart implementation.

But the pie chart needs extra help to become fully responsive across all screen sizes, so we need to set the maintainAspectRatio to false in the configuration option to make it responsive across all screen sizes.

Without maintainAspectRatio property

With maintainAspectRatio set to false

Conclusion

Data presentation is an important element to have in a frontend application, and in this post, you learned how to use the chart.js library to create a bar chart, a line chart, and a pie chart.

With the knowledge gained from this post, you can use chart.js to work with more complex data.

Reference

If you are interested in learning more about charts, the resource below will help you to take data visualization with charts to the next level.

Chart.js Official Documentation

Creating your First CRUD Restful API with Node.JS and Hoppscotch

Unclebigbay — Sat, 20 Nov 2021 08:13:57 +0000

This full package tutorial is initially posted on Aviyel, an open source community, you can continue reading from the site to support their open source community. Click here to read on Aviyel

I will be doing a live demo of this project at @aviyel4 community on Sunday, you can RSVP the Event here

Hello, my gorgeous friend on the internet 👋,

If you're here and want to know how to build APIs, then you're most welcome, because, in this article, I'll show you the very importance of an API and how to create your first CRUD restful API using Node.JS, Express.js, and Hoppscotch.

Hey buddy, this is a project-based article, so ensure to stick till the end 😉.

What we will build

Straight to the point, we are building a Todo List Backend together!!!

The reason for this is that todo list is a popular web development project that you might be familiar with, and there's a good chance you’ve used one before or built a todo list interface with HTML, CSS, and JavaScript.

So in this article, we'll build a backend API for the popular Todo List project, and at the end of this article, you'll have a basic understanding of how API works and how to build your own APIs.

Prerequisites

But before we get started buddy, let's quickly address the following questions:

Do we really need APIs in our software?
Why are we making use of Node JS?
Why HoppScotch.io?
What are the CRUD operations?

1. Do we really need APIs in our Software?

Yes, my friend! We do; an API is a software communication and data exchange interface that allows two applications to communicate and exchange data. For example, a frontend application such as a todo list interface written in React.js, Vue.js, Angular, or Plain HTML, CSS, and JavaScript, can connect and exchange data (such as user information and logic) with a backend application API written in C#, Python, or Node.js.

One of my favorite importance of using an API for software development is that you can have multiple frontend interfaces for your project backends, such as a Web Version and a Mobile Version while making use of the same API and you don’t actually need to tamper with the frontend codebase when modifying the backend codebase or vice versa.

In this tutorial, we'll focus on building the backend of our todo list application, where we'll make use of Node JS to provide a todo list functionality to any frontend technology and all this will be tested using Hoppscotch while Harperdb will serve as our todo list database.

2. Why are we making use of Node JS?

You must have been using the console.log() and doing DOM manipulations in your JavaScript code like everyone else in the frontend on your browser, that's okay, that process is called the client-side, but you should know now that the backend application or our APIs does not run on the browser, it runs on the server-side, the question now is how do we execute JavaScript outside of the browser?

Node to the rescue!!!

Node or Node.js is an open-source JavaScript backend run-time environment that works outside a web browser, this means that with Node we can write and execute our JavaScript backend code on the server-side, and we can view our console.log on the Node environment.

Don’t be confused, I had demonstrated it somewhere in this article.

3. Why Hoppscotch?

While building a backend API, we sometimes need to test them in a simple way as possible without any frontend interface, this also allows us to catch bugs as early as possible before pushing to production, this also allows the developers which is us to work independently on the APIs until the frontend guys are ready to consume them.

But how do we achieve this? Through what is known as API testing tools, these tools are applications that allow us to test if our APIs functionalities are performing as expected before pushing them to production, and one of the good testing tools for API is the HOPPSCOTCH.

HOPPSCOTCH formally known as the POSTWOMAN is a free super light-weight, web-based, and a progressive web application that allows us to test our API endpoints at any time and from anywhere without any complex configurations.

HOPPSCOTCH is our official testing tool for this tutorial and we will be using it to test our Todo List APIs throughout this article, you can proceed to checkout how Hoppscotch works by pasting the emoji endpoint below in the Hoppscotch URL box and sending a GET request to the emoji-api endpoint or click here for a prefilled URL.

Cool 😎 isn’t it?

We got a response of a grinning-squinting-face 😆 from the emoji-API endpoint, Hoppscotch has just saved us the stress of writing JavaScript fetch() or axios() method.

Well-done buddy, you’ve now come a very long way already, let’s proceed to check out what the CRUD operation is all about, let’s go there🏃‍♀️!!!

Before you continue, Aviyel is partnering with Hoppscotch to scale open source projects within communities. You can consider continuing this article on Aviyel official website, to support their community. Click here to continue reading on Aviyel

4. What is the CRUD operations

The CRUD acronym stands for the four main types of SQL commands which are the Create, Read, Update, and Delete commands. These are considered important for the development of a continuous storage application.

This implies that the CRUD commands allows us to perform some basic operation that enables us to carry out help us to manipulate data in the database, these operation includes the following:

Creation of new records - Add To-do item
Reading of existing records - View all To-do items
Updating of an existing record - Update To-do item
Deletion of an existing record - Delete Completed To-do item

Hey buddy, now that we know about these technologies and what we’re going to build with them, tighten your seat belt as we’re going to implement the above operations in our todo list backend, Now!!!

Setting up your Node environment

In this section, we will be setting up the JavaScript runtime environment earlier on our computer, and to start with kindly ensure to have Node.js installed before you proceed with this section, you can get it installed quickly from here while I wait for you.

Note: You can also run node --version to check if you have the updated version installed already.

Welcome back, now that you’ve installed Node.js on your computer, follow the instructions below to get your Node.js project started.

Create a new folder and name it todo-list-backend,
Open your cmd or git bash,
Run npm install --global yarn
Then run yarn init
Ignore or provide answers to the questions in the command prompt like below

Note: You can choose to ignore the questions next time by running yarn init -y

Yarn is a faster alternative to NPM which is a package manager, that allows us to download packages through our cmd or git bash

Setting up the Server

Now that you have the runtime environment setup on your computer, let’s proceed to install a few more packages on our computer that will help get our server running

1. Install Express

Express is a Node.js framework that provides us with lots of fast features, if Angular is a JavaScript framework, then express is a node.js framework.

Run yarn add express to install express in your project.

2. Install Nodemon

Nodemon is a simple script monitoring package that helps us to automatically restart the runtime environment whenever there is a change in our project file, this is like an auto-refresh on a web browser.

Run yarn add nodemon to install nodemon in your project.

Open your package.json and add the following code to enable nodemon in your project.

"scripts": {
  "start": "nodemon index.js"
}

Your package.js should look something like below

3. Install Cors

Because API aids sharing of resources between two applications, we need to set up a mechanism called cors which allows sharing of resources from two different domains.

Run yarn add cors to install cors in your application

Hello, World Response

Welcome to the interesting part, to this point we are good to write our first endpoint and to test our setup, we will write an endpoint that responds with the popular Hello, world text to the caller.

Create an index.js file and copy-paste the code below inside.

// import express
const express = require("express");
const app = express();
// set your preferred server port
const port = 3000;
// root endpoint response
app.get("/", (req, res) => {
  res.send("Hello, World!");
});

app.listen(port, () => {
  console.log(`Your server ⚡ is running 🏃‍♂️ on http://localhost:${port}`);
});

Run yarn start and If all goes well, visit or click http://localhost:3000/ and you should have the console message in your terminal and Hello, World displayed on your browser screen like below.

And if you encounter any error, trace your steps back to this point to figure out what you missed.

If all works well you can proceed to play around with the code by changing the text response, I will wait for you 😉.

We need a Database

Yes, we need a database to keep the todo items, and for this tutorial, we will be making use of the Harperdb cloud instance for our todo list application database.

Follow the instruction below to set up your own Harperdb database

Head to https://studio.harperdb.io/sign-up to create a free account
On your dashboard click on create new Harperdb cloud instance card
Fill the instance information form and ensure to keep them safe
Click on instance details except you want to upgrade your database
Confirm that your instance details are correct and proceed to click on the add instance button below the add coupon button.
Wait for Harperdb to fully create your new instance, it’s okay if it takes more than 10 minutes even after refreshing, just sip your coffee ☕.
Once it’s all done, click on the instance card and create a new schema named todos
Note: A schema is a collection of tables that is also similar to a database in SQL
Now create a table named items with a hash attribute of id

Note: hash attribute is the unique identifier of each item of todos we will be creating

Connecting to Harperdb Cloud Database:

At this point your Harperdb instance is ready for use, the next thing to do is to install the Node.js Client harperive package which will allow you to communicate to your Harperdb cloud database from your Node.js application.

Run yarn add harperive to install the package in your project.

Now that you’ve successfully installed harperive , the next step is to set up Harperdb authentication in your Node.js application, do you remember the instance URL, the admin username, and the admin password you set up while creating your Harperdb instance? That’s exactly what we need.

Securing your project sensitive details

Because of how sensitive these details are, you need to keep the instance URL, username, and password in a secure environment that cannot be accessible by unauthorized people when you push your code to GitHub, the .env file will serve as a secure environment and the package which will grant you access to this secure details from the Node.js application is the dotenv package.

Run yarn add dotenv to install the package in your project.

With all this setup, I can now show you how to connect your Node.js application to your Harperdb cloud instance.

The first thing to do is to create a .env file and paste the following snippet inside

INSTANCE_URL=YOUR_INSTANCE_URL
INSTANCE_USERNAME=YOUR_INSTANCE_USERNAME
INSTANCE_PASSWORD=YOUR_INSTANCE_PASSWORD
INSTANCE_SCHEMA=YOUR_INSTANCE_SCHEMA (todo)

You can get your instance URL from the config section on your dashboard, the instance schema is the collection of tables you created earlier, where the instance username and password are the credentials you used while creating your database instance.

Create a file name dbconfig.js and paste the code below into it

require('dotenv').config();
const harperive = require('harperive');
const DB_CONFIG = {
  harperHost: process.env.INSTANCE_URL,
  username: process.env.INSTANCE_USERNAME,
  password: process.env.INSTANCE_PASSWORD,
  schema: process.env.INSTANCE_SCHEMA,
};

const Client = harperive.Client;
const db = new Client(DB_CONFIG);
module.exports = db;

Since you have dotenv installed then we can make use of process.env to have access to the variables in the .env files and also use the harperive package to connect to our Harperdb cloud instance, which you can use to communicate to the database anywhere in your application using the exported db, I will show you how it’s done shortly.

Proceed to import all the packages you have installed in your index.js, it should look something like this.

   // import express
const express = require("express");
const app = express();

//Parse URL-encoded bodies - Allows us to retrieve data from submitted data
app.use(express.urlencoded({ extended: true }));

// import cors
var cors = require("cors");
app.use(cors());

// import the harperdb instance
const db = require("./dbconfig");

// your preferred server port
const port = 3000;

Building the todo list Create Operation

Welcome, this section is where you will learn how to develop the CRUD endpoints (routes) that will allow anyone to create a new todo item in your application.

Let’s break this down; in order to achieve this, a user must submit an item through a form, and our todo list will have the following property

todo: this is what the user wants to do i.e. “buy bread in the evening”
status: this is the completion status of a todo item and it is pending by default

What we need to achieve this

Create a POST route, that the frontend can send data to, through a form,
Find a way to retrieve the todo from the form,
Validate the form submission,
Prepare the todo and its completion status into a new object,
Ensure to catch any errors and use asynchronous JavaScript,
Send the new todo to the Harperdb cloud instance,
And finally notify the frontend with success or error message

Now let’s write some code:


// 1. create your post route that handles creating new todo item
app.post("/add", async (req, res) => {
  // 2. retrieve the todo from req.body
  // 3. Validate the todo to nsure the user does not submit an empty form
  if (!req.body.todo || req.body.todo === "") {
    res.status(400).send("Todo is required");
  } else {
    // 4. prepare the todo in an object
    const option = {
      todo: req.body.todo,
      status: "pending",
    };
    // 5. ensure to catch the error using try/catch
    try {
      // 6. if the todo is not empty
      const response = await db.insert({
        table: "items",
        records: [option],
      });
      // 7. notify the frontend or sender with the success response
      res.status(200).send(response);
    } catch (error) {
      // 7. notify the frontend or sender with the error response
      res.status(500).send(error);
    }
  }
});

// just a notification in the console
app.listen(port, () => {
  console.log(`Your server ⚡ is running 🏃‍♂️ on http://localhost:${port}`);
});

Building the todo list Read Operation

The READ operation is used to retrieve data from the database, and for our todo application, we are going to make use of it to retrieve all the available todo items that have been added from the Create operation endpoint.

In order to retrieve all the todo items in our Harperdb cloud instance, we need to follow the steps below:

Create a GET route
Ensure to catch any errors and use asynchronous JavaScript
Use the query method to select every data from a table
And finally notify the frontend with success or error message


// 1. route to retrieve all todos in the database
app.get("/todos", async (req, res) => {
  // 2. use try/catch to control errors
  try {
    // 3. user query method to get all todo from the database table
    const response = await db.query("SELECT * FROM todos.items");
    // 4. send success message to the frontend
    res.status(200).send(response);
  } catch (error) {
    // 4. send error message to the frontend
    res.status(500).send("something went wrong");
  }
});

Building the todo list Update Operation

The UPDATE operation is used to modify or edit data in the database and for our todo list application, a user can decide to change their entry for a todo or update the status of any todo items say from pending to completed or as the case might be in the frontend design.

In order to implement the update operation in our application, the following must be put into check:

Create a POST route,
Setup the new todo details in an object (the hash attribute is required),
Ensure to catch the errors and use async/await,
Send the new todo to the backend using the update method,
And finally notify the frontend with success or error message.


// 1. route to update a todo
app.post("/edit", async (req, res) => {
  // 2. set the updated todo and specify the todo identifier - hash attribute
  const option = {
    id: req.body.id,
    todo: req.body.todo,
    status: req.body.status,
  };
  // 3. use try/catch to control errors
  try {
    // 4. send the updated todo
    const response = await db.update({
      table: "items",
      records: [option],
    });
    // 5. send success message to the frontend
    res.status(200).send(response);
  } catch (error) {
    // 5. send error message to the frontend
    res.status(500).send(error);
  }
});

Building the todo list Delete Operation

The DELETE operation allows users to remove unwanted data, and in our todo application, a user should be able to delete/remove completed items from their todo.

Follow the instructions below to add a delete operation to your backend application:

Create a POST route that expects a parameter in its URL,
Get the parameter from the URL parameter,
Ensure to catch errors and use async/await,
Use the Harperdb delete method to remove the todo from the database,
And finally notify the frontend with success or error message.

// 1. route to delete a todo using its id
app.post("/delete/:todo_id", async (req, res) => {
  // 2. get the id from the url parameter
  const { todo_id } = req.params;
  // 3. use try/catch to control errors
  try {
    // 4. Send a delete request to the database
    const response = await db.delete({
      table: "items",
      hashValues: [todo_id],
    });
    // 5. send success message to the frontend
    res.status(200).send(response);
  } catch (error) {
    // 5. send error message to the frontend
    res.status(500).send(error);
  }
});

Testing Our Application With HoppScotch.io

Congratulations on getting to the API testing section, you should be proud of yourself, I have created a GitHub git for the complete code of our todo list backend application HERE

In this section, we will be testing our backend application using hoppscotch.io, head to hoppscotch.io, and follow the instruction below to test along.

Testing the Add Todo Route Endpoint

To ensure that a new todo item sent from the frontend to our backend application will be stored successfully in the database, we need to test the endpoint URL first by pasting the add todo URL http://localhost:3000/add in the Hoppscotch URL bar as shown below. You can visit here to launch Hoppscotch

The add endpoint is a post request, select the POST method from the dropdown.

In order to add a new todo, select the body menu and select application/json from the dropdown menu.

The application/json allows us to send data to the Node.js application from Hoppscotch, which can be retrieved through req.body.

You can post a new todo item by writing an object of the todo item in the Raw Request Body and clicking on the Send button to make your request to the server as shown below.

Ensure to add quotes around your object properties "todo" and "Buy bread in the evening", else your test would fail.

If all goes well, you should get a success response from the server like this, this shows that our application is able to receive new data posted through the http://localhost:3000/add endpoint.

Try to add as many todo items as you want, but ensure that the object key is "todo" or else you will get a 404 response, which is coming from our Node.js validation logic.

Testing the Get/Read Todo Route Endpoint

In this section, I will show you how to retrieve the todo items that are stored in the database. The endpoint URL to get all todo items from the database is http://localhost:3000/todos.

Paste the URL in the Hoppscotch URL bar and send a GET request to the server.

You will get a success response with an array of all the todo items that you have added previously, you should also notice that our todo application has more properties than we added initially during the POST request to the server.

The status property is set for new todo items in our Node.js /add route while the id, __createdtime__ and the __updatedtime__ are added by the Harperdb database, these are useful when you need to know when an item is been created or last updated, we will be using the id property in the coming sections

NOTE: If you encounter any error in this section, it is probably because you’re not sending a GET request to the server.

Testing the Update/Edit Route Endpoint

In this section, I will show you how to update the record of an item from the database, the URL that we can use to update a todo item on our server is http://localhost:3000/edit and it only accepts a POST request.

We can update the todo or its status and to achieve updating a todo item record in the database, we need to specify in the Raw Request Body the id of the todo item and which property we want to update.

You can send a GET request to the server and copy the id of the todo you wish to update in the database.

I will be updating the status property of the todo item to completed as shown below.

Ensure to send a valid id, else nothing will be updated as shown below.

Proceed to send a GET request on your own and see if the data is updated, if the todo item is not updated as expected, you should retrace your steps.

Testing the Delete Route Endpoint

In this section, I will show you how to remove an item from the database, and the URL to achieve this is http://localhost:3000/delete/:id, this URL is quite different from other routes, it takes in a parameter called id, which is the id of the todo item you wish to delete.

The parameters in the route URL are retrieved in the Node.js routes with req.params, your URL should look something like this
http://localhost:3000/delete/c7f032b1-a4a2-457b-ad50-8bb758a9fc10, paste the URL in the Hoppscotch URL bar and send a POST request to the server.

The server will ignore the Raw Request Body as it only retrieves data sent through the URL parameter and the todo item with the specified id will be deleted from the database.

Send a GET request to fetch the todo items in our database and check the updated items.

I will receive an empty array in my case because I only have a single todo item which I have also deleted, you will receive other todo items if you have more than two.

Conclusion

In this article, you have learned how to set up a Node.js backend project, connect it to a database, write your backend CRUD logic and test it using Hoppscotch an API testing tool, with this knowledge you’ve gained from this reading, you are good to go to kickstart your personal project and also apply it in any other backend project.

Thanks for reading, I hope to see your comments and the cool things you will build going forward.

Cheers,

What we installed for this project

express - Node.js fast framework
harperive - Helps us to connect our Node.js to Harperdb
nodemon - Helps us to restart our Node.js server when there’s a change
dontenv - Allows us to have access to variables in the dot.env file
cors - Allows two origins to share resources

INTRODUCING: The Anonymous Feedback Platform powered by the CHERN Stack

Unclebigbay — Fri, 30 Jul 2021 07:08:11 +0000

Hello beautiful people 🤗,

Do you agree we all need feedback at some point in our lives? Feedback from our last open-source projects, clients, tweets, tech talk, or individual performances, even on social media.

But why is feedback important?

Feedback is important because it helps us grow directly or indirectly and it is useful as the basis of our improvement.

Feedback can come in a negative form, helping us to identify areas of improvement such as our confidence, communication, knowledge and so on.

Positive feedback on the other hand helps us to identify our strengths, to measure our growth, and to become more confident in whatever we are doing right.

Now, the BIG question

Why do people not give feedback?

During this project research, I was drawn to CONFIDENCE, and I realized a lot of people have the fear of the unknown, with several thoughts coming up, such as

The worries that the receiver might not like them
Thinking the receiver cannot handle their feedback, and
The fear of passing the wrong impression to the receiver.

But feedbacks vary, some can be easily asked or given publicly, for example on a tweet comment asking questions such as "Do you like my new Twitter header" or "Asking for feedback from a previous post?" anyone can actually give and take such feedback publicly.

But, what about feedbacks that are more personal or work-related (professional), including the shy people, who have valid feedbacks to give, either from our previous project, writing skills, or personal life but are not confident enough to come out openly?

This should be inclusive as it might not go well if they share that publicly with you on social media, where your clients can easily see it.

THE SOLUTION: The Anonymous Feedback Platform

The Anonymous Feedback Platform, is here to bridge the gap (confidence) between the person willing to give feedback and the receiver.

How it works ⚒

The Anonymous Feedback Platform allows people to register as a receiver.
Share their unique feedback links, and
Start receiving feedbacks from faceless people.

People giving feedback do not need to worry about their identity, or else they intentionally expose it from their feedbacks, and the receiver on the other hand will not know who gave the feedback, and that's fair enough 😍.

The receiver gathers useful feedbacks and works on it.

Demo

Technologies 🧩

Frontend - React.js
Frontend Hosting - Netlify
Backend - Node.js, Express.js , Harperive , Nodemailer .
Backend Hosting - Heroku
Authentication and User management - Clerk dev
Database - HarperDB Cloud
Version control - Github
Payment - Flutterwave

The CHERN stack is a development tool that combines Clerk dev, HarperDB, Express.js, React.js, and Node.js.

Features 🚀

Personal Account 👨‍🏫
Unique Feedback Link 🔗
Receive Feedback with Emojis 🤩
Manage Feedbacks ⚙
Starred Feedback ⭐
Receive Free 5 Feedbacks 🤹‍♂️

1. Personal Account 👨‍🏫

You can signup for an account on the Anonymous feedback platform to start receiving feedback. The registration, login, and user management are handled by Clerk dev.

Signup page

You can go passwordless by signing up with your Github or Google account, but an OTP will be required each time you need to log in because your feedback should be your personal asset and we care to keep it secure from the third eye.

Login page

2. Unique Feedback Link 🔗

Every registered user has a unique feedback URL to share and receive feedback from people.

3. Receive Feedback with Emojis 👍

Every feedback comes with an emoji, the sender makes use of these emojis to express themselves and how they feel about their feedbacks.

Feedback page

Success page

The receivers' reaction tab increases as they receive more feedback, this will make it much easier to visually keep track of how people really feel about their feedbacks.

For some reason, the receiver might want to share their feedback on their social media, maybe a client likes their services, this will also help pass their value and attract more clients 😎.

This feature is inspired by @Hashnode article reactions 🤗

4. Manage Feedbacks ⚙

What happens to feedbacks that have been treated? and moreover, not all feedbacks are valid and should be taken seriously, receivers can trash feedbacks that have been treated or are not relevant, some people can just test out your feedback link 🤦‍♂️.

5. Starred Feedback ⭐

Starred feedback features allow the receiver to organize and easily identify their favorite or current feedback they want to work on.

6. Receive Free 5 Feedbacks 🤹‍♂️

Every receiver has 5 free feedbacks limits, and this is to keep the database clean, the upgrade payment goes to the upgrading of the Heroku free dyno of the project.

The subscription is a one-time purchase and the price is not fixed, the payment gateway is powered by flutterwave.

Competitor 🎳

secretmessage

Competitive Advantage 🎯

Feedback with Emoji Expression
Personal Secure Account
Secure Feedback Link

FAQ

1. Who can use the Anonymous Feedback platform

This platform can be used by both individuals and organizations to receive feedbacks

2. How much is the upgrade fee

You decide fee and the fee is used for upgrading the Heroku dyno

3. Is my account secure?

We value your feedback as much as you do, only you can view and manage your feedbacks, ensure to use a secure password if you don't want an OTP authentication.

Challenges ⚠

My major difficulty is combining school activities, and blogging with the hackathon, as bugs are normal 😂, technically it took me some days trying to make use of custom registration and login pages through the HTTP API request, and more days, figuring out how to keep the users on Clerk in sync with my Database, the Clerk technical support which I reached out to for the first issue said I just reported a valid bug, so I have no choice than to make use of their awesome SDK at the end which handles the UI and authentication logics.

The clerk documentation has been updated concerning the issue

What I learned

Using a third party like Clerk dev for authentication and user management
Another chance to work on the backend using Harperdb
Improve communication and giving details information while reporting bugs

Contribution

If there is anything you feel could be better, the anonymous feedback platform is an open-source project, so feel free to review and send in pull requests to the project Frontend Repository and Backend Repositories.

Useful Links

You can send me feedback on the project using my feedback link https://anonymousfeedback.tk/to/unclebigbay

Thanks a lot @Hashnode for another opportunity to put our skills into solving real-world problems

A few weeks ago I developed and submitted The Developer Typing Game for the @Hashnode + Harperdb hackathon you can check it out HERE .

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned from this article, I will like to connect with you.

Let's connect on

My friend and I are holding a meetup every Saturday to discuss JavaScript and other programming tips and to support ourselves.

You can be a part 👇 of the community by visiting our website

See you in the next article. Bye Bye 🙋‍♂️

6 Tools to write an eye-catching article

Unclebigbay — Tue, 27 Jul 2021 06:23:00 +0000

Hello beautiful bloggers 👨‍💻, below I will be sharing the list of tools that I make use while writing an article.

1. Carbon

Link : carbon.now.sh

Most of the technical articles you will probably write will come with code fragments attached to them, and readers will not find it too easy and attractive to view codes as plain text, carbon allows us to make an image of our code snippets and can be downloaded as PNG or SVG for use as an attachment in our blog post.

2. Grammarly

Link: grammarly.com

We are humans after all, which means we cannot notice all the errors in our articles before publications, but Grammarly can help identify typographical errors and provide suggestions on how to improve our sentences.

My favorite Grammarly feature is the emoji prediction, which shows how the whole article will sound to the readers, I found this to be useful as it helps to adjust and be within the desired prediction.

I am a big fan of emoji

3. BrowserFrame

Link: browserframe.com

No doubts, images add to the beaut of an article when they are used properly, browser frames consist of both mobile and desktop browser frames to present the images better on articles.

Without browserframe.com

With browserframe.com

4. Ray

Link: ray.so

Ray is my second goto after carbon, ray features include, linear-gradient background for code snippets and also provide a share link for the generated images.

I found this to be really cool 😎

5. Canva

Link: www.canva.com

Most of my blog cover images are made using canva, canva has several free design templates for both presentation and article cover images.

6. Google Gifs

Link: google anything gif 😛

I personally enjoy adding gifs to my articles, I believe technical articles should not be boring.

I think you might want to add some to your next article😍, you can get your preferred gif by visiting google and searching say "laughing coding gifs"

@Danny Thompson is also rocking some gif too🤩

And that's it for this article, I hope you have learned something new from this article, feel free to share your favorite tools in the comment section and which of the above tools is actually new to you.

Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned from this article, I will like to connect with you.

Let's connect on

My friend and I are holding a meetup every Saturday to discuss JavaScript and other programming tips and to support ourselves.

You can be a part 👇 of the community by visiting our website

See you in the next article. Bye Bye 🙋‍♂️
also buy me a coffee below.