DEV Community: V

Finding the Wizard's Pet — KendoReact Free Components Challenge

Sun, 28 Sep 2025 23:39:05 +0000

Wizard’s Trial — KendoReact Free Components Challenge

Live Demo

URL: https://kendo-cyan.vercel.app/
Source: https://github.com/violetadev/kendo

What I Built

I created a browser-based fantasy RPG mini-game where the player controls a young wizard apprentice who must progress through locations, talk with NPCs, and defeat monsters within a time limit.

The problem I wanted to solve was: How do you make a simple, story-driven game playable directly in the browser with modern React tooling while keeping the UI consistent?

The audience is anyone who enjoys casual pixel-art games or interactive storytelling, but the project is also aimed at developers looking to see how KendoReact components can be used beyond dashboards and forms — even in a game-like experience.

The outcome is a working prototype where:

There are several levels with increased difficulty.
Dialog flows naturally between player and NPCs.
A fight sequence begins only after dialog is complete, has a timer and a HP bar showing the remaining health of the monster.
A countdown timer creates urgency.
Victories are logged, and results can be reviewed later.

Everything is styled and laid out using 10 KendoReact free components!

KendoReact Free Components Used (10+)

Animation
Common Utilities: Typography
Dialogs: Window
Dialogs: Dialog
Progress Bars
Inputs
Buttons: Button
Buttons: Group Button
Layouts
Indicators
Notification

KendoReact usage details

Animation
The animation was mainly used to make the dialogs run smoother, using a push transition to show the next dialog.
Common Utilities: Typography
The most used common utility was the typography, used for every text to give a coherent UI feeling and better readability.
Dialogs: Window
The Window component was used to create a Hint component to provide instructions and give context to the users.

Dialogs: Dialog The dialog component was used to allow the user to customize their character's name and to handle the game over notification when the user runs out of time.

Progress bars The progress bar was used to display the monster's overall health and display the damage the user was inputting.

Inputs The input was used in the beginning to input the user's desired nickname for the adventure.

Buttons: Button The buttons were used to advance the story and also show hints. It was extensively used for the user to be able to take action on different situation.

Buttons: Group Button The group buttons were used to let the user select their favorite character.

Layouts The layout component was used in every screen to help place the elements (characters, location, monsters).

Indicators: Loader The loading indicator was used to load up the application in the beginning of the story.

Notification I used a notification on the Credits screen to show more info about me and where you can find me in Dev.to!

Architecture / How It Works

Clicker

Handles the main click-to-progress mechanic.
Advances the story or triggers a battle when the user clicks.
May also be used to interact with objects or NPCs.

Story

Manages the flow of narrative and dialog.
Coordinates which NPC or character is speaking.
Controls when the player can interact or when the next event (like a fight) is triggered.

Fight

Handles all combat logic between the player and monsters.
Manages the fight timer; if the player doesn’t act in time, triggers a game over.
Handles monster actions and player responses.
Calls logFight to record the outcome.

useDialog

Custom hook to manage dialog state and transitions.
Determines which character or NPC is currently speaking.
Ensures dialog sequences are completed before allowing progression (e.g., before a fight starts).

CharacterContext

Provides global state management using React Context.
Stores the current character, level, username, and fight history.
Allows any component to access or update character-related data.

Background, Character, Monster

Pure rendering components.
Display the current background, player character, and monster/NPC images and animations with the help of KendoReact.

State Management

Global State (CharacterContext)

Stores:

Current character selection and info.
Current level.
Username.
Fight history (array of fight results, e.g., win/loss, score, time).
Accessible throughout the app for consistent state.

Local State (Fight)

Manages:

Whether the fight has started.
Timer countdown for player actions.
Game-over state (if the timer runs out or the player loses).
Defeat flag (if the player loses the fight).

Data Flow

Dialog Sequence

The useDialog hook manages dialog between the main character and NPCs. Both sides’ dialogs are calculated and displayed in sequence. The player cannot proceed (e.g., to a fight) until the dialog is complete.

Progression to Fight

