DEV Community: Jaagrav

Drive a Tesla Cybertruck or literally any car on your browser with Threejs

Jaagrav — Tue, 22 Feb 2022 19:38:51 +0000

Before we begin

In this article, we would be building this, a 3D Tesla Cybertruck that can be driven with your arrow keys and WASD keys on your browser. We would be building this project with the help of RV-Engine, which is a browser based Raycast Vehicle Engine.

This project will require you to have some knowledge in both Threejs and Cannon-ES. Although since what we're building here would built on a browser-based engine, you don't need extreme knowledge about these libraries, cause you can simply download all the car code that you tweak on the engine and install it using npm i on your computer. Read this article carefully to understand how to drive your 3D 4-wheeler vehicle model on the browser.

Don't want to read this article?

Check out the video version for this article on my youtube channel!

Introduction

Alright, so were to begin. You all must have seen developers all around the world making some really awesome projects with threejs. Now these projects have something pretty magnificent which we call Physics. Some examples for 3D physics projects would be,

Bruno Simon

The legendary Bruno Simon's portfolio, which features a 3D car that the user can drive around this 3D world, run into bricks and knock stuff off. This project uses CannonJS by Stefan Hedman for physics support.

Bruno has an awesome course called ThreeJS Journey which helped me out personally in understanding the basics of threejs and build this project all by myself. I'd suggest you to definitely consider checking out his course, cause it's the best threejs course you will find out there for Javascript beginners.

Racing Game

The open sourced racing game developed by Poimandres and other contributors on Github. The game features a 3D car in a track, and the user is supposed to reach the end of the track by driving the car to the end of the track as soon as possible. This project uses Cannon-ES, a physics library which is a fork of the original CannonJS by Stefan Hedman, currently being developed in house by the developers and other contributors of Poimandres.

About

Now enough of showing other physics based 3D projects. You might be wondering what is this article exactly about?

Well in both of the above projects as you might have noticed, one thing is common and is also the MC of the games, A CAR! Or as we, the developers like to call it, a Raycast Vehicle. Now building a raycast vehicle is super difficult cause it's one of the most complex features of a physics library. Although there are courses on how you can create a raycast vehicle, most of them are paid or they just don't make sense. Although I would say, that Cannon-ES has got a pretty dynamite documentation but it took me almost a week to create my first raycast vehicle and drive it on my browser.

In fact, Bruno Simon's Portfolio took him about 3 months to develop before he released it to the public.

Physics in itself is pretty hard to understand when you're trying to make it work on your browser, and when you're adding some threejs magic to it, well it just makes everything a little bit more harder.

Everybody hates going through the docs, well at least most of the developers I know do hate reading docs quite a lot, but threejs, although it is very popular and the community using it is constantly growing, there is not much information on how to build certain things online, unless you're figuring out things by yourself. I had to go through that painful journey of trying to figure out, how to get a raycast vehicle up and running on my browser. There's a course by Nik Lever on how to create a 3D car racing game with threejs and cannonjs. I almost got to a point where I was about to buy his course, which I am sure is excellent, but again it's not free. After going through the docs a little bit more harder and with the help of Poimandres' developers on Discord and going through Bruno's code for his portfolio, I finally figured out how to get a raycast vehicle up and running on my browser. Boy did it feel good, but it took a lot of effort since the docs aren't that helpful, and the best way to get something working on your computer is to basically play with a project which is already built using the same technology you're trying to implement and trying to reproduce it for your project.

What is Raycast Vehicle Engine?

Once I was done with setting up my first raycast vehicle, I was quite proud of myself. Although, I did wish that there was a website where I could upload my car model, and with some tweaks, generate all the code required to build a raycast vehicle. Now generating code on the browser and downloading it as files and folders is something which is not very easy to develop IRL, but is a very fun and plausible problem to solve. And that's how the idea for the Raycast Vehicle Engine took birth. A browser based engine, where a developer can upload a car model, make some tweaks in the code for the vehicle with the help of a GUI, and when satisfied with the tweaks, easily download the code, install using npm i and run using npm start. Sounds pretty interesting, right? Well that's just the beginning.

Let's build a Cybertruck!

In order to build a Cybertruck which can be driven with your arrow keys on your browser, first we need a Cybertruck! More specifically a chassis model and a wheel model for a Cybertruck. You might be wondering, where am I supposed to get a 3D Cybertruck model from, well you can easily download it from the link given below.

Cybertruck Model

I had found this model on Sketchfab and would also like to thank it's creator, PolyDucky who made the original model of the cybertruck, you should definitely go check out his other amazing 3D models on Sketchfab!

Moving on, the next thing you're supposed to do is simply drag and drop the chassis and wheel models to the respective upload inputs.

Now if you're trying to build using some other car model, keep these few things in mind,

The model cannot be a single car file, you will have to separately upload the chassis and the wheel or else the RV engine won't work and have weird issues. You can again use blender in order to separate the chassis from the wheels like I did for the Cybertruck by myself on blender.
The models you upload must be GLTFs. If you don't know how to convert your model to GLTF, I would recommend you to watch this youtube video.

Once you're done uploading your 3D models, watch the following youtube video that I have created in order to better understand how you can create a 3D Cybertruck on your browser.

