DEV Community: Brandon

How to create a cartoon profile picture with javascript

Brandon — Mon, 26 Dec 2022 02:39:28 +0000

Recently I have noticed a huge amount of AI cartoon profile photo generators popping up all over the app store. I thought this idea was cool, but would require a sophisticated backend or machine learning layer to make it happen. Turns out, you can accomplish most of the features in javascript / react.js.

Meet ComicFun
ComicFun is a new open source project that uses JavaScript .filter and posterize functions to turn an ordinary profile picture into a cartoonified portrait. Simply upload a photo, or open the device camera to snap a selfie (coming soon). ComicFun is open source, so all the source code can be viewed in this repo.

Thank You
Thanks for checking out the repo, and Merry Christmas! If this project interests you as well, give it a star, and consider contributing! There are many more updates in the pipelane, as the main photo transformer will be functional soon. (full backend source code available soon)

How to create a Google Maps clone using OpenStreetMap API

Brandon — Sat, 17 Dec 2022 05:40:41 +0000

Recently, I have been interested in making some projects such as a MERN stack Zillow clone, or a Django travel booking site. However, in researching the tools needed to create both of these, one critical piece was always too expensive: the google maps api. This API is billed per request, so if you are attaching it to a client application that end users can interact with, this will potentially drain your bank account (without proper captcha & security). The solution to this, instead, is to use a free and open source location data API. You can also follow along with this guide with the full Github source code.

What we are building
Instead of relying on a paid service, this project uses completely free tools. It is built with the following.

Node.js
Express.js (server)
EJS (JavaScript templates)
OpenStreetMap (Location data API)
Leaflet.js (Interactive map widget)

Getting started
To start, create a new folder, and open a command line in the directory. From there, initialize a new npm / node.js project.

npm init

Now, install the required dependencies. We are using express for the web server and EJS (JavaScript HTML templates) for the frontend. Also install nodemon so we don't have to refresh the server after every change.

npm install express ejs
npm install --save-dev nodemon

Lastly, open package.json and replace "scripts" with the following.

"scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js"
 },

Building the server
Now, we are ready to build the express.js server to render our site. Copy and paste the following into a new file in the root of your project named "server.js".

const express = require("express");
const app = express()

app.set("view engine", "ejs")
app.use(express.urlencoded({ extended: false }))
app.use(express.static(__dirname + '/static'));

app.get("/", (req, res) => {
    res.render('index')
})

app.listen(process.env.PORT || 8000)

This gives us a basic express server that renders our index page. It is also setup to load CSS, images, and JavaScript from a folder named "static" in the root as well.

Adding the frontend
Our web server should be running, however, there is no index file to render yet. Create a file named "index.ejs" inside a new folder named "views". Then, type "!" and hit enter (if your using VS code) to create a new HTML file. Paste the following into the body of your HTML file.

<div class="map-container">
    <header>
        <form id="search-form" class="nav-bar">
            <h1 class="nav-logo">
                Maps Clone
            </h1>
            <input type="text" class="search" name="searchTerm" required />
            <button type="submit" class="submit-btn">
                Search    
            </button>
        </form>
    </header>
    <div id="map"></div>
</div>

Lastly, we need to add some basic styling. Create a file named "style.css" in /static/css. Then, import your style sheet, and paste in these styles from the Github reposory.

Adding the map
We have an HTML div element with an id of map, but there is no actual map being rendered yet. To render the map, paste the CSS and script import for leaflet JS into the head of index.ejs.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

Last but not least, paste the following code into a new JavaScript file in /static/js/maplogic.js.

var map = L.map('map').setView([33.659541, -118.1552947], 9)

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

const updateMap = (coordinates) => {
    map.setView([coordinates[0], coordinates[2]], 9)
}

document.getElementById("search-form").addEventListener('submit', (event) => {
    event.preventDefault()
    const searchTerm = event.target.searchTerm.value
    fetch(("https://nominatim.openstreetmap.org/search?format=json&limit=3&q=" + searchTerm), {
        method: "GET",
        headers: {
            'Content-Type':'application/json',
        }
    }).then((response) => response.json())
    .then((responseJson) => {
        if(responseJson[0]) {
            const coordinates = responseJson[0].boundingbox
            updateMap(coordinates)
        } else {
            alert("No locations found.")
        }
    })
    .catch((error) => {
        console.error(error)
    })
});

This renders out the map using the Leaflet script we imported, as well as sets up an event listener to re-render the map when we search for a location.

Conclusion
I hope you enjoy this map project as much as I did making it. I think these open source map libraries have huge potential, and I hope you can get this project running locally to test them out. If you want to download the full source code for this project the repo can be found on Github here.

If you have any questions, feel free to contact me directly on here, or on Twitter.

How to add animated page transitions to your React.js app

Brandon — Sun, 04 Dec 2022 15:15:02 +0000

Happy Sunday! Today, I am going to be going over react-page-animations, an easy way to add customizable page transitions into any React app. It is important to note that this library works with react-router, and react-router-dom, so it is not compatible with Next.js at this time. But, for any regular React users: fear not, this solution is by far the easiest.

Install the library

npm install react-page-animations

Start by installing react-page-animations from npm, which will install the library and its one dependency (Framer motion). You are good to go!

Quickstart

import { Link } from 'react-router-dom';
import { AnimatedPage } from 'react-page-animations';

export default function HomePage () {
    return <AnimatedPage initialOpacity="0" finalOpacity="1">
        <h1>home page</h1>
        <Link to="/page1">Page 1</Link>
        <Link to="/page1">Page 2</Link>
    </AnimatedPage>
}

Here, we are wrapping our home page which the AnimatedPage component, which provides page transition animations. Then, we are adding the props initialOpacity="0", and finalOpacity="1", which is the simplest way to add a fade transition.

Your set
That's it! If you followed those two steps, you should now have a fade transition applied to any page you wrap with AnimatedPage. The "Customization" section of the GitHub repo shows all the props that are currently available to customize the transition to your liking.

What's next?
I am working hard to build out this library and spread awareness about how easy it is to now add page transitions! If you have any ideas for the project, or would like to contribute, please submit a new issue or check out the contribution guide. Thank you for reading!

Open Source Analytics Dashboard

Brandon — Sat, 26 Nov 2022 22:43:32 +0000

Good afternoon! Today, I am happy to anounce OpenOps, an open source, self hosted Next.js business dashboard. OpenOps is a new tool that allows you to bring Google Analytics, PayPal, Stripe, and more into one UI.

I am just starting out on this project, and am looking for contributors. If you are interested, check out the GitHub issues and feel free to submit a pull request.

Free Next.js 13 Finance Dashboard Template

Brandon — Thu, 24 Nov 2022 18:46:48 +0000

Happy Thanksgiving! I made this template using Next.js 13, and Tailwind CSS. Specifically, I wanted to test out the new layouts directory, link component, and more of the new features. It comes with a high converting landing page, pricing page, dashboard, and much more. Kindly download the template and let me know what you think!

fintech template