DEV Community: Faraz Patankar

Highlight.js copy button plugin

Faraz Patankar — Tue, 25 Jun 2024 12:00:14 +0000

Highlight.js is quick and easy tool to add syntax highlighting to your code blocks but one feature it lacks is a copy button to easily copy the contents of the code block.

I use Highlight.js on my personal website and wanted this feature to be able to quickly copy things I re-use so I looked at their Plugin API and was pleasantly surprised at how easy it was to extend.

The snippet below is all you need to add a copy button to your code blocks highlighted with Highlight.js. 😄

hljs.addPlugin({
  "after:highlightElement": ({ el, text }) => {
    /**
     * el is the <code> element that was highlighted
     * el.parentElement is the <pre> element
     */
    const wrapper = el.parentElement;
    if (wrapper == null) {
      return;
    }

    /**
     * Make the parent relative so we can absolutely
     * position the copy button
     */
    wrapper.classList.add("relative");

    const copyButton = document.createElement("button");
    copyButton.classList.add(
      "absolute",
      "top-2",
      "right-2",
      "p-2",
      "text-gray-500",
      "hover:text-gray-700",
    );
    // Lucide copy icon
    copyButton.innerHTML = `<svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`;

    copyButton.onclick = () => {
      navigator.clipboard.writeText(text);

      // Notify user that the content has been copied
      toast.success("Copied to clipboard", {
        description: "The code block content has been copied to the clipboard.",
      });
    };

    // Append the copy button to the wrapper
    wrapper.appendChild(copyButton);
  },
});

Ejecting from Expo

Faraz Patankar — Wed, 29 Apr 2020 17:24:01 +0000

After a week-ish of testing the app, I decided it was time to eject from the managed workflow on Expo and switch to the bare version of things so I could start implementing the in-app payments. I am also hoping this results in a reduced app size but let's see how that goes.

Unfortunately, several Google searches later, I've realized there isn't a lot of documentation around this. So I thought, why not just hit expo eject and figure it out as we go?

I'll try and post every problem I run into and how I eventually solved it and link to whatever was helpful in doing so, because your solution might not exactly be the same as mine. Also, this is week 3(?) in React Native for me so you may notice something I didn't. Alright, enough talk, let's go.

The image above is what we see once we eject. It shows a bunch of warnings for both Android and iOS. At the moment, I am only worrying about Android but I am going to go ahead and ignore those warnings and just try running the app and seeing how it goes.

Splash Screen

Well, that didn't take long, did it? To be fair to Expo, it already warned us about this. Upon some digging, I found out that AppLoading is an API that isn't available in the bare workflow. So to fix this, we are going to have to use the expo-splash-screen package. Let's start by installing it.



yarn add expo-splash-screen

Next, we need to get rid of all our code that uses the AppLoading component from Expo and use our newly installed package to do the same thing. You can see some examples here and also what I ended up with below.



import React, { useState, useEffect } from 'react';
import { useFonts } from '@use-expo/font';
import * as SplashScreen from 'expo-splash-screen';

const App = () => {
  const [isReady, setIsReady] = useState(false)
  const [isLoaded] = useFonts({
    'Poppins-Regular': require('./assets/fonts/Poppins-Regular.ttf'),
    'Poppins-Medium': require('./assets/fonts/Poppins-Medium.ttf'),
    'Poppins-SemiBold': require('./assets/fonts/Poppins-SemiBold.ttf'),
  });

  useEffect(() => {
    // Stop the Splash Screen from being hidden.
    const showSplashScreen = async () => {
      await SplashScreen.preventAutoHideAsync();
    }
    showSplashScreen();
    // You can do additional data fetching here.
    // I have a function that fetches my user from Firebase
    // but I have left it out because it is kind of irrelevant
    // in this demo.
  }, []);

  useEffect(() => {
    // Once our data is ready, hide the Splash Screen
    const hideSplashScreen = async () => {
      await SplashScreen.hideAsync();
    }

    if (isLoaded && isReady) hideSplashScreen();
  }, [isReady])

  if (!isReady) return null;

  return (
    <RootComponent />
  )
}