And voila that's it! I am pretty sure you have understood on how you can create your own cybertruck on the web browser by watching the above video. Pretty simple right? What took me 2-3 days to develop will take you only 10-20 minutes with the help of the Raycast Vehicle Engine.

What's next?

Well now that you've finally made a 3D car which can be driven with the help of arrow keys on your web browser. You might be wondering, well what do I do next? You can build an entire world around your car model, a world where you can have more 3D objects everywhere, where your users can easily drive around, knock stuff around and basically play around to explore more like Bruno's portfolio. There's unlimited amount of things you can build with physics and threejs, and I am sure you will make something that would be super creative and mind-blowing because that's how threejs and webgl is. If you're reading this article and you don't have any idea on how to add more and modify the 3D world and add some more physics based 3D objects, I would recommend you to definitely check out Bruno's Course, Threejs Journey to better understand not only this article but also threejs and cannonjs in all.

Conclusion

RV engine is free and open source, you should definitely check it out on github and don't forget to leave a star cause it would really mean a lot to me.

Jaagrav / raycast-vehicle-engine

Drive your favorite 3D car in your threejs world just by uploading the GLTF Model and generating code all on the browser itself!

Raycast Vehicle Engine

Simply upload your favourite car's chassis model and car's wheel model and the RV Engine would automatically create a car with the same look and feel. It would also be able to control the car's movement and rotation. Add physics and everything else you want to the car and you're good to go After that you can simply download it as a zip file. Follow the same setup procedure, and you have a new raycast vehicle generated.

Features

Vehicle physics
Change Vehicle Mass, Suspension Strength, Suspension Damping, etc.
Change the position of each wheel, set the size of each wheel and have all the controls to yourself.
Change the max speed of the car, movement controls etc directly from the GUI.
Position the chassis from GUI, see helper to view the chassis in the physics world. Same goes for all of the wheels.
Generate code, simply either…

View on GitHub

Don't forget to follow me on Github to see the stuff I create and star. I really enjoy web development and webgl to create interactive and immersive experiences. This project took me in overall a month to develop, and would not be possible without the following awesome opensource projects,

ThreeJS - JavaScript 3D library
Webpack - Module bundler
Babel - ES6 to ES5 transpiler
Cannon-ES - 3D physics engine
Guify - GUI framework
JSZip - JSZip is a javascript library for creating, reading and editing .zip files, with a lovely and simple API.
Stats.JS - JavaScript Performance Monitor
File Saver - Save files to disk

There are many more awesome features that I am planning to add to the engine, and you can help me out with it too. So do fork it on github. Thanks to everyone that contributed to this project and made it possible and thanks to you for reading this article.

Create beautiful carousels or Image Sliders on React with this framework

Jaagrav — Mon, 01 Mar 2021 21:19:48 +0000

Library used in this article:

Jaagrav / react-pretty-carousel

Easily add beautiful carousels to your website in no time!

React-Pretty-Carousel

Easily add beautiful carousels to your website in no time!

Check out the Demo on the docs website!

Installation

In order to install react-pretty-carousel, run this command in your terminal.

npm i react-pretty-carousel --save

yarn add react-pretty-carousel

Usage

`Props`

Prop	DataType	Description
`items`	`integer`	Number of items to display at once
`mode`	`string`	Style of the carousel, can be either `normal` or `gallery`
`showControls`	`boolean`	Show the dots and navigation buttons if `true`, and otherwise if `false`

`External Functions and Values`

You can summon and move/navigate through the carousel by importing and using the following functions:

import {
  CarouselWrapper,
  prev,
  next,
  moveTo,
  switchTo,
  presentIndex,
} from "react-pretty-carousel";

Function	Description	Parameters
`prev()`	Move to the previous slide	none
`next()`	Move to the next slide	none
`moveTo(5)`	Move to a certain index/object with smooth animation	integer
`switchTo(5)`	Abruptly move to

…

View on GitHub

Just like I do in my other articles, I am gonna leave the link to what we are about to develop this time, Check this out working live on the docs of the library.

Story

So recently I joined this organization called WebDevGoa where we have to develop this website that includes this interactive carousel that looks pretty awesome and at the same time it also is pretty complex. Now of course there are many other react frameworks that also provide carousels that are very interactive but the thing is there are way too ordinary. And the one that our designers at the organization wanted was pretty complex and none of us found a proper open-source library or framework that we exactly needed. And that's when it came to my mind that instead of wasting time in looking for a framework, why not make one by myself, right? And guess what, I definitely did.

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

How does it look?

Well too much talkie now let's showie what I made (yeah Idk why I wrote that)

Yeah exactly, so when you move the carousel, the size of the images also changes, just the way we wanted it to be like. Well I hope you're reading this article on your computer, no don't worry it is responsive and it definitely works on mobile phones, but to experience the real effect that is created on movement of the carousel is achieved better when you're using it on a computer. You can actually check it out working on a better scale here on the docs.

Check it out in full screen mode and then continue reading this article.

How to add it to my React Website?

Yep, I've got you covered on that as well, you can either watch this YouTube video to learn how to use this framework,