After dialog, the Clicker or Story module triggers the Fight module.
The fight timer starts, and the player must act before it runs out.

Fight Outcome

If the player defeats the monster, logFight is called.
The fight result (win/loss, score, etc.) is saved to the global fight history array in CharacterContext.

Game Over / Retry

If the timer runs out or the player loses, a game-over state is triggered.
The player can retry the fight, which resets the local fight state and timer.

End of Game

At the end of the game or story, the fight history array is used to display a summary of the player’s performance.

Setup & Run Locally

git clone git@github.com:violetadev/kendo.git
cd kendo
npm install
npm start

My Hacktober Journey as a Contributor

Tue, 29 Oct 2024 11:13:33 +0000

This is a submission for the 2024 Hacktoberfest Writing challenge: Maintainer Experience

Hacktoberfest has been an incredible ride! As a maintainer of the
Responsively App, I’ve had the privilege of witnessing developers come together to support and improve our open-source project. Seeing the growth in contributions this year has been both surprising and inspiring. It’s been a chance for us to engage with developers who are as excited about improving Responsively as we are.

Why I Participate in Hacktoberfest

Participating in Hacktoberfest energizes our community and introduces Responsively App to new developers. It allowed me to reconnect with what makes open source so impactful—seeing people from different backgrounds contribute unique solutions and ideas to enhance our efforts.

Highs and Lows of This Year

One of the most rewarding aspects has been the influx of contributions that tackle issues we hadn’t fully considered. A lot of people helped improve our official website, which needed some attention to make it better for smaller screens and fix some bugs we had. One of the challenges I faced was balancing the review process, as not every submission aligns with our roadmap and I wish I have seen more contributions on our app than just on the website. Reviewing and guiding contributors took time but was worth it for the insights gained.

Surprising Moments

This year, I was surprised by the level of curiosity and dedication from first-time contributors. Many of them reached out with thoughtful questions and even went above and beyond in crafting their pull requests. Seeing the commitment from new developers reassures me that open source is in good hands, and it's rewarding to provide a platform where they can gain confidence and refine their skills.

Thank You to the Contributors

A huge thanks to everyone who contributed to Responsively this Hacktoberfest! Your enthusiasm, patience, and passion are what keep projects like Responsively moving forward. Every PR, suggestion, and question contributes to a stronger Responsively community.

Here’s to many more Hacktoberfests, building and growing together! 🌍

Make Your First Open-Source Impact with Responsively On HacktoberFest

Sat, 12 Oct 2024 18:01:00 +0000

Responsively App

Responsively is a versatile tool designed to simplify the workflow of developers and designers by enabling real-time previews and testing of web applications across various devices. You can read more and see a preview of its features in this post.

Must Reads Before Starting

Before diving in, grab your coffee (or beverage of preference) and check out these key resources to get started:

1) HacktoberFest Participation Guideline
2) Responsively's Contributors Guidelines
3) How to contribute to a project you don't own

Contributing

In the Responsively App repository, you’ll find open issues to work on. Browse through and pick one that interests you. There's no need to assign it to yourself—just drop a comment when you start working on it, letting others know you're on it to avoid overlap.

When submitting a pull request, don’t forget to link it to the relevant issue by mentioning the issue number. The more details you provide about what you fixed, how you fixed it, and how to test it, the better!

Please stay attentive to any feedback we might provide during the review process. Letting your pull request go stale could lead to merge conflicts or lost context down the line, which would be a shame after all the effort you put in.

My experience as a Maintainer

I really love this project; it's something I use both at work and in my personal projects—not only for development but also to execute manual tests, ensuring the quality of my frontend deliveries. It's become an indispensable tool in my workflow as a frontend engineer.

What excites me most about Responsively is that it's built with ReactJS, TypeScript, and Electron—a stack that's familiar to many in the frontend community. This makes it a perfect project for those looking to contribute to open-source, especially for developers eager to dive into modern frontend technologies.

Being part of an open-source community like this not only strengthens my technical skills but also reinforces the values of collaboration and giving back to the developer community.

