DEV Community: Yitzi Ginzberg

Mastering 3D Experiences with JavaScript and Wix: A Step-by-Step Guide

Yitzi Ginzberg — Sun, 10 Mar 2024 13:56:13 +0000

Setting Up the Environment

In my last post, we explored making unique and stunning websites using 3D Gaussian splatting. Today, we dive deeper, showing you how to augment your Gaussian splat with JavaScript for mind-blowing 3D web experiences.

Getting Started with Package Downloads

Before we jump into coding, let's set the stage. Our focus in this session will be on using the Luma web library. For this demonstration, I'm using Wix, but feel free to adapt the process to your preferred setup.

Creating a Workspace in Wix

We start by navigating to Wix.com, creating a new site, and opting for a blank canvas. Turning on the developer mode, we then proceed to embed a custom element. After adjusting the custom element to fill the screen area, we specify the source for our code, either through hosting or creating a new Velo file.

Importing Necessary Packages

To harness the full potential of our 3D setup, we install the Luma web package and Three.js from NPM through the Wix interface. These packages form the backbone of our 3D web experience.

Diving into Custom Element Coding

With our packages installed, we dive into coding the custom element. This involves setting up the renderer, camera, and scene with Three.js, crucial components for rendering 3D graphics on the web.

Exploring Wix IDE and VS Code Integration

One neat feature is the ability to integrate the Wix IDE with VS Code. This synchronization allows for a more streamlined coding experience, especially helpful when dealing with complex 3D rendering code.

Connecting to GitHub and Finalizing the Project

The project is then connected to GitHub for version control and collaborative development. This step involves installing the Velo application and setting up a new repository for our project.

During the setup, I switched to a local IDE for better integration with tools like GitHub Copilot, which aids in writing more efficient and error-free code.

Implementing Advanced Visuals with LumaSplatsThree

The heart of our session lies in integrating LumaSplats3 for dynamic, interactive 3D visuals. The renderer is appended to our custom element, and with a few lines of code, our Gaussian splat comes to life, responsive to user interactions.

Wrapping Up: Previewing and Publishing

Finally, we preview our project locally and then publish it to Wix. The result is a live, interactive 3D scene, accessible to anyone visiting the site.

And that's a wrap for this session! We've successfully integrated a Gaussian splat into our website using JavaScript and the Luma web library. In the next videos, I'll take you through adding those extra touches that elevate your 3D web experience. Stay tuned!

Revolutionizing Web Experiences with AI-Generated 3D Scenes

Yitzi Ginzberg — Tue, 27 Feb 2024 21:04:46 +0000

The field of web development has undergone a significant transformation due to recent AI advancements. Now, creating impressive 3D web experiences from just a few photos is possible, thanks to AI technology.

Introduction to 3D Web Experiences with AI

Creating 3D models or environments traditionally required a team, resources, and time. NERFs and Radiance Field Technologies changed this, enabling the creation of 3D models more efficiently.

The Game Changer: 3D Gaussian Splatting

A groundbreaking paper in August introduced 3D Gaussian splatting. This innovation makes it possible to create stunning 3D web experiences that render in real time.

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

Using Luma AI for Gaussian Splat Generation

Luma AI simplifies generating Gaussian splats from videos. By uploading a video, Luma AI extracts frames to create a Gaussian splat, facilitating the creation of dynamic 3D environments.

Exploring Generated 3D Scenes

Gaussian splats enable immersive exploration of 3D scenes on the web. Users can interact with detailed scenes from new angles, thanks to AI's rendering capabilities.

The Magic of AI in 3D Scene Creation

Gaussian splatting excels at creating detailed 3D scenes, handling tasks like rendering reflections and shadows. This technology democratizes 3D scene creation, making it accessible to anyone with a phone camera.

Creating Immersive Interactive Experiences

AI-generated 3D models offer endless possibilities for interactive web experiences. Developers can enhance user engagement by allowing interactions with scenes through various input devices.

Example of Interactive 3D Scene on a Website

Interactive 3D scenes can blend reality and fiction on websites. Platforms like Wix empower creators to experiment and innovate rapidly without DevOps, fostering limitless creative expression.

Conclusion and Teaser for Next Video

AI-generated 3D scenes are shaping the future of web experiences. Stay tuned for our next video, exploring the creation of interactive 3D scenes without costly software or equipment.

Building a WhatsApp Chatbot with Wix Headless API: A Developer's Journey

Yitzi Ginzberg — Wed, 24 May 2023 12:21:58 +0000

Hello Dev Community! I'm Yitzi, a Creative Technologist at Wix and a chatbot enthusiast. Today, I want to share a project I've been working on - a WhatsApp chatbot that integrates with a Wix store. This chatbot allows customers to browse products, add items to their cart, and proceed to checkout - all within WhatsApp.

The Concept

The chatbot uses the Wix Headless API to communicate with the Wix store. It fetches product information, manages the shopping cart, and handles the checkout process. Any changes made to the store, such as adding new products or adjusting prices, are automatically reflected in the chatbot.

You can find the code for the chatbot on GitHub.

Key Components

Here are the key components of the chatbot:

