Forem: Franco Valdes

TextGPT: A Profitable Weekend Project

Franco Valdes — Wed, 26 Apr 2023 04:20:22 +0000

Hey everyone, Franco here and I want to share with everyone the story of how my weekend project, TextGPT, turned into a profitable business opportunity.

For years, I've been toying with the idea of a SMS-based application. I find SMS to be so frictionless and easy to adopt. A few weeks ago, I had the idea of building an SMS-based AI chatbot that would be easy to use and highly effective. I wanted to create a chatbot that could be accessed through a messaging app without the need to download an app or visit a website. With the help of OpenAI's GPT architecture, I was able to build TextGPT in just a weekend.

The stack is simple, using Remix I can manage both the front and backend from a single codebase. Supabase handles auth with OTP and database storage. OpenAI does the magic. Lastly, Twilio manages all the sms traffic.

After I launched TextGPT, I started promoting it on social media and within my network. To my surprise, the response was overwhelmingly positive. People loved the idea of being able to communicate with an AI chatbot through SMS. They've called it "their friendly bot", "midnight therapist", "venting partner", and more.

As the word about TextGPT spread, I started receiving inquiries from folks that wanted to "white label" TextGPT and put their own spin on it. They saw the potential of using TextGPT to create their own personalize sms experience.

In just over 30 days, TextGPT has generated over $800 in revenue and has over 1000 users. It's been amazing to see how my weekend project has turned into a profitable business opportunity.

Overall, I'm thrilled with the success of TextGPT and I'm excited about the future possibilities that it holds. This experience has taught me that even the smallest weekend project can turn into a profitable business opportunity if you have the right idea and are willing to put in the work. So if you have an idea for a project that you're passionate about, go ahead and give it a try - you never know where it might take you!

Building In Public: Working with Boundaries

Franco Valdes — Tue, 02 Aug 2022 13:10:00 +0000

Carta Maps is more than pins on a map – learn about boundaries.

The usual map builder is hyper focused on allowing you to add a single point (latitude and longitude) to the map, some even allow you to add some content around what lives at that point. For many use cases, this is enough functionality but Carta Maps goes beyond the point.

Introducing boundaries was a launch blocker, I was not going to launch without the ability to create unique boundaries based on real data. Carta Maps has boundary information for postal codes, counties and states and on the roadmap is getting neighborhood level information to continue enhancing the platform.

Boundaries can benefit many use cases by showing more than a single point and focusing on an entire area. A service business can show coverage areas by county. A real estate agent can feature specific postal codes where the hottest houses are available. A national company can display all the states they operate in. The use cases are truly endless.

Soon, you will be able to draw your own custom boundaries using everyday design tools like a pencil or paint brush. Fully custom annotations on maps will take Carta Maps to the next level.

Check out cartamaps.com and let me know what you think!

Catch you on the flip side!

– Franco Valdes

Building In Public: Carta Tech Stack

Franco Valdes — Tue, 02 Aug 2022 13:08:00 +0000

In 2022, it is almost too easy to get a proof of concept built and launched for almost free. There are so many free resources, open source libraries and free hosting solutions available. Carta Maps leverages a lot of these and I will go one by one explaining what I chose, why I chose it and what my experience was with it.

First and foremost, the language and framework – Typescript & React. Typescript is a must for a project of this size. It provides safety and peace of mind as I iterate quickly to solve bugs and add new features. React is a by-product of the next two things I will mention, Next and Remix. Both of these are higher abstractions on top of React and supply incredible tooling to build fast server side rendered applications. Picking one or the other was driven by my database and auth provider, Supabase. I could have tried to make it work with Remix, but there was already an authentication helper for Next from the Supabase community so I decided on Next. Still using Remix for this current website since I do love Remix so much.

Supabase, is a Firebase alternative built on top of Postgres which is extremely powerful. I like Firebase too, but I like the idea of a defined schema for a project like Carta. NoSQL approaches have their place but they also scare me a bit. In addition, Supabase’s RLS (row level security) is a next level supapower that you just can’t live without after you use it. It not only simplifies all my queries but also provides an implicit security with minimal work.