I hope to see your contributions soon and don't forget to drop by the discord to say hello!

Develop Responsive Apps easily with Responsively App

Sun, 15 Sep 2024 17:03:29 +0000

Exploring Responsively App: A Powerful Tool for Web Development

I want to tell you about an open source app I have been contributing to in the past few months.

Responsively is a versatile tool designed to simplify the workflow of developers and designers by enabling real-time previews and testing of web applications across various devices. Below, we explore some of its key features that make it an essential tool for responsive web development.

1. Device Suites for Real-Time Visualization

One of the standout features of Responsively is the ability to create and select different device suites, which allow you to visualize how your web app or website looks on multiple devices at once. Whether it's a mobile phone, tablet, or desktop, this feature makes it easy to test responsiveness across a variety of screen sizes, ensuring that your site looks and performs optimally regardless of the device. You can instantly switch between pre-configured device suites or customize them according to your needs, providing complete control over your testing environment.

2. Synchronized Scrolling and Navigation

To make the testing process even more seamless, Responsively offers synchronized scrolling and navigation. As you interact with your web app on one device, all other displayed devices will mirror your actions in real time. Whether you're navigating through pages or testing interactive elements, this feature saves time and effort by allowing you to see how changes affect all devices simultaneously. It's a powerful way to ensure uniform behavior and design consistency across different platforms.

3. Device Manager for Customization and Flexibility

The Device Manager is another robust feature that adds flexibility to your workflow. You can create customized device suites, which are groups of devices that you can display on the main screen for testing. This manager not only allows you to add, edit, and remove devices but also group them into suites for specific projects or testing requirements. Additionally, the import/export feature enables users to save their custom device setups and share them with others, making it a collaborative tool for teams working on the same project.

4. Developer Tools for Enhanced Testing

On each displayed screen, Responsively offers a range of developer tools that provide extensive control over how you interact with your web app during testing:

Screenshot and full-page screenshot options to capture the current state of the web app on different devices.
Device rotation, so you can easily test both portrait and landscape modes.
Built-in DevTools for debugging and performance analysis.
Rules with draggable lines, allowing you to set visual guidelines for checking layouts and alignment.
A different color needs visualizer that helps simulate how users with various color vision deficiencies might experience your site.
BrowserStack integration for logged-in users, enabling even more extensive cross-device and browser testing in the cloud.

5. Customizable Settings for a Tailored Experience

Responsively also offers a wide range of customization options through its settings. For example, you can switch between light and dark mode depending on your preference or environment. You can also create bookmarks for frequently accessed web pages, making it easier to switch between projects and test cases. These additional features contribute to a more personalized and efficient development experience.

Download

Downloading and using Responsively is 100% free. You don't need an account to start using it and it is available for Windows, MacOS and Linux.

The installation process is straightforward, and you can begin testing your web projects across multiple devices in seconds.

Download Responsively here

Open Source and Community-Powered

Responsively is an open-source project, maintained and improved by a passionate community of developers, designers, and contributors from around the world. It's designed to help fellow developers streamline their responsive web development workflows.

By being open-source, Responsively encourages anyone to contribute to the project, whether through code contributions, bug reports, or feature suggestions. This project thrives on collaboration, and we invite you to join us in building a better tool for the web development community.

You can check out the source code on GitHub, contribute, or simply show your support by giving it a star ⭐️ to our repository.

Please make sure to check our Sponsors page to find out more about all the wonderful companies and people that support this project.

Together, we're building a tool that makes responsive web design and testing faster, easier, and more efficient for everyone.

Matching Technonauts! Networking App with Nylas

Sun, 01 Sep 2024 21:11:59 +0000

This is a submission for the Nylas Challenge: AI Expedition & Galaxy Brain

Team Members:

Violeta

Technologies

Nylas API
Chat GPT
Firebase
Emotion
Material UI
Next.JS
Node.JS
WebSockets
Accessibility
Vercel
Glitch.IO

Try it out here:
User
Admin
Note: For the admin you can use these credentials:

violetadevnylashackathon@gmail.com
123456

What I Built and Why

I built a Random Meeting Matcher tool, designed to facilitate spontaneous connections between remote team members.

In a traditional office setting, casual conversations—like those over coffee—help foster relationships and build camaraderie. However, in a remote work environment, these serendipitous moments are much harder to come by. This tool aims to bridge that gap by allowing an admin to create scheduled "dates" where team members can queue up and get randomly matched with a colleague for a quick virtual meeting. The motivation behind this project stems from my experience working in a remote company, where I noticed the lack of informal interactions that typically happen in an office setting.

This tool provides an easy and automated way to recreate those coffee chat moments virtually, helping to maintain the social fabric of the team.

Of course, this could be use in any other context where you want to randomly match two people! This is just a specific use case of the tool I have built.

Demo

Code

You can review the full codebase on GitHub:
App & Back Office
Websockets Server

The project is open-source and licensed under the MIT License, ensuring that others can freely use and adapt the tool for their own remote teams.

Your Journey

I leveraged Nylas' API to handle the creation of calendar events, sign up participants as contacts, and create meeting links, which was crucial for automating the process of setting up virtual meetings. Through this project, I deepened my understanding of integrating third-party APIs into a full-stack application with NextJS and Websockets (I usually focus more in the Frontend part!), particularly in managing user authentication, calendar integrations, and real-time WebSocket connections.
I'm particularly proud of how seamless the user experience turned out, from queueing up to being matched and receiving an invite—all without requiring any manual intervention from the admin. This project not only solved a real problem I've experienced but also provided an opportunity to explore and utilize the powerful capabilities of the Nylas platform.

Image Gallery

Credits for the video background here

Atomic Design: UI Kit Strategy

Tue, 30 Jul 2024 20:39:33 +0000

The Concept of Atomic Design applied to a frontend package

What is Atomic Design

Atomic Design is a methodology for creating design systems in a hierarchical structure, starting from the simplest elements (atoms) to more complex structures (molecules and organisms).

This approach allows designers to build consistent, scalable, and reusable components for user interfaces. By treating parts of the UI as part of a larger whole, Atomic Design streamlines the development process, ensuring a more efficient and cohesive design system that can be easily maintained and scaled over time.

Pros:

Access components from different packages shared within the T&I team
Focus on enhancing the overall quality and maintainability when adding new features
Add new code without degrading the existing code base
Allow easy migration and refactoring of features whenever needed
Creating complex components will be easier since we will have common building blocks in place from the start
Once the library starts growing, creating new interfaces can be as simple as combining existing elements
Existing components become a guide for how we build, keeping the code clean and consistent

Cons:

Within the team, we all need to understand what is an atom/molecule/organism in order to keep the library consistent and clean
Communication with the design and product team is crucial to make the best out of the library and standardize user experience
Overhead and over-engineering could be an issue if we add code that will end up not being reused in the future

Definition and examples

Atoms

Atoms are components that can’t be broken down into smaller components. For example: buttons, dividers, links.

Source

Molecules

Molecules can be formed by many different atoms. For example, a button with a loading icon.

Source

Organisms

Complex components made of groups of molecules or a mix of atoms and molecules.
Example: a Tab component with a div attached that displays different content on click.

Source

Templates

Formed by organisms, molecules and atoms that structure content. For example: A profile template page, that can be filled with different information from any user.

Source

Pages

Pages are templates (or groups of molecules, organisms, etc.) filled with real representative content. For example, the profile template we mentioned before, now with the user's data.

Source

Creating a UI Kit

What is a UI Kit for:

Making it easier to reuse components within a team's or company's features, cataloging them, and making them accessible for the whole team (including design/product).
Maintaining and enhancing components (accessibility, testing, performance).
Keeping our UI consistent, making the user feel more at home when navigating the product.
Improving our design-development process by speaking one common language and having one common place for our building blocks.
Internal knowledge of the team, having everything in one place makes it easier for everyone to know what we have and how to maintain it.
It's more about effective component management and modular development within our existing codebase.

