How to add a video background to an SVG text

Image for post
Image for post
Photo by Kushagra Kevat on Unsplash

Need some inspiration on creating eye-catching hero images or headers for your website? You can incorporate a video background to text with the use of SVGs!

HTML page

First, let’s set up the HTML. Within the body, we will have our header tag. Within the header tag, there’s the video source and SVG.

tag has multiple properties:

  1. Autoplay →
    Indicates that the video will start playing as soon as it is ready
  2. Muted →
    Indicates that the audio of the video is muted
  3. Loop →Indicates that the video will keep…


Quick guide on learning how to build Tinder card swiping in your app using React-Spring and React Use Gesture.

Image for post
Image for post

Oh, Tinder. Wherefore art thee the bane of our millenial existence, yet we keepeth coming backeth to thee. Say what you will about Tinder and all the catfishes (yes, you with your outdated pics of your prime undergrad days) and failed first dates in dimly-lit, overpriced bars, it proved itself to be a trailblazer in online dating apps. Truly, the first of its kind. Tinder invented swiping. The term “swipe left” became globally understood as “no thanks, pass.”

Gif portraying how Tinder works in real life. …


Use BEM and 7–1 architecture with Sass to help you better organize CSS styling in your apps.

Image for post
Image for post

When it comes to developing large apps, making sure the organization is elegantly arranged becomes one of the top tasks. Checking if the component files are PascalCase, the variables sound sensical (no strange names, you don’t know who’s looking at your Github), and not too many large chunks of commented out code/remarks. You know who you are. The ones writing “this code is ugly, idk it works but I spent 5 hrs on it so screw it.”

Honestly, how many of you have felt this way before? It’s ok, this is a safe space. …


How to fetch data from an API using GraphQL in a React App

Image for post
Image for post

Of course everyone is familiar with REST APIs, but there is another type of API that is becoming increasingly popular and that is the GraphQL API. GraphQL is a data query language for APIs. The significant difference between GraphQL APIs and REST APIs is that in a GraphQL API, we explicitly indicate in our query which specific data we want to fetch and request. In a REST API, we get back all the data from a url endpoint. …


Step up your CSS game by learning how to create animations using SVGs.

Image for post
Image for post

In the journey of advancing my frontend development and design skills, I came across many talks about SVGs. I realized I needed to explore more about what these SVGs are if I’m going to bump into this term everywhere. Even D3.js uses SVGs!

SVG stands for Scalable Vector Graphic. There are 2 types of graphics, vector and raster. Raster graphics are built using pixels and include image formats such as .jpeg, .png, and .gif. Vector images use lines and curves. The major difference between raster and vector graphics has to do with their behavior under scaling. When you zoom in on a raster image, you increase the size of the pixels, so the image becomes grainy and unclear. On the other hand, vector graphics can be scaled without any loss of quality. …


Do it for t̶h̶e̶ ̶’̶g̶r̶a̶m̶ your web app.

Image for post
Image for post

When you first hear the word “filters”, I bet the first thing that comes to mind are Instagram filters that make a person look like they just stepped off the cover of Vogue or GQ. Or Snapchat filters that turn you into a dog going to Coachella. Well, this blog is not about how to become a social media influencer. I’m actually talking about CSS image filters. Yes, we can incorporate enchanting and stylish effects on our app’s images using CSS and I will walk you through each filter.

These image filters are supported in all major browsers (Chrome, Safari, Firefox), except for Internet Explorer (how is that even still a thing?). …


Image for post
Image for post

Developers love to learn; we are continuously learning. Sometimes it feels like we don’t really have a choice since technology is always changing. With a blink of an eye, some new cool library or framework is on the market. Being the tech enthusiast you are, you want to learn this new thing. So you research, watch tutorials. Have you ever realized that almost every intro tutorial of a new tech is how to build ToDo list? I get it, it’s straightforward and basic. However, I like having fun and adding my own “zest” while learning.

This is my first blog on mobile app development using React Native. React Native is a mobile application framework for building native apps using React. I know it’s not time for the 2020 U.S. Presidential Election yet, but believe it or not, I’m fascinated with politics. Here I’ll be creating an app that generates a random Trump quote. This app will use an API to fetch the quotes. …


Image for post
Image for post

Have you ever wanted to use your favorite company’s or favorite website’s API for a new app project and discovered that they either a) never had one to begin with or b) eradicated it’s API for public use? (I’m looking at you, Netflix) Well, that’s what happened to me and being the persistent person that I am, I uncovered a solution for this problem: web scraping.

Web scraping is the technique of automatically extracting and collecting data from a website using software. After collecting the data, you can use it to make your own API’s.

There are numerous technologies that can be used for web scraping; Python is a popular language that is used. However, I am a JavaScript kinda girl. So, in this blog I will use Node.js …


Image for post
Image for post

In continuation of my series on methods that are commonly used in code challenges, this blog will be about loops in JavaScript. While practicing and doing many algorithm problems and code challenges, you will find that more often than not, the solution will include some type of loop.

When we want to do something repeatedly, loops allow us to repeat code and logic. Instead of having to hard code the same code multiple times, they help keep our code DRY (“Don’t Repeat Yourself”), and not WET (“Write Everything Twice”). There are five different types of loops:

  1. For loop
  2. While loop
  3. Do/while…


Image for post
Image for post

It’s now been a month since the Coronavirus (COVID-19) has hit NYC. Like many of you, I’ve been stuck at home, and I’m running out of things to talk about with my cat. So what if you’ve heard that high school story many times, dude, you will hear it again!!! All jokes aside, I can’t help but feel as if I’m succumbing to some form of cabin fever. Fun fact: before I got into programming, I was pursuing a career in clinical psychology and medicine. Thus, it is second nature for me to notice that I was not feeling 100% myself and was exhibiting some abnormal behavioral symptoms. …

About

Belle Poopongpanit

Girl coder. Empire State of mind. 💅🌆

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store