Next up, component library and CSS frameworks. For this, I am using a combination of Tailwind and Mantine. Tailwind is used mostly for layout and responsive design. The ability to quickly mock up layouts and ensure that everything is responsive without needing to go back around and optimize for multiple layouts is key for speed. Carta uses a lot of UI and I knew I had no chance of launching this so quickly without a little help, Mantine enters chat. Mantine is an amazing component library with tons of useful components that are battle tested and accessible. It also provides a lot of utilities and additional features that Carta benefits from.

Lastly, hosting and third parties. Everything is hosted on Vercel. I have been using Vercel since it came out and have always been impressed with its feature set and overall incredible developer experience. Both, marketing website and application are hosted there and I couldn’t be happier. For emails, Send Grid. For payments, Stripe. Analytics, Plausible. Bug reporting, Sentry.

The best part of all, it's all running for $0. I will eventually upgrade a few free accounts to paid but then even, the total cost will be under $100 a month. If Carta Maps grows, all of these services and platforms can grow with it seamlessly.

Check out cartamaps.com and let me know what you think!

Until next time!

– Franco Valdes

Building In Public: Carta Is Live

Franco Valdes — Tue, 02 Aug 2022 13:03:00 +0000

Say hello to Carta Maps, a no code solution to help create and completely customize Google Maps. The general idea of Carta Maps started over 4 years ago, but the execution is very young. As an indie dev, dad of three with a full time job, it was my ambitious goal to take my 4 year old idea and create something spectacular for others to use.

I wrote my first line of code April 19, 2022 and launched a beta version of Carta on Jun 27, 2022. This is definitely just the beginning, there is a long list of features I would like to add and even more functionality to refine. Every time you think of a map, I want you to think of Carta. I’m excited to share the rest of the progress just like I’ve been sharing it so far.

Head over to product features & pricing information and check out the rest of the site. I am working on documentation and plenty of tutorial videos to help you build the best maps you can. If you have any questions or feedback, feel free to reach out via email or on twitter.

Best,

– Franco Valdes

Dynamic Links for Remix.Run

Franco Valdes — Wed, 06 Jul 2022 13:33:36 +0000

I want to open this with a disclaimer. I have no idea if this is best practice or even something we should be allowed to do but it worked for me and my use case and thought it was super cool.

Ok, now to the good part. In Remix, which I absolutely love so far, there are a few functions you can export to accomplish many things. LoaderFunction to do server side fetching prior to page load. ActionFunction to handle post request, mostly used for form submissions. MetaFunction to handle meta data and lastly a LinkFunction to add stylesheets, script tags, preload, etc. Read more about those here.

The problem I think exist is that the first three I mentioned, have access to the Remix context. So in these functions you have access to the node request, any params in the URL, etc. In the last one, the LinkFunction you do not. Now that does make sense to me. Maybe including that context slows down the overall page flow or maybe can cause a flicker of styles, not sure. I might start a discussion on Github to learn more about why the LinkFunction doesn't include the Remix context.

So what happens if you need to include a stylesheet based on a database query, or a cookie value? Lucky for you, this article tells you how.

In Remix, not all routes need to be react components and/or real pages on your website. You can just export a loader or action (or both) with no default export and tada you have an api endpoint. So lets try this out in conjunction to my link function dilemma...

In your root.tsx file, you export a function called links, this allows you to include links globally across your entire application. In my use case, I have a theme stored in my database that is user generated and need to load those styles in as well.

// root.tsx
export function links() {
  return [
    { rel: "stylesheet", href: styles },
    { rel: "stylesheet", href: "/user-theme.css" },
  ];
}

Create a new file called user-theme[.]css.tsx. The bracket syntax looks funky but that how you can escape the period. I have used this syntax for robots[.]txt.tsx and sitemap[.]xml.tsx files, works great.