What is a UI Kit not for:

Adding anything related to the design system. Examples: color variables, common design patterns/elements such as typography or input fields.
Having components with data fetching/handling. Examples: a form submission calls our backend to create a ticket.
Maintaining and enhancing our components (accessibility, testing, performance).

Resources

Source
Source
Source

LCP Improvements React Guide

Tue, 30 Jul 2024 20:21:16 +0000

What is LCP?

Largest Contentful Paint (LCP) is a performance metric that measures the time it takes for the largest content element visible in the viewport to fully render on the page. It’s an important user-centric metric for assessing perceived load speed because it marks the point in the page load timeline when the main content has likely loaded and the page is useful to the user. Good LCP performance ensures that a website feels snappy and responsive to users.

Strategies to improve LCP

Avoid unnecessary re-renders by:

Correcting the usage of useEffect
Doing lazy initialization on useState
Using React.memo or useCallBack
Avoiding Prop drilling

Improve loading of resources by:

Doing code splitting/deferring code
Doing lazy loading of components
Using srcset for Images

Clean the code by:

Removing unused code & Tree Shaking
Removing unnecessary CSS
Reducing unused exports

UseEffect usage

When to use it:

Data Fetching: To fetch data from an API when the component mounts or when a dependency changes.
Setting Up Subscriptions: To set up subscriptions (e.g., WebSocket connections) and clean them up when the component unmounts.
Manually Updating the DOM: When you need to perform manual DOM updates that can't be done declaratively.

When to avoid it:

Derived State: Avoid using useEffect to synchronize state that can be derived from props or other state. Use memoization techniques or derived state directly in the component.
Inline Event Handlers: Do not use useEffect to add event listeners that can be added directly in JSX.
Rendering Logic: Avoid using useEffect to control rendering logic. Use conditional rendering directly in the JSX.

Lazy Initialization on useState:

Delaying the computation of the initial state value until it is actually needed helps avoid performance hits during the initial render of a component, especially if the computation of the initial state is expensive.
Lazy initialization ensures that this computation is only performed once, when the component is first rendered.

How to Implement Lazy Initialization:

When you pass a function to useState, React will call this function only during the initial render. This ensures that the expensive computation is only done once, and the result is stored as the initial state.

const [state, setState] = useState(() => {
  expensive computation
  return initialValue;
});

React.memo and useCallback

Both React.memo and useCallback are used to optimize React applications by preventing unnecessary re-renders, but they serve different purposes and are used in different scenarios.

useCallback

Purpose: useCallback is used to memoize functions.
Usage: It returns a memoized version of the callback function that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders.

const memoizedCallback = useCallback(() => {
  // callback logic
}, [dependency1, dependency2]);

useMemo

Purpose: useMemo is used to memoize the result of a function.
Usage: It returns a memoized value that only changes if one of the dependencies has changed. This is useful for optimizing performance by preventing expensive calculations on every render.

const MyComponent = React.memo(({ prop1, prop2 }) => {
  // Component logic
});

Code Splitting

Code splitting is a technique used to break up a large bundle of JavaScript into smaller, more manageable pieces that can be loaded on demand. This helps improve the initial load time of your application by only loading the necessary code for the initial view and deferring the rest until it's needed. You can also use webpack’s configuration to work with chunks.

Lazy Loading

Lazy loading is a design pattern and optimization technique used to defer the loading of non-critical resources at the time of the page load. Instead, these resources are loaded only when they are needed, such as when they become visible in the viewport or when a user interaction triggers them. This helps improve the performance of web applications by reducing the initial load time and conserving bandwidth.
You can do this by:

Use React.lazy for lazy loading React components.
Use the Intersection Observer: Use the Intersection Observer API to lazy load images or other elements as they enter the viewport.

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Use native capabilities

