Introduction

This tutorial will walk you through creating a code explanation tool using ToolJet, a powerful low-code platform, and the Gemini API, an advanced language model API. This tool will allow users to input code snippets and receive detailed explanations, enhancing their understanding of various programming concepts.

Prerequisites

Before we begin, make sure you have the following:

• A ToolJet account. An open-source, low-code platform designed for quickly building and deploying internal tools. Sign up for a free ToolJet cloud account here.
• Access to the Gemini API,  a cutting-edge artificial intelligence (AI) model created through a joint effort by various teams within Google. You can find more information and sign up at Gemini API to get an API Key, that will be used later in the tutorial.

Here’s the preview of what we’re going to build.

Once we have an idea of what we will build, let’s follow the steps below to start building our app step by step.

Setting Up the Gemini API

• Once you have set up your account on Gemini API, navigate here to get your API Key. This key will be used to authenticate your requests.
• The endpoint for the code explanation feature looks like this: POST ‘https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent?key=YOUR_API_KEY‘.

Now that we have our API Key let’s dive straight into creating the UI as the next step.

Creating the UI

Before creating the UI, let’s create a new ToolJet App. On your ToolJet dashboard, click on the Create an app button and name the app Code Explanation Tool.

Creating a custom UI is very simple with the help of ToolJet’s built-in components.

Let’s start by creating the app’s header.