Next, we need to hook into the native view hierarchy and tell it about our Splash Screen. There is an Automatic Configuration section in the README but that did not work for me and I had to configure it manually using the steps provided in the Manual Configuration.

If you also went for the automatic configuration and had it fail for you, you'll probably have to delete res/values/colors_splashscreen.xml and res/values/styles_splashscreen.xml as they are just empty files. Again, if the automatic thing works for you, great. If it doesn't, this might be something you need to fix or yarn android will keep failing.

The docs are pretty on point as once I followed them and restarted my server, I had the Splash Screen showing up and my app running as expected!

Push Notifications

If you're using the push notifications setup that comes with the managed version of Expo, that's probably going to break as well. Luckily, since SDK 37, it also works with the bare workflow. Let's start by installing this package.



expo install expo-notifications

Next, we need to change how we get the push token from our user. In the managed workflow, Expo has access to the manifest and picks up your ID from there. But in the bare workflow, we have to pass it manually.



import Constants from 'expo-constants';
import * as Notifications from 'expo-notifications';

let experienceId = undefined;
// This was a little confusing for me from the docs
// Your experience ID is basically your Expo username followed by
// the slug for the app you need the tokens for.
if (!Constants.manifest) experienceId = '@username/slug';

// Another thing to note here is that the token is actually under
// the data key. This is different from the managed workflow where
// this method would directly return the token.
const token = await Notifications.getExpoPushTokenAsync({ experienceId });

// Basically a function that updates the token in your DB
await updatePushToken(userId, token.data);

Update your push token fetching code wherever applicable and now your app should be updating the push tokens as it was before and everything should be working fine. You can also test this by using the notification testing tool that Expo provides.

App Icons

While testing my notifications set up, I noticed that the app icon was the default Android icon, which means our icon setup is broken as well. At this point, we should have predicted this as the CLI even warned us about it. You know, in the warnings we chose to ignore. To fix this, I followed this guide on the official developer documentation for Android apps.

Basically, open Android Studio, go for a run, or something because it takes forever to read and understand your project, look for the res folder under app/src/main, right-click it, and click New -> Image Asset. This opens the handy little wizard and all you have to do is follow the guide linked above and choose the icon files that you used in your app.json file earlier with Expo.

Once you follow the guide, just uninstall and reinstall the app on your device/simulator and you should see your actual icon!

Keyboard

Another issue that randomly popped up for me was that my keyboard was suddenly covering all my inputs. This was surprising because this seemed to work perfectly fine when I ran my app with Expo.

Login Screen	Keyboard covering inputs

To fix this, I simply had to wrap my view with the KeyboardAvoidingView component from React Native. Come to think of it, I probably should have been using it already. Here's a small snippet of what needs to be done.



import { KeyboardAvoidingView } from 'react-native';

<KeyboardAvoidingView behavior="padding">
    // Existing UI code
</KeyboardAvoidingView>

Building

This is the part you're probably here for, right? So let's get started.

To begin with, we need to fetch our existing keystore from Expo.



expo fetch:android:keystore

This should show you your Keystore password, Key alias, Key password and, also create a .jks file in your root directory.

Next, open android/gradle.properties and set up your Gradle variables.



MYAPP_UPLOAD_STORE_FILE=KEYSTORE_FILE
MYAPP_UPLOAD_KEY_ALIAS=KEY_ALIAS_FROM_EXPO
MYAPP_UPLOAD_STORE_PASSWORD=KEYSTORE_PASSWORD_FROM_EXPO
MYAPP_UPLOAD_KEY_PASSWORD=KEY_PASSWORD_FROM_EXPO

Make sure you move the keystore file that Expo generates into the android/app directory. Then simply set the value of MYAPP_UPLOAD_STORE_FILE to be the name of your keystore file.