//user-theme[.].css
export const loader: LoaderFunction = async ({ request }) => {
  const { data, error } = await supabase.from("themes").select("*").maybeSingle();

  /**
   * data.styles looks like this...
   * {
   *   "--primary-color": "#hexvalue",
   *   "--secondary-color": "#hexvalue",
   *   ...
   * }
   */
  let cssString = "";
  if (data && data.styles) {
    const { styles } = data;
    const cssVars = Object.keys(styles).reduce((acc, key) => {
      return [
        ...acc,
        `${key}: ${styles[key]};`
      ];
    }, []).join("\n");

    cssString = `:root{${cssVars}}`
  }

  return new Response(cssString, {
    headers: {
      "Content-type": "text/css; charset=UTF-8",
    },
  });
};

So it looks like a lot is happening there but its quite simple. I am querying the database for the information I need, then parsing the JSON into a css string. I am using css variables so I inject those into a :root declaration and ship that with the text/css content type.

That it! Now my dynamic css from the database query is visible on my browser, all server side. There is no client side request, no weird flicker of styles while it loads.

Let me know what you think of this approach! I know my use case was database queries, but you can also access the request cookie and return a dark mode stylesheet and really anything you want.

Your next pet, just a swipe away

Franco Valdes — Wed, 22 Apr 2020 02:34:15 +0000

Where did this idea come from?

My wife and I had recently found out that we were having our first child. While telling our friends about the great news they recommended an app called Kinder that would help us find names we liked in a fun tinder-like swiping interface. Few weeks later, during the Thanksgiving Holiday, we kept seeing how many dog and cat rescues were asking for help! We had fostered and adopted animals before and wanted to help but, with two dogs already we knew fostering or adopting would be option. That is when it hit me, why not take the concept behind Kinder and apply it to fostering and adopting pets!? I opened up my laptop, started designing and coding, and around thirty days later it was released on the app stores.

About The App

My first ever dribbble. Onboarding, login and main screens of Petly.

Search over 300,000 animals at nearly 14,000 shelters across the country. Pair accounts with another user to match on pets you both like and easily contact rescues and shelters right from the app. Pet data and images are powered by the Petfinder API, a searchable database of animals who need homes. Petly provides a new and fun way to search these animals and connect to your partner. This way you can both search the same dogs and match on animals you both would like to adopt.

Tech Stack

Petly is built with Ionic and Capacitor. I cannot say enough amazing things about everything the Ionic team has released into the development community. Just the simple fact that I was able to get from zero to app store in around 30 days is enough to blow you away. In addition to these frameworks and tools, I use Firebase as my backend. It serves as my auth provider, database, serverless functions and push notifications. Talk about a one stop shop for all things dev. Lastly, I also use now from Zeit or I guess now "Vercel" to deploy a quick one page landing page for my app. All in all, ZERO dollars spent to get an app and landing page off the ground and into people's phones. Amazing.

Meet Maple--a six month old labrador retriever_pit bull terrier mix who is available locally.

The Future

For right now it is just a side project. I built it with full intention of it just helping people find their next pet and supplying another avenue for pet lovers to reach the available animals. I would love to partner with shelters and rescues to get animals on the app even faster. I would also love to find a way to bring fostering more to the forefront and provide a more streamlined way for those who want to foster to get involved.

Links

Website
Apple App Store
Google Play Store
Instagram

Technical Interview Questions

Franco Valdes — Tue, 17 Mar 2020 00:08:08 +0000

So it is 2020 and probably the hardest time to get a job in tech. Job requirements are longer than the number of languages that exist and everyone expects you to know front, back and everything in between. Two, three, even four rounds of interviews, hours on site for whiteboarding sessions and even some take home assignments.

It has all gotten a bit out of control and during this #coronavirus2020 #socialdistancing, I decided to build something to help those in need. It's nothing revolutionary, just another tiny piece of the web to help others get information they may be looking for.

I was listening to one of my favorite podcast devmode.fm the other day on this exact topic and it sparked the idea. Guess speaker Paulo, who has years of experience not only in tech but also in leadership talked about his struggles while interviewing for a job in 2020. He goes in depth about the ups and downs of his recent adventure and also touches on some of the technical questions he was asked.

Seeing myself encounter the same struggles at some point in the near future, I thought to myself, there has to be a something out there for this. Right after the podcast was done, I set out to find a resource that would list out some of these questions along with their answers. Something like code signal but with real world examples, answers and maybe even what company asked them.