• Drag and drop the Icon and a Text Component from the components library on the right and rename them headerIcon and headerText, respectively.
• Choose an icon of your choice and customise it, under the Styles section.
• To configure the Text component, click on it and see the Properties Panel on the right.
• Set its Data property to ‘Code Explanation Tool’, and under the Styles section, change its colour to light blue (Hex code: #4a90e2ff), font-weight to bold and font size to 25.

Renaming the components will help quickly access their data during development.

• Add a Container component to the canvas. The Container component is used to group related components.
• Drag and drop a Text component, and in the Properties section, set its Data property to ‘Enter your code below’.
• Next, below the text component, add a Textarea component, where we will add the code to get the explanation. Rename it to codeInput. Adjust the height and width of the component. To make the codeInput component look neat, adjust the Boxshadow properties in the Styles section.
• Under the Properties section of the codeInput component, add the following code as the Default value:

function fun_name (param1 , param2) {
  return param1 * param2 ;
}

• Now that we have our codeInput component in place, drag and drop a Button component right below it and rename it to getExplanation.
• Under its Button text property, add ‘Get Explanation’.

Now, let’s add the portion that will display the explanation for the code that we provide.

• Below the getExplanation button, add a Text component and under the Data property, add the text, ‘Explanation’; under the Styles section, change the Size to 14 and Weight to bold.
• Below the text component, drag and drop the Textarea component; this is where the explanation of our provided code will be displayed. Rename it to codeExplanation. For now, let’s remove the Default value and keep it blank.

With that, our UI is now ready; it’s time to build the functionality of our application.

Creating Query

With ToolJet, we can create queries, allowing us to interact with the data stored in the data sources. In this tutorial, we will use ToolJet’s REST API query, to use the Gemini API for the code explanation feature.

• Expand the Query Panel at the bottom and click the Add button to create a query.
• Choose the REST API query and rename it to getCodeExplanation.
• In the Request parameter, choose POST as the Method from the drop-down and replace the URL with: https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=
• Replace with the API Key you generated while creating an account on Gemini API, as mentioned in the start of the tutorial.
• In the Body section, toggle on Raw JSON and replace it with the following code:

{{`{
  "contents": [
    {
      "parts": [
        {
          "text": "This ${components.codeInput.value.replaceAll("n"," ")}",
        },
      ],
    },
  ],
}`}}

In ToolJet, double curly braces {{}} can be used to pass custom code and access data related to components and queries.

• To ensure that the query runs every time the application loads, enable Run this query on application load?
• Click on the Run button to run the query, and you can see that the explanation of the default value code we entered in our codeInput component is provided.

Binding the Query and the Query Data to the Components

As our query is running successfully and we are fetching the code explanation from Gemini API, it’s time to bind the query to our getExplanation button and display the data in the codeExplanation component.

• Select the getExplanation button, under the Properties section, and click the New event handler button to create a new Event.
• Choose On click as the Event, Run Query as the Action, and select getCodeExplanation as the Query.

This event will ensure that whenever we click the getExplanation button, the getCodeExplanation query is being run.

Now, let’s display the code explanation in our codeExplanation component.

• Select the codeExplanation component, and under the Default value property, add the following code: {{queries.getCodeExplanation.data.candidates[0].content.parts[0].text.replace(/**/g, '').replace(/*/g, '')}}.
• Next, click on the getExplanation button, and if you followed the above steps correctly, you should now be able to see the explanation of the provided code displayed in the codeExplanation component.

Our app is now ready; try adding different pieces of codes in the codeInput component, and to generate an explanation, click on the getExplanation button to see the explanation being displayed codeExplanation component.

Conclusion

Congratulations! You’ve successfully created a code explanation tool using ToolJet and the Gemini API. This tool can help users understand complex code snippets, making learning and debugging more efficient. With ToolJet’s low-code capabilities and Gemini’s powerful language model, you can further enhance this tool by adding features like code formatting, language detection, and more.

To learn and explore more about ToolJet, check out the ToolJet docs or connect with us and post your queries on Slack. Happy coding!

The post Create a Code Explanation Tool using ToolJet and Gemini API appeared first on ProdSens.live.

I’ve written a lot of one-off project, internal scripts for my own use, B2C apps, B2B apps, and everything in between. Every time I start a new project I like to use a new stack to try and diversify my own skillset, and so that if I’m ever tasked with doing another similar project in the future, my knowledge can accelerate my workflow. PromptSmithy was slightly different though, as the stack hadn’t changed from other recent projects of mine, however the frontend tooling did greatly. In this article I’m going to break down the stack we used and talk about the new development flow we used for rapid development.

The Stack

React + Vite + React Router

We all know what React is at this point, but why use it with Vite and React Router DOM over something like NextJS?

The reasons are twofold: We didn’t need any of the backend functionality of NextJS, and I wanted something that wouldn’t get in the way of our development with SSR or any other special cases that are only found on NextJS.

On top of that, Vite’s compiler is super fast, supports Typescript (which we of course used), and built just fine on our host, which was Cloudflare Pages. Cloudflare Pages is a super fast static website hosting service by Cloudflare, which allows your site to take advantage of their global CDN to make sure your site is as close to your users as possible. It supports nearly any JS framework you could want to use for your site, and can even host plan old HTML if you’re of that persuasion.

React Router is also super minimal and doesn’t get in the way, and provides all the same functionality of NextJS’s static output router without making your compile sizes massive. Our entire built site (before we added all the fancy physics animations) was just a bit over 135KB.

Tailwind + shadcn/ui + v0.dev

For development of the UI components, we tried something new. Vercel has this new AI tool called v0.dev that allows developers to take advantage of shadcn/ui and Tailwind using nothing but words, which can then be easily downloaded to your local project using nothing but a simple npx command.

Here is the original example code for a 404 page that I ended up using in the final app! npx v0 add RB8eJs2Kd6R

While I have experience with Tailwind and frontend development, I don’t really have the patience to use it. I usually end up using something like Mantine, which is a complete component library UI kit, or Daisy UI, which is a component library built on top of Tailwind. Shadcn/ui is quite similar to Daisy in this sense, but being able to customize the individual components, since they get installed to your components folder, made development more streamlined and more customizable. On top of that being able to change my components style with natural language thanks to v0 made development super easy and fast. Shadcn may be too minimalist of a style for some, but thanks to all the components being local, you can customize them quickly and easily!

This is the structure of the project’s components directory.

Supabase

Here the thing that accelerated my development the most: Supabase. Thanks to its Database, Authentication, and Edge Functions, we were able to rapidly develop the app. Their JS library made development super seamless, and their local development stack made testing a breeze.

The development process is simple: install their CLI, run supabase init, run supabase start. That’s it. (Assuming you have Docker installed that is.)

The database service is pretty self explanatory. Rather than having to write SQL queries in a remote API, hosting that API as well as the database to go with it, you simply create tables with migrations (created using supabase migrations new name_here), then you can query the migrations using the frontend API. From there you can configure row level security, which restricts access to specific rows on a per user basis, using either the migrations themselves or using the local UI. I opted for the former so that I could easily apply the migrations. Here is one I wrote for the project.

create table prompts (
  id bigint primary key generated always as identity,
  user_id uuid not null,
  metaprompt_id bigint references metaprompts(id),
  prompt text,
  variables text,
  title text,
  task text,
  created_at timestamp with time zone default now(),
  updated_at timestamp with time zone default now(),
  public boolean default false
);

alter table prompts
  enable row level security;

create policy "Users can insert their own prompts" on prompts
  for insert with check (auth.uid() = user_id);

create policy "Users can read their own prompts that are private" on prompts
  for select using (auth.uid() = user_id and public = false);

create policy "Users can read all prompts that are public" on prompts
  for select using (public = true);

This then got applied locally by running supabase db reset, and deployed remotely with supabase db push. We could then query on the frontend using the following code:

const limit = 100;
const { data, error } = await supabase
      .from("prompts")
      .select("*")
      .eq("public", true)
      .order("created_at", {
        ascending: false,
      })
      .limit(limit);

You can see Supabase’s excellent guides on how to do this for more information.

We also took advantage of Supabase’s Authentication service that allows us to quickly and effectively log in a user so we can handle authenticated requests (which once Row Level Security is set up is automatic) quickly. Since this was a weekend project sort of app, we went with Supabase Magic Links, which allows our users to log in by simply entering their email and clicking a link that gets sent. Here’s all the code to do that:

const email = 'me@example.com';
const { error } = await supabase.auth.signInWithOtp({ email });

That’s it! Then all we had to do is have the user click the link (assuming your website URL is configured properly in the Supabase settings) and they were logged in!

Finally we used Supabase Edge Functions to handle payments with Stripe, as well as hold the business logic of PromptSmithy, which primarily just calling Anthropic AI. Edge Functions are written in Deno, which is a NodeJS alternative that I like very much. You create a new edge function by running supabase functions new name_here and then deploying with supabase functions deploy . You can also run these functions locally for testing (which is what we did along with the Stripe CLI’s webhook feature) with supabase functions serve .

Calling your functions on the frontend is super simple too. Whenever we wanted to call the AI, this is the code we run on the frontend.

const input = "Write me an email response to my boss asking for a raise";
const resp = await supabase.functions.invoke<string>(
        "create-task-prompt",
        {
          body: {
            task: input,
            variables: "",
            public: true,
            metapromptID: 1,
          },
        }
      );

The value of resp would be whatever we responded with, which is always JSON for our application.

Functions can also be invoked by remote applications, for example Stripe webhooks. If you want this, you’ll need to make sure that JWT verification is disabled for that function, which can be done simply in the config.toml in the supabase directory of your project. Here’s an example.

[functions.stripe-webhook]
verify_jwt = false

Now whenever this function is deployed you can check your Edge Functions page for a URL to give to Stripe!

Conclusion

In conclusion, our choice of stack for PromptSmithy’s project was primarily based on the speed of development and the performance of the end product. Using tools like Vite, React, Supabase, and the innovative v0.dev, we were able to develop rapidly and effectively, resulting in a highly functional and efficient application.

Want to give PromptSmithy a try? All new users get $5 in free credits!

The post Building a Fast, Efficient Web App: The Technology Stack of PromptSmithy Explained appeared first on ProdSens.live.

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.

Inspiration

Ham sandwiches are my favorite lunch. Especially with Louisiana hot sauce mixed with the mayonnaise.

Here’s My Code:

HTML

CSS

*{
    box-sizing: border-box;
}
:root{
    --ham-background: linear-gradient(
        45deg,
        rgb(180,100,120),
        rgb(220,140,160),
        rgb(180,100,120),
        rgb(220,140,160)
    );
    --ham-border-background: linear-gradient(
        45deg,
        rgb(200,120,140),
        rgb(240,160,180),
        rgb(200,120,140),
        rgb(240,160,180)
    );
    --ham-background-two: linear-gradient(
        45deg,
        rgb(220,140,160),
        rgb(180,100,120),
        rgb(220,140,160),
        rgb(180,100,120)
    );
    --ham-border-background-two: linear-gradient(
        45deg,
        rgb(240,160,180),
        rgb(200,120,140),
        rgb(240,160,180),
        rgb(200,120,140)
    );
}
body{
    display: grid;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}
section{
    height: 300px;
    width: 600px;
    display: grid;
    justify-content: center;
    transform-style: preserve-3d;
    transition: transform 2.5s;
    transform: rotate3d(15, 1, 1, 40deg);
}
section:hover{
    transform: rotate3d(1, 1, 1, 25deg) matrix3d(
    3, 0, 0, 0,
    0, 3, 0, 0,
    0, 0, 3, 0,
    100, 100, 0, 4
  );
}
.top-bread{
    display: grid;
    z-index: 5;
}
.top-crust{
    width: 350px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 25px 50px 5px 50px;
    background-color: rgb(150,90,60);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 40px 20px 0px;
}
.top-center{
    height: 100%;
    width: 100%;
    background: rgb(220,170,120);
    border-radius: 25px 30px 5px 25px;
    box-shadow: inset 2px 1px 5px 3px rgb(150,90,60);
}
.mayo-and-hot-sauce{
    height: 130px;
    width: 350px;
    display: grid;
    z-index: 4;
    margin-top: -163px;
    margin-left: 0px;
}
.blob{
    background: rgb(255,180,170);
    box-shadow: inset 0px 0px 4px 2px rgb(200,120,140);
}
.blob-one{
    width: 40%;
    margin-left: 245px;
    margin-top: 15px;
    border-radius: 0px 10px 25px 0px;
    height: 35px;
    transform: rotate(10deg);
}
.blob-two{
    width: 80%;
    height: 40px;
    margin-left: 45px;
    margin-top: 25px;
    border-radius: 0px 10px 90px 0px;
    transform: rotate(2deg);
}
.blob-three{
    width: 80%;
    height: 20px;
    width: 30px;
    margin-left: 20px;
    margin-top: 0px;
    border-radius: 0px 0px 25px 50px;
    transform: rotate(20deg);
}
.blob-four{
    width: 80%;
    height: 20px;
    width: 50px;
    margin-left: 220px;
    margin-top: -20px;
    border-radius: 0px 0px 50px 50px;
    transform: rotate(10deg);
}
.blob-five{
    width: 50px;
    height: 25px;
    margin-left: 90px;
    margin-top: -22px;
    transform: rotate(-20deg);
    border-radius: 0px 0px 115px 80px;
}
.blob-six{
    height: 40px;
    width: 50px;
    margin-left: -50px;
    margin-top: -35px;
    border-radius: 16px 0px 10px 20px;
    transform: rotate(-20deg);
}
.blob-seven{
    height: 30px;
    width: 60px;
    margin-top: -30px;
    margin-left: 130px;
    border-radius: 0px 0px 25px 40px;
    transform: rotate(-15deg);
}
.blob-eight{
    height: 60px;
    width: 30px;
    margin-left: 330px;
    margin-top: -120px;
    border-radius: 0px 0px 20px 0px;
    transform: rotate(20deg);
}
.ham-edge-one{
    width: 374px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 10px 30px 10px 25px;
    background: var(--ham-border-background);
    padding: 0px 3px 3px 0px;
    z-index: 3;
    margin-top: -180px;
    margin-left: -15px;
}
.ham-layer-one{
    width: 370px;
    height: 128px;
    background: var(--ham-background-two);
    border-radius: 10px 27px 10px 24px;
}
.ham-edge-two{
    width: 374px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 10px 30px 10px 25px;
    background: var(--ham-border-background-two);
    padding: 0px 3px 3px 0px;
    z-index: 2;
    margin-top: -205px;
    margin-left: -14px;
}
.ham-layer-two{
    width: 370px;
    height: 128px;
    background: var(--ham-background);
    border-radius: 10px 27px 10px 24px;
}
.bottom-bread{
    display: grid;
    z-index: 1;
    margin-top: -220px;
}
.bottom-crust{
    width: 350px;
    height: 130px;
    transform: skewX(-50deg);
    border-radius: 25px 50px 5px 50px;
    background-color: rgb(150,90,60);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 40px 20px 0px;
}
.bottom-center{
    height: 100%;
    width: 100%;
    background: rgb(220,170,120);
    border-radius: 25px 30px 5px 25px;
    box-shadow: inset 2px 1px 5px 3px rgb(150,90,60);
}
@keyframes spin {
    from {
        transform:matrix3d();
    }
    to {
        transform: rotate(360deg);
    }
}

Code Link

Here is a link to the code in CodePen: myLink

Journey

I started by using a simple paint app I had already built to draw a rough sketch of the sandwich, just to clear things up in my mind. Then I started on my HTML. I chose the class names according to the part of the sandwich I intended each element to represent. Except for the section, to hold the whole sandwich, (and the body) I used div elements for the whole creation.

Once I was done with the HTML I moved to the CSS. I started by defining my * selector’s properties. I set the box-sizing and also I gave all the elements a border: 1px solid black property and attribute. From there I started at the top of the sandwich and worked my way down (except that I styled both pieces of bread at once), styling parents, then children. Once everything but the .mayo-and-hot-sauce element were styled, I put my sandwich together by setting the margin properties to appropriate values.

Then, I started on the .mayo-and-hot-sauce element. I added .blobs and styled them, until it looked good to me.

Finally, I added the animation to the section element. I’ve had little practice with CSS animations, so I had to play with it a while before it was to my liking.

With that, the project was finished. I learned several things. One would be, how to use the border-image property. It’s really neat. I used it to give my slices of ham a gradient border to match their background properties. I also learned about the rotate3D and matrix3D properties of CSS.

In building the project I strove to make the sandwich appear 3D. This, along with realistic looking gradients, I would say are it’s main high points, and the goal’s I tried to achieve.

MIT License

The post 3D Ham Sandwich Animation appeared first on ProdSens.live.

Let’s say you’ve just come up with a cool idea for a Shopify App with a friend. You’ve done some planning, have an idea of how you want to implement your app, and then the moment you create your repository you bump into one of a few issues that means you can’t work on it together. Your app is a huge project, you don’t want to have to work on it by yourself.

You do some research and you see some people talk about Git and version control online but you can’t actually test your code simultaneously. It’s a tricky situation but have no fear. At Flare, we’ve been building a Shopify app and after a bit of trial and error, we’ve managed to come up with a few workarounds to some common issues you might face when attempting to set up a team development environment for a new Shopify App.

We are using the Node JS Starter for this project, however the concepts are transferrable to other frameworks as well!

Tunnels (CloudFlare vs. Ngrok)

The big one… Shopify provide a tunnelling service to expose your app to the internet. This is because when you open your app, it’s visible as an iFrame inside of Shopify’s app pages. The iFrame then renders whatever is in your App Bridge directory, i.e your frontend React (or whatever other) interface you use. The Shopify app page needs to be able to see your code in your local codebase, and as such Shopify use a default tunnel generated in CloudFlare. This is a recent switch as they used to use Ngrok, however CloudFlare tunnels are dynamically allocatable and there’s no hassle in the form of setting up an account or creating domains like there is in Ngrok.

That being said, Ngrok has a few things going for it that made it our choice to use as a tunnel provider, these include:

• Live traffic monitoring either in your terminal / console, or on their web dashboard
• Simulating and repeating network requests through the tunnel
• Visibility into live tunnels running and the ability to remotely shut them down from the admin page
• TLS/SSL certificates on those tunnel domains

and a few more, but I’ll spare you the details. What I won’t spare you is a few tips and tricks to get going with Ngrok instead of Shopify’s default CloudFlare.

First and foremost, go to Ngrok’s Website and sign up for an account. Then follow the installation instructions to set up Ngrok in your terminal. Ensure that you and your teammate set up different accounts and different tunnels. You will each want to go to the ‘Domains’ tab in the left hand panel and create a domain. You get one free static domain per user account without upgrading, this should be free.

Once created, click on the small terminal icon to the right of your Ngrok domain and copy the command to start your tunnel on your local machine. Make sure you’re passing the port of your Shopify App server through there as well, it should look something like ngrok http --domain=YOURNGROKDOMAINHERE 4000 in the case that your app port is 4000. Run this in a terminal and you should see a nice Ngrok window appear. Leave this running the background and open a new window and navigate into the root of your Shopify app project.

You can pass your own flags to the npm run dev command by adding an extra -- before you add your flags, in this case we want to add the --tunnel-url= flag to our command to specify the domain of our Ngrok tunnel, in which case we use npm run dev -- --tunnel-url=YOURNGROKDOMAINHERE to force our dev server to run on the tunnel domain that we specify and not generate a random CloudFlare tunnel.

Once we’re running both of those commands together, we should be able to access our app on our Ngrok domain.

You might be saying “well now I can connect to my app but my teammate can’t run his code at the same time, this didn’t help at all…” hold your horses! We’ve got an app service running but the most important part is where you point it. Read to learn about Git and most importantly, development stores!

Git and Version Control

Now you may have heard of Git and Version Control as one of the key tools in a programmers’ tool belt, well those people are wrong… this is the tool belt. A programmer that doesn’t use Git is a programmer ready and willing to lose everything to an accidental misclick, a corrupted disk or a cat falling asleep on the backspace key.

Version Control is pretty self explanatory, it is essentially a periodic save of whatever changes you’ve made to your code. A Git user can regularly make commits to a repository in order to save their code changes. If they should change something that breaks the code, rather than trying to make it work or changing things to try and get it back the way it was, the programmer can just revert back to the previous commit. Think of it as a backup of your code, a time machine.

So let’s talk about branches. This is the bit we really want to focus on today. Branches allow us to create separate sets of changes from our code that branch off into different versions. In this case, we are going to cleverly create a development branch and a main branch to act as our development and production environments respectively.

We do this simply by running git checkout -b development in the root folder of our Shopify App. This will switch us to a development branch. We can make changes in here and when we are happy to move them into main we can create what is called a pull request to merge the changes in development into main. This can be done easily in a remote Git Repository hosted on a platform like GitHub or BitBucket. Creation of Pull Requests (here on referred to as PRs) differs between each of these platforms in the interface, but the concept is still the same, make sure to look up creating a PR in your specific remote repository provider and ensure you are merging development into main and not vice versa.

An optional extra that is common amongst large scale companies is to create feature branches which is just a fancy way of saying anytime you want to fix a bug, add a new feature or make any goal based changes, you create a new branch in your repository. In this case, development would be our base branch so we would create a new branch from development named after your feature (i.e. added-styling-to-div) that you would then merge into development and then eventually into main to deploy it to your end user. Think of the development branch as the place that holds all of your upcoming features while you test them and make sure they work, and then main as the version of your app that your user sees.

In a later article, we will go over how we automatically deploy our app from the main branch using GitHub Actions.

Development Stores

The crucial finale of this article is how we use development stores. This is where it gets a little tricky, but make sure to stay with us.

Development stores are a way that Shopify allows its app creators to test their apps on a storefront. It is a barebones store that you will have created if you ran that npm run dev command we discussed in the first part of the article, or you can choose to develop your app on your own store should you configure your app to do so (this won’t be covered in this article).

So you and your friend want to develop your app but you can’t connect to the same store? Well that’s easy… make two more stores. I know this may seem like a cop out, but trust us, we tried a ton of different ways and this is the best way to go about it.

Remember those branches we created earlier in Git? Well here’s how this goes down. We want to create a development store for you and your teammate (2 so far), then we want to create a development store for your development branch in your remote repository (3 in total). Then we’re going to create 2 more apps in the Shopify dashboard, one for you and one for your teammate. In our case we have APP NAME - USER FIRST NAME as our naming format to ensure we won’t end up with duplicate development stores.

Anytime you run your code locally, we want to run it off of your Ngrok domain pointing to your personal app. The same goes for your teammate. You make your changes but you don’t track your shopify.app.toml file, then your changes get merged into the dev branch which is running on its own APP NAME - STAGING app installed on its own development store. Then finally merged into the main branch that points to your main app and is exposed to all of your users. With this method, you can test changes on your own development stores and merge and conditionally approve change requests before they go out to your users without having to revert changes as often, as well as maintaining your own workspace and not interfering with one another.

Quick Tip – Make sure you have a separate TOML file for both your development environment and your production environment. Personally, I always get confused and irritated having to run the command to change TOML files or check which TOML file I’m using, so I just have two separate directories for my production and development environments with a TOML file in each one respectively. However, you can just be more diligent than myself and use the npm run shopify app config use to specify a different configuration TOML file to point to either your personal Ngrok domain or your production app

Conclusion

By now you should have a Git repository in your app with a few branches created, a Ngrok domain acting as a tunnel for your application and a few development stores connected to different versions of your app. That’s great! You and your teammate can now make separate commits (after having locally tested code on your own development stores) that can be periodically approved and merged up into main where everyone can see your new feature releases. A few final notes and words of wisdom:

• If you choose to add a Theme App Extension UI (start playing with app blocks) you will need to have a local version of your code that is specifically acting as a local copy of the main branch. If you try to run npm run deploy in your development branch, it will only deploy to your development app and not your users. Read the ‘Quick Tip’ at the end of the last section of the article for a quick insight into using npm run shopify app config use to address this in one folder.
• Do not commit your TOML files except for an initial commit to add your production TOML file to the repository. You don’t want to overwrite your production TOML file with your local development one, or all of your app users will be routed to your laptop’s development server.
• With Ngrok’s free plan, you have a limit of 1GB of bandwidth, so try not to leave your local server running with Ngrok for too long or you may use up all of your bandwidth very quickly and be forced to stop testing features until the rolling month contract rolls over to the next month.

If you haven’t by now, please go and take a look at some of the work we’re doing at Flare to try and make e-commerce more sustainable.

Happy coding,

~ Josh

The post Set up a Team Environment for Shopify App Development appeared first on ProdSens.live.

The post Loneliness in the C-Suite: A closer look at the CPO landscape appeared first on Mind the Product.

The post Loneliness in the C-Suite: A closer look at the CPO landscape appeared first on ProdSens.live.

Navigating the complexities of providing IT support, especially with the prevalence of remote workers and a globally dispersed customer base, can be challenging for small and midsize businesses. The cost of extensive on-site support is often prohibitive. Remote support software offers a practical solution by enabling IT teams to manage technical issues efficiently without physical presence, significantly easing the burden on small IT departments.

Selection of Top Remote Support Software

Our editorial team has rigorously evaluated and selected the top remote support software solutions, presenting an insightful review to guide you in choosing the right one for your business needs. The list includes:

HelpWire
TeamViewer
ConnectWise Control
Zoho Assist
Splashtop Remote Support

HelpWire

Best for Small to Medium-Sized Businesses: HelpWire is a free tool providing secure and fast connections for Windows and macOS.

Pros: User-friendly, simultaneous access to multiple client workstations, free.
Cons: No mobile device support, lacks session recording.

TeamViewer

Best for Personal Use: Known for its cross-platform connectivity, it offers a free version for personal use, with the paid version providing advanced features.

Pros: Intuitive interface, fast operation, integration with third-party apps.
Cons: Limited to one remote system view at a time, not ideal for large files, version compatibility issues.

ConnectWise Control

Best for IT Support: Tailored for tech support teams, it offers comprehensive session logging and proactive problem identification.

Pros: Versatile features, automated alerts, reliable logging.
Cons: Confusing webpage, slow UI response.

Zoho Assist

Best for Small Business: A cloud-based app enabling on-demand customer support sessions.

Pros: Easy to use, security breach notifications, free cloud storage.
Cons: Costly licensing, limited Chromebook screen sharing, Windows-only remote printing.

Splashtop Remote Support

Best for Mac: Offers advanced endpoint management features and robust security.

Pros: Unlimited concurrent sessions, non-intrusive upgrades, maintains system responsiveness.
Cons: Expensive, audio lag issues, minimum one-year subscription.

Understanding Remote Support Software

Remote support software is crucial for IT teams to remotely access and control devices for troubleshooting and maintenance. It saves time and money, eliminating the need for physical access to devices. The software is diverse, catering to various business needs, from small-scale operations to large enterprises, offering both attended and unattended support functionalities.

Benefits and Challenges

Benefits: Remote support software provides time and cost savings, increased efficiency, and the ability to manage IT infrastructures flexibly.

Challenges: Potential issues include connectivity problems, privacy concerns, and limitations in addressing hardware issues.

Choosing the Right Software

When selecting remote support software, consider your business size, budget, and specific needs. Enterprise buyers should focus on feature-rich tools with integration capabilities. Small businesses need to weigh cost against functionality. Best-of-breed buyers might prioritize specific features like remote access for online meetings.

Conclusion

Remote support software is an invaluable tool for modern businesses, offering a range of solutions to meet diverse needs and challenges. Careful consideration of your specific requirements will help you choose the most suitable software, enhancing your IT support efficiency and effectiveness.

The post Top 5 Remote Support Software Solutions (Free & Paid) appeared first on ProdSens.live.

React.js. You’ve probably heard the name bounced around, seen job postings requesting React skills, or noticed more and more sites being built with this technology.

As one of the most popular JavaScript libraries for building user interfaces, React has gained traction. But should you actually invest time in learning it? What can React really do for you or your business?

In this article, we’ll look at the core benefits of React and why it may just transform the way you think about and approach web development. We’ll also explore some of the emotions and motivations that learning React can spark within you as a developer.

The Virtual DOM – Cutting Edge Performance

One of React’s standout features is its use of a Virtual DOM. This is essentially a JavaScript representation of the actual DOM.

When the state of a React component changes, React compares the Virtual DOM against the actual DOM, calculates the difference, and then only updates what needs to be changed in the real DOM.

To learn about Dom, check out this article, The Power of React Dom For Front-End Development.

This process boosts performance dramatically compared to manipulating the real DOM directly. No more inefficient rerendering of entire components! With React, only changed parts are updated. This breakthrough engineering is what enables React’s famous speed and smoothness.

As a developer, you’ll delight in seeing complex UIs render and update flawlessly. Pages will transition instantly before your eyes. This sense of power and control over the user experience makes working with React so satisfying. You’re not just coding components; you’re conducting a visual symphony of pixels.

Modular, Reusable Components

React code is composed of discrete, modular components. These act like building blocks you can reuse and combine to create complex UIs. React’s composable component architecture gives you Lego-like powers to construct digital masterpieces.

Follow this article to learn more about Step-by-Step Guide to Implementing React Router for Dynamic Single-Page Applications.

Creating these bite-sized components forces you to think systematically about how an interface should be broken down. The result? UI code that is more flexible, extensible, and maintainable. Refactoring becomes simpler. Collaboration with other developers is encouraged.

Learning React teaches you coding techniques and an elegant new perspective on structuring front-end code. The days of tangled jQuery spaghetti code are over. With React, your UI code will modularize like never before.

Declarative Coding

React uses a declarative paradigm for rendering UI rather than an imperative approach. What does this mean in practice?

With React, you declare what a component should look like for any given state. React then handles actually rendering the component efficiently. For example, in React, you would write:

const myComponent =  

Rather than a series of DOM manipulation commands like:

const div = document.createElement('div');
div.className = 'myComponent';
div.innerHTML = myComponentValue; 
rootElement.append(div);

This declarative style makes your code more predictable and easier to debug. You tell React what you want done, and React figures out how to do it most effectively.

Coming from an imperative jQuery background, it may take time to shift your thinking. But once the declarative style clicks, it can transform how you conceive of and reason about UI code. It’s a lighter, simpler headspace to work in.

The Power of Hooks

React Hooks took the programming world by storm after being introduced in 2019. These functions like useState(), useEffect(), useRef(), etc., allow you to add state and lifecycle logic to function components.

No more fussing with complex class components to handle state. Hooks let you do everything with the simplicity of functions. They give you easy access to capabilities that previously required wrapping your brain around React’s class component model.

Learn about Hooks in this guide, Toggling Elements Using React Hooks.

Hooks represent a monumental leap forward in making state management straightforward in React. They provide a clean interface for replicating a component’s state between renders. Mastering Hooks is a milestone for any React developer.

Once you grasp Hooks, your React skills are leveling up quickly. You’ll be able to craft stateful logic in React with confidence and ease. You’ll feel a new sense of freedom and flexibility building components.

JSX – HTML Meets JavaScript

React uses JSX, a syntax extension that allows writing HTML-like tags in JavaScript code. This gives you the power to define visual components alongside their logic and behavior.

At first, the intermixing of HTML and JavaScript in JSX can seem odd. But soon, the mental model clicks – components are not just displays. They’re fully integrated UI pieces with both form and function.

JSX allows React to integrate what users see seamlessly and the underlying interactivity. The technology melts away, allowing you to craft UI like manipulating clay in your hands. JSX helps erase the line between markup and scripting.

Immersive Developer Experience

Beyond its technical advances, React provides an utterly captivating developer experience. The satisfaction of seeing your code rendered on the screen in real-time is hard to overstate.

The React environment feels alive as you tweak components and see changes reflected instantly before you. It fosters a sense of flow as you build up UIs piece by piece, entering a zone where you lose track of time.

React’s developer tools also help you visualize and debug what’s happening under the hood in your apps. You can inspect component hierarchies, monitor state changes, and step through the lifecycles of your components.

The combination of rapid visual feedback and rich debugging tools makes React development immersive in ways few other web technologies can match. It’s an interactive, tactile, visually stimulating coding environment. React seems to blur the line between development and exploration. Learning opens up this absorbing developer experience.

React Native – iOS and Android Apps.

To take things even further, once you learn React, you can use that knowledge to build native iOS and Android apps with React Native. React Native allows you to use React principles to author mobile apps that are indistinguishable from those built with platform-specific languages like Swift or Java.

React Native leverages your React knowledge to help you dive into the world of mobile development. It uses the same component architecture as React, letting you reuse UI building blocks. Cross-platform app development has never been easier.

For web developers used to HTML and JavaScript, React Native feels like the most natural path to conquer mobile. Why struggle with Java or Swift when you can build apps with the React techniques you know? React Native makes the native app development world more accessible.

In Demand Skill

Beyond its technical merits, React is also a smart investment because it’s an in-demand skill. Huge companies like Netflix, Uber, Airbnb, Instagram, and Facebook use React extensively in production. It has a strong foothold and is growing rapidly.

Knowing React increases your value as a developer. It opens doors to new job opportunities. Building up your React skills ensures you have a future-ready and marketable resume.

While libraries and frameworks come and go, React has established itself firmly enough that it’s unlikely to disappear anytime soon. The community around React is thriving. You can be confident putting in the time to learn it, knowing it’s a relevant skill set for the foreseeable future.

A Whole New Perspective

More than any particular feature, React’s greatest gift is a whole new perspective on structuring UI code. Once it clicks, it can fundamentally transform how you think about and build user interfaces.

React represents a massive leap forward in the ongoing evolution of front-end development. Learning it well positions you to take advantage of where the web is heading. React skills unlock new capabilities, efficiencies, and levels of user experience.

React empowers you to build dynamic web apps faster and better than ever before. It puts an exciting new toolkit for web development into your hands. Whether you’re looking to improve your professional skills with a high-demand framework or seeking to level up your coding abilities, dedicating time to learning React could prove life-changing.

The potential of what you can build with React is limitless. React allows you to dream up ambitious UIs secure in the knowledge that it can handle the heavy lifting to make them real. There’s no telling what you could create once you master it.

Learning React does require an investment. You must wrap your head around new concepts like the virtual DOM, JSX, props and state, lifecycle methods, and Hooks. But once you start grasping these core ideas, your React powers can grow exponentially.

Are you ready to expand your horizons? React awaits. The future of web development sits at your fingertips. Unlock the potential within React and see what you can build today.

If you want to become a programmer, then this article is your guide to becoming one. It explains everything from start to finish on how to build technical skills and what to do.

If you find this post exciting, find more exciting posts on Learnhub Blog; we write everything tech from Cloud computing to Frontend Dev, Cybersecurity, AI, and Blockchain.

Resource

• Getting Started with Programming
• Javascript Email with Nodemailer
• How to send an email in node.js using nodemailer
• Javascript Array method
• 20 Best React JavaScript Frameworks For 2023

The post Before You Learn React In 2023 appeared first on ProdSens.live.

In this article, I share everything that you need to know about the MLH Fellowship program – what is it, the interview process, and my experience being a fellow (of the prep program).

What is MLH Fellowship?

The MLH Fellowship is a 12-week internship alternative for aspiring technologists. The different programs pair a fun, educational curriculum with practical experience that you can put on your resume right away. It’s collaborative, remote, and happens under the guidance of expert mentors.

The program is divided into tracks that align with the different career interests that Fellows have.

The different tracks that the fellowship has to offer are as follows:

1. Software Engineering
2. Web3 Engineering
3. Site Reliability Engineering

There is another program called the Prep Program which is a 3-week preparation program for those who are interested in experiencing the fellowship before committing to the full 12 weeks. You’ll build out your portfolio of personal projects & experiment with new technologies by collaborating in small groups through a short hackathon sprint.

About the Interview Process

Let’s have a look at how to apply for the fellowship, the interview process, and how to ace your interviews!

To apply for the fellowship, you can go to their official website and apply directly from there.

The selection process is divided into 3 stages:

1. The initial application
2. The behavioral interview
3. The technical interview

Let’s have a look at each stage separately in detail.

1. The Initial Application

This is the very first round of the selection process – the application round.

Essays:

The majority of the applicants are filtered here, so don’t take it lightly. Make sure to take your time when answering the questions. The questions are made to understand you better and your interests.

Pro Tip: The interviewers are looking for these specific things in your applications:

• Are you passionate enough about the fellowship?
• Are you dedicated enough?
• Are you open to learning and collaborating with others?

Make sure to cover these when writing your answers.

Code Sample:

This is another area where a lot of applicants get rejected. You are expected to submit a code sample/project which you have worked on. The complexity of the project depends upon the program and track you are applying for. For example, A simple static site might work for the Prep Program but it may not work for the full fellowship (if applying for a backend track).

2. The Behavioral Interview

After about 2 weeks of submitting your initial application, you would get a response from MLH about if you are selected for the next round or not. If your application gets approved, you are invited for a behavioral interview. This is a general interview and not a technical interview. It is conducted to confirm your eligibility and to check if you can communicate effectively with a proper internet connection.

What to expect in the interview?
You’ll be asked general questions like an introduction of yourself, why you want to be an MLH fellow, and then some questions confirming your eligibility to join the fellowship.

This is a relatively easy interview round as no such preparation is needed for this round. Although, some people, do get rejected in this round as well, so make sure to answer the questions effectively.

3. The Technical Interview

This is the final interview round. After about another 2 weeks, you would be invited to a technical interview if you made it past the previous round. In this round, your technical skills are assessed. The duration of the technical interview is 15 minutes.

What to expect in the interview?
You have to share your screen and present the code sample which you submitted during the application. You will have to explain how your code works. The interviewer will ask you questions from this code sample itself, so make you know what you have written and how it works. What they want to see is your passion for the project, how did you build it, what made you pursue it, and what would you change about it.

That’s it about the interview process! Now, sit back and relax and wait for the final review and matchmaking. The interviewers will evaluate your overall performance and would let you know if you get selected. The final result typically comes about 2 weeks before the program start date.

My Experience as a fellow

I was a part of MLH’s Prep Program, the batch of Spring 2022, i.e. January 2022.

This is our pod, GC-Cheetahs:

Day 1

The first day was full of anxiety for me thinking and worrying about what would happen. Everyone joined the meeting and our pod leader Gabriel Cruz introduced himself and briefed us about what to expect from the fellowship.
After this was the introduction time, but MLH never fails to amaze us with its innovative ideas. Instead of the standard introduction in which everyone tells about themselves, someone else introduced us. We were sent to private breakout rooms in groups of 2 each, where we had to interact with the other person so that we could get to know them. After this, we were sent back to the main meeting, and the other person, whom I interacted with, had to introduce and tell everyone about me. Vice versa, I had to give an introduction to the person I interacted with. This way everyone was introduced to the pod.

After a few days, we were told that we had to work on a total of 2 projects. We assigned ourselves issues and started working together in groups of 2/3 depending upon the issue’s size.

Pod Meetings: Daily Standups

Every day we used to have our pod’s meeting for 1hr where everyone was expected to be present. These were daily standups and retros, in which everyone shared what did they work in the past 24 hours and what will they be doing in the next 24 hours. There also used to be a general discussion on the project and how to go about it.

Let’s come to the fun part, games! Yes, we used to frequently play games with the whole pod during these meetings as well. Can’t express through words the fun we had playing those games, especially Gartic Phones. I remember how a China flag turned into a fat man, and then whatnot.

We also had a concept of lightning talks. In this, every day one of us had to teach a certain topic to the entire pod. The topic could be anything of our choice, which we would like to teach, and which we master. I was very nervous when it was my chance, as I had never taught a technical concept to this many people before. However, my presentation turned out to be excellent and I received very positive feedback from my pod mates. This certainly motivated me to teach to an even larger audience and has given me confidence in public speaking.

My Personal Experience

The fellowship was not just limited to the daily pod meeting of 1hr. We spent most of the time interacting outside of the daily meetings. I remember how we used to stay in meetings while working on issues together, till late at night, sometimes even 3 AM.

When I was a part of the fellowship, it was covid time. I used to have my online college in the morning, which I hardly attended (LOL), and slept during that time, and then used to stay up till late at night while interacting with my pod mates.

At a more personal level, the fellowship had a very good impact on me. I was just in 2nd year of Engineering when I was a part of this program. 12 out of 15 folks in the pod, were from 3rd year or even older than that. This gave me an advantage as I had access to the most valuable resource – mentorship. Those people guided me and helped me make a better career choice. Imagine getting guidance and mentorship at a personal level, from people who have achieved so much in their life (GSoC, LFX, Microsoft, Uber and more!) They expanded my knowledge to a very good level and introduced me to the various career options and what should I do to achieve them (just like they did!).

This one is a candid picture , and don’t mind our sleepy faces as it was past midnight (here, in India):

Conclusion

I would recommend you apply for the fellowship, no matter you get selected or not. If you get rejected, MLH always says it’s “not now” and not “never”. If you get selected, you’ll have the best experience of your life, just like I had! Ultimately, it depends on you how you make the maximum out of the opportunity you are getting.

If you liked this article and you think it helped you know about the program, consider giving this post a like and sharing it with your friends who might have the same doubt.

If you still got any questions, you can reach out to me on my socials (Twitter or Linkedin) and I’ll be more than happy to help.

The post MLH Fellowship – My Experience appeared first on ProdSens.live.

image created by Margaux Peltat for the Chilled Cow YouTube channel

Time for #DEVDiscuss — right here on DEV

How I Got Hired Contributing to open source projects

OGBONNA SUNDAY for OpenSauced ・ Jul 5

#opensource
#webdev
#javascript
#career

Inspired by @og_dev‘s Top 7 post, tonight’s topic is… contributing to Open Source Software!

Questions:

• What was one of your first experiences contributing to OSS?
• Where would you recommend getting started if you were offering advice to a newbie?
• Maintainers, anything to add? What tips or tricks have helped you keep track of your codebases, especially while new folks are contributing
• Any triumphs, fails, or other stories you’d like to share on this topic?

The post #DEVDiscuss: Contributing to OSS appeared first on ProdSens.live.

AI may sound like a new tech trend, but it’s actually been around in the lives of business owners, marketers, and consumers for years. So, how has the perception of AI changed over time?

To answer this question, we looked at the data HubSpot collected in the 2017 survey we conducted of 1,400+ consumers worldwide.

We then compared that data to our 2023 State of AI Survey, in which we surveyed 1,350+ business professionals.

How People Felt About AI in 2017

How People Perceive AI in 2023

How AI’s Perception Could Change

How People Felt About AI in 2017

In 2017, 86% of people wanted to try out AI tools. We also suggested businesses tap into that interest early on to differentiate themselves from competitors, especially regarding customer service.

Speaking of service, our 2017 report also found that 57% of consumers were interested in getting real-time answers from bots on a company website.

Many consumers also reported being comfortable using AI-enabled technologies for more involved customer service requests.

When we asked respondents how they preferred to be helped in a service setting, 40% didn’t care if they were supported by a person or AI tool.

The most interesting find from our 2017 report was how many respondents had no idea they were using AI. Only 37% of our respondents said they’d used an AI tool.

However, through follow-up questions, we found that 63% of respondents who said they didn’t use AI technologies were actually using AI – they just didn’t know voice search engines or programs like Siri are powered by AI.

How People Perceive AI Today

Our 2023 State of AI Survey shows attitudes surrounding AI are favorable, and business professionals worldwide continue to be interested in using the technology.

Overall, business professionals are more aware of using AI in their workflow. Our survey shows 35% of marketers, 54% of bloggers, and 41% of business leaders use AI tools like chatbots, Jasper, Grammarly, and more in their workflows.

Moreover, 80% of business professionals agree that AI/automation tools can help them spend less time on manual tasks such as data entry or scheduling meetings.

78% say AI/automation tools can help them spend more time on the most critical aspects of their roles.

Remember we said 40% of customers didn’t care if they were helped by an AI tool? Well, in 2023, 57% of customer support specialists agree AI can help them personalize the customer experience.

Furthermore, 62% agree AI tools can help them understand their customers better, and 71% say AI can help them improve the overall customer experience.

How AI’s Perception Could Change

According to Forbes, the AI market will reach $407 billion by 2027, a massive leap from its estimated $86.9 billion revenue in 2022.

As the AI market grows, I predict AI will become more commonplace in the next five years as consumers, business owners, and marketers find ways to use it in their workflow and daily tasks.

Forbes already reports 60% of business owners say AI will increase productivity.

The perception of AI will be that it’s a time-saving and productivity-boosting tool that can improve the customer experience. In fact, AI could become a necessity for businesses wanting to stay competitive.

AI is also changing how consumers navigate the web and will continue to do so.

According to our 2023 survey, 53% of professionals agree most people will use chatbots like ChatGPT to answer their questions instead of search engines like Google by 2024.

As more consumers use tools like ChatGPT to find products, services, and answers — digital marketers will have to adapt.

Of course, digital marketers will have to use AI and automation tools to streamline their workflow and produce marketing content quicker.

However, they will also have to take a more creative approach and create more personalized and original content that will stand out and answer specific queries beyond chatbots’ limitations.

Ultimately, AI isn’t going anywhere, and it will be interesting to see how it will continue to be adopted in the future.

The post How AI Perceptions Have Changed in the Last Decade [Comparing New & Old Consumer Data] appeared first on ProdSens.live.