wix_client.mjs: Sets up the Wix API client and handles OAuth authentication, enabling the chatbot to communicate with the Wix store through the Headless API.
message_handler.mjs: Handles incoming WhatsApp messages and user interactions, managing the chat flow.
products_api.mjs: Retrieves the available products from the Wix store.
token_management.mjs: Manages user tokens and authentication for the Wix API, allowing the chatbot to interact with the Wix store on behalf of individual users.

How It Works

The chatbot guides customers through the entire shopping process, providing a product catalog view, individual product information (including images), and options to add items to the cart or proceed to the checkout.

Here's a brief overview of the flow:

The chatbot displays the product catalog, allowing users to browse available products. Users can select a product by sending the corresponding number.
The chatbot then displays detailed information and an image of the selected product. Users can add the selected product to their cart.
The chatbot confirms the product has been added to the cart and displays the current cart items. Customers can either proceed to checkout or return to the product list to continue shopping.
When users are ready to check out, the chatbot provides a link to complete the payment process on the store's website.

Technical Details

The chatbot uses the Wix Headless Node SDK to fetch the list of available products in the store and maintains the state of each user's interaction with the store. It uses the user's current state to determine how to respond to their input, such as displaying a list of products, showing details about a specific product, or adding an item to their cart.

To add items to the user's cart, the chatbot calls the wixClient.currentCart.addToCurrentCart() method. When the user is ready to check out, the chatbot creates a checkout session using the wixClient.currentCart.createCheckoutFromCurrentCart() method and provides the user with a link to complete their purchase on the Wix store's website.

Conclusion

This project showcases how the Wix Headless API can be used to create engaging and unique shopping experiences across multiple platforms. As a developer and a chatbot enthusiast, I found this project to be a fascinating exploration of the potential of chatbots and the Wix Headless API.

In fact, I'm so obsessed with building chatbots that I've even created an AI rabbi that has been dispensing advice for over a year! This WhatsApp chatbot is just another step in my journey of exploring the possibilities of chatbot technology.

I'd love to hear your thoughts on this project. Have you worked with the Wix Headless API before? Do you have any experiences or insights to share? Let's start a discussion in the comments below!

If you want to follow my journey and see more of my projects, feel free to check out my link-in-bio where you can connect with me on various social platforms.

Check out the GitHub repository for the WhatsApp chatbot

Acknowledgments

Big thanks to Pedro López, whose whatsapp-web.js was a lifesaver for this project. Pedro's work stands as a testament to the power of open source - it's been a great learning resource for me, and the backbone of my WhatsApp chatbot. Do check it out, it's worth it. Cheers, Pedro!

Easy Project That Will Make You Famous

Yitzi Ginzberg — Tue, 01 Feb 2022 09:54:19 +0000

Are you a developer or CS student looking for an easy project that will make you famous?

Create a Zoom app that announces "${name}, you're muted", every time someone starts screen sharing.

Use Zoom's "user.presence_status_updated" webhook to trigger the alert whenever a user's "presence_status" is updated to "Presenting."

Here's the documentation you need: https://marketplace.zoom.us/docs/api-reference/zoom-api/events/#/paths/user.presence_status_updated/post

You're welcome!

You Missed the Most Important Detail in This Video!

Yitzi Ginzberg — Tue, 21 Dec 2021 11:05:59 +0000

There is a hidden gem in this video. Pause at 0:10, and you'll see the command:

npx sled-test-runner

What the heck is this?

To allow our developers to do their best work, we removed the hoops they would usually need to jump through to get their code into production.

Obviously (well, at least in retrospect), we needed to cut out QA. Dev servers are also out.

Wix decided to trust its developers to push code to production directly from their local dev machines.

Are we crazy? Yes. But not in that way.
How can we cut out these parts without compromising on the robustness of our production apps? How can we allow vast amounts of developers on different continents to push code to interdependent apps without breaking or stuff or negatively impacting performance?

Hundreds of millions of people rely on our online services to run their businesses!

Obviously, we will need some serious testing, but with each developer doing their own deployments, this means thousands of deployments per day, with each one triggering thousands of tests!

This means MILLIONS of unique test executions PER WEEK!
How can we possibly handle this? How long will developers have to wait for all these test results? We can't make them wait an hour every time they merge into the master branch, just to find out if their code passed inspection!

Luckily we found a way to do all of this in just about the same amount of time it takes to run a single test on your local machine!

Meet Sled.
SLED is our end-to-end testing platform.

Leveraging cloud computing to run all project test files in parallel, Sled allows us to run end-to-end browser tests against production without sacrificing speed.

We even run each test multiple times in parallel with itself so that we don't need to spend time rerunning flaky tests!

SLED uses open source technologies such as Chromium, Jest, and Puppeteer to orchestrate the parallel run of hundreds of concurrent tests using AWS Lambda as the underlying compute.

In addition, SLED is integrated into developers’ machines to deliver a completely seamless developer experience that responds as if the test was executed locally.

Developers at Wix can invoke upwards of a thousand different browsers, running a thousand different tests, and get the results from their laptops in two or three minutes!
Interested in learning more? Check out this video that outlines the architecture we use!

Wanna try it out? It sounds complicated, but it's actually not that hard to implement!

In this talk, Tom explains how this solution works and how you can adapt its core components to make it work for your project.

Tom will walk you step-by-step through an open-source project on Github that you can clone, experiment with, and even adapt to your own needs.