Nothing. I could not find anything. Maybe I didn't look hard enough. Regardless, I set out to build something to fill this void. Simple UI with informative questions and snippets of code along with what companies are asking (not required).

I truly love that there are so many awesome tools out there that allow me to get an idea from just that, an idea to a finished product in just a few days. Built with NextJS, Firebase, Aloglia and deployed with Zeit Now.

There isn't much on there now, but hopefully it can one day be a resource for the community.

Teqnical
Cover Image thanks to Undraw

Adding Facebook Login to your Ionic app (in 15 minutes)

Franco Valdes — Sat, 28 Dec 2019 20:19:05 +0000

So I tweeted this a few weeks ago and had a few requests for a quick write up.

// Detect dark theme var iframe = document.getElementById('tweet-1204392399176425473-696'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1204392399176425473&theme=dark" }

So here it is...

In this quick tutorial we will cover installing the Ionic CLI, starting up an Ionic project, enabling Capacitor, installing the Facebook plugin and tie it all together with a few lines of code. Yes, just a few lines of code. I will write a separate post about integrating Firebase with your Ionic app as a part 2.

Ionic CLI & Ionic Starter App

Install the Ionic cli and start up a new application.

npm i -g ionic@latest

// ionic start [name] [template] [--type react|angular|vue]
ionic start facebook-login tabs --type angular

At this point you should be able to run ionic serve and see the boilerplate tab app ready for some code. We wont be writing anything yet, few more things to set up first.

Capacitor

Next up, Capacitor. Let's get our Ionic app and Capacitor talking. Here we will enable Capacitor through the Ionic CLI and then use npx to avoid installing any other global packages.

ionic integrations enable capacitor

// npx cap init [name] [appid]
npx cap init facebook-login com.facebooklogin.example

// this is important, next command will error out if skipped
ionic build

npx cap add ios

npx cap add android

Now we have a hybrid app that with the help of Xcode or Android Studio, we can run on our phones. Now off to Facebook to create our Facebook application that allows us to use the Facebook Login product. When you are done creating your Facebook app, we will move to the next step. I followed the steps provided by Ionic here.

Facebook Plugin

Back at your terminal, we will install the native facebook plugin.

ionic cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="**************" --variable APP_NAME="Facebook Login"

npm install @ionic-native/facebook

npx cap sync

The last command (npx cap sync), syncs new native packages into the Capacitor build for all added platforms. It will also prompt you to add various items to your Info.plist file (for iOS). I ran into some issues just copying and pasting them directly, so below is what they should look like to save you some time.

<key>FacebookAppID</key>
<string>$APP_ID</string> // replace $APP_ID will real APP ID

<key>FacebookDisplayName</key>
<string>$APP_NAME</string>// replace $APP_NAME will real APP Name

// you don't need this one
<key>FacebookHybridAppEvents</key>
<string>$FACEBOOK_HYBRID_APP_EVENTS</string>

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>

<dict>
    <key>CFBundleURLSchemes</key>
    <array>
        <string>fb$APP_ID</string> // replace $APP_ID will real APP ID
    </array>
</dict>
in the existing CFBundleURLTypes entry of your Info.plist to work

<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>akamaihd.net</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
            <false/>
        </dict>
        <key>facebook.com</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
            <false/>
        </dict>
        <key>fbcdn.net</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSThirdPartyExceptionRequiresForwardSecrecy</key>
            <false/>
        </dict>
    </dict>
</dict>
in the existing NSAppTransportSecurity entry of your Info.plist to work

Coding Time

Ok, I think we are ready for some code... finally! Open up your app.module.ts file and add it should look like this.


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Facebook } from '@ionic-native/facebook/ngx'; // HINT::This is what we added!

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    Facebook, // HINT::This is what we added!
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Now open up your tab1.page.ts and add the facebook login code by importing the library, types and creating a simple login method. At the end it should look like this.

