teleren/devto huggingface dataset:
ASMR Coding React App | No Talk - Jazz and Rain
Tags: react, javascript, beginners, webdev
Published: 2021-11-29 06:15:19


React is great!

I'm not one of those who use React because it's released by Facebook, no, I like React because of its ultimate power and that's easy to learn, and not just because there are a great number of easy-to-understand tutorials available on the internet but mainly because it's a very simple library. 

Unlike "Angular", it's not a complex tool. The learning process becomes easier when you have great JavaScript skills. Although I like React,  I sill think that "Vue" is easier to grasp, especially for those who know HTML/CSS/JS and had never worked with frontend frameworks before.

This is a React.js application, coded from scratch in silence on a Saturday morning in a Starbucks café in the beautiful city of Lodz, Poland; it was pouring outside, and I was sitting alone with my coffee writing this app, and I did not want to talk just wanted to code in silence and if you're a beginner - intermediate, you can code along with me or you can leave it turned on while doing your own stuff if you wish.

The idea of this application is based on "unsplash" website's API,  there is a developers' corner where you can create your own app and generate you access key, which will be useful in fetching the data from the API and return back the picture you search for in your application.

Prerequisites just a solid foundation in JavaScript [ especially ES2015, commonly known as ES6 ], plus basic understanding of React library (or framework if you like) and you can code along with me (and don't forget your coffee ☕😃)

Here's the video: 

{% youtube mL-FE7ZpB_c %}


Hope you enjoy it - if you like that kind of videos

Facebook : https://www.facebook.com/bekbrace​​​​ 
Twitter : https://twitter.com/BekBrace
Instagram : https://www.instagram.com/bek_brace/
GitHub profile : https://github.com/BekBrace​​​
Website : https://bekbrace.com
Reach out  : info@bekbrace.com

Support
-------
Join this channel to get access to perks:
https://www.youtube.com/channel/UC7EVSn5inapL20oPSwAwEUg/join
OR
Become a Patron: https://www.patreon.com/bekbrace

Thank You ASHUTOSH SINGH and Digital Ocean.
Tutorial: https://www.digitalocean.com/community/tutorials/how-to-build-a-photo-search-app-with-react-using-the-unsplash-api
How to Install Fonts in Ubuntu?
Tags: ubuntu
Published: 2021-12-14 05:05:51

---
title: How to Install Fonts in Ubuntu?
published: true
date: 2021-11-29 06:14:12 UTC
tags: Ubuntu
canonical_url: https://stackallflow.com/ubuntu/how-to-install-fonts-in-ubuntu/
---

<header>
<p><span style="font-size: 1.2em; color: initial;">fonts</span></p>
</header>

Question says it all. I need them to be available in gimp.

#### Accepted Answer

Many fonts are packaged for Ubuntu and available via the “Fonts” category of the Ubuntu Software Center. If you prefer `apt-get`, search for packages starting with _otf-_ or _ttf-_.

Font files that are placed in the hidden `.fonts` directory of your home folder will automatically be available (but `/etc/fonts/fonts.conf` indicates it will be removed soon.). You can also place them in the `~/.local/share/fonts` directory on newer versions of Ubuntu per the comments below.

You can also double-click on the font file (or select _Open with Font Viewer_ in the right-click menu). Then click the **Install Font** button.

If you need the fonts to be available system-wide, you’ll need to copy them to `/usr/local/share/fonts` and reboot (or manually rebuild the font cache with `fc-cache -f -v`).

You can confirm they are installed correctly by running `fc-list | grep "<name-of-font>"`

You may need to restart some programs, like OpenOffice Writer, before they actually show the new fonts (usually such programs are caching the font list when they start up).

_Edit: Changed advice to manually install into `/usr/local/share/fonts` instead of `/usr/share/fonts` to reflect comments and best practice._

The post [How to Install Fonts in Ubuntu?](https://stackallflow.com/ubuntu/how-to-install-fonts-in-ubuntu/) appeared first on [Stack All Flow](https://stackallflow.com).
How to Get Mediatek mt7630e 802.11bgn WI-FI Adapter Working in Ubuntu?
Tags: ubuntu
Published: 2021-12-14 05:05:45

---
title: How to Get Mediatek mt7630e 802.11bgn WI-FI Adapter Working in Ubuntu?
published: true
date: 2021-11-29 06:13:51 UTC
tags: Ubuntu
canonical_url: https://stackallflow.com/ubuntu/how-to-get-mediatek-mt7630e-802-11bgn-wi-fi-adapter-working-in-ubuntu/
---

<header>
<p><span style="font-size: 1.2em; color: initial;">drivers</span><span style="font-size: 1.2em; color: initial;">software installation</span><span style="font-size: 1.2em; color: initial;">wireless</span></p>
</header>

It worked with the pre-installed Ubuntu, but after re-installing Ubuntu dual-boot with Windows 8.1, the WiFi is not working.

Is there a driver for this adapter that will work on Ubuntu 12.04?

#### Accepted Answer

A better solution is to install the driver using DKMS. This way you won’t need to re-install it after kernel uprades. Do it this way:

```
sudo apt-get install git dkms build-essential
git clone https://github.com/neurobin/MT7630E.git
cd MT7630E/
sudo make dkms

```

The post [How to Get Mediatek mt7630e 802.11bgn WI-FI Adapter Working in Ubuntu?](https://stackallflow.com/ubuntu/how-to-get-mediatek-mt7630e-802-11bgn-wi-fi-adapter-working-in-ubuntu/) appeared first on [Stack All Flow](https://stackallflow.com).
Redirect www to non-www in Cloudflare
Tags: cloudflare, dns
Published: 2021-11-30 05:24:56

---
title: Redirect www to non-www in Cloudflare
published: true
date: 2021-11-29 00:00:00 UTC
tags: cloudflare, dns
canonical_url: https://willcodefor.beer/posts/cloudflare-www-to-non-www/
---

While setting up a new domain in Cloudflare I found that I wasn't handling `www` for the domains of this site. What I wanted was to redirect any requests to `www` to non-www, but it turned out to be harder than I expected. Mostly because I'm not great at DNS setups and I had a hard time finding any tutorials to help me.

I finally got it working by creating an A-record and a [page rule](https://www.cloudflare.com/features-page-rules/).

## Create a DNS record

If you don't have an A-record, I didn't, then create a dummy A-record in your domain's DNS. Set its name to `www` and the IPv4 address to `192.0.2.1`. Make sure that it's proxied (the orange cloud). The page rule we are going to create will run before this record is resolved so the value shouldn't matter, but the page rule won't run if we don't have this record.

## Page rule

1. Go to page rules (Rules > Page Rules)
2. Create a new rule. Set the first field, "if the URL matches", to `www.mydomain.com/*`. The asterisk will help us match any routes in the destination URL.
3. Select "Forwarding URL" and "301 - Permanent Redirect"
4. Set the destination URL to `https://mydomain.com/$1`

The asterisk combined with the `$1` will match and keep any routes. For example, `www.mydomain.com/sub/path` will redirect to `mydomain.com/sub/path`. If we don't include this part we would be redirected to the root, i.e. `www.mydomain.com/sub/path` would redirect to `mydomain.com`.
Why should I use a getter and setter function instead of regular functions in a javascript Class?
Published: 2021-11-29 05:59:46

---
title: Why should I use a getter and setter function instead of regular functions in a javascript Class?
published: true
description: Question to get answers of why getter and setters exist in Javascript OOP
tags: 
//cover_image: https://direct_url_to_image.jpg
---

I am reading about Object oriented programming and i am at a loss why i should use getters and setters instead of just regular functions.

take this code for example

```
class Stack {
    constructor(){
        this.stack = []
    }

   ...
    get lengthWithSetter(){
        console.log('length')
    }

    lengthWithFunction(){
        console.log('length')
    }

}
```

```const newStack = new Stack()```

to call the lengthWithSetter method (accessor)

i can call it like this 

```
newStack.lengthWithSetter
```
while calling the lengthWithFunction method while calling the lengthWithSetter with  

```
newStack.lengthWithFunction()
```

my question is since newStack.lengthWithFunction() is consistent and has the structure of calling a normal function, while then do we have getters and setters.

because reading a code with getters and setters make it seem like they are properties and not methods (don't slander me for this).

So please can someone help answer this question, why do we need getters and setters when we can use regular functions
How to Create a Cascading ComboBox in Blazor
Tags: blazor, dotnet, csharp, webdev
Published: 2021-11-29 05:47:00

Get a quick overview on how to create a Cascading ComboBox using [Blazor ComboBox](https://www.syncfusion.com/blazor-components/blazor-combobox) of Syncfusion. In this video, you will learn how to add a series of Syncfusion Blazor ComboBoxes to a Blazor application. Also, you will see how to populate the data source of the second ComboBox based on the value selected from the first ComboBox.

Explore our tutorial videos: https://www.syncfusion.com/tutorial-v... 

Download this example from GitHub: https://github.com/SyncfusionExamples... 

{% youtube zGGntfBPQNI %}
Arcane Theme for Visual Studio Code
Tags: vscode, vscodetheme, json, webdev
Published: 2021-11-29 05:41:01

This is my first theme for  vs code. I wanted to design a theme with "Arcane-league of legends" like colors. It turned out really cool so I decided to upload it on marketplace. 

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

You can install it [here](https://marketplace.visualstudio.com/items?itemName=Zer0Studio.arcane-theme&ssr=false#overview)

Also, you can contribute to this [project](https://github.com/yash-deokate/Arcane-VS-code-theme)
It would be really helpful to remove bugs and improve the design in general.

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

🙋🏿‍♂️Let me know if you liked it.🙋🏿‍♂️
Can’t Install Ubuntu 18.10 on Xps 15 – Efibootmmx64.Efi Not Found in Ubuntu?
Tags: ubuntu
Published: 2021-12-14 05:05:37

---
title: Can’t Install Ubuntu 18.10 on Xps 15 – Efibootmmx64.Efi Not Found in Ubuntu?
published: true
date: 2021-11-29 05:39:23 UTC
tags: Ubuntu
canonical_url: https://stackallflow.com/ubuntu/cant-install-ubuntu-18-10-on-xps-15-efibootmmx64-efi-not-found-in-ubuntu/
---

<header>
<p><span style="font-size: 1.2em; color: initial;">18.10</span><span style="font-size: 1.2em; color: initial;">boot</span><span style="font-size: 1.2em; color: initial;">dell</span><span style="font-size: 1.2em; color: initial;">dual-boot</span><span style="font-size: 1.2em; color: initial;">uefi</span></p>
</header>

I tried to install Ubuntu 18.10 on my XPS 15 9570 earlier. Everything was working fine until I got to the partition selection part of the installation. That’s when the installer crashed and I had to shut down my machine. I think it’s because I had my SATA configuration set to RAID ON instead of AHCI, which is now fixed.

Now when I try to run the installer from my bootable USB I get the following error

```
Failed to open EFIBOOTmmx64.efi - Not Found
Failed to load image EFIBOOTmmx64.efi: Not Found
Failed to start MokManager: Not Fond
Something has gone seriously wrong: import_mok_state() failed

```

Hoping someone might have some idea as to what is going on

#### Accepted Answer

I booted an Ubuntu Live USB stick, went into my hard disk drive’s `/boot/efi` folder and renamed the file `grubx64.efi` to `mmx64.efi`

Reboot the machine and it should work.

The post [Can’t Install Ubuntu 18.10 on Xps 15 – Efibootmmx64.Efi Not Found in Ubuntu?](https://stackallflow.com/ubuntu/cant-install-ubuntu-18-10-on-xps-15-efibootmmx64-efi-not-found-in-ubuntu/) appeared first on [Stack All Flow](https://stackallflow.com).
Flip Card Animation -CSS
Tags: javascript, css, webdev, beginners
Published: 2021-11-29 05:16:18

In this video, I explained everything in detail about How to create Flip Card Animation using HTML and CSS.
This is one of the good Project for beginners /developers who are learning/working  HTML and CSS.

<b>Note :Check the description of the video for Source Code</b>


{%youtube 85Zy3LpMGwA%}
My fifth week doing task force.
Published: 2021-11-29 05:05:03

Being on time is the best thing you can do as a software developer. Most of the time you will find yourself having many things on the table here I mean many tasks that are on deadlines and have to be done before the deadline. Not only this week's experience was to learn how to manage time but also we learned how to test and document your software.

Let's start by covering the software testing and documentation part, you might be asking yourselves why do we document software and why do we have to write a test that runs against our software. Every professional software development company, you might join will require you to have skills in testing and documentation but the documentation I am talking about here is the API documentation if you are in the back-end. there is more than one tool on the market you can use to document your API such as Postman, Swagger.

Testing your code will prevent you from deploying codes that have errors in them, and this will ensure the clients or the users of your application are having the best experience because they are using the application that has been tested before being shipped to them. There are many reasons to test your App. Documenting your app helps your team and other stakeholders to have Intel of what your application does by describing the inputs and output.

Last but not least let talk about time management. getting to know what to do first and what to do last is the best practice of time management this practice is called prioritizing tasks. and also consider knowing what is expected of you. I mean knowing what the client is expecting from you helps in allocating tasks and starting working on them. to conclude testing and documentation should not miss in your software development process.
Converting and Optimizing Images From the Command Line
Tags: bash, linux, images, webperf
Published: 2021-11-29 04:54:45

Images take up to 50% of the total size of an average web page. And if images are not optimized, users end up downloading extra bytes. And if they’re downloading extra bytes, the site not only takes that much more time to load, but users are using more data, both of which can be resolved, at least in part, by optimizing the images before they are downloaded.

In this tutorial, you'll learn to write bash scripts that create and optimize images in different image formats, targeting the most common formats, including JPG, PNG, WebP, and SVG.

Read the full blog on [CSS Tricks](https://css-tricks.com/converting-and-optimizing-images-from-the-command-line/).

Thanks for reading 💜

---

I publish a [monthly newsletter](https://www.ravsam.in/newsletter/) in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I across while surfing on the web.

Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [Github](https://github.com/ravgeetdhillon) or send me an [Email](mailto:ravgeetdhillon@gmail.com).

— [Ravgeet](https://www.ravgeet.in/), *Full Stack Developer and Technical Content Writer*
Initial progress for Release 0.4
Tags: opensource
Published: 2021-11-29 04:52:23

The final project for the course asked me to make significant instead of small contributions to the open-source. After wandering in the open-source, I decided to work on [telescope](https://github.com/Seneca-CDOT/telescope) maintained by Seneca folks.

### Understanding the issue: 

The [issue](https://github.com/Seneca-CDOT/telescope/issues/2414) asks me to expose the feed queue maintained by [Bull](https://optimalbits.github.io/bull/) to post service. 

It took me a while to understand roughly the file structure and how different modules work as this is my first time contributing. 

I started off by reading the `backend` code especially any queue-related code. The `backend` uses `Bull`(to facilitate asynchronous behaviors) + `Redis` (`ioredis`) to manage the feed queue, it essentially parses blog posts from each feed (RSS feed url) and each parsing is a job to be added to the `Bull` queue. 

### Attempting to solve:

My idea is to create a new `Bull` queue client with the option `createClient` (to create new `ioredis` client connections) to be an `ioredis` instance connecting to the Redis database. 
```js
const Bull = require('bull');
const redis = require('./redis'); //ioredis instance from satellite 

const queue = new Bull('feed-queue', {
  createClient: redis,
});

module.exports = queue;
```

I also added a route to return the queue's job but the response was a very long loading screen. I've got to spend more time on figuring this out, maybe it is not the correct idea. I hope to solve this issue soon!

```js
feeds.get('/info', async (req, res, next) => {
  let jobNum;
  try {
    jobNum = await queue.count();
    res.json({ jobNum });
  } catch (err) {
    logger.error({ err }, "Unable to get queue's info");
    next(err);
  }
});
```
Week V Task Force 4.0
Tags: coding, webdev, taskforce
Published: 2021-11-29 04:45:28

> Code is Art 

Hello , @placideh here again !! I hope this journal finds you well🤩. As this blockquote above 
states: "__coding is art__ "🤓 yes sure, programming it is all about building ideas from scratch and turns it into the reality and that's why programmers mostly are called problem solver , basically they look into world as it needs another way round of operating and provide a good solution to some problems with just using computing tools.  

As week V  goes by I was building some cool application and that's is where I have come to realize that all of this application that developers are building it is an art where by we are turning ideas from mind and make them reality just by using the computing tools and most specifically we are doing this for people. This is what I mean whenever computer specialists are developing an application they are doing this, thinking of the end users of that system or app. For us I have come to experience that this art of code has to be something meaning that people will be able to use as a great way of easing their daily lifestyle.

The take away from this, is that the people needs more problem solvers so that we can make our world a better place , And that's what brought me into  technology, it is a field that at least you could build something great and it impacts not only people from your location however around the world. This brings a good feelings that you may reach to almost everyone on the planet by simply using this technology that our great programmers have made.

Thank you and I hope to see you again in week VI and also showing you great app that we have developed.
CSS Pre Loaders --Circular Components --CSS only
Tags: css, webdev, beginners, loaders
Published: 2021-11-29 04:38:02

I created some beginner level CSS pre loaders using CSS, the code is not optimized, just made by adjusting various CSS animation properties. Take a look if you have time, I would like to get feedbacks, which will be helpful to improve my skills.

{% codepen https://codepen.io/kiran-r-raj/pen/ZEJgMOr %}

{% codepen https://codepen.io/kiran-r-raj/pen/xxLvadM %}

{% codepen https://codepen.io/kiran-r-raj/pen/qBXeMpz %}

{% codepen https://codepen.io/kiran-r-raj/pen/MWvNqzq %}

{% codepen https://codepen.io/kiran-r-raj/pen/ExvqezB %}

{% codepen https://codepen.io/kiran-r-raj/pen/xxLvyRw %}

{% codepen https://codepen.io/kiran-r-raj/pen/NWvQEzq %}

The below codepen was part of my previous post.
{% codepen https://codepen.io/kiran-r-raj/pen/oNZwBxq %}
Release 0.4 - My plan
Tags: opensource, programming
Published: 2021-11-29 04:29:41

## Introduction
Hello all, it's Thanh again. This is my plan for my final release assignment. I am doing this because I want to keep tracking what I am going to do for the next three weeks.

## Plan
I will continue to work on [IPC144](https://github.com/Seneca-ICTOER/IPC144) because I want to work on what I did not have chance to implement in the previous release. Last time, I already worked on `portability.md` page and it was merged successfully. However, I do not want to stop contributing to this project after getting one thing done. Secondly, I also want to provide the effective course note for new students taking IPC144 in the future.

At this moment, I am still playing around with IPC144, and try to find which features I can add into this project. I always follow up [the issues](https://github.com/Seneca-ICTOER/IPC144/issues) page to see if there is any good issues needed to implement. And I found that [this issue](https://github.com/Seneca-ICTOER/IPC144/issues/65) is very interested to me. Next week, I will be going to post a blog post for this, and see what I can get my work done.

Thank you for reading ^_^
Self-Taught Developer Journal, Day 7: CSS Exercises and Starting a Landing Page
Tags: todayilearned, beginners, codenewbie, devjournal
Published: 2021-11-29 04:24:27

Today I learned...

## CSS: How to apply Flex
I did The Odin Project CSS exercises for flex and it was definitely a challenge. The problem were built to have you use resources and documentation to figure out the answer. They provided an example of the correct output and the solution to check against. You also have to copy or fork from their GitHub exercises repo and utilize your own IDE to complete them. I liked this set-up a lot because it felt very realistic to how I would solve a problem at work. 

## Landing Page
I love good design, but I can't say I am the best designer. I tried to do a Google UX Design Course and never finished it. I do plan on revisiting it again later because I think learning how to wireframe and prototype would be cool. A popular web application that is used for UX\UI design is [Figma](https://www.figma.com/). A friend I met on Twitter, [Shah Nawaz](https://twitter.com/shuv1824), gave me a challenge to implement a Landing Page designed on Figma. I'm excited for the challenge and it also coincides with the next project for The Odin Project.

Resources:
[The Odin Project](https://www.theodinproject.com/)

Day 6: https://dev.to/jennifer_tieu/self-taught-developer-journey-day-6-pivot-and-the-odin-project-1klm
Please refer to [Starting My Self-Taught Developer Journey]( https://dev.to/jennifer_tieu/starting-my-self-taught-developer-journey-2dga) for context.