Or you can continue reading this article to read and learn how you can add it to your website in just 4 steps!

Step 1: Install react-pretty-carousel

Just copy and paste the command, depending on the package installer you use, in your bash or CMD and it will install the package:

npm i react-pretty-carousel --save

yarn add react-pretty-carousel

Step 2: Import the package to your code

If you know react, even if you're a beginner, you probably know how to import a package but anyway just to make it easy for you, I am mentioning the code to import the package down below!

import { CarouselWrapper } from "react-pretty-carousel";

Here's a list of stuff you can import from the package, you might need it once you want to control the carousel from custom buttons or programmatically.

import { CarouselWrapper, prev, next, moveTo, switchTo, presentIndex } from "react-pretty-carousel";

Step 3: Add the Carousel Component to your JSX code

Finally, add this carousel to your react JSX code, if you just want to do this in order to test the framework locally on your machine, you can simply copy and paste all the code that I have written here, although you can check it out working on the docs.

So this is what I wrote in App.js

<CarouselWrapper items={3} mode="gallery">
   <div className="image image1"></div>
   <div className="image image2"></div>
   <div className="image image3"></div>
   <div className="image image4"></div>
   <div className="image image5"></div>
   <div className="image image6"></div>
</CarouselWrapper>

Yeah don't be confused by the code I wrote, I just want to add the image as background to these divs, I know it would make our work more complicated but just to resize the images properly, I am using this method.

And then I wrote this in index.css