import { Component } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook/ngx';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  loading: HTMLIonLoadingElement;
  loggedIn: boolean = false;
  facebookResponse: FacebookLoginResponse;

  constructor(
    private loadingCtrl: LoadingController,
    private facebook: Facebook,
  ) {}

  async facebookLogin() {
    this.loading = await this.loadingCtrl.create();
    this.loading.present();

    try {
      const response: FacebookLoginResponse = await this.facebook.login(['email']);
      this.loggedIn = true;
      this.facebookResponse = response;
      this.loading.dismiss();
    } catch (error) {
      console.log('facebookLogin', error);
      this.loading.dismiss();
    }
  }
}

Although it may look like a lot it is really not. We added some loading states just for fun but the real add here is the facebookLogin method. Once we have the response from facebook, we are logged in!

Run a build ionic build followed by npx cap copy and finally npx cap open ios (or android) and build it on your device.

That's it! You have Facebook login on your app.

Helpful links

Creating a design system with stencil and react

Franco Valdes — Sat, 14 Sep 2019 17:34:51 +0000

I want to begin by saying that this is not a “why you need a design system” post. There are enough people talking about why design systems are important, what the benefits are and why you need to implement them. This post is about the how and more specifically, how I am attempting it at my company.

Don't want to read this and just get the code?

It's ok, I do it too sometimes. Check out the repo from this blog post here.

Tools and Libraries

Before getting into the code, I want to review the tools and libraries I used.

Stencil
Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.

React
A JavaScript library for building user interfaces.

TypeScript - JavaScript that scales.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.

Storybook
Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

I will talk about Storybook in part two

I really believe that web components are the future and enjoy what the team at Ionic have done. They are the team behind stencil and the hybrid ionic framework that you can use to build awesome web and hybrid mobile apps.

Getting Started

With all that out of the way, lets get started. In your terminal create a new directory named whatever you want your component system to be called. Posting this here so I will use devto as my example component library.

mkdir devto

This new directory will be where everything in relation to this design system will live, including stencil, storybook and any sub packages like the react bridge we will be building.

In this directory run npm init stencil and choose the component starter app and name it core. This should be all you need to get started working with stencil and build out web components. I used sass for my styles, if you want to use sass, you will need to install the @stencil/sass package and update your stencil.config.js

npm install @stencil/sass sass clean-css-cli -D

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';

export const config: Config = {
  namespace: 'devto',
  plugins: [
    sass()
  ],
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader'
    },
    {
      type: 'docs-readme'
    },
    {
      type: 'dist',
      esmLoaderPath: '../loader',
      copy: [
        { src: '**/*.scss' }
      ]
    },
    {
      type: 'www',
      serviceWorker: null // disable service workers
    }
  ]
};

The next few steps are optional but useful. I set up some generic global styles, some useful mixins and sass functions. Most of them come directly from the ionic framework so I’ll just link you off to that. The idea here is to create an initial theme and some tooling to help you not only maintain some constraints within your components but also allow for some flexibility in your system. Inside the core package make two new directories.

mkdir css theme

Copy the files (below) and do a quick find and replace from ion to devto or whatever you named your system and done. This way everything within your system has a prefix and will not clash with previous css you might be integrating with.

Also in your pacakage.json add the new css/ folder in the files array. Should look like this at this point

{
  "name": "core",
  "version": "0.0.1",
  "description": "Stencil Component Starter",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "es2015": "dist/esm/index.mjs",
  "es2017": "dist/esm/index.mjs",
  "types": "dist/types/index.d.ts",
  "collection": "dist/collection/collection-manifest.json",
  "collection:main": "dist/collection/index.js",
  "unpkg": "dist/core/core.js",
  "files": [
    "dist/",
    "loader/",
    "css/"
  ],
  "scripts": {
    "start": "npm run build.css && stencil build --dev --watch --serve",
    "build.all": "npm run clean && npm run build.css && npm run build.stencil && npm run build.stencil -- --docs",
    "build.css": "npm run css.sass && npm run css.minify",
    "build.stencil": "stencil build --docs",
    "clean": "node scripts/clean.js",
    "css.minify": "cleancss -O2 -o ./css/devto.bundle.css ./css/devto.bundle.css",
    "css.sass": "sass src/css:./css",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watchAll",
    "generate": "stencil generate"
  },
  "devDependencies": {
    "@stencil/core": "^1.3.3",
    "@stencil/sass": "^1.0.1",
    "clean-css-cli": "^4.3.0",
    "fs-extra": "^8.1.0",
    "sass": "^1.23.0-module.beta.1"
  },
  "license": "MIT",
  "dependencies": {}
}

