teleren/devto huggingface dataset:
Fixed Sidebar Menu Using HTML & CSS 
Tags: fixedsidebarmenu, htmlcss, siderbardesign
Published: 2022-01-16 14:35:17

Side Bar Menu using HTML & CSS

In Today post I will show you, [how to create a Side Bar Menu using HTML & CSS only.](https://nextcodingblog.com/fixed-sidebar-menu-html-css/) 

The sidebar allows the user to navigate different section or pages on the webpage of information to the right side or left side of a website. Which have links to help the user to move various site within the webpage and makes easier for users? The sidebar became an essential part of the web pages.

In this video tutorial [Side Bar Menu], we are going to links button along with icons at the left top side corner of the webpage, also with hover effect when the button is hover nice effects appear. And an animation effect will also be added to link to make animate nice.

Here is the full video tutorial that will show [step by step how to create a Side Bar Menu using HTML & CSS
](https://nextcodingblog.com/fixed-sidebar-menu-html-css/)
In the tutorial, I will be using pure html and css to write the code no JavaScript . So if you're a beginner, then you can easily understand the codes of this program and able to create this type of sidebar menu.  

You May Also Like
[Sidebar Menu Using Html and CSS Animated Menu Sidebar](https://nextcodingblog.com/sidebar-menu-using-html-and-css-animated-menu-sidebar/)

Fixed Sidebar Menu Using HTML & CSS  [Source Code]
You can download all source code files from the below link
[Download Now ](https://nextcodingblog.com/fixed-sidebar-menu-html-css/)
Emulating private methods with closures
Published: 2022-01-16 14:35:09

var counter = (function() {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }

  return {
    increment: function() {
      changeBy(1);
    },

    decrement: function() {
      changeBy(-1);
    },

    value: function() {
      return privateCounter;
    }
  };
})();

console.log(counter.value());  // 0.

counter.increment();
counter.increment();
console.log(counter.value());  // 2.

counter.decrement();
console.log(counter.value());  // 1.
Panther OS  a new Linux distro
Tags: linux, programming, opensource, bash
Published: 2022-01-16 14:21:32

 Hi and welcome to my blog, Today we are gonna discuss about panther operating system which is developed by me. Panther operating system is a Linux distribution which lie under Debian 11. The main feature of panther operating system is its security and customization power. This is an open source project I've been working on. Currently it is on its final stage of development. It is an OS which you can only run through a VM or virtual machine. Because we it is more secure. The OS comes with nice UX/UI so you will need



    system requirements :
    Ram : 4GB
    VRAM : 128MB
    HDD : 13GB
    VM software : VMware / Virtual box up to your choice 


Why you should use Panther OS :
    Its because if you are considering your privacy, Your security or the customization power to achieve your needs you need to use this OS.  Now if you are a student you can just remember how Linux was good for your studies like that you can use this. And you have the power to use its complete edges. Now if you are a developer you can ask the source file to start a project by your own.
LibBSDDialog
Tags: api, c, terminal, ui
Published: 2022-01-16 14:21:13

[LibBSDDialog](https://gitlab.com/alfix/bsddialog) provides an API to build TUI dialogs and widgets to show messages, to get input and to inform about a computation status.

Example to build a *msgbox* with *Hello World!*:

```c
#include <bsddialog.h>

int main()
{
	struct bsddialog_conf conf;

	bsddialog_init();
	bsddialog_initconf(&conf);
	bsddialog_msgbox(&conf, "Hello World!", 8, 20);
	bsddialog_end();

	return (0);
}
```

[![](https://gitlab.com/alfix/bsddialog/-/raw/main/screenshot.png){ max-width=100% }][urllink1]

[urllink1]: https://gitlab.com/alfix/bsddialog/-/raw/main/screenshot.png

------------------------------------------------------------

Of course, it is possible to get user input and to change the UI, "Yes-No Question" example:

```c
#include <bsddialog.h>
#include <bsddialog_theme.h>
#include <stdio.h>

int main()
{
	int output;
	struct bsddialog_conf conf;

	bsddialog_init();
	bsddialog_set_default_theme(BSDDIALOG_THEME_BSDDIALOG);

	bsddialog_initconf(&conf);
	conf.title = " yesno ";
	conf.text.highlight = true;
	output = bsddialog_yesno(&conf, "\nHello \\Z3World\\Zn!", 10, 30);

	bsddialog_end();

	switch (output) {
	case BSDDIALOG_YES:
		printf("YES\n");
		break;
	case BSDDIALOG_NO:
		printf("NO\n");
		break;
	}

	return (0);
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7up17onzdfgou8al9o7.png)

And to show computation status:

[![](https://pbs.twimg.com/media/FHADLyaWYAwR473?format=png&name=large){ width=100% }][pv]

[pv]: https://pbs.twimg.com/media/FHADLyaWYAwR473?format=png&name=large


------------------------------------------------------------
To compile the examples:

```default
% git clone https://gitlab.com/alfix/bsddialog.git
% cd bsddialog
% make
% cc -I./lib example.c -o example -L./lib -lbsddialog -Wl,-rpath=./lib
% ./example
```

------------------------------------------------------------
Dialogs and widgets:

 - infobox, msgbox, yesno.
 - radiolist, checklist, menu, mixedlist.
 - form.
 - gauge, pause, mixedgauge, rangebox.
 - datebox, timebox.
 - textbox.

Documentation:

The library has a [manual](https://alfonsosiciliano.gitlab.io/posts/2022-01-16-libbsddialog.html) to describe the API

```default
% man ./lib/bsddialog.3
```

and a collection of [examples](https://gitlab.com/alfix/bsddialog/-/tree/main/examples_library) in the Public Domain to build new projects

```default
% cd examples_library
% sh compile
% ./datebox
% ./form
% ./infobox
% ./menu
% ./mixedlist
% ./msgbox
% ./pause
% ./radiolist
% ./rangebox
% ./theme
% ./timebox
% ./yesno
```

------------------------------------------------------------

LibBSDDialog is an open source project released under the term of the BSD 2 Clause License, repository: <https://gitlab.com/alfix/bsddialog>.


*Happy Coding!*
Learn How to Create a Reaction Time Game in JavaScript | JavaScript Game Projects for Beginners 2022
Tags: javascript, beginners, webdev, html
Published: 2022-01-16 14:19:47

In this JavaScript tutorial, I will show you How to Create Reaction Time Game in JavaScript which is a simple JavaScript Game Projects for Beginners. This JavaScript reaction time game will calculate and display the reaction time between two clicks on an HTML div. You will also learn how to play audio on button click in JavaScript. The shapes will display with random delay and in random sizes in JavaScript.

The simple JavaScript game for beginners will generate the circles and squares randomly on button click. The game shows you how to get random size shapes using JavaScript and how to generate random colors on click in JavaScript. This simple JavaScript project for beginners will show you how to display the shapes in random positions and with random colors when the user clicks on div.

### Full Video Tutorial:
{% youtube j6GZWHcumrI %}

How do I generate a random color in JavaScript?
How do I generate random colors in react JS?
How do you generate a random hex color?
How do I generate a random color in typescript?
How to Create Reaction Time Game in JavaScript?

Javascript game development tutorial,
how to make a javascript game in notepad,
javascript game collision detection,
javascript game development for beginners,
javascript game engine from scratch,
javascript color guessing game,
javascript game project in Hindi,
javascript game ideas for beginners,
javascript in game development,
javascript game keyboard input,
javascript game loop request animation frame

Video Chapters:
00:00 Introduction
00:45 html5 javascript game code
03:25 How to get reload time in JavaScript?
03:50 How to generate random shapes in JavaScript?
04:20 Display shapes with random delay JavaScript
05:35 hide show div on click javascript
10:25 Generate a random color in JavaScript

If you found this video helpful please share the video and SUBSCRIBE to this youtube channel. Please share your thoughts and queries in the comments below! 

****************************
- 𝗧𝗵𝗲 𝗯𝗲𝘀𝘁 𝘁𝗼𝗼𝗹 𝗳𝗼𝗿 𝗬𝗼𝘂𝗧𝘂𝗯𝗲 𝗥𝗮𝗻𝗸𝗶𝗻𝗴, 𝗚𝗲𝘁 𝗮 𝘀𝗽𝗲𝗰𝗶𝗮𝗹 𝗱𝗶𝘀𝗰𝗼𝘂𝗻𝘁 𝗻𝗼𝘄!
     Link:  https://bit.ly/2XrNfWS
****************************

- 𝗦𝗼𝘂𝗿𝗰𝗲 𝗖𝗼𝗱𝗲 𝗟𝗶𝗻𝗸 (𝗬𝗼𝘂 𝗺𝗮𝘆 𝗵𝗮𝘃𝗲 𝘁𝗼 𝘀𝗲𝗮𝗿𝗰𝗵 𝘁𝗵𝗲 𝘁𝗶𝘁𝗹𝗲 𝗼𝗳 𝘁𝗵𝗶𝘀 𝘃𝗶𝗱𝗲𝗼)!
     https://www.hmablogs.com/

- Place an order for any Web Development work!
         https://www.fiverr.com/haaddison1?up_rollout=true
GitHub Password Authentication Deprecation
Tags: github
Published: 2022-01-16 14:00:01

As per GitHub' [announcement] (https://github.blog/2020-12-15-token-authentication-requirements-for-git-operations/), December 2020, account passwords will no longer be supported to authenticate Git operations beginning on August 13, 2021. In other words, password authentication has been deprecated.

If you have a tool or are heavily dependent on git cli for everyday workflows, you will be impacted by this. Please do wait until the last minute to update your GitHub auth method; do it today and get acquainted with the new workflow.

The two Github authentication methods supported will be:
1. [Personal Access Token Authentication](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)
2. [SSH Key](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)

Please read more on the above to set it up.
how to solve this dart program 
Tags: dart, flutter, programming
Published: 2022-01-16 13:34:38

void main() {
  
  User UserOne = User('vineeth',21);
  
  
  
}
class User{
  
  String username;
  int age;
  
  User(String username , int age){
  
  
    this.username = username;
    this.age = age;
  
}
  
}
Quizzo
Tags: atlashackathon, mongodb, django, javascript
Published: 2022-01-16 13:28:41

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
[Note]: # (Please make sure the project links to the appropriate GitHub repository, and includes the [Apache-2 permissive license](https://www.apache.org/licenses/LICENSE-2.0)  and README.)


### Submission Category: Choose Your Own Adventure


### Link to Code
https://github.com/compmonk/Quizzo


### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note:] # Screenshots/demo videos are encouraged!

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. Prizes for winning projects with multiple collaborators will be sent to the person who posts this submission and they will distribute the prize evenly.)

[Reminder]: # (Submissions are due on January 13th, 2022 @ 11:59 PM PT/2 AM ET on January 14th, 2022/6 AM UTC on January 14th, 2022).
Light Out game | Day 12
Tags: javascript, webdev, beginners, programming
Published: 2022-01-16 13:20:04

Today I have made a Light Out Game , Not From the Scratch 😅
It was an Exercise of the React Course BY Colt Steele.
The Game Look Like This 👇
![Light out Game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cuol3xonjzytximpn5k6.png)

### Working
When you clicks on any cell it will toggles his neighbouring cells. When all the Cells are off you won the Game.

Your Task is to First Make a Board which have cells in it and you can use the Table to show the Cells in the Board(as a table Data.)

Once you are done with that You have to do that every time You Refreshes the site the cell will randomly be on/off.

After that you have to apply that whenever u click on a particular cell it will also toggles it's neighbouring cells.
 
### Component Design

**App**
As often, this is a very simple component. It just renders the Board component.

**Board**
The most sophisticated component. It will hold the state that represents the in-memory grid of true/false for lights-on/off. Since the state for the board lives here, this is also were the setState() calls will need to go — and therefore, all the functions that call setState().
**Cell**
A simpler component. This will simply render a `div`, where the CSS classes will indicate whether this cell is lit or unlit. This is what the user clicks on — but it will need to call a function it receives from the Board, since that will need to update the state.


When the game is won, the board should not be shown, but a simple “You Won” message should show in its place.

**Happy Coding ☺️**
Difference between bootstrap and twitter bootstrap
Published: 2022-01-16 13:11:56

Bootstrap is a CSS framework used in front-end applications - that is, in the user interface screen - to develop applications that adapt to any device.

In WordPress, for example, it can be installed as a theme or used to develop plugins or even within them to stylize their functions. The framework's purpose is to offer users a more pleasant experience when browsing a site.

For this reason, it has several resources to configure the styles of the page elements and efficiently and facilitate the construction of pages that, at the same time, are adapted for the web and mobile devices.

The above shows why it is essential to know about a potential structure of this type

What is Bootstrap?
Bootstrap is a CSS framework developed by Twitter in 2010 to standardize business tools.

It was initially called Twitter Blueprint, and soon after, in 2011, it went open source, and its name changed to Bootstrap. It is now updated several times and is already in version 4.4.

The framework combines CSS and JavaScript to style the elements of an HTML page. This does more than change the colour of buttons and links.

It is a tool that offers interactivity on the page. It, therefore, provides several components that facilitate communication with the user, such as navigation menus, page controls, progress bars, etc.
In addition to all the functionalities offered by the framework, its main objective is to create responsive websites for mobile devices.



This means that the pages are designed to work on desktops, tablets and smartphones, in a simple and organized way.

Is There Any Difference Between Bootstrap and Twitter Bootstrap?
No, there is no difference between them. They are the same thing. Twitter Bootstrap is called Bootstrap in short form.

Hope you liked the post, kindly share it with your programmer friends.
How to INSTANTLY write better code?
Published: 2022-01-16 13:10:20

There is one trick you can start applying **today** and you will immediately appear like a better programmer.

And not just "appear to be", but actually **be** a better programmer.

**The best part is** - you don't even have to learn anything new.

You don't have to do anything hard.

BUT

You do need to put a little more care into this one thing (more than you usually do).

So what is this "magical thing"?

<mark>It is function and variable naming.</mark>

And before you go "oh I already know that" - **no you don't**.

I worked with developers who have 2-3 years of experience and this is **still a problem** for a lot of them.

But why is naming such a big deal?

Because **much more time** is spent **reading** the code than it is writing it.

And whether you're being "too clever" or too lazy with your variable names - the result is the same: **disaster**.

Even if it's you reading it, **after 2-3 months** you will have no idea what was so clever (or funny) about it.

Better naming is **literally the easiest hack** you can do that will improve your code quality overnight!

Make your variable names as specific as possible and **do not be afraid of longer variable names**. (you are not in school anymore where every coding example had the variable "**x**") 

**Examples of good variable names:**
- getUsersFromStripe()
- getActiveStripeUsers()

**Examples of bad variable names:**
- getUsers()  
  - which users?
- fetchAll()  
  - fetch what from where?

These almost seem OK but they're not specific enough. What if you're downloading both Stripe and PayPal user data? Or just one of them?

You would have to get inside the function and **read what it does** to find out.

Aside from wasting your time and energy, after a certain point, this becomes **completely unsustainable**.

So make sure proper naming is your top priority.

Until next time,
*Will*
*[Building an Algo-Trading Hedge Fund From Scratch](https://programmermoney.com/)*
Image Animation Using HTML CSS & GSAP
Tags: javascript, html, beginners, webdev
Published: 2022-01-16 13:04:53

Hello Guys,

Today I Created an Amazing Image Animation using HTML CSS & GSAP Animation. To animate the image I use the `GSAP.timeline()` and `gsap.from()` method to achieve this effect. If you had multiple images on your website then use for each method like me else use a direct timeline method.

I hope you like this also comments about your thoughts. also For more content **follow me on Instagram**  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you 🙂!

{% codepen https://codepen.io/NikhilBobade/pen/jOGdgPM %}
Avoid unnecessary re-renderings in React.js.
Tags: javascript, react, performance, redux
Published: 2022-01-16 12:57:15

Did you experience the following: you just open a website in a browser and do nothing, but CPU usage of your computer grows up to 100% if look to System Monitor? RAM almost not used, Network almost not used, but CPU usage is near 100%? Then, you just close a tab in a browser, and CPU usage drops twice or even more very fast? This is a true sign that the website has background operations that recalculate the whole DOM of a page all the time in a loop to re-render it. 

If you use React.js with state management, it uses a virtual DOM, and when re-render occurs, React implements a calculation to see a difference between the previous state and the current state and decide which parts of a page DOM tree should be re-rendered. It happens every time a background process changes a state. Even if you need to update a single label on the page, React recalculates the whole component which contains this label. What is more, if re-render event triggered, it recalculates a state change in the component even to decide that nothing should be re-displayed. The calculation is CPU operation, but JavaScript is not the best language for CPU-intensive operations. If the background process updates something every second, then this simple state change can become a CPU-intensive operation. That is why it's important to care about the unnecessary re-rendering of React components. Otherwise, users will stop using your apps, regardless of how beautiful or interactive those apps are. 

There are very few reasons to re-render the whole page or root component. In most cases need to re-render only the component, that contains the HTML elements, which should be updated. It's easy to see, how often your components re-render themselves while your website works. Just add "console.log("RERENDER")" to a "render" function of your components and see how often it displays this message in a JS console. If you see something crazy, that this line appears 10 times, for example, but you just click once or even do nothing, then it's time to audit your components to reduce unnecessary renderings. This is an article with some tips on how to do that: https://blog.bitsrc.io/5-ways-to-avoid-react-component-re-renderings-90241e775b8c.

If you know other handy tools either to monitor React components resource usage and/or to optimize performance, post them in comments. It will be very interesting to consider and have a database of these tools and tips. 

For now I am happy to add one of the most famous tools to measure website performance. This is LightHouse: https://developers.google.com/web/tools/lighthouse .
My 1 Month Micro-controller Experience
Tags: python, raspberrypi, arduino, myexperience
Published: 2022-01-16 12:55:38

## Story of how I got into this stuff

So I picked up my first pi(raspberry pi) somewhere during 2020 since I was super bored with my current project at the time (some random website)... Once I picked it up I didn't do anything with it for like the entire 2020 lol. Probably because amazon closed in my area, I couldn't buy any components for any **real project**.

## Current progress

Well, I bought some accessories for my pi in December 2021, for Christmas, and have been making a few things... My next big project with my pi is probably to make some sort of robot.

## Projects

I've got some of my projects on my new Twitter since I deleted my old one(personal issues with it).

So here they are: [MicroController Projects](https://twitter.com/duck_ware)
Global error page in Angular
Tags: angular, typescript, javascript, errors
Published: 2022-01-16 12:55:24

This is a relatively small and simple article, but I felt it is still worth posting because of the utility of the topic.

{% github anirbmuk/angular-error-handler no-readme %}

Any front-end application is all about serving data from a store, using end-points (REST/GraphQL or whichever you can think of). And a big part of your application's success is the way you can handle errors. The more gracefully you handle error situations, the better your users' experience will be.

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y87l8w7t8b6s0kxavbte.gif)

On that note, let's talk about an approach to handle all sorts of errors in an Angular application.

The idea behind this article is to manage all possible errors in one location and allow the application to navigate to an `error-page` once any error is thrown. Now I would like to clarify that when I say error, I mean server side errors, emanating from your data end-points.

To do this, we will make use of the one place through which every `HTTP` request passes in an angular application - the `interceptor`. We usually make use of the interceptor to tap outgoing requests and append headers, tokens etc. But we can also tap onto the incoming response and handle the error situations.

When the `next: HttpHandler` handles the request, the request is sent to the back-end server. We can pipe the observable to tap onto the incoming response.

```
interceptor.service.ts:
intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error) => {
        const { code, message } = error.error;
        this.errorService.addError({
          code: code || error?.status,
          message: message || error?.statusText,
        });
        this.router.navigate(['/error']);
        return EMPTY;
      })
    );
  }
```
We also navigate to our designated error page, which is designed to handle the error code and message and display it appropriately.

**Additional improvisation**: Use a `resolver` for the error component and check if the error observable has any value. If not then redirect to the home-page. This may be helpful when the user refreshes the error page; then it would make more sense to be taken to the home page to try again, instead of showing the same error once again.

```
error.resolver.ts:
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    return this.errorService.error$.pipe(
      take(1),
      tap((data) => {
        if (!data) {
          throw new Error('No error');
        }
      }),
      catchError(() => {
        this.router.navigate(['/']);
        return of(null);
      })
    );
  }
```

Cheers!
[Anirban Mukherjee](https://anirbmuk.appspot.com/en)