Images attributes: the srcset attribute allows you to specify multiple image sources for different screen sizes and resolutions. The browser automatically selects the most appropriate image to display based on the device's characteristics. This can significantly improve the Largest Contentful Paint (LCP) by ensuring that the optimal image size is loaded, reducing load times and improving performance. On the other hand, the sizes attribute tells the browser how much space the image will take up, allowing it to choose the best source.

<img
  src="images/example-300.jpg"
  srcset="
    images/example-300.jpg 300w,
    images/example-600.jpg 600w,
    images/example-1200.jpg 1200w
  "
  sizes="
    (max-width: 600px) 300px,
    (max-width: 1200px) 600px,
    1200px
  "
  alt="Description of the image"
/>

Loading attribute: The loading attribute on images and iframes allows for native lazy loading.

<img src="image.jpg" alt="Example image" loading="lazy">
<iframe src="https://example.com" loading="lazy"></iframe>

Rel property: preload: Preloading critical resources can improve LCP by ensuring that key assets are fetched as soon as possible. Preloading CSS and JavaScript files ensures that these assets are available immediately when the browser starts rendering the page. Preloading fonts can prevent delays caused by font loading, which can block text rendering.

<link rel="preload" href="/styles/main.css" as="style">
<link rel="preload" href="/scripts/main.js" as="script">
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">

prefetch: Next Page Resources: Prefetch resources that are needed for the next user interaction to improve the perception of a fast-loading application.

<link rel="prefetch" href="/images/next-page-image.jpg">

Script attributes:

Defer the loading of JavaScript that is not critical for the initial render by adding the defer attribute in your script tags. This ensures that the script is executed after the HTML is parsed, preventing it from blocking the rendering process.

<script src="script.js" defer></script>

Async Loading: Allows the script to be fetched in parallel to parsing and executed as soon as it is available, reducing render-blocking behavior.

<script src="script.js" async></script>

Object Oriented Programming

Tue, 12 Apr 2022 22:11:28 +0000

OOP is a programming paradigm (a way of coding) that’s used to organize software into reusable pieces of code through classes and objects. You can think of a class as a template or building block for your code, that contains methods and properties common to certain objects that you can extend to create what you need.

Here is an example:

class Developer {
    constructor(name, language) {
        this.name = name;
        this.language = language;
    }

    getDeveloperProfile(){
        return `${this.name} can code in ${this.language}`
    }
}

class FrontendDev extends Developer {
  constructor(name, language, framework) {
    super(name, language); 
        this.framework = framework;
  }

  getFramework() {
    console.log(`${this.name} is a ${this.language} developer and knows ${this.framework}.`);
  }
}

let frontendDeveloper = new FrontendDev('Anna', 'Javascript', 'React');
frontendDeveloper.getFramework(); // Anna is a javascript developer and knows React

There are some basic principles when coding in OOP:

Encapsulation

When talking about encapsulation, we refer to grouping up functions and variables that are related in objects.

Let’s refactor some code into OOP.
Here’s our starting point:

const bookName = 'Steppenwolf'
const bookAuthor = 'Herman Hesse'
const bookYear = 1927

function getBookInfo(name, author, year) {
    return `The book ${name} was written by ${author} in ${year}`
}

getBookInfo(bookName, bookAuthor, bookYear);

OOP way:

const book = {
    name: 'Steppenwolf',
    author: 'Herman Hesse',
    year: 1927,
    getInfo: function() {
        return `The book ${name} was written by ${author} in ${year}`
    }
}

book.getInfo();

Abstraction

When talking about abstraction in OOP, we refer to exposing the properties and methods that we are actually going to be using and leaving the inner working hidden. This makes the usage of the object much easier and lets you make changes easier.

For example:

class Developer {
    constructor(name, language) {
        this.name = name;
        this.language = language;
    }

    #ratePerHour = 30 // private variable
    #totalMonthlyHours = 160 // private variable

    getDeveloperProfile(){
        const salary = this.#ratePerHour * this.#totalHours;
        return `${this.name} can code in ${this.language}`
    }

    getDeveloperSalary() {
        const totalSalary = this.#ratePerHour * this.#totalMonthlyHours;
        return `The salary for a developer is ${totalSalary}usd per month`
    }
}

