DEV Community: ItayLisaey

I've made a react component that hides sensitive information in your app.

ItayLisaey — Sun, 24 Apr 2022 08:04:27 +0000

Did you ever want to showcase a site you have worked on or a new feature you just published in a production system but were unable to do so because of the fear of exposing sensitive information?

SafeView is a component that allows you to hide sensitive information in your app visually, for presentation purposes, and more.

In order to hide an element all you need to do is to target it using the data-safe attribute.

const MyComponent = () => {
    return (
        <div>
            <span data-safe>
                // Sensitive info
            <span>
        </div>
    )
}

And then when you want to hide press Shift + S.

There is basically no setup involved other than wrapping your app with the <SafeView> component.

The library is super simple and light-weight and is available at NPM.

"SafeView" on NPM

"SafeView" on Github

if you have any question and/or suggestion I would love to answer in the comments. :)

I've made a React app. Should you stick around?

ItayLisaey — Thu, 28 Oct 2021 08:31:30 +0000

Should you wait the credits? "Stick Around" will tell you.

Ever since the first Marvel movies came out it seems like in every movie there's the possibility of an extra scene hidden during or after the credits.

I grew tired of waiting through the entire credits just to find out there's nothing there, or even worse - leaving the theater to later realize I missed something.

To counter this I've decided to make a super simple app that simply tells you if you should wait the credits, with the press of a finger.

The app is open source, no ads or revenue whatsoever and made as a fan service.

How did I make this app?

I Used Figma for designing and prototyping, React with Typescript for the frontend implementation, Firebase as the backend and Capacitor.js for Android and iOS support.

All in all, I managed to design, code and publish the app to Google Play in less then 3 weeks.

Designing the user experience in Figma

I've started the UX design process with few goals in mind:

Keeping it simple
One press away from results
Dark mode (to be used in theaters)

The app is divided into 3 main screens:

In Theaters

This screen is the first screen the user enters upon launching the app. It shows you the movies now in theaters (according to TMDB);

Search

On this screen, the user can search for older movies, not currently playing.

Movie Screen

This screen contains some general information about a movie, and mainly the card that tells the user whether or not they should wait for the end.

Voting Model

How user vote on the movie

Implementation

The framework I eventually choose was React with Capacitor.js to build cross platform.

The app uses TMDB to get movie information and
Firebase to collect user votes.
and a basic function that decides between them.

The rest is pretty straight forward with React and Scss for styling.
most of the bugs and troubleshooting came with Capacitor.

Conclusion

If this interested you, or you have any questions or requests, I will be glad to answer.

*Edit: there's a known issue with the first time screen not showing the continue button to some devices. It's already fixed on the web but not yet updated in the Android App.

Google Play Store - Stick Around

GitHub - stick-around

Stick Around on Web

Enhance your React workflow with this new tool

ItayLisaey — Sun, 26 Sep 2021 11:18:28 +0000

One of the most frustrating thing about developing in web frameworks is the constant boilerplate code needed each time you start a new project, component, page, etc.

The Agrippa CLI aims to solve or at least mitigate this problem for React developers.

Agrippa inherit the modularity and unopinionated approach of React with a modular, customizable CLI that help you create React components easily, and most importantly FAST.

As written in their documentation:

Agrippa is a humble CLI, whose purpose is to assist React developers in creating components without the boilerplate. It can easily generate templates for React components of different compositions (styling solutions, prop validations, etc.) and in different environments. -Agrippa on Github

Simple and Convenient CLI

to use Agrippa you can install it globally npm i -g agrippa (or yarn global add agrippa).

Once installed, components can be generated using agrippa gen [options]
Some of the options supported by agrippa gen are:
--styling: which styling solution to use (e.g. CSS, SCSS, JSS, Material-UI).
-props: which prop validation/definition solution to use (e.g. Typescript interfaces, prop-types, JSDoc comments).
--children: whether the components is meant to have children or not.

Also, Agrippa automatically detects and sets other, important defaults for you, such as whether to use Typescript or Javascript, and whether to import React or not. — Article written by the creator of the package

Agrippa has more options and configuration, with the latest update adding a custom post commands, and base directories configuration.

Conclusion

in conclusion the Agrippa CLI has become my preferred way of creating React component hassle-free, and it might be fitting for you too.

I hope you enjoyed reading this article and it would be awesome if you consider showing love to original developer of the package:

NPM, Github, Dev.to.