body {
  background: rgb(15, 34, 68);
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.image {
  height: 20pc;
  width: 100%;
  border-radius: 10px;
}

.image.image1 {
  background: url("https://react-pretty-carousel.herokuapp.com/static/media/photo-1.da31d5ae.jfif");
  background-size: cover;
}
.image.image2 {
  background: url("https://react-pretty-carousel.herokuapp.com/static/media/photo-2.6932e41c.jfif");
  background-size: cover;
}
.image.image3 {
  background: url("https://react-pretty-carousel.herokuapp.com/static/media/photo-3.3cf50746.jfif");
  background-size: cover;
}
.image.image4 {
  background: url("https://react-pretty-carousel.herokuapp.com/static/media/photo-4.e7eeb637.jfif");
  background-size: cover;
}
.image.image5 {
  background: url("https://react-pretty-carousel.herokuapp.com/static/media/photo-5.903bd4b4.jfif");
  background-size: cover;
}
.image.image6 {
  background: url("https://react-pretty-carousel.herokuapp.com/static/media/photo-6.402110ff.jfif");
  background-size: cover;
}

Here I am just assigning a specific image to each div and then setting it's background-size to cover so that the image's width would be set to the div's width automatically.

If you need the whole code, with the files and everything literally then visit this sandbox on CodeSandbox

Step 4: Voila!

That's it, yeah literally, that's how easy it was to add this beautiful carousel to your website! You can now simply run the code using npm run start or yarn start and see the carousel added to your website. You can use this framework to show image sliders and testimonials that most portfolios have these days, it will look epic on your website!

Now again the whole code of whatever I taught you until now is available right here.

How do I contribute?

Oh so you're one of those people who love contributing huh? Well you can simply then contribute by visiting the Github repo!

Jaagrav / react-pretty-carousel

Easily add beautiful carousels to your website in no time!

React-Pretty-Carousel

Easily add beautiful carousels to your website in no time!

Check out the Demo on the docs website!

Installation

In order to install react-pretty-carousel, run this command in your terminal.

npm i react-pretty-carousel --save

yarn add react-pretty-carousel

Usage

`Props`

Prop	DataType	Description
`items`	`integer`	Number of items to display at once
`mode`	`string`	Style of the carousel, can be either `normal` or `gallery`
`showControls`	`boolean`	Show the dots and navigation buttons if `true`, and otherwise if `false`

`External Functions and Values`

You can summon and move/navigate through the carousel by importing and using the following functions:

import {
  CarouselWrapper,
  prev,
  next,
  moveTo,
  switchTo,
  presentIndex,
} from "react-pretty-carousel";

Function	Description	Parameters
`prev()`	Move to the previous slide	none
`next()`	Move to the next slide	none
`moveTo(5)`	Move to a certain index/object with smooth animation	integer
`switchTo(5)`	Abruptly move to

…

View on GitHub

You can star the repo of course and if you face any issues or problems, you can simply create an issue or make a PR in order to contribute.

Is there a video tutorial?

Yeah definitely there is, I always make video tutorials so users and developers both understand how to use what I made,

Do check it out and let me know if you liked the carousel or not! If you did, did you end up adding it to your project?

Conclusion

Now to be honest, creating react-pretty-carousel wasn't actually as easy as I anticipated before finally starting to work on it, it took me about two hours to get to the point where I could make the normal carousel by dragging it with the help of my pointer, I also tried my best to not break any React rules which thankfully I didn't but in the end it all works! And that's what matters the most, right? 😂

I really look forward to what you create with this carousel and how you implement it to your website, I am actually pretty curious to find out, feel frr to DM me on Twitter in case of any issues that you might face, I am there to help you, 87% of the time.

Stay tuned because in my next article I'll be creating something with an arduino, with which you'll be able to control your TV with your feet, here's a sneak peek!

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

5 APIs to inspire you for your next project

Jaagrav — Sun, 13 Dec 2020 07:14:55 +0000

Confused? About what you should make as your next project? Here are 5 Awesome APIs that you guys would thank me for mentioning here. Check them out, you might discover some new APIs which might help you to not only get ideas but also implement them in your next project.

All of the APIs that I have mentioned down below are REST APIs that you can run using simple POST and GET methods.

Click on the API names/headers in order to go to their docs

#1 CodeX Code Compiler API

Ever thought of building a website from where you could compile and execute Java, C++, Swift, Python code? Well that's where the CodeX API comes in use, now there are various APIs on the market to compile and execute code but none of them are completely free unlike the CodeX API. It is dead easy to compile and execute code and fetch the output. In this codepen, you can compile and execute and store your code just by clicking on New Class! The CodeX API currently supports upto 8 languages that you can compile and execute, know more about it down below!

Jaagrav / CodeX

CodeX is an online compiler for various languages like Java, C++, Python, etc. Execute code in various languages on your own website for free with the CodeX API!!!

CodeX

CodeX is an online compiler for various languages like Java, C++, Python, etc.

CodeX has a simple UI in order to store all your codes written in various languages easily at one place.

You can share the codes' links that you write with your friends without being worried about them making any changes CodeX stores all your code details on your device, which means every code that you write will only be editable on the device where you write you code in. Every Code shares a key that only your device and CodeX's backend know, so don't fear about others making any changes. Although there are ways to hack into others code and make changes but that's for you to find out. Once you find it out simply create an issue reporting the bug.

No need to Sign In / Sign Up in order to execute and save your…

View on GitHub

#2 Responsive Voice TTS API

You can change the text in the input above, try putting your name

Now you're gonna fall in love with this API. This API is too good to not talk about. Haven't you always wanted that if your chatbot/website could literally speak!! That's when we talk about the Responsive Voice API which is super easy to use, it is a Text-To-Speech API where you can even change the speaker's accent, language, gender, etc. Isn't this API awesome go check out it's docs by clicking on it's title above.

#3 AcoBot AI ChatBot API

Every developer has always dreamed of creating something with AI. Be it a robot or just a chatbot that gives mature replies to your questions. Now whenever we've made a chatbot, it's always been a bunch of if-else clauses that could return replies to only specific questions that we would train it for. But with the AcoBot API you can easily add a smart AI chatbot to your website to whom your users can converse with for fun, try out the codepen example to get a glimpse of what it can do.

#4 Instagram Accounts Search API

Imagine making a website where you could look up your crush's instagram/twitter/linkedin accounts all in one place, you could make something like that, and make it easy for other people to find their friends' accounts on different platforms all at one place. Here's the Instagram Search API, you can use it to search people on Instagram, it's fast, reliable and very easy to use, check the codepen in order to understand how the API works and click on the header link in order to read the docs.

#5 Currency Convertor API

If you're a beginner, I am pretty sure you like to challenge yourself and push yourself to build complex projects and that's why building something like a currency convertor is gonna be very beneficial for you. Hence here's the free currency convertor API that you can use in order to convert various currencies to various other currencies!

And those were the APIs folks! Comment down below your favourite API(s), you may also mention any unique/awesome API that you want others to know in the comments down below!

Here's a video by Zeno Rocha that I found where he has mentioned some HTML5, JavaScript Navigator APIs and many more that you might not have ever heard about. These APIs are stupid easy to use and too awesome to not be used in your next project, I would really suggest you to watch this whole video and not skip a part of it because you might miss out on some very exciting APIs.

Now one last thing, for those who are interested in using the CodeX API, I recently built this API after a lot of hardwork that you guys can use for free in order to compile and execute in languages like Java, C++, C#, C, Swift, Python, Kotlin and Ruby!!! You can check out this video in order to know in detail on how you can implement the CodeX API in your next project.

Here's the docs for the CodeX API,

Jaagrav / CodeX

CodeX is an online compiler for various languages like Java, C++, Python, etc. Execute code in various languages on your own website for free with the CodeX API!!!

CodeX

CodeX is an online compiler for various languages like Java, C++, Python, etc.

CodeX has a simple UI in order to store all your codes written in various languages easily at one place.

No need to Sign In / Sign Up in order to execute and save your…

View on GitHub

You can also check out the demo live by click on this link.

Follow WebDevGoa on Twitter in order to participate in contests and workshops that we conduct for you to get better at coding, follow now!! You can also win cool prizes!!!

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

Happy Coding!

How to build your portfolio/blog like a pro!!

Jaagrav — Wed, 25 Nov 2020 17:15:18 +0000

Before I begin, check out this list of 5 Really Cool Portfolios that I have ever seen!! Read the description because I've written the facts that a recruiter looks for in your Portfolio.

Click on the images to visit the respective websites

#1 Bruno Simon

Developed in WebGL Studio, www.bruno-simon.com is probably the best portfolio that I have seen. His portfolio and projects have always inspired me to learn 3D Web Dev. And who doesn't love 3D? Although it feels like a 3D video game, Simon has done a really great job in showing off his skills and side-projects.

#2 Rally

The only thing that is missing in the above image are the animations. That ribbon that you see behind the text actually transforms into the side menu!! UNBELIEVABLE right? I love it how they kept the website design so simple yet so sexy.

#3 Antoni

This website left me speechless, it's not only responsive but also it has really cool interactive features that will leave you in awe. There's a video running behind in the background that makes it look even more beautiful. Visit the website to experience the animations and the beauty of the website.

#4 Love For Iceland

One very important thing that recruiters look for in your portfolio websites are blogs. They want to see articles that you've written, public talks you've given and hackathons you've participated in. Having a blog in your personal website makes it 10x more attractive and useful, because in order to create a blogging website, you require basic skills related to both backend and frontend. Love For Iceland is the most beautiful blogging website that I have ever seen.

#5 Uruoi

If you're here on Dev.to, I consider you to be extremely creative. Because Creative People love to explore, love to learn. That's what recruiters look for in your portfolio, they need to know how creative you are. No matter how good of a developer you are, even the simplest of website designs also end up looking super attractive. Like Uruoi's Website itself, if you look closely you'd notice there's not many elements in the picture, all that the website has is some soothing animations and a huge background image. Other than that it's literally a regular website, but just the background and the animations make it the Website of the day.

You can check out more such websites on Awwwards

Things to keep in mind

You might have noticed in the above websites, they are literally award winning websites, however if you visit them, you'll notice the key ingredient that makes them so attractive is their animations and their simplicity. In all of the above websites notice how less text they have written? Most of it comprises media like images and videos. And that's what makes them award-winning.

Now to get a job at one of your dream companies DOES NOT require you to become an award-winning developer, but if you are then that's awesome!! It's literally just another advantage, which would of course make it easier to get a job at your dream company. However, if you are a beginner, and you also want to make super attractive portfolios, which let's say would atleast grab you a job then take a look at these three fundamental tips:

Tip 1 - Choose a Color Palette

V/S

Above as you can see their are two blogging websites with two UIs. Now of course just by seeing your face I can tell you did not like the first images. If you're a regular visitor here on Dev, you might have enabled the dark mode, because of how cool it looks. Well we all love Dev's UI because they used less colors, rather the designers of Dev worked according to a color palette which is basically a bunch of colors of either the same shade or they look good in contrast. Like the background of Dev is a shade of dark grey, the blog posts are a bit lighter, and finally in order to attract users into writing more posts, they made the WRITE A POST button in a calm indigo color. Whenever you are working on your portfolio or any kind of website, make sure to use calm colors instead of aggressive primary colors like Red, Blue, Yellow or Black, calm colors are basically a lighter or better shade of these primary colors. There's a reason why girls prefer nude colored lipsticks over blood red ones. And if you don't follow a proper color palette then you might end up with something like the first image.

Tip 2 - Website Responsiveness

My School's Website UI, computer and mobile

I know I know, you must be like OH COME ON JAAGRAV!! NOW YOU ARE HURTING MY EYES I am sorry but let me explain first, oh wait I have nothing to explain, we already can see what makes the website's UX so poor. It is it's responsiveness, I have seen so many portfolios that are not responsive which is like the nightmare for web developers. Always remember when designing an awesome UI, you always need to worry about the UX (User-Experience), that is more important. You need to follow the accessibility rules, and everything in order to become a good developer. You see, Google or Facebook could have had a UI like one of the five best websites I showed you above. But still they follow the rules because even after having a great UI, those websites don't have a good UX. Now look, we are web developers, that's why we always care about UI design but always keep in mind, most users care about the UX of the website i.e. how simple it is to use rather than the UI of the website. Did your dad ever day while using Google Maps that, Google Maps has such a great interface, instead he'd probably just reply that Google Maps is very easy to use. That's because of the great UX criteria that every Google Developers and Designers follow when they are working on the next big thing by Google. However my school's website lacks both the UI and the UX.

Tip 3 - Only Add Content that matters

Before I made my own portfolio, I had gathered a lot of inspirations from Dribbble and Awwwards, I wanted to make a website which would be as beautiful in design and also be able to say a lot about me, however after I made a design that fancy I realised that my portfolio did not look professional enough because it was too fancy. Though it had a lot of animations and the design was also pretty cool, I did not like the UX. The website was not simple enough. When a recruiter visits your portfolio always remember that he wants to get a quick look at your skills, projects, experience and talks in public. Because the recruiter has thousand other applications that he/she needs to go through before/after yours. Try to show your work to the recruiter as fast as possible, put content that you think is more useful over the others which are probably not so much. Show off the projects you have worked on, show off the articles you have written, your social media accounts and of course your experience. That's what matters the most. Here are some professional yet simple websites that I feel are an eye-catcher and life saver for the recruiters.

Click on the images to visit their websites!!

aleksandarpopovic.com by Aleks Popovic

haxzie.com by Musthaq Ahamad

devraj-chatribin.netlify.app by Devraj Chatribin

And finally,

Book Of Jaagrav by me!!

Conclusion

Now I know many of you may not like any of our designs or any one of our designs but with this article I basically want to say one thing, whatever design you make, KEEP IT SIMPLE. Do not go too fancy, maybe a little, but try to keep it the best of both worlds. Also if you like writing articles, you can create a personal blog for yourself, there are so many tools like FirebaseJS for Database, MarkedJS to add markdown to your website, ReactJS to have a great User Experience and also SendGrid which you can use in order to notify your readers about your new post. You can browse through YouTube to know how to make your own blog, here's one video by WebDevSimplified that you can watch in order to create your own blog with Mongo.

And in the meantime, you can either check out my blog

Or the code for it.

Jaagrav / Jaagrav

Capture Still Images on Browser using JavaScript

Jaagrav — Fri, 13 Nov 2020 13:32:17 +0000

Before we begin here is the link to what you'll be able to create once you read this whole article.

Yes, indeed, it is possible to capture images on the browser. Well, it is true that with the power of JavaScript, we can do almost anything but on a browser.

Now in order to click still images on your browser, we are going to use JavaScript's Navigator APIs. Well for those who are unfamiliar with JavaScript's Navigator API, here is a short explanation of it that I found on javascripttutorial.net.

The JavaScript Navigator provides information about the web browser and its capabilities. You can reference the Navigator object via the read-only window.navigator property.
The Navigator object has properties that convey the browser’s information. For example, the userAgent is a property of the window.navigator object. It is a long string that identifies the web browser.

//Run this in your console now

window.navigator.userAgent

//The output should somewhat look like this
/* Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36 
OPR/72.0.3815.186 */

So, yes with the Navigator API, you can get all the data about the user's device and also have access to particular peripherals like the device's camera, microphone, etc. Now the Navigator API is pretty rad considering the variety of stuff you can do with it.

In fact, just in case if you did not know this, you can even check the battery status/percentage/charging of the device, and on mobile devices, you can even use navigator.vibrate(100) in order to vibrate the user's device just for some haptic feedback.

So by now, you probably have got enough idea of what you can do with JavaScript's Navigator API, it is way sexier than how it sounds here.

The Code

Well since we are making a camera app, we need to show the user what his/her device's camera is seeing. And in order to do that, we are going to have to stream their camera footage on an HTML Video tag. So here's how the HTML looks like,

<!DOCTYPE html>
<html>
    <head>
        <title>Document Title</title> 
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    </head>
    <body>
        <center class="container">

            <h1>Camera</h1>

            <video class="videoStream" muted playsinline autoplay src></video>
            <br />
            <center>
                 <button class="mdc-button capture-shot">
                  <div class="mdc-button__ripple"></div>
                  <i class="material-icons mdc-button__icon" aria-hidden="true"
                    >camera</i
                  >
                  <span class="mdc-button__label">Capture Image</span>
                </button>
            </center>
            <canvas class="shot"></canvas>

        </center>

        <script>
            mdc.ripple.MDCRipple.attachTo(document.querySelector('.capture-shot'));
        </script>
    </body>
</html>

Well I used Material UI in order to make the capturing buttons look a bit prettier.

So as you can see in the HTML, there are 3 main components the <video> tag to stream the footage sent from the device's camera, the <button> tag to click the picture and <canvas> the legendary HTML5 Canvas tag where we would be seeing the still image that we click when the <button> is pressed.

Now let's take a look at the CSS, it ain't much but still I want to show you guys the whole code.

body{
    font-family: Sans-Serif;  
    color: orangered;
}

video, canvas {
    width: 100%;
    max-width: 30pc;
}

That's all CSS we need for this, now let's move on to the most essential part of this project, the JavaScript. Now pay attention on each and every line that I write after this because it is important that you understand every line of code that I wrote in order to bring life to this project. If you have any questions regarding the JavaScript part, feel free to mention it in the comments down below.

const video = document.querySelector(".videoStream");

let constraints = {
  audio: false,
  video: true
};
//Here we are mentioning which navigator peripherals are required for this project.
//We are keeping audio false lest the user would hear his own audio when the
//video gets streamed on the <video> in html

function handleSuccess(stream) {
  window.stream = stream; // make stream available to browser console
  video.srcObject = stream; 
  //Here we are hooking up the user's camera footage/stream to the video footage
  //in order to make it play/stream what the user's camera sees
}

function handleError(error) {
  if (error.name.includes("NotAllowedError")) {
    console.log("Please allow to record video dumbass");
  }
}
//In case the user does not allow to record video/audio, we will maturely handleSuccess
//the error

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(handleSuccess)
  .catch(handleError);
//With navigator.getUserMedia we are getting the user's media device outputs based
//On the constraints we have applied i.e. we want the user's video and not audio
//If we are allowed access to user's media then we run the function handleSuccess
//Which basically hooks up the device's camera footage to the <video> footage
//In case if the user does not allow access then we handle the error by calling
//the respective function

//Capture Image
const canvas = document.querySelector(".shot");
//In order to click still images, we are going to draw the frame on an HTML5 canvas

document.querySelector(".capture-shot").addEventListener("click", () => {
  //When user clicks on the capture button, we need to capture the image duh...
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  //With this we are setting the canvas' height and width to the footage's dimensions
  //The canvas, by default might be smaller than the footage's dimensions which might
  //lead to taking only a part of the frame instead of the whole frame

  canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
  //With this function we draw the frame when the user presses the canvas button
  //This line literally means draw a 2d image of the current frame in video which 
  //is basically the <video> tag where the device's camera footage is being streamed.
  //We also need to pass in the parameters to start drawing the image of the frame from
  //0, 0 which are the x, y coordinates of where to start drawing the image on the canvas,
  //We also pass in the end coordinates which is basically the size of the canvas
  //in which coordinates the canvas stops drawing the frame of the footage

  var imgURL = canvas.toDataURL("image/png");
  var img = new Image();
  img.src = imgURL;
  console.log(imgURL);
  //This is the data URL with which you can basically download 
  //the still image that you took by clicking the capture button
});

This is what it would look like if you run the code on your machine.

I know, I was too shy to turn on my real camera so I used my virtual camera... However you can check out the code working by clicking here

Now for some of you, exclusively those who did not read the code above, let me summarize on what's going on here.

Summary

So basically at first what we are doing here is, creating an object variable called constraints, where we would basically mention what media devices we are going to access of the user.

const video = document.querySelector(".videoStream");
//The html video tag where we would be streaming the device's video

let constraints = {
  audio: false,
  video: true
};

We are going to keep the audio false since we are using the <video> in order to stream the user's video, and if audio were true, the user would be able to hear his own voice which is preposterous.

After this, we are going to hook up the user's video to the <video> tag so that the user can view his video and click an image when he/she wants to. And on order to do that, we create a function

function handleSuccess(stream) {
  window.stream = stream; 
  video.srcObject = stream; 
}

All of the video data would be present inside the stream parameter which is like an event parameter that returns navigator data.

Now whenever you are accessing a peripheral like the user's camera/microphone you would be needing the user's consent to do so.
And in case the user denies to do so, then the code would throw an error stating the reason of the error. Usually if the user denies the reason of the error is a string with a message like NotAllowedError and we need to check if that error comes up or not. In case it does, we need to handle it.

function handleError(error) {
  if (error.name.includes("NotAllowedError")) {
    console.log("Please allow to record video dumbass");
  }
}

And now finally in order to start the video stream of the device's camera on the <video> tag, we need to run this line,

navigator.mediaDevices
  .getUserMedia(constraints)
  .then(handleSuccess)
  .catch(handleError);

Over here what we're doing is getting the user's media data with the help of navigator.mediaDevices.getUserMedia(constraints) based on the constraints that we set before which is allow video and not audio, this returns a promise which we get as a parameter variable in the function handleSuccess(stream), and in case if there is an error then we .catch() it and call the handleError(error) function to further handle it. And that's it we've finally started to stream the user's footage on our <video> but we have still not written the code to click images.

Now, in order to take a still image, we are going to use HTML5's Canvas to draw the image of the current frame that is being showed on the video stream.
So we need to click an image only when the user presses on the Capture button, and therefore,

const canvas = document.querySelector(".shot");
document.querySelector(".capture-shot").addEventListener("click", () => {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);

    var imgURL = canvas.toDataURL("image/png");
    var img = new Image();
    img.src = imgURL;
    console.log(imgURL);
});