Creating Unique Video Dashboards for Individual Users Is Easier than You Would Imagine… If You Are Using api.video😉

Yitzi Ginzberg — Thu, 30 Apr 2020 00:00:00 +0000

Frustrated Teacher

If you have kids or know anybody that has kids, then you’ve probably been exposed to the frustration surrounding the rapid and non-optional transition from a classroom learning environment to a remote one.

One of the primary sources of frustration for teachers and parents stems from the need for teachers and students to adopt new technology with which they are unfamiliar.

Imagine that you are a developer in the booming field of e-learning. Since you are smart, one of your primary goals is to make the interface as self-explanatory and straightforward as possible for teachers and students.

To accomplish that, you may decide that each student or teacher who logs in should, by default, see only videos relevant to them on their dashboard.

Implementing such customization may seem like a herculean task. After all, you’ve got hundreds of teachers and students and thousands of videos.

Don’t fret. It’s quite easy with api.video’s API.

Let’s dive in!

A Bird’s Eye View

Before looking at any code, let’s restate the problem. I’ll begin with the teacher's use case.

Problem: We have many teachers uploading videos, and we want each teacher to see only their videos on their dashboard.

Solution: We make use of api.video’s tagging feature on our backend.

There are two reasons for this:

We want to make this as simple as possible. This implementation is entirely invisible to the teachers and requires no action from them, not even a checkbox.
Having implemented a login on our backend means that we are holding a unique identifier (i.e., username, id) for our logged-in user. That makes tagging and accurate retrieval a breeze.

Upload

For simplicities sake, let’s assume that students and teachers share a table in our database that looks like this:

CREATE TABLE users (
    id SERIAL PRIMARY KEY,
    username TEXT UNIQUE NOT NULL,
    email_address TEXT,
    password_hash TEXT
);

When a teacher logs in, we query this table to authenticate them. It’s trivial to grab the unique username at the same time.

Every time the logged-in teacher uploads a video, we include their “username/tag” in the ‘Create video’ request we make to the api.video API.

When creating the video, you can include tags in the request body like so:

{
  "title": "Maths video",
  "description": "An amazing video explaining the string theory",
  "tags": [
    "einstein"
  ]
}

We can take this a step further, allowing the teacher to select which course they are uploading the video to and adding a tag for that as well.

Retrieving the Users Video’s

Every video is now associated with the unique identifier of the uploader. When a teacher logs into his video dashboard, all we need to do on the backend is to add their unique identifier to the query string when requesting the video list from api.video’s API.

For example, if the teacher's unique tag is “einstein,” our request would look like so:

curl --request GET \ 
      --url 'https://ws.api.video/videos?tags=einstein' \ 
      --header 'authorization: dgsgsdgsdgsdg' \ 
      --data '{}'

Our backend would get a response from api.video’s API that looks like this:

{
  "data": [
    {
      "assets": {
        "hls": "https://cdn.api.video/stream/89-9f9-8ae/hls/manifest.m3u8",
        "iframe": "<iframe src='//embed.api.video/58-3403-46?token=89-9f9-8ae' width='100%' height='100%' frameborder='0' scrolling='no' allowfullscreen=''></iframe>",
        "mp4": "https://cdn.api.video/vod/dRAEjQ/token/443-d9f0-45/mp4/720/source.mp4",
        "player": "https://embed.api.video/58-3403-46?token=89-9f9-8ae",
        "thumbnail": "https://cdn.api.video/stream/89-9f9-8ae/thumbnail.jpg"
      },
      "description": "An amazing video explaining the string theory",
      "mp4Support": true,
      "panoramic": false,
      "playerId": "pl45KFKdlddgk654dspkze",
      "public": false,
      "publishedAt": "2019-12-16T08:25:51+00:00",
      "source": {
        "uri": "/videos/58-3403-46/source"
      },
      "tags": [
        "einstein",
        "maths",
        "string theory",
        "video"
      ],
      "title": "Maths video",
      "updateddAt": "2019-12-16T08:48:49+00:00",
      "videoId": "58-3403-46"
    },
    {...},
    {...}
  ],
  "pagination": {
    "currentPage": 1,
    "currentPageItems": 3,
    "itemsTotal": 3,
    "links": [
      {
        "rel": "self",
        "uri": "https://ws.api.video/videos?currentPage=1"
      },
      {
        "rel": "first",
        "uri": "https://ws.api.video/videos?currentPage=1"
      },
      {
        "rel": "last",
        "uri": "https://ws.api.video/videos?currentPage=1"
      }
    ],
    "pageSize": 25,
    "pagesTotal": 1
  }
}

We can then handle that response however we’d like, passing on to the client app whichever properties we choose, confident that this user uploaded these videos.

What about the Students?

Applying the above technique to provide each student with a video dashboard tailored to them is simple.

Let’s say we have a table for courses that lists all the essential info for each course.

create table courses (
    id SERIAL PRIMARY KEY,
    name TEXT UNIQUE NOT NULL,
    .
    .
    .
);

Our lookup table could look like this:

CREATE TABLE student_course_lookup (
    user_id   INTEGER NOT NULL REFERENCES users ON DELETE CASCADE,
    course_id INTEGER NOT NULL REFERENCES courses ON DELETE CASCADE,
    UNIQUE (user_id, course_id)
);