In this case, we can’t access totalHours and ratePerHour variables outside of our class, but if we call getDeveloperSalary() we will get the total amount calculated.

Inheritance

Inheritance is what allows us to remove repeated code and share properties and methods between objects.

For example, a button and a div are both html elements (HTMLElement) and the both have a hidden property and a click() method.

When talking about prototype inheritance, we are referring to a javascript feature that allows to add methods and properties, and that can be chained as well (a prototype can have a prototype, and so on).

Polymorphism

Polymorphism allows us to overwrite methods and properties from a previous object. For example, let’s imagine for a second that all plants need a 100

const book = function () {}

book.prototype.amountOfPages = function() {
   return "a book has many pages"
}

const novel = function() {}
novel.prototype = Object.create(book.prototype);
novel.prototype.amountOfPages = function() {                 
   return "a book has many more pages!"
}

References:

https://www.educative.io/blog/object-oriented-programming

https://www.youtube.com/watch?v=PFmuCDHHpwk&t=2059s

https://frontend.turing.edu/lessons/module-2/oop-1-making-objects-with-constructor-functions-and-classes.html

https://blog.sessionstack.com/how-javascript-works-3-types-of-polymorphism-f10ff4992be1

https://betterprogramming.pub/object-oriented-programming-in-javascript-b3bda28d3e81

Job Hunting (Global, Spain & Europe)

Tue, 08 Mar 2022 16:56:40 +0000

I get asked a lot about platforms to look for a job in tech. So here is my reference list:

Spain & Europe

Global

Remote

More links for remote work: The 25+ Best Sites For Finding Remote Work Online In 2022

Minorities in Tech

Tech Disability Project

Chronically Capable

Latinas in Tech

LGBTQA+ Out in Tech

... and more! Check out Diversify's community list here

Testing react-device-detect with React Testing Library and Jest

Wed, 12 Jan 2022 10:39:17 +0000

I needed to use react-device-detect to change a URL with a https protocol to webcal protocol in order to be able to save an ics file to the calendar app when using Chrome on iOs. The implementation was quite straight forward but I ran with the issue of testing this properly. I needed to mock the user's device and browser detected by react-device-detect.

I did this by first importing the package:

import * as reactDeviceDetect from 'react-device-detect'

and then assigning the value I needed for the functions I'm using in my code:

Object.defineProperty(<<theModule>>, '<<the function or value needed>>', { get: () => '<<the value returned>>' });

This will return the desired value whenever your component calls for the specified function.

In my case, I needed to get true when calling isIOS and 'Chrome' when calling browserName:

import * as reactDeviceDetect from 'react-device-detect';

Object.defineProperty(reactDeviceDetect, 'isIOS', { get: () => true });
Object.defineProperty(reactDeviceDetect, 'browserName', { get: () => 'Chrome' });

Next, to check if my protocol change was working properly, I could either check the href of the a tag as in:

const calendarLink = getByTestId('calendar-link');

expect(calendarLink.closest('a')).toHaveAttribute(
   'href',
   `/my-calendar.ics`
);

or I could fire the click and then check the protocol using the window:

const calendarLink = getByTestId('calendar-link');
fireEvent.click(calendarLink);
await waitFor(() => {
  expect(window.location.protocol).toBe(
    'webcal:'
  );
});

That's pretty much it, I hope it helps someone ;)

Frontend Challenges and Project Ideas

Sat, 05 Jun 2021 15:39:29 +0000

About this list

I made this list thinking of projects that can be approached in different ways, technologies and features. Because of this, I added a few suggestions of things you can focus on to give you some ideas.

Who is this list for

I have tagged the projects with orientative levels but you can increase or decrease the difficulty very easily.

This list is for you if you are...
...a junior developer trying to practice their skills.
...learning a new technology and you need a simple project to experiment with.
...lost in tutorial hell and you need a break from watching but you want to keep building up your coding skills.
...building a portfolio to start applying to jobs.
...looking for side projects to do for fun.