In the first two lines, what we're doing is setting the size of the canvas to dimensions of the video that we are receiving from the userMedia. canvas.width = video.videoWidth; canvas.height = video.videoHeight;
After this we draw the frame which was being shown when the user clicked the capture button. In order to do that we run this line,
canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height); Over here we are basically drawing a 2d image of the video frame on the canvas. We use HTML5 Canvas's .drawImage() function in order to do draw the frame. This generally takes in 5 parameters respectively, the video element in order to draw it's frame, the x and y coordinates of where to start drawing on the canvas i.e. 0, 0 and the x and y coordinates of where to end drawing on the canvas which is basically the dimensions of the canvas since we want the image to take up all the space in the canvas.
And that's it. We have made our Browser Camera that can take still images!! Pretty cool right? Now in order to download the image you have taken, you can run the following code where we are basically converting the canvas drawn data into a .png, well it can be anything, jpeg as well.

  var imgURL = canvas.toDataURL("image/png");
  var img = new Image();
  img.src = imgURL;
  console.log(imgURL);

Open the URL that get's logged in the console, it's basically a data link. In layman's language, it's the image you clicked just that now it's no more a visual image but just a string comprising random characters that makes sense only to computers.

Meanwhile check out SnapShot the camera app that I made where you can not only take images but also edit them just after you're done with clicking your image!! Click on the image to open the website!!