You might have noticed a reference to some other scripts, not to worry they are pretty simple utilities.

npm install fs-extra -D

$ devto/core/scripts/clean.js

const fs = require('fs-extra');
const path = require('path');


const cleanDirs = [
  'dist',
  'css'
];

cleanDirs.forEach(dir => {
  const cleanDir = path.join(__dirname, '../', dir);
  fs.removeSync(cleanDir);
});

Ok, I think this is a good stopping point to make sure what have done is working. In the core package directory, run npm install && npm start. This should open up a browser with the main component that ships with the boilerplate project. Give yourself a pat in the back, you now have web components, some default theming and a great toolbox for building out design system.

Quick Note:
Before continuing, create a production build of stencil. Do this by running npm run build.all in the core package directory. This is not required but i've ran into some issues in the past on fresh builds.

Introducing React

Now that we have a web component, lets talk about how to convert this web component into a react component. Back up into your top level folder (outside of core) and create a folder for this sub package.

mkdir packages packages/react

We will be using rollup here to help bridge and compile these components. In the new react directory lets install some stuff and get everything set up. First off, run npm init -y. We will need to install the local core package and some dev dependencies.

npm install /path/to/core/package
npm install tslib

at the end your package.json should look something like this. Feel free to just copy this and save yourself some typing.

$ devto/packages/react/package.json

{
  "name": "devto-react",
  "version": "0.0.1",
  "description": "React specific wrapper",
  "keywords": [
    "stenciljs",
    "react",
    "design system"
  ],
  "license": "MIT",
  "scripts": {
    "build": "npm run clean && npm run copy && npm run compile",
    "clean": "rm -rf dist && rm -rf dist-transpiled",
    "compile": "npm run tsc && rollup -c",
    "lint": "tslint --project .",
    "lint.fix": "tslint --project . --fix",
    "tsc": "tsc -p .",
    "copy": "node scripts/copy.js",
  },
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/types/index.d.ts",
  "files": [
    "dist/",
    "css/"
  ],
  "dependencies": {
    "devto-core": "0.0.1",
    "tslib": "*"
  },
  "peerDependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@types/node": "10.12.9",
    "@types/react": "^16.9.1",
    "@types/react-dom": "^16.8.5",
    "fs-extra": "^8.1.0",
    "jest-dom": "^3.4.0",
    "np": "^5.0.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-testing-library": "^7.0.0",
    "rollup": "^1.18.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-sourcemaps": "^0.4.2",
    "rollup-plugin-virtual": "^1.0.1",
    "tslint": "^5.18.0",
    "tslint-ionic-rules": "0.0.21",
    "tslint-react": "^4.0.0",
    "typescript": "3.5.3"
  }
}

Next, lets create a tsconfig file touch tsconfig.json which should look like this:

$ devto/packages/react/tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "allowUnreachableCode": false,
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "lib": ["dom", "es2015"],
    "importHelpers": true,
    "module": "es2015",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "outDir": "dist-transpiled",
    "declarationDir": "dist/types",
    "removeComments": false,
    "inlineSources": true,
    "sourceMap": true,
    "jsx": "react",
    "target": "es2017"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "**/__tests__/**"
  ],
  "compileOnSave": false,
  "buildOnSave": false
}

A rollup.config.js file that looks like this:

$ devto/packages/react/rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import sourcemaps from 'rollup-plugin-sourcemaps';

export default {
  input: 'dist-transpiled/index.js',
  output: [
    {
      file: 'dist/index.esm.js',
      format: 'es',
      sourcemap: true
    },
    {
      file: 'dist/index.js',
      format: 'commonjs',
      preferConst: true,
      sourcemap: true
    }
  ],
  external: (id) => !/^(\.|\/)/.test(id),
  plugins: [
    resolve(),
    sourcemaps()
  ]
};