1- Booking app beginner intermediate

Description: Make an app that displays a calendar with selectable dates. When clicking on a date, a pop up comes up showing available times to make an appointment. The user should be able to add basic information.
Good for: learn how to work with dates, multi step forms, database with users and taken dates/times, testing (react-testing-library, cypress, jest)

2- Browser code editor intermediate advanced

Description: Make a code editor where you can write JS and download the file when you are done.
Good for: Working on your logic mixing html and js, specific css based on conditions, learning how to work with files exports, setting up a project from scratch, testing (react-testing-library, cypress, jest)
Inspiration:

3- Quote Carousel beginner intermediate

Description: Create a responsive component from scratch that accepts an image, quote and an author, create the component so it accepts different themes (styled components).
Good for: Responsiveness, setting up a project from scratch, excersicing logic, reusable component for future projects, create the component so it accepts different themes (styled components), testing (react-testing-library, cypress, jest).

4- Mood app intermediate advanced

Description: Make an app to track your daily mood, the user should be able to choose the mood of the day from different emojis and add a description. The user should be able to see the history, you can also add a graphic representation of the month.
Good for: State management, persistant data, database, data representation

5- Markdown preview intermediate advanced
Description: Make an app where you can input markdown and see the result.
Good for: Exercising logic, setting up a project from scratch, interpretation of characters on context, dynamic styling, unit testing (jest, jasmine, etc).

6- Raffle site beginner intermediate

Description: Make an an app that you can input a product with an image and a title plus a list of participants by email (can be imported through a csv). On a button click, a random winner should be displayed. If you continue clicking the button, another random user should be displayed but not the ones that were already selected.
Good for: CSS practice, setting up a project from scratch, exercising logic, image/file uploading, file handling, testing (react-testing-library, cypress, jest)
Inspiration:

7- Stock market trend advanced

Description: Make an app that crawls and displays the top 5 most mentioned stocks on the subreddit /r/stocks.
Good for: learning about crawlers, data representation, testing (react-testing-library, cypress, jest)
Inspiration: swaggymedia's project

8- Podcast library beginner intermediate advanced

Description: Make an app that works as a personal podcast library. The website should have a way to import podcast through RSS feeds, a player and a list of selectable podcasts. When you select one podcast, it should display a page with all the episodes. When you click an episode it should play it on a audio player.
Good for: Working with third parties apis, database, user log in/sign up, RSS feeds, audio player, testing (react-testing-library, cypress, jest)
Inspiration: Podcast Template

9- Color generator beginner intermediate

Description: Make an app that helps the users get different color palettes for their projects. The user should be able to input a starter HEX color and get matching colors with their HEX codes. The user should be able to save their color palettes and name them.
Good for: logic, setting up a project from scratch, understanding HEX coding, state management, unit testing.
Inspiration: Coolors

10- Spotify music list beginner

Description: Make an app that fetches the top 10 songs of each genre (pop, rock, country, etc) on the user's country.
Good for: Log in implementation, learning how to use .env, state management, responsive ui.
Inspiration: Listen App Template

11- Sign up page beginner
Description: Create a sign up page with a form that has validation, success and error messages.
Good for: learning how to use forms, responsiveness, setting up a project from scratch, event handling.
Design: Free template (https://colorlib.com/wp/template/colorlib-regform-7/)

12- Create a restaurant menu beginner
Description: Create a single page with a restaurant menu that shows the details of each dish on hover.
Good for: exercising css, responsiveness, event handling, html.
Design: Flipsnack free template

13- User dashboard with news and weather intermediate advanced
Description: Make an app where the user can input their name and select five news topics they are interested in. The dashboard should display the weather in their location, news from each topic and an image of the day.
Good for: state management, responsiveness, reusable components, multistep forms, setting a project for scratch, testing.
Design: https://xd.adobe.com/view/19e7e42f-6b0f-46a7-b630-8dd4463e1c4e-4cb4/screen/844a7905-7641-4d31-bcfa-3fe62ae8da2c/specs/