Now, let's add the signing config to our android/app/build.gradle file. Make sure you're editing the code in the proper sections of the file. Specifically the release section under signingConfigs and the release section under buildTypes.



...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

Once we do all that, all that is left for us to do is to generate our release APK.



cd android
./gradlew bundleRelease

While building your APK, you might run into this error



Expiring Daemon because JVM heap space is exhausted

To fix it, open your gradle.properties file and add these two lines



org.gradle.daemon=true
org.gradle.jvmargs=-Xmx2560m

You can find the generated file under android/app/build/outputs/bundle/release.

You probably also want to test it before doing that. To test the app, simply run:



npx react-native run-android --variant=release

Make sure you uninstall any previous version of the app that you may already have on the device.

If your build works fine, that's great. Test it well and move onto the next section. For me, it didn't. The app would crash as soon as I opened it and I had to do a bunch of things before I got it to work again. If you're facing the same issue, you might want to continue reading and try some of these techniques.

The best way to figure out why your app is crashing would be to look at the logs, to do that, run adb logcat *:E, wait for it to output whatever it outputs and once it stops/slows down, try opening your app and you should be able to see the stack trace.

Expo Publish

Another issue I faced was with the fact that I had never run expo publish before. This command, along with publishing your app, also creates the manifest and the bundle in your respective iOS and Android directories. Those files are necessary once you build your app and run it in production. Simply run expo publish and it'll create the necessary files in the right place and that should that care of that.

A small note here, you must run expo publish every time you want to release a new version of your app. The manifest and bundle files it creates are basically the JS bundle that contains the code for your app. Your ideal process should be something like this expo publish -> bundle -> test -> release.

