DEV Community: Devster

Why use Next.js ?

Devster — Sat, 24 Oct 2020 12:43:47 +0000

Nextjs Make it possible to achive Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.

Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
Server-side Rendering is the pre-rendering method that generates the HTML on each request.

Importantly, Next.js lets you choose which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

Most clearly you can check out the docs to know more.

this is what i made with it :)

5 incredibly useful stuff your browser can do.

Devster — Mon, 28 Sep 2020 12:19:28 +0000

hey again so i am gonna tell you some real increabily usefull stuff u can do with your browser

1. the instant search feature

so mostly when u try to surf youtube or anything fast on some easy searchable sites u type the whole adress and search it like this

thats very time consuming, now next time just type the link and press tab easy as that ¯\_(ツ)_/¯

2. Teaching your browser some tricks

within less than a second you can give your browser its own quick-access scratchpad that’ll let you jot down thoughts right within the browser—no extensions required. All you have to do is paste a snippet of code into Chrome’s address bar

TRY OUT THIS CODE FOR EXAMPLE

Paste it in your browser window and run it

3. Using full screen Dino

ik ik its not that productive but ya know its fun... hehe
just type in your address bar chrome://dino

oof bad quality recording sorry for that

4. making shortcuts for extensions

id you know you can create custom keyboard shortcuts for opening extensions on demand? Some extensions even allow you to create shortcuts for specific commands. Type chrome://extensions/shortcuts into your browser’s address bar to set up your own.

5. i remember that says chrome

Chrome can strip all formatting from copied text as you paste it—eliminating links, fonts, colors, and anything else you might not want to carry over. Once you’ve copied some text, hit Ctrl- or Cmd-Shift-V to give it a whirl.

How to make your github profile more captivating

Devster — Mon, 28 Sep 2020 06:36:07 +0000

Hey guys so inspired by this post i made this article do give it a read.

GitHub Profile as a Portfolio: Your thoughts?

Madza ・ Sep 25 '20

#webdev #discuss #github #portfolio

so based on that i thought of making this little post about make your github page look smart. here is the screenshot of my page.

So yeah i am gonna tell you guys how i made that thing so lets start with basics make a repo and name it exactly as you github username now just add a README to it

NOTE: keep the repo public

so when u will create it on the top right corner a option will appear

now press on share to profile and your readme will be available on ur profile Yay now lets edit it

Here is a basic format you can try

but if you want to make your profile like mine then u can see the source code of my read me on my github

Thanks for reading if you find this usefull drop a like ^-^

Making Type effect using pure javascript

Devster — Sun, 27 Sep 2020 13:59:13 +0000

If You are reading this then u might be Having Basic math and javascript knowledge so here i am going to teach you how to make a simple typewriter effect using pure javascript no external libraries.

so lets get started with it
lets first make the element we want to add the effect/animation to

<h1 id="type"></h1>

here i am using a <h1> tag with a id="type"
now lets get to the javascript code first we define our variables

var i = 0 //no of words which will be 0 at first
var txt = "the text u want to display" 
var speed = 50 // try changing this to experiment ;)

now lets get real here

function typeWriter() {
  if (i < txt.length) {
    document.getElementById("type").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}

now let me tell you what i did here we made it show the each character at the speed we feeded until the final length is satisfied which makes our type effect :)
now we call the function when we want to run it you can call in many ways but some simple ones are onclick or onload
here is how i used it

<body onload="typeWriter()">
  <h1 id="type"></h1>
</body>

Here is a code for those who will skip all the above thing and just want the code