When a student logs in, it's a simple query to get the tags of all their courses:

SELECT name
FROM courses c
         JOIN student_course_lookup s ON s.course_id = id
WHERE user_id = :id;

With this information, we can display a friendly UI allowing the student to choose which course they would like to see from a personalized course list.

Screenshot from Udacity for illustration only.

Based on their selection, we’ll request their videos from our backend with the appropriate tag attached.

curl --request GET \
  --url 'https://ws.api.video/videos?tags=html-intro' \
  --header 'authorization: dgsgsdgsdgsdg' \
  --data '{}'

We can then pass the required fields from the response back to the client UI

Screenshot from Udacity for illustration only.

That’s all folks!

I hope you’ve got the picture. Remember, our community is here for you at community.api.video, and you can always reach out to me directly at yitzi@api.video.

Thanks for reading!

Video Tags can Make Your App Awesome, Here’s How to Use Them.

Yitzi Ginzberg — Wed, 22 Apr 2020 00:00:00 +0000

Having a reliable way to filter videos based on specific criteria is a must for most video apps.

For example:

An e-learning site may want to display different videos to each user, depending on their class list.
An animal adoption center may choose to display only videos of cats to cat-lovers.
A site that allows users to upload videos may not want those videos displayed until they get approved by an admin.
A fan site may have different levels of membership, where each level gets granted access to additional videos.

Generally, implementing something like this involves much work, takes lots of development time, clutters up your codebase, and can easily lead to bugs and data loss.

It is true that api.video is an API for video. However, we are also an API for developers! That is why we decided to include a video tagging and filtering system right into our API.

Tags to the Rescue!

api.video’s tagging feature allows you to add tags to each video. Tags can be applied to a video when it is initially created and updated at any point after that.

You can manage your tags using api.video’s web interface as well as directly through the API.

The web interface is useful for learning about tags and for managing them if you have a small number of videos.

If you are dealing with a large number of videos or need tags to be assigned automatically, then you should use the API. Don’t worry. It’s a piece of cake!

The easiest way to understand tags is to begin using them, so let’s get started.

Let’s begin with the web UI and then move on to the API.

Tagging Videos (Web UI)

Visit your video dashboard at go.api.video. If you do not yet have an account, create one when prompted.

Once you are on your dashboard, you can see your video thumbnails with your most recent uploads first. If you have not yet uploaded any videos, what are you waiting for? Click the blue-button and upload a few. If you don’t have any videos to upload, grab a few from pexels.com/videos.

My dash looks like this:

Let’s say I’m the founder and lead developer of petvids.com, the hottest new start-up out of Silicon Valley. I want to provide pet-lovers with the option of choosing whether they would rather see dog videos or cat videos.

Using the web UI, I can easily click on each video, select “edit video” in the “actions” section, and add the appropriate tag.

I can demonstrate that the tags are working using the web UI.

This is what I get if I filter for videos with the tag “cat”:

Filtering for “dog” gets me:

I think you get the basic idea. Let’s look at how to implement this in the backend of your app using our API.

API and Additional Queries

Using our API, you can request a list of all videos with the /videos endpoint:

https://ws.api.video/videos

and if you want to see the videos that you uploaded in “sandbox” mode:

https://sandbox.api.video/videos

Make sure you have authenticated and are making the request with your “auth” token in the header. More on that here.

You can see what this request looks like in different frameworks and libraries here.

You can try out this request directly from our documentation! Just be sure to authenticate first and then to copy your token into the authorization header.

Filtering by Tags

To filter by tags you need only add a ‘tags’ query param with a comma-separated list of values, like so:

https://ws.api.video/videos?tags=white

In response, I get a list of the following videos:

Take note that videos can contain additional tags that are not in the query string. In this case, each video has an additional tag of either cat or dog.

Let’s see another example.

What if I want to allow the user to choose to see only videos of brown dogs?

https://ws.api.video/videos?tags=dog,brown

That does the trick!

A word of caution. A video must have ALL the tags that you are filtering for to be returned to you.

Searching for “dog” and “cat” does not return videos with “either” tag. It returns videos with “both” tags, in this case, none. To get all videos tagged “cat” or “dog,” you need to make two separate queries.

I hope that clarifies how you can set and update tags using our web UI and how to filter videos by tag(s) with our web UI and API.

Setting, Updating, and Deleting Tags via the API

Setting, updating, and deleting tags via the API is pretty straightforward.

When creating the video, you can include tags in the request body like so:

{ "title": "Maths video", "description": "An amazing video explaining the string theory", "tags": ["maths", "string theory", "video"]}

To update or delete tags later, use the video update endpoint.

Something to be aware of:

If you include a tags list when updating your video, the list of the existing tags gets overwritten by the new list. If you want only to add new tags and not lose or change existing ones, you need to include the old ones in the update request. To get the current tags, use the “Get video” endpoint.

I hope you feel ready to get started! If you have any questions, don’t hesitate to ask our friendly community of users and experts at community.api.video. Thanks for reading!

I built a local TV station to keep myself and my kids occupied. You can too!

Yitzi Ginzberg — Tue, 07 Apr 2020 00:00:00 +0000