a tslint.json that looks like this:

$ devto/packages/react/tslint.json

{
  "extends": ["tslint-ionic-rules/strict", "tslint-react"],
  "linterOptions": {
    "exclude": [
      "**/*.spec.ts",
      "**/*.spec.tsx"
    ]
  },
  "rules": {
    "no-conditional-assignment": false,
    "no-non-null-assertion": false,
    "no-unnecessary-type-assertion": false,
    "no-import-side-effect": false,
    "trailing-comma": false,
    "no-null-keyword": false,
    "no-console": false,
    "no-unbound-method": true,
    "no-floating-promises": false,
    "no-invalid-template-strings": true,
    "ban-export-const-enum": true,
    "only-arrow-functions": true,

    "jsx-key": false,
    "jsx-self-close": false,
    "jsx-curly-spacing": [true, "never"],
    "jsx-boolean-value": [true, "never"],
    "jsx-no-bind": false,
    "jsx-no-lambda": false,
    "jsx-no-multiline-js": false,
    "jsx-wrap-multiline": false
  }
}

and lastly, a quick file copy utility that will help us move over some files from the core package. This way, we only need to import things from one package instead of installing both stencil and react packages in the future.

$ devto/packages/react/scripts/copy.js

const fs = require('fs-extra');
const path = require('path');

function copyCSS() {
  const src = path.join(__dirname, '..', '..', '..', 'core', 'css');
  const dst = path.join(__dirname, '..', 'css');

  fs.removeSync(dst);
  fs.copySync(src, dst);
}

function main() {
  copyCSS();
}

main();

Now its time to start building stuff. Create a src directory in the react pacakage and lets start coding. The main goal of this package is to bridge the gap between our web components built in stencil and the react ecosystem. Luckily, stencil provides some extra libraries built right in to help with loading these components in.

Quick Note
All credit here goes to the ionic team again, this is how they set up their ionic react package. I learn a lot by being able to duplicate code others have written and really understanding what I am writing.

$ devto/packages/react/src/index.ts

import { JSX } from 'devto-core';
import { defineCustomElements } from 'devto-core/loader';

/** We'll talk about this one in a minute **/
import { createReactComponent } from './createComponent';

export const MyComponent = /*@__PURE__*/createReactComponent<JSX.MyComponent, HTMLMyComponentElement>('my-component');

defineCustomElements(window);

The createComponent helper is where the magic will happen. There we will create a react component dymanically from the web component provided in the only argument. Some other utilities used you can just grab directly from the ionic react package or the repo tied to this blog post.

$ devto/packages/react/src/createComponent.tsx

import React from 'react';
import ReactDom from 'react-dom';

import { attachEventProps, createForwardRef, dashToPascalCase, isCoveredByReact } from './utils';

export interface ReactProps {
  className?: string;
}

interface DevToReactInternalProps<ElementType> {
  forwardedRef?: React.Ref<ElementType>;
  children?: React.ReactNode;
  href?: string;
  target?: string;
  style?: string;
  ref?: React.Ref<any>;
  className?: string;
}

export const createReactComponent = <PropType, ElementType>(
  tagName: string,
) => {
  const displayName = dashToPascalCase(tagName);
  const ReactComponent = class extends React.Component<DevToReactInternalProps<ElementType>> {

    constructor(props: DevToReactInternalProps<ElementType>) {
      super(props);
    }

    componentDidMount() {
      this.componentDidUpdate(this.props);
    }

    componentDidUpdate(prevProps: DevToReactInternalProps<ElementType>) {
      const node = ReactDom.findDOMNode(this) as HTMLElement;
      attachEventProps(node, this.props, prevProps);
    }

    render() {
      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;

      const propsToPass = Object.keys(cProps).reduce((acc, name) => {
        if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
          const eventName = name.substring(2).toLowerCase();
          if (isCoveredByReact(eventName)) {
            (acc as any)[name] = (cProps as any)[name];
          }
        }
        return acc;
      }, {});

      const newProps: any = {
        ...propsToPass,
        ref: forwardedRef,
        style
      };

      return React.createElement(
        tagName,
        newProps,
        children
      );
    }

    static get displayName() {
      return displayName;
    }
  };
  return createForwardRef<PropType & ReactProps, ElementType>(ReactComponent, displayName);
};