You can also contribute to the project here!!

Jaagrav / Snapshot

An online Camera that uses your camera to take images, which you can immediately edit with quick edit and also download on your device.

Snapshot

An online Camera that uses your camera to take images, which you can immediately edit with quick edit and also download on your device. Live at: https://snapshotcam.netlify.app ~ Part of Project Enigma

View on GitHub

How I made Xper - A RealTime Code Deployer and Code Editor

Jaagrav — Wed, 04 Nov 2020 13:29:30 +0000

In the world of Web Development, I have always faced one major/irritating problem which is responsiveness of a website. Everytime when I am developing a website, I make a quick change and push it in order to quickly check how it looks on my phone. And it does not even update in RealTime!!! Now I know we can simply turn on the inspector and toggle to mobile screen mode to have a look and get an idea of how it might look on a mobile device, but is it accurate? I still always have this urge to check something that I spent hours working on in realtime, on my phone!!

Now imagine if it was possible!

Imagine, a tool/code editor where you can simply write code, and then deploy it, and see your deployed code update in realtime, as you code on all DEVICES that has your website open. Imagine how easy it would be to see your code's output just after you make that small two line change to your code and see it update in REALTIME on your phone without connecting your laptop to it. Imagine being able to edit your code on any device that you visit your website from!!

Seem's kinda surreal right?

