teleren/devto huggingface dataset:
Created responsive Full Stack Chat Application called Senderly 
Published: 2021-04-22 08:21:53

## Senderly is a Full Stack Application with real time chat rooms and messaging
* I have used flask framework because it is easy to use and Mysql database because I have it in my current course.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ljy4zurab50gre73wlw.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ci4onn4tn0zesu7rvny.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17orlklwrh4fwfymplhk.png)

More details along with demo video present here
[Link](https://github.com/dhruvroytalukdar/FlaskChatApp)
So, i uploaded the latest video how to code a discord bot ! with 20+ lang
Tags: javascript, programming, python, csharp
Published: 2021-04-22 08:17:34

# so, guys i finally uploaded my first video on youtube !

this video describes that how to code a discord bot with 20+ language ! maybe you guys are familiar with most commonly JavaScript and Python but there are more languages like C# or c++ or java and so on and so forth ! so, in this video will describe what are the requirements to code a discord bot ! what things you need to code and much more ! In the upcomming video we will start coding a particular discord bot with JavaScript Be ready for that 😉
[code a discord bot ](https://www.youtube.com/watch?v=gjKDJsCZYac)
New VSCode extension that takes automation to the next level
Tags: webdev, vscode, bash, tooling
Published: 2021-04-22 08:14:32

Recently I switched from using Alfred over to [Raycast](https://raycast.com/). What convinced me of Raycast is the simplicity the tool provides, plus the ability to simply create your custom commands/scripts.

> **Info**: I already wrote about it: [Using Raycast to speed up my productivity](https://dev.to/estruyf/devhack-using-raycast-to-speed-up-my-productivity-1h4k).

The more I use Raycast, the more I want to automate. A script I created was to start up my daily development tasks:

- Open my VSCode editor with the right project loaded
- Open my terminal to the right folder
- Open `Microsoft Edge` to the Azure Portal
- Open `Google Chrome` with my application URL

These tasks typically do not take a lot of time, but automating this by one command is so easy.

## Taking it to the next level

To take it to the next level, I wanted to start my commands in VSCode as well. For my project I use two terminals:

1. Open `ngrok` as my application needs to be accessible remotely.
2. Start the local development server (Next.js in my case).

Unfortunately, you can only trigger certain actions in VSCode by shortcuts. That is why I thought to create a new VSCode `Remote Control` extension which allows you to send commands from anywhere on your device to the running VSCode instance. 

> **Info**: Check out the extension here: [VSCode Remote Control](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-remote-control).

The extension spins up a `WebSocket` server. By default, it will start it on port: `3710`, but is configurable from the settings.

## Show me what it can do

To speed up my process, I wanted to open two terminal instances in VSCode and run my commands in each of them.

In my Raycast script, all I had to do is add the following code:

```bash
echo "{ \"command\": \"workbench.action.terminal.newWithCwd\" }" | websocat ws://localhost:3710
echo "{ \"command\": \"workbench.action.terminal.sendSequence\", \"args\": { \"text\": \"npm run ngrok\\n\" } }" | websocat ws://localhost:3710
echo "{ \"command\": \"workbench.action.terminal.split\" }" | websocat ws://localhost:3710
echo "{ \"command\": \"workbench.action.terminal.focusAtIndex2\" }" | websocat ws://localhost:3710
echo "{ \"command\": \"workbench.action.terminal.sendSequence\", \"args\": { \"text\": \"cd solutions/msteams/webapp && npm run dev\\n\" } }" | websocat ws://localhost:3710
```

> **Important**: this is not only created for Raycast. Once installed, you can run commands from anywhere on your device.

Here the result of this script:

![The result of the script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kh8wmqiqqyic2fdkpjy8.gif)

Check out the VSCode extension here: [VSCode Remote Control](https://marketplace.visualstudio.com/items?itemName=eliostruyf.vscode-remote-control).
A 4G home alarm for my garage
Published: 2021-04-22 08:09:53

This isn't really a dev/tech post, but I wanted to be public somewhere with the information because I found nothing in Google for a problem.

A company called Digoo (seems to be part of a larger thing, since their app has support for hundreds and hundreds of home automation IoT thingies) makes an alarm called the "DG-ZXG30".

From what I can tell, they make it in 2G&GSM versions, and also the one I had to buy, the 4G&GSM one. A prior version of this alarm was the DG-HOSA which is packaged a bit differently and isn't quite as featureful.

I'm in Germany and our 2/3G cell networks here are shutting down in 2021, and that leaves only the 4G option.

So the alarm works on 4G frequencies 850/900/1800/1900Mhz, 2.4 and 5Ghz wifi, and uses 433mhz wifi for accessories (door and window sensors, and PIR motion detection)

I was disappointed to note when I tried to use this with a partner SIM from my telekom provider that it didn't achieve a network connectivity. (wifi, sure, but no cellular)

After some debugging, it occurred to me that maybe the PIN entry on the SIM card wasn't working. The device prompts to "dial" when inserting a SIM after booting, and appears to accept the input but it didn't work.

I removed the SIM PIN using another device (tricky, the alarm wants a full-size sim, and all my spare phones want micro- or nano-SIM), I have a laptop which takes a full-size SIM card, and on Windows it's quite easy to remove a SIM PIN in the cellular "Advanced options" settings dialog.

Now, within moments the Digoo alarm has a really strong signal, and I can finally confirm it all works as hoped.

![image inside the casing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbbc294n64pqfacibned.jpg)

Interesting, too - it's using a separate modem. At some point I tore it apart to check, I really expected to find a rebranded low-end mobile phone SOC, and I suppose maybe this is, but it's right next to an ARM chip I couldn't adequately identify which has the right format to be a little, probably fairly capable SOC, indeed a GigaDevice ARM32-M3 at least, though I didn't look more deeply into the possible specs.

For under 80 Euro, this alarm is crazy cheap, with all the accessories it has, I'm really pleased with the purchase, now that I got it working.
Create Zoom in zoom out animation effect in CSS
Tags: codepen
Published: 2021-04-22 08:03:16

- To create zoom in zoom out effect we need to focus on two elements "width" and "height". 
- First define proper height width of an element.
- Add Css to that element
- We need to use @keyframes to define animation 

<code block>
@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
</code block>

{% codepen https://codepen.io/vaishali1192/pen/QWdJZVy %}
But first, learn the basics
Tags: beginners, webdev, career
Published: 2021-04-22 07:42:50

# There is too much to learn

The World Wide Web has always been a messy place. A lot of people from all over the world are simultaneously contributing to it. That is, why it gets messier every day. It is, in its entirety, kind of the biggest software project on the planet. And we all know, how easy it is to mess up big software projects.

Over the last 30 years, a lot of technologies have been created. There are so many programming languages, tools, frameworks, and libraries out there, it is hard to keep track of them all. And the variety gets bigger day by day.

Every now and then a new shiny thing™ arises. People will talk about it and will recommend it to you. If you are a beginner in web development, please do not listen to them. You should not invest time in the new shiny thing™. Instead, you should learn the basics. Because the basics will outlive the new shiny thing™.

# What not to learn first

Gatsby, Hugo, or Jekyll will someday help you build static websites, but first, learn the basics.

Block-Element-Modifier (BEM), Sass, or Tailwind CSS will someday help you organize your CSS, but first, learn the basics.

React, Vue.js, or Angular will someday help you build awesome user interfaces, but first, learn the basics.

MySQL, PostgreSQL, or MongoDB will someday help you store data in a database, but first, learn the basics.

Ruby on Rails, Laravel, Django, or another Model-View-Controller (MVC) framework will someday help you build feature-rich backends, but first, learn the basics.

Docker, Docker Compose, or Kubernetes will someday help you build and host websites, but first, learn the basics.

# What to learn first

As I said before: Start with the basics. I recommend building a ton of websites just using basic technologies. Maybe ten websites are enough to learn the basics, maybe you will need 50. It does not really matter, you just have to get started and keep going.

There will be a day, where you understand enough about [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP), [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL), [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML), [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), and [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript). Then and only then you can carefully start adding more technologies to the stack.

If you want to learn the basics, I can recommend following the developer roadmaps at [roadmaps.sh](https://roadmap.sh/roadmaps).
The number one sign that you are a god of Computer Engineering(Forever challenge).
Tags: javascript, node, webdev, beginners
Published: 2021-04-22 07:21:04

Hey dev community, I know many of you have been using computers for a very long time, Can anyone tell us anything he/she knows about computers he/she you thinks other people have no idea about.
If you know it please mention it in the comment below

I got asked this question more than 5 times but it wasn't easy for me to break it down.
JavaScript remove elements
Tags: javascript
Published: 2021-04-22 06:48:30

As we [created new elements in JavaScript](https://daily-dev-tips.com/posts/javascript-creating-a-new-element/) yesterday, I thought I'd be a good article for today to remove certain elements from the DOM.

To remove elements we simply need to get them in JavaScript using any technique really.

Let's say we want to remove a div with the ID `custom_id`.

```js
const elem = document.getElementById('custom_id');
elem.remove();
```

And yes, that's how simple it is!

## Hiding elements in JavaScript

But perhaps you only want to hide it for a brief moment?
We can also modify the script to make the element invisible for a while.

```js
const hidden = document.getElementById('hidden_id');
hidden.style.display = 'none';
```

And that will make your element hidden until you make it visible again.

Making it visible can be achieved by swapping the display to block/flex/inline.

```js
const hidden = document.getElementById('hidden_id');
hidden.style.display = 'block';
```

Feel free to check this out on Codepen.

{% codepen https://codepen.io/rebelchris/pen/PoWdmOP %}

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
4 Best Commercial Web Scraping Tools
Published: 2021-04-21 01:32:54

OctoParse

Octoparse offers a visual point and clicks web scraping service if you are interested in a no-code solution. It handles Javascript, AJAX, Infinite scrolling, forms, etc.

They even have a cloud service where you can host and schedule scraping jobs.

They offer all the layman-friendly export formats like Excel, CSV, and also a developer-friendly API.

Website: https://www.octoparse.com/

Compare OctoParse vs. Proxies API

Parsehub

Parsehub offers a desktop app that makes scraping visual, point, and click, and easy. The tool supports multiple pages, AJAX support, form submission, dropdowns, etc.

They offer export of data via JSON, Excel, or even an API.

Website: https://www.parsehub.com/

Diffbot

Diffbot uses AI to scrape data from the annoying websites where you can set up and crawl multiple websites without having to create a new crawler for each.

They also offer a ready database of the web that you can query instantly, so you dont have to wait for crawling to finish.

They also offer a commercial-grade crawler service for simply crawling 1000s of websites.

Diffbot is suitable for enterprise-level customers who want to create large scale web crawlers and scrapers.

website https://www.diffbot.com/

Mozenda

Mozenda competes with Diffbot in the enterprise space. With Mozenda, you can scrape text, images, pdf, and other content using a simple point and click feature.

It allows the export of data in a variety of formats like TSV, CSV, XML, XLSX, or JSON or through their API.

Link: https://www.mozenda.com/
Postman alternative
Tags: opensource, discuss, firebase, vscode
Published: 2021-04-22 06:39:40

Boo00000000000000000000m

Today I found the postman and hopscotch alternative which is very much useful for all of us Developers. 

# Thunder Client

Thunder Client for VS Code
Hand-crafted lightweight Rest Client for Testing APIs

Hand-crafted by [Ranga Vadhineni](https://twitter.com/ranga_vadhineni) in Dublin, Ireland 

### [Read entire blog post](https://rangav.medium.com/thunder-client-alternative-to-postman-68ee0c9486d6)
.
{%youtube AbCTlemwZ1k %}
.
# [Download VSCODE Extension](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

---

[![CSS course eduonix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az71k2lp2eeyll27izng.png)](https://www.eduonix.com/css-bootcamp-master-in-css-including-css-grid-css-flexbox/UHJvZHVjdC0xMzE1MDIw)

---
Three common mistakes when you are working with react context API
Tags: react
Published: 2021-04-22 06:34:38

These are the common reasons why react context API does not work properly :

1. The best common and simplest reason is spelling mistakes.
   use this awesome VS Code extension: Code Spell Checker
2. The wrong positioning of the parameter or arguments.

3. While defining StateProvider function when you are using fat arrow function( () => () ) use parenthesis. because most of the time when we define a function we use Curly brackets { }.
![code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rphxkq624w5easqim2yt.png)
This is my first post on the dev community.
if there are any mistakes please let me know.

Thanks.
Magento Support Services & Maintenance Packages | Mconnect Media
Published: 2021-04-22 06:24:33

Looking for a company to fix issues or bugs and maintain your online Magento store? It is evident that, while working on your Magento store, one wrong move can put your store in jeopardy. And you need immediate help from a reliable source that can take care of the issue. Or you might need another kind of support like some code customization, extension installation, or malware and virus removal scans. Also, you may need some development work or audit of your Magento store so that you can keep track of all the records and activities. All these kinds of issues can take your store down if the necessary precautions are not taken on-time.

And for that, you need help from certified Magento developers who have vast experience of managing and developing Magento stores like yours. A properly supported Magento store has fewer chances to fail and does not have any kind of issues that can jeopardize your store. Also, it should be cost-effective for your store and mitigates all the issues. Finding developers that provide such kind of support for your online Magento store is a bit hard right now. Because numerous amounts of developers for the Magento platform are already out there in the market. And you need support oriented Magento development company with extensive experience just like Mconnect Media.

<b>Why Choose Mconnect Media for Magento Website Support?</b>

Mconnect media has vast experience in the Magento niche since it was established in 2009. Our flamboyant support packages have Magento specialists who will take care of your store and maintain it. We have worked, developed, and provided support to many world-recognized companies. Our adroit developers possess the sound knowledge of Magento platforms.

Still, here are few reasons why you should choose Mconnect Media for the <a href="https://www.mconnectmedia.com/magento-support-services">Magento Support package</a> you need,

<ul>
<li>Mconnect media is a professional development company working in the Magento niche for more than 11 years.</li>
<li>We possess sound knowledge to fix issues like bugs, viruses, and malware clean up.</li>
<li>Our dedicated team will take precautions to maintain your eCommerce store live and healthy.</li>
<li>Unique design, development, and integration solution for your Magento store.</li>
<li>Extension installation, integration, admin support, upgrade, and all other predicament included in the support packages.</li>
<li>Extension audit of your store for the execution of quality codes and customizations.</li>
<li>We offer many flamboyant quality support packages to choose from.</li>
<li>You can mold the support packages as per your Magento store&rsquo;s needs and requirements.</li>
<li>Get immediate support within 4 hours if you go with the enterprise plan.</li>
</ul>
Change bootstrap theme in Yii2 Apllication
Tags: php, yii2, tutorial
Published: 2021-04-22 06:24:13

Yii2 is a PHP framework that until now, april 2021, still use bootstrap 3. If you are okay with that, then Yii2 is an awesome framework. Yii2 give you flexibility to handle javascript and css through AssetBundle, a feature that i didnt found in another major framework like laravel, symphony etc.

BootstrapAsset is Yii2 AssetBundle to handle bootstrap css. Luckily we can configure the BootstrapAsset through web.php config file. Say that you want to apply theme to the bootstrap 3 you already have. You got a cool free theme from bootswatch.com and want apply that to your Yii2 apps. So this is what you need to do.

1. create folder inside @app/views folder for example we create 'flatly' folder here for your flatly theme

2. create 'css' folder inside the previous

3. create 'bootstrap.css' file inside the 'css' folder then copy the theme style into this file

4. add bellow line at the end of `if (YII_ENV_DEV)` definition inside the web.php config file

```
$config['components']['assetManager']['bundles']['yii\bootstrap\BootstrapAsset']['sourcePath'] = '@app/views/flatly';
```

thats it
Magento 2 Migration Service Provider in USA, India | Mconnect Media
Published: 2021-04-22 06:21:19

Looking to migrate to Magento 2 from Magento 1 after the End of Life of Magento 1? Magento 1 was a fantastic platform for more than a decade now. But it has come to an end. As the parent company, Adobe has ended the life support for Magento 1 platform, its users have only one option. They have to migrate but where they can migrate to? Well, the company had already launched its futuristic platform named Magento 2. Since the Magento 1 has ended now, your Magento 1 store soon will start to slow down, hackers may get the backside door for your store and you could lose your PCI compliance as well. 

If you want that nothing sort of these things happen to your online store, then migrate to Magento 2 right now. <a href="https://www.mconnectmedia.com/magento-1-to-magento-2-migration-service">Magento 2 Migration</a> is more advanced than Magento 1 and packs features to make your eCommerce store excel in your niche. With Magento 2 as your CMS platform, you can provide a personalized shopping experience to your customers. After migrating to Magento 2, your store would have the advantage of having cutting-edge new technology to enhance your SEO rankings. But Migrating to Magento 2 is not an easy task. And for that, you need to hire an agency that provides quality migration from Magento 1. Mconnect is one such company you can trust to migrate your store from Magento 1 to 2. 

Why Choose Mconnect Media for Magento 2 Migration Service?

Mconnect media, since 2009, has worked, developed, and migrated many Magento and other eCommerce stores. It’s one of the leading organizations with vast experience in the Magento niche. To date, we have migrated 36+ Magento 1 stores to Magento 2 with a 99.99% success rate. Our migration service ensures the satisfaction of clients achieved 100% to uplift their business. 
Still, here are few reasons why should choose Mconnect Media for Magento 2 migration service,
<ul>
<li>Mconnect&rsquo;s certified developers have professional experience in migrating Magento stores.</li>
<li>To, data we successfully have migration 36+ Magento store to Magento 2.</li>
<li>The adroit developers of Mconnect will migrate Magento 1 store with zero downtime and dataloss.</li>
<li>The migration of your project will be complemented within deadlines and your Magento 2 store will be up and running.</li>
<li>Mconnect is the only company to provide after the support of 2months for your migrated Magento 2 store.</li>
<li>A dedicated team of coders, designers, QA, and project managers will take care of your migration project.</li>
<li>Mconnect has 3000+ happy and satisfied customers who have enrolled for various Magento services.</li>
</ul>
Some of my favourite fonts on Google Fonts
Tags: design, fonts, favourites, discuss
Published: 2021-04-22 05:44:39

Google Fonts is awesome it has a lot of beautiful fonts which are **free** and **open source**. Here are some of my favourites

## Sans-serif fonts
1. [Roboto](https://fonts.google.com/specimen/Roboto)
2. [Poppins](https://fonts.google.com/specimen/Poppins)
3. [Open Sans](https://fonts.google.com/specimen/Open+Sans)
4. [Plex](https://fonts.google.com/featured/Plex)
5. [Ubuntu](https://fonts.google.com/specimen/Ubuntu)
6. [Inter](https://fonts.google.com/specimen/Inter)

## Serif fonts
1. [Roboto Slab](https://fonts.google.com/specimen/Roboto+Slab)
2. [Merriwether](https://fonts.google.com/specimen/Merriweather)
3. [Playfair Display](https://fonts.google.com/specimen/Playfair+Display)

## Handwriting fonts
1. [Dancing Script](https://fonts.google.com/specimen/Dancing+Script)
2. [Pacifico](https://fonts.google.com/specimen/Pacifico)
3. [Sacramento](https://fonts.google.com/specimen/Sacramento)

## Monospace fonts
1. [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono)
2. [Ubuntu Mono](https://fonts.google.com/specimen/Ubuntu+Mono)
3. [Source Code Pro](https://fonts.google.com/specimen/Source+Code+Pro)

> What are your favourite fonts leave them down in the discussion.