It must have been over a hundred degrees inside the panda suit, but I wasn't complaining. I felt a sense of fulfillment, unlike anything I had ever felt before.

It would be totally fair for you to ask what I was doing in the said panda suit and why I'm claiming that I was happy with that situation. I can't promise to settle all the doubts in your mind, but I'll give it my best shot.

Take a look at this photo:

That's my son, the apple of my eye, on day number eleven of this wretched lockdown.

And he's not the only one who felt this way. The thrill of an unexpected and "until further notice" vacation was wearing off on my older girls as well and they were beginning to get BORED:

I was also getting bored with teaching fourth-grade math and kindergarten level English.

To complicate matters, I had just started a new job at api.video and needed to get familiar with their video API. I love working from home as much as anybody. Still, even the most optimistic, "look on the bright side," type of person, would not call what those of us with kids are trying to accomplish, "working from home." More like "suffer from home."

He's cute, but I can't work like this.

I realized that it was up to me to keep my family from imploding. I needed to think of an idea, a mission, if you will. Something to give meaning to this endless stream of days.

What I was looking for was a family goal. A challenge that would inspire my kids and fire up their imaginations. It also needed to be something that would be fun and challenging for me.

Yet another requirement was that it needed to enable me to get actual work done.

This all seemed impossible.

I decided to pull out my secret weapon. I don't remember what it's called or where I learned it. I think it's somewhat of a cross between a technique that Neil Gaiman uses to get himself to write and something I read in Deep Work.

It works like this.

You are not allowed to think about anything besides the problem for X minutes.

That's it.

So I did that and came up with perhaps the most brilliant idea I have ever had in my life.

A local TV station!

Not unlike the famed Simpson's monorail, building and managing a local TV station would solve ALL these problems and more!

The kids would love it. What kid wouldn't like the idea of creating movies that their friends can watch on TV?
It would be super-educational for the kids. They would get to learn some of the most essential skills that aren't taught in schools.
It would be educational for me. Video and video streaming are obviously essential to TV. I would get to do what I was supposed to be doing for work, and my kids would let me do it because they want to see themselves on TV already.
It would provide meaning. We would be helping our community. We are a very close community and spend lots of time in each other's houses. This would be a way to bring the community together and help people feel less lonely.

How I did it (and how you can too!)

Step 1. Onboarding.

I called a family meeting.

More accurately, I said, really loudly:

"Ditsa, Libi, and Yaffa come here, I have something to tell you."

When no one responded, I tried again:

"Ditsa, Libi, and Yaffa come here, I have something to tell you that you are going to like!"

Now I had an audience 😄.

I shared my idea with them, and they were TOTALLY down.

"Dad, you are telling us that if we put together a play, you can get it on TV??"

Before I could even explain that I would first need to BUILD the TV station, they had run off, eager to begin planning for their TV debut.

There could be no turning back now.

Step 2. Creating the station.

I needed to get a website up quickly. I wanted to build something that would be fast to create, lightweight, easy to explain to the kids, and easy to replicate.

I think I succeeded!

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="icon" href="https://via.placeholder.com/70x70">
    <link rel="stylesheet" href="https://andybrewer.github.io/mvp/mvp.css">

    <meta charset="utf-8">
    <meta name="description" content="My description">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Local TV</title>
</head>

<body>
<header>
    <h1><u>Local<i>TV</i></u></h1>
    <p>Brought to you by
        <mark><a href="https://api.video">api.video</a></mark>!
    </p>
</header>
<main>
    <article>
        <div style="position:relative;padding-top:56.25%;">
        <!-- replace src with the embed code you get from api.video -->
            <iframe src="https://embed.api.video/live/li4G2ooxtZEgsgdsgdsgdsHn7WxQtYJuHn3"
                    style="position:absolute;top:0;left:0;width:100%;height:100%;"
                    allowfullscreen></iframe>
        </div>
    </article>
</main>
<footer>
</footer>
</body>
</html>

Yup! That's the ENTIRE website. You can literally just copy/paste that into a text file, save it with a .html suffix, and you're done (well, with the TV website UI at least)!

You can see what this looks like in action at mishktv.com. It's dead air much of the time, but you just may get lucky and catch a live performance!

You can also play around with thison Codepen.

If you are actually following along and implementing your own TV station, I'd recommend forking the repo from Github. If you don't know what that means, don't worry, all you need is the code block above saved in a .html file.

Step 3. Set up an account with a video API

To stream, we need a platform that can receive that broadcast and play it back live to a broad and distributed audience (your neighbors).

I chose to use api.video, and if you want to follow along, then it would be easiest to use them as well.

Visit api.video (duh!)

Click the big blue "Sign up for free" button.
You know how to sign up.

Select "Sandbox" and then click "My live stream."

Name your stream. You can change this later.
Hit "Save Livestream"

Leave this window open

🎉🎉🎉Congrats!! You have successfully created a live stream!!🎉🎉🎉

Step 4. Update index.html

Remember the .html file from earlier? Now that you have created a live stream we just need to make a small update to configure it to display your stream.

Clicking on your live stream from the dashboard that you have open on api.video will bring you to a page that looks like this:

Clicking "Copy link" will copy everything you need to your clipboard.
Look for the "src" attribute inside the iframe (there is only one).
Replace the placeholder link with the link you just copied.