Well, that's why with the help of AceJS and FirebaseJS, I created something pretty much what I needed. Something that I told you to imagine above. Now you might be like, "What the hell are you talking about?!", Well you need to watch the video below in order to get a hint of what I am really talking about.

Well, if you watched the video, thanks for watching but in case you're in a hurry and you did not, let me explain Xper to you in a nutshell

Xper - In a nutshell

Xper is a responsive React app where you can simply create HTML/CSS/JS code and see it run in RealTime on all the devices that has your deployed website open. Again, I will request you to consider watching the YouTube video in order to properly understand what Xper is really about.

How Xper works?

Xper uses AceJS in order to highlight your code, for backend, I am using Firebase, now with Firebase's realtime database, I was able to update the database with data in realtime, so this gave me an idea, what if I make a website and save all my codes/snippets quickly on the website, well of course I could use the browser's Local Storage in order to save all of it, but is it really useful? Just write code and save it? That also on my device only! I wanted to create something like codepen, where I could easily write code and view the output in realtime and once when I was done, simply close the browser window, just like I do once I am done designing something on Figma. Now with JavaScript's document.write() function and HTML5's iframe, I could easily run the user written code everytime the user made changes and show him/her the output of the code the user wrote in realtime. Makes Sense. And since I am using Firebase's RealTime Database, I could easily save the code everytime the user made a change! And with Firebase's on change database listener, I could easily update the user written code everywhere the website was open. With React Routers I could easily provide the user a deploy link where the user could see the deployed version of his/her code. And that's how I developed Xper.