Another small note. If you have OTA updates on (and they're on by default), this may break the app for the users that are already using it. I am not quite sure how to work around this but I personally have turned them off so this doesn't happen in the future and will look into turning them back on later.

Assets

After running expo publish, I ran into a new problem. My app would throw an error saying certain assets were missing. The reason behind this is the bundledAssets key in the manifest that Expo generates. To fix this, I had to tell Expo to generate and bundle those assets in the standalone binary. To do that, simply edit/add the assetBundlePatterns key to your app.json with the path to all your assets. Here's what mine looks like:



{
  "expo": {
    "assetBundlePatterns": ["assets/fonts/*", "assets/svgs/*", "assets/*"],
  }
}

Once I fixed these issues, I rebuilt my app and it finally launched and proceeded to work perfectly on my device!

Proguard

So apparently this helps reduce your app size so let's give this a shot as well. To enable Proguard, open your android/app/build.gradle and set this to true.



def enableProguardInReleaseBuilds = true

Once, I did this and built an APK, it was 2MB smaller but it crashed as soon as I opened it. The reason for this was that I was using the react-native-svg package in my app. To fix the crash, I had to add the following snippet to my proguard-rules.pro file.



-keep public class com.horcrux.svg.** {*;}

After doing that and building my app again, everything seemed to work as expected.

Release

At this point, we have a release build that works and the only thing left to do is upload our app to the Play Store so our users can get access to it. Well... almost!

Permissions

This was something I noticed after I built my app and tried to release it. Somehow, my app now needed every single permission ever to run. I don't quite know what caused this to happen but you may want to check your AndroidManifest.xml file and comment out the permissions you don't need.

Another issue I faced with permissions was that even though I commented some of them out, my app would still ask for them. This probably happens because one of the packages (probably a unimodule) in your project might be asking for them even though you don't need them. To fix this, you explicitly need to add tools:node="remove" to that permission. Here's a small snippet.



<manifest

  xmlns:android="http://schemas.android.com/apk/res/android"

  <!-- You need this line to use the tools namespace -->

  xmlns:tools="http://schemas.android.com/tools"

  package="YOUR_PACKAGE_NAME"

>

  <uses-permission tools:node="remove" android:name="android.permission.ACCESS_COARSE_LOCATION"/>

</manifest>

Versioning

Once we've tested our build and made sure everything works as expected, we want to update our versionCode and versionName. Earlier, we'd do this in the app.json but because we've ejected to the bare workflow, we must now do it in the android/app/build.gradle file. Remember, the versionCode must be an Integer while the versionName is a String.

After updating the values, build your app one last time and now, you can upload it to the Play Store and upon review, it should reach your users!

Upon pushing the release to the Play Store, I noticed that the app was now only 9.62MB compared to the 25MB it was earlier which was a great added bonus. You can also exclude some of the unimodules that get added to your project to reduce the app size further. I might explore that in the future and update the post accordingly.

This post was originally published on my personal blog where I will keep updating it as and when I have things to add. In the meantime, I hope this helps other people who are planning to eject from Expo.

Feel free to leave any feedback or questions you may have in the comments or on Twitter!

Recreating the DEV.to homepage with React and TailwindCSS - Part 1

Faraz Patankar — Sat, 25 May 2019 16:59:01 +0000

React and TailwindCSS are my go-to tools for anything I have to build these days. React brings reusability to the table with the components it allows us to build and Tailwind with all its utilities makes the process of building the UI super quick and easy. I wanted to showcase the power of these tools when used together and I thought recreating the dev.to homepage for my first post on the platform would be a good idea.

For Part 1, we'll be recreating the Navbar. I thought it'd be good to start with something small and also make this post a sort of an introduction to Tailwind. Alright then, let's jump right in!

import React from "react";

export default function Navbar() {
  return (
    <nav className="bg-orange-100 h-12 border-b border-gray-400">
      <div className="container flex mx-auto h-full">
        <div className="flex w-full items-center mx-2">
          <div className="flex">
            <svg
              className="h-8 text-white fill-current bg-black p-2 rounded"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 132.000000 65.000000"
            >
              <path d="M0 33v32h11.3c12.5 0 17.7-1.6 21.5-6.5 3.8-4.8 4.4-9 4-28-.3-16.8-.5-18.2-2.7-21.8C30.3 2.5 26.1 1 12 1H0v32zm23.1-19.1c2.3 1.9 2.4 2.3 2.4 18.5 0 15.7-.1 16.7-2.2 18.8-1.7 1.6-3.5 2.2-7 2.2l-4.8.1-.3-20.8L11 12h4.9c3.3 0 5.6.6 7.2 1.9zM46.1 3.6c-2 2.6-2.1 3.9-2.1 29.6v26.9l2.5 2.4c2.3 2.4 2.9 2.5 16 2.5H76V54.1l-10.2-.3-10.3-.3v-15l6.3-.3 6.2-.3V27H55V12h21V1H62.1c-13.9 0-14 0-16 2.6zM87 15.2c2.1 7.9 5.5 20.8 7.6 28.8 3.2 12.3 4.3 15 7 17.7 1.9 2 4.2 3.3 5.7 3.3 3.1 0 7.1-3.1 8.5-6.7 1-2.6 15.2-55.6 15.2-56.8 0-.3-2.8-.5-6.2-.3l-6.3.3-5.6 21.5c-3.5 13.6-5.8 20.8-6.2 19.5C105.9 40 96 1.9 96 1.4c0-.2-2.9-.4-6.4-.4h-6.4L87 15.2z" />
            </svg>
          </div>

          <div className="flex-1 text-center">
            <form action="/submit">
              <input
                type="text"
                placeholder="search"
                className="bg-gray-300 px-3 py-2 rounded w-4/5 lg:w-1/2 h-8"
              />
            </form>
          </div>

          <div className="flex items-center">
            <a
              href="/new"
              className="bg-teal-400 uppercase border-2 border-black py-1 px-5 font-bold mr-4 text-xs rounded hidden md:block"
            >
              write a post
            </a>
            <a href="/connect" className="h-10 w-8 mr-3">
              <svg
                className="h-full w-full"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 60.064 60.064"
              >
                <path d="M59.84,7.897c-0.218-0.268-0.556-0.393-0.893-0.353c-0.077,0.004-0.149,0.017-0.224,0.039L0.738,23.354  C0.312,23.47,0.012,23.852,0,24.293c-0.011,0.441,0.269,0.838,0.688,0.976l21.217,6.952l-1.898,15.182  c-0.05,0.4,0.145,0.791,0.494,0.991c0.155,0.089,0.327,0.133,0.498,0.133c0.215,0,0.43-0.069,0.608-0.206l7.765-5.946l6.807,9.725  c0.188,0.269,0.494,0.427,0.819,0.427c0.022,0,0.045-0.001,0.068-0.002c0.35-0.024,0.661-0.229,0.821-0.542l22.063-43  C60.134,8.631,60.09,8.205,59.84,7.897z M52.895,11.241L22.861,30.429L4.484,24.408L52.895,11.241z M22.288,45.281l1.382-11.053  l4.555,6.507L22.288,45.281z M36.868,49.594L24.418,31.808l32.1-20.508L36.868,49.594z" />
              </svg>
            </a>
            <a href="/notifications" className="h-10 w-6 mr-3">
              <svg
                className="h-full w-full"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 47.834 47.834"
              >
                <path d="M46.878 41.834H.956L.96 40.83c.022-4.066 2.87-7.55 6.76-8.438V20.697c0-8.93 7.265-16.197 16.196-16.197 8.932 0 16.198 7.266 16.198 16.197v11.695c3.89.89 6.737 4.372 6.76 8.437l.004 1zm-43.836-2h41.75c-.458-2.908-2.804-5.24-5.8-5.61l-.878-.107v-13.42c0-7.828-6.37-14.197-14.198-14.197S9.72 12.87 9.72 20.697v13.42l-.878.106c-2.997.37-5.342 2.702-5.8 5.61z" />
                <path d="M21.125 5.988h-2V4.792C19.125 2.15 21.275 0 23.917 0s4.79 2.15 4.79 4.792v1.176h-2V4.792c0-1.54-1.25-2.792-2.79-2.792s-2.792 1.253-2.792 2.792v1.196zm2.778 41.846c-3.94 0-7.375-2.8-8.164-6.656l1.954-.4c.6 2.93 3.21 5.057 6.205 5.057 3.06 0 5.677-2.18 6.23-5.18l1.966.36c-.725 3.952-4.17 6.82-8.195 6.82zM8.72 32.23h3.682v2H8.72zm9.447 0h20.947v2H18.167z" />
              </svg>
            </a>
            <div>
              <img
                className="h-8 w-8 rounded-full"
                src="https://res.cloudinary.com/practicaldev/image/fetch/s--0eFm7wbK--/c_fill,f_auto,fl_progressive,h_90,q_auto,w_90/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/165596/93b7e02d-ac3b-4961-96e2-12dbe20ce77d.jpeg"
                alt="nav-profile"
              />
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}

If you haven't worked with Tailwind or utility based CSS libraries before, this is probably you right now.

The homepage on the Tailwind website describes the library as a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs and that is exactly what it is. The whole library is a bunch of small utility classes that you can put together to quickly build out your UI without writing a single line of CSS. Let's take a quick look at some of the utilities we have used in order to replicate the dev.to navbar.

We've used the flexbox utilities to control the overall layout. flex sets the display type to flex and items-center is short for align-items: center.
We've used a bunch of height and width utilities to set those properties on various elements.
Similarly, we've used the margin and padding utilities to space out our elements.
We've also used several other utilities to set properties from the font size and weight of our text to setting the background color of our containers to setting a border on only one side of the element. Again, without writing a single line of CSS! You can read about all of them here.

And this is where it got us:

I'd say that's pretty close for something that was put together in 15-ish minutes! In the next post, we'll leverage the power of React to build components and quickly put together the rest of the homepage.

P.S - This is the first time I've done such a post so I am open to suggestions of any kind. Should I be focusing more on some things and lesser on some other things? Was there something about the post you liked or was there something else you wish it had? Please, please let me know so that the next one(s) can be better. Thanks!