Did it work?

There are two ways of testing if it all worked. For this blog post, I will show you the quick and dirty way, creating a quick react app using CreateReactApp. In your main directory, run

npx create-react-app devto-test-app

cd into your newly created app and install your local react package

npm install ../core/packages/react

and change your App.js to look like this:

import React from 'react';
import logo from './logo.svg';
import './App.css';

import { MyComponent } from 'devto-react';

/* Core CSS required for Ionic components to work properly */
import 'devto-react/css/core.css';

/* Basic CSS for apps built with Ionic */
import 'devto-react/css/normalize.css';
import 'devto-react/css/structure.css';
import 'devto-react/css/typography.css';

/* Optional CSS utils that can be commented out */
import 'devto-react/css/padding.css';
import 'devto-react/css/text-alignment.css';
import 'devto-react/css/text-transformation.css';
import 'devto-react/css/flex-utils.css';
import 'devto-react/css/display.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <MyComponent first="First Name" middle="Middle Name" last="Last Name" />
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Thats it, you are importing the MyComponent from your react package, which is important it from stencil.

Go ahead and start your app, npm run start and you will see it all there. Check it out, its a stencil component in your react app!

On the the next one

I will be writing another post about how to integrate Storybook into your design system package. Hopefully I can get that one up next week. Hopefully this post is helpful and can get you up and running building your design system.

Cheers

What a11y tools do you use to audit a website?

Franco Valdes — Wed, 28 Aug 2019 19:03:38 +0000

Working on a cool a11y tool but would like to know what others are using, what features are they benefiting from and what features do they wish those tools had.

Snapshot of what I am working on:

I did it, I wrote my first blog post

Franco Valdes — Wed, 28 Aug 2019 03:25:10 +0000

I’m not a writer.

I have to start with this because it is a fact. I’ve started this “I need to write a blog” process about 5 times and always feel like what I am writing about is pointless and no one will read my words.

I am a web developer, self taught like many of other of us out there. I tell this story a good amount, specially to new devs struggling to find their way. Around 2011, Angry Birds sold their 1 millionth game on the Apple App Store. It was such a simple game and while having a few drinks, my best friend bet me that I couldn’t build an iPhone game.

Lets rewind for just a statement. I was a life long baseball player, played college baseball at the University of Virginia, played in the minors for various organizations. I also have had a ton of knee surgeries and probably wasn’t going to make it much further. I quit in 2011.

Now back to the dev story…

I had so much extra time now without baseball in my life. I found a iPhone 101 college class on iTunesU and finished in 6 weeks. Signed up for an adobe account to get access to Photoshop to make some designs, created my apple developer account and I was ready to go. About 6 months later I release Rockslide to the App Store.

Needless to say, I won the bet, but thats not the point of this post. I also gained a new passion for development. Sure, it was Objective C, lots of copying and pasting and countless hours of build errors but that sparked what is now my career.

Its now 2019 and I am a Tech Lead at Union, an agency in Charlotte. In these last 5-6 years I’ve learned HTML, css, sass, javascript, php, python and more. This industry is a never ending learning curve and I enjoy learning a new thing every day.

I’ve built a few cool apps for myself throughout those years too. Its my way to learn new things. Appvents, a conference management app built with Ionic v1, Angular and a Laravel backend. Gym Journal, a workout tracker and coaching platform built with Ionic v2, Angular and Firebase. Working on an accessibility Mac app called Cra11y built with Electron and React.

Wow, you made it to the end. Glad you stuck around and hope you read some of my future posts. I plan on writing more in depth about some of my projects, both personal and from my job at Union, my outlook on tech and its rapid evolution, and maybe even some techy articles on how to do some cool stuff. Oh yeah, check out my tiny portfolio site.

See you soon.