Xper is OpenSource!!!

Jaagrav / Xper

Xper is a realtime code editor where you can both write and save your code in realtime! Please make all the changes and pull requests in the changes/updates branch in order to contribute.

Xper

Xper is a realtime code editor where you can both write and save your code in realtime! The unique thing about Xper is it updates your deployed code in realtime, which means you can code on your computer and immediately be able to check how it looks like on your phone, tablet, and literally everywhere else. Xper is developed in React, which makes it a lightning fast code editor considering everything is being saved remotely. Check it out in the links given below
Live at: https://xperbycoder.netlify.app Source Code: https://github.com/Jaagrav/Xper
You can create issues in case you detect a bug, and if you know how to fix it, you can work on it yourself and make a PR, I will accept all the PRs that deserve to be accepted, so now you can also become a contributor for Xper
This project was bootstrapped with Create React App.

Available Scripts
…

View on GitHub

You can contribute your changes and versions easily to my repo by creating a PR or an issue that developers around the world could work on. And oh, check out Xper now!! I bet you'd love to play with it!!!
Learn the technologies used!!

So if you want to learn all the technologies that I used, just tap on their names, to know more:

Make your own code editor

Check out this video where I made a simple CodePen clone

Clone this repo to run it on your machine

Jaagrav / CodePen-Clone

Here is how you can easily use AceJS to add a code editor to your website with HTML5 and Vanilla JavaScript.

Here's the HTML

Paste this at the bottom of your HTML first

<div id="html-editor" style="height: 100%;"></div>
<!--Define a div with an id where you want to write the code-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"></script>

Here's the JavaScript

Paste this in your main JavaScript file i.e. basically the file where you're writing your JavaScript

let htmlEditor = ace.edit("html-editor"); 
//html-editor is the id of the div where I want to write the code

htmlEditor.session.setMode("ace/mode/html");
htmlEditor.setTheme("ace/theme/terminal");

htmlEditor.session.setValue(`<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>`);//Default text you want to show in your code editor

htmlEditor.session.setUseWrapMode(true); 
//You can even enable text wrap which is disabled by default

htmlEditor.setOptions({
  fontSize: "20pt"
});

Once you're done doing this, you would get to see something like this!!

Pretty cool right?
Here, check it out live on your device, and also you can view the code here
Here is how it looks on Xper,

Challenges for you!!

Try creating a realtime code editor by yourself, add cool text themes, an awesome UI, and a feature you personally have always wanted on a realtime code editor. Also try to save the code in the local storage so that the user has access to his code only on his computer. And then make a Github Repo and mention it down below.

THE BEST SUBMISSION WILL BE FEATURED IN MY NEXT ARTICLE!!

Until then, thanks for your time, reading this, and yes you made it through all the crap that I talked about in this article, hope you liked it!!

Check out Xper
Contribute to Xper
Code to add AceJS to your website

Stay tuned to learn how to make your own realtime code editor that can save your code locally on your device!!