In my case, it now looks like this:

<iframe src="https://embed.api.video/live/li4j6xLydSACIaLDWoznxSgX" style="position:absolute;top:0;left:0;width:100%;height:100%;" allowfullscreen></iframe>

Save the file.

Congrats!! You are now finished building your TV station!

Step 5. Going live

Your station is done, but no one is going to be able to watch it if it remains on your computer. You must deploy it to a static web host.

If you have never deployed a static site before, I recommend trying out tiiny.host (not an affiliate link, just the simplest I've found).

My fingers are getting sore from all this typing, so watch this video to see how it's done:

Now all that's left to do is to share the link and get famous!

Well, almost...

You do still need to plan and create content for your TV show and broadcast it to your live stream.

Don't worry if you have never used broadcasting software before. It's not difficult to learn.

To start, I'd recommend reading "To Start a Stream." and "Lessons from my first year of live coding on Twitch."

If you haven't noticed, I did not quite accomplish what I set out to do. I never did get around to explaining what I was doing in the bear suit.

But this post is definitely done.

I guess you'll have to stay tuned for Part 2 😀 See ya then!

Principles of Developer Focused Design

Yitzi Ginzberg — Sun, 24 Nov 2019 14:22:33 +0000

To understand how to “encourage” developer adoption of an SDK, API, or any other developer-focused product, we need to understand what attracts them and what pushes them away.

The only assumption you can make regarding your developer audience is that they are human beings, even that is just a heuristic.

Developers, like most humans, like things fast and easy. They want to:

Find the info they need quickly.
Be able to read and understand it quickly.
Get it working rapidly with a minimum of hiccups.
Feel that the technology they are integrating into their app is current and robust.

To that end I’d recommend:

A. Setting up a developer site at an independent subdomain.

Mixing developer docs with marketing content and other content typically present on a primary site is not a good look and makes it harder for developers to find what they need.
Developers want to feel that they are learning and integrating relevant tech. The more they hang around on a marketing site to get the info they need, the more they feel like the tech is an afterthought.

B. Not using Wordpress/Zendesk.

Besides being cluttered and buggy, they can turn off developers because of their association with inferior and old tech.
I think a static site is perfect for documentation. Static websites are easy and cheap to build and maintain. Most are uncluttered by default, and they are blazing fast.
As an example, take a look at Polly.js’s documentation.
yitzi.dev is another excellent static documentation site demonstrating a clean non-cluttered UI.

If members have to scroll past large banners or find useful information among static content, that’s bad. Minimize the static material to show the latest activity. Deliver the maximum value for the minimum amount of effort. -Richard Millington

C. As much as possible, code samples and documentation should be current and consistent.

In any case, it should be clear which one is the single “source of truth.”
Another advantage of using a static site for documentation is that updating a version number in a data file can trigger a rebuild of the entire website in seconds, causing an update of that variable across the site.

D. Instructions and Examples should be simple and relatable.

Tell a story.
Developers won’t be upset if you explain things clearly, but they will get angry if you make them feel dumb.
Help the developer understand the use case and motivation for the different features of your software.
See here for an article I wrote giving motivation for mobile attribution integration.

E. Provide an IRC channel where developers can get help from other developers in real-time.

There will always be issues, and developers need to feel like there is somewhere they can turn.
Discord is excellent, and Slack is OK, I guess.
At the start, there will need to be an investment of employee time. If done right as the community gets involved in the channel, company employees will be able to step back.
Before setting up your channel, see if there is already a developer community IRC where this channel would be appropriate. Going to your community is a lot easier and more productive than trying to drag them to you.
Every single page of the developer website should have a prominent link to the channel. It should never be more than one click away.

Developing software is frequently frustrating and almost always takes more time than the developer imagined it would. This is true for code newbies as well as for the most talented developers who are in love with coding. If you make life easier for developers, they will love you.

Simple, really.

Thanks for reading!

How I Became an Indie Developer.

Yitzi Ginzberg — Tue, 19 Nov 2019 14:24:45 +0000

I couldn’t believe it.

My new app, “Virtree,” was doing amazingly well on the play store. It had been at the top of both “Product Hunt” and “Show HN” for weeks. In under one month since launch, people had downloaded it more than 100,000 times.

At six months with more than 500,000 installs, I was going to have to shut it down.

Hi, I’m Yitzi.

I build apps for a living. Mostly for large corporations that pay me an excellent take-home salary and then go on to make exponentially more than that from my hard work.

I’m good at what I do. I know that because the play store data is publicly available. I can see how much people love my apps by the number of times they download them, and by the reviews they leave (I read every one). It irritates me that my work is not published under my name but rather under the name of the corporation. They wouldn’t know an SDK from an APK!

It’s been my dream to support myself as an Indie Developer. I would be able to make the products I’ve always dreamed of ( I have a list with more than 100 ideas on it! ). Owning my creations would be the cherry on top (ask Taylor Swift).

My plan.

I’m not naive. I know that building an amazing and beautiful app is not enough. I’m not happy about that, but I do need to take it into account.

It’s a chicken and egg problem. The best apps rank well and show up on the front page of the Appstore. To show up there, however, the app already needs to be getting some traction.

At companies where I’d worked, I noticed this:

Regardless of how useful and necessary, no manager authorized an app launch without an advertising budget and plan.

It works like this:

Advertising campaigns led to non-organic installs.
Installs make the app rank and become more visible.
Mobile users will discover the app on their own and download it.

By saving up and pitching friends and relatives, I was able to set up a decent sized advertising budget. I figured I had enough for six months. I knew that my app was good and filling a real need. I was sure it would be profitable by then.

The app.

I decided to begin my career as an indie developer with “Virtree.”

Virtree is an app that allows you to “plant” trees on Virtree’s proprietary blockchain. Currently, we only support binary trees with Red-Black trees coming soon.

The trees can be planted in memoriam of a loved one or as a special gift for a spouse or fiance.

Forest fires will never destroy these trees. Neither will Lyme disease threaten them. Visiting your tree is as easy as whipping out your phone.

From my friends’ reactions to the app, I knew I had a winner. I was sure that if I only got some eyes on it, the rest would take care of itself.

The launch.

Click. Click. Click.

It had been 24 hours since I had deployed my signed APK, and it was still in “Pending Publication” limbo.

I was refreshing the screen compulsively and not answering calls or doing much of anything for that matter. When the status finally changed to “Published,” it didn’t even register until I had refreshed the page at least another five times.

I called up all my friends and insisted they download my app with me on the line. I felt a chemical rush each time I saw the install count go up. This is the life I thought to myself. It’s this easy. Why didn’t I have the guts to try this earlier?

I began posting on Facebook groups and sharing on Twitter. Downloads and installs spiked. I started fantasizing about new Apple products and trips to Hawaii.

Then I hit 42 downloads. “Hit” is a very accurate description. It was as if I had hit something substantial. A wall or something. Nothing I did could budge the needle.

I had exhausted myself. A vacation was what I needed. I packed up my gear and headed for a week off the grid at Yellowstone.

When I got back home, I raced to my computer with my loaded backpack still on. 41. Yikes.

Ads. Ads. Ads.

I wasn’t that worried because I had been planning all along to do some advertising. It’s just that part of me wasn’t ready to admit that. I had a deep inner belief that advertising my app would be “cheating.” I wanted to make it on my own. Now, faced with the prospect of needing to ask for my job back, I was ready.

“kualitychepeinstalls.onion is fantastic,” said my friend Greg. Greg has made a ton of money investing in Bitcoin and considers himself qualified to dispense advice as frequently as a soda machine dispenses sugar.

Five dollars and thirty minutes later, I had 5,000 fresh installs. I couldn’t believe it! I went back to “kualitychepeinstalls.onion” and transferred another forty-five dollars. Sure enough, in under an hour, I had another 45,000 installs.

I began paying for Facebook and Google ads as well. “kualitychepeinstalls” was great, but the whole “.onion” thing was weirding me out. Plus, I figured three is better than one and could only serve to diversify my reach.

I needed more of this!

One month later.

!%$#@%@!!

I’ve got 100,000 installs. I have no idea if those installs are organic or if they came from Facebook, Google, or KualityChepe.

KualityChepe claims they are all from them, and I better transfer another fifty thousand, or else.

Even worse than that issue is this one:

Only three trees were purchased, two of them by the same user!

If this continues, I’d be finished.

Five months after that.

I’m finished.

A ray of hope.

Driving home from WeWork for the last time with all my stuff in the trunk, I was about to flip on some depressing Country when “Indie Hackers” starts playing. Funny because I don’t remember that I was listening to it on the way to work.

The host is interviewing some indie dev who “made it.” The developer (I can’t remember who it was) described a situation similar to mine and began talking about how mobile attribution completely turned around his ad spend and strategy. I was having the same problem as he was! Many installs but very few quality ones. I made a mental note to google “mobile attribution” when I got home.

A new lease.

I had high hopes for mobile attribution. From what I understood, this technology would help me prove how many clicks were coming from each network, so I would not get overcharged.

More importantly, it would allow me to take a scientific approach to my advertising. I would be able to understand where I was getting the most value and which networks I should drop.

A new plan.

I did a second fundraising round, and by psychologically pressuring and manipulating my friends and family, I was able to raise enough funds for two additional months of advertising. I also received promises of extra funding if I could prove that the advertising was working to increase bottom-line revenue.

Appsflyer seemed to be the platform of choice for three reasons:

They integrate with over 2,000 ad networks making it easier for me to get started quickly.
They own the market and therefore have a kind of “network effect” advantage. AppsFlyer can more accurately and frequently correctly identify and attribute a user.
I have a friend who works there, and she sent me links to their Github, where they have sample integrations, as well as to their “quick-start” guide.

So I planned to go through their Github and install guide and then integrate their SDK into my app. Once that was done, I would advertise my app in a wide variety of places. After a month, I would carefully analyze the data and become much smarter. I would understand my users, where they are coming from, and what are they doing inside my app.

I would then advertise for a second month based on the outcome of that analysis.

Conclusion.

Well, I don’t want to give it all away now. Suffice it to say that I’m still an indie developer, I always integrate Appsflyer into every software product I build, and Virtree never made me any money.

Thanks for reading!

Disclaimer: Very little of this is true; it belongs to the genre of “developer fiction.” I'm not an indie developer and have no desire to be. I'm happy to work at a great company that respects my autonomy and pays me fairly.

P.S. If I would leave my current job, it would only be to write, speak, build cool projects, and teach tech.

P.P.S. If you know a company that is looking for a creative thinker with years of software experience for a role where I'd get to learn, write, build cool projects, and teach tech. Hit me up!

Someone wrote a URL to HTML/CSS/JS Decoder.

Yitzi Ginzberg — Sun, 07 Jul 2019 19:01:00 +0000

This website does not exist! There is no HTML or JS hosted anywhere. All the necesarry code is hidden in this URL!

The main page of this site decodes all that follows the # into HTML, CSS, and JS!

Fixing Democracy, Developer Style

Yitzi Ginzberg — Wed, 26 Jun 2019 15:40:13 +0000

Submitting forms and scraping data for the public good

Photo by kyryll ushakov on Unsplash

The US legal system is stacked against the poor.

The outcome of any court case is mainly dependent on the amount of money the parties involved can spend on their representation. Wealthy criminals who have harmed others with impunity get let off with a slap on the wrist or less. At the same time, the less financially fortunate can end up with outrageous sentences for the pettiest violations.

One of the main drivers of this unjust situation is the cost of legal research. Two companies hold a duopoly on the U.S. market for legal information.

Law firms seeking access to precedent-setting legal opinions will need to pay Westlaw or Lexis upwards of $100 per month per license! See “The Lexis/Westlaw Duopoly and the Proprietization of Legal Research” — Columbia.

To fight this travesty AnyLaw (as seen on forbes.com) has built a robust, fully-featured, and most importantly, FREE legal search engine!

Cool, I know!

How we do it

Because this was to be a free solution, we obviously could not have the overhead of licensing the published opinions annually.

Thankfully, US law requires every state and federal court to maintain a website and publish their legal opinions online.

The obvious solution, therefore, is to scrape and download the data from the individual court sites.

Unfortunately, there is no standard. Sites can be:

static
rendered server-side
dynamic JavaScript sites

Courts are allowed to do as they please in terms of building their site.

It pleases them to do some very interesting things.

For example have a look at the website of Virginia’s Supreme Court:

Yikes!!

Yup, that is every Supreme Court decision since 1995 on a single page. 😕

TLDR; Each court website needs a bot 😧

Case study: Texas

Texas is a great example because of the complexity of their site. This is what our bot is confronted with when it navigates to the court system URL:

a non-exceptional form

The first thing our bot needs to do is to get a list of all Supreme Court opinions. Since this bot needs to interact with the site, we chose to use HtmlUnit by Gargoyle Software Inc.

Step 1. Install the HtmlUnit dependency. We place the following code snippet into our app's pom.xml. If you are not using Maven, visit the website for additional options.

Step 2. Create a method that fills out and submits the form. This is what such a method looks like:

What’s happening here?

Let’s go through this line by line.

Getting the page

HtmlPage page = webClient.getPage(pageUrl);

HtmlPage page represents the initial page. HtmlPage comes from the HtmlUnit library. I use an instance of WebClient, another HtmlUnit class, to get the HtmlPage by calling getPage() on it and providing the URL. The WebClient instance is initialized with a simple WebClient webClient = New WebClient().

Getting the form

final HtmlForm form = page.getFormByName("aspnetForm");

The getFormByName() method provides us with another HtmlUnit object, this one representing the form. It is easy to identify the name of any elements that we need using the browser's dev tools as seen below.

Getting and interacting with the input fields

Since we only want court “opinions” we get the checkbox labeled “opinions”:

final HtmlCheckBoxInput checkBoxInput = form.getInputByName("ctl00$ContentPlaceHolder1$chkListDocTypes$0");

We “check” it programatically with the line:

checkBoxInput.setChecked(true);

We also need to set a “from” date. We get the “from” field with:

final HtmlTextInput textField = form.getInputByName("ctl00$ContentPlaceHolder1$dtDocumentFrom$dateInput");

and “type” in a properly formatted string with:

textField.type(getFromDateString());

If you are curious about how we get the date string, here is what that looks like:

This bot runs frequently, so it is sufficient to fetch the most recent opinions.

Lastly, we need the submit button:

final HtmlSubmitInput button = form.getInputByName("ctl00$ContentPlaceHolder1$btnSearchText");

and finally, button.click() will submit the form and return the page generated as a result of the submission.

Our bot is now seeing a neat list of the most recent Supreme Court opinions. The bot can efficiently run through this list downloading and tagging each document.

The results:

After a single run the bot has:

downloaded 541 files from Texas courts!

My other computer’s a Mac

Inserted the download info into our database. This info includes the source URL as well as the current location on our server.

Yes, I know this is NJ. Sue me.

Inserted metadata about the case with a foreign key to the download entry. This metadata includes the date of the decision, case title, and issuing court.

Grand Finale!!🎉🎉

Finally, we can make use of this data by sharing it with the world! All this messy, unorganized data is now beautifully organized, searchable, and tagged. Have a look and you’ll discover some other cool stuff that we’ve done with this data.

Thanks for reading!

I’m Yitzi 👋

Yitzi Ginzberg (@codegician) | Twitter