teleren/devto huggingface dataset:
Control Locales In NextJS
Tags: nextjs, react, javascript
Published: 2021-11-15 08:59:14

In today's world supporting translation for multi-languages is very important. 
So how can we do it with Nextjs? 
Nextjs is built by page, which means controlling different locales through routing. 
First, you need to install the package
``` npm install next-translate ```
Then create a file i18n.json in the file you can control what languages you have, what is the default language, what file will load in a specific page or it will be global, and many more options. 
```
{
  "locales": ["en", "fr"],
  "defaultLocale": "en",
  "pages": {
    "*": ["global"],
    "/info": ["info"]
  }
}
```
When you are done go to next.config and add it to the module
```
const nextTranslate = require("next-translate");

module.exports = {
  reactStrictMode: true,
  ...nextTranslate(),
};

```
Great, we have completed the configuration 🤙.

Now create a locales folder in it, and add language and related files to each folder (you can see in the github project).
In each file, create an object with a key value.
Finally, go to the next page and use a translation like this to control it:
```
import useTranslation from "next-translate/useTranslation";

export default function Info() {
  let { t } = useTranslation();
  return (
      <h1>{t("info:love")}</h1>
  );
}
```
in the URL you can see the change by adding/fr/ for French otherwise it will be English.

## Conclusion
Surprisingly I find localization very simple to use with this package.
Link: https://github.com/yanirmanor/next-locales
The Rosetta Code Project
Tags: picolisp, algorithms, rosettacode
Published: 2021-11-15 08:57:11

### Up to the next level

Now that we have covered the **basics of PicoLisp**, I think it makes sense to study examples to get used to the syntax and programming style before we move on to new topics such as **Web Application Programming**.

In many ways, a programming language works the same way like a human language. There is a **syntax** and a **vocabulary**, and there are things that can be expressed in every language, while other things are quite difficult to translate. The more languages you learn, the more you get aware of the potential of each language.

So how can we do this? There is a very interesting project called ["The Rosetta Code Project"](http://rosettacode.org/wiki/Rosetta_Code) named after the famous [Rosetta Stone](https://en.wikipedia.org/wiki/Rosetta_Stone). 

![hieroglphen.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1629972210436/TFhaSQPw8.jpeg)

The Rosetta Stone is a stele from 194 BC that has inscriptions in three language: Ancient Egyptian, ancient Greek and Demotic. Now the point is that **the meaning of the text is the same in all three languages**. Since ancient Greek was well known, it was possible to finally decipher the Ancient Egyptian hieroglyphs after the stone was discovered in 1799.

## From Stone to Code

The Rosetta Code Project follows the "Same text, Different languages"  idea by presenting implementations of famous algorithms (like the ["Dining Philosophers"](http://rosettacode.org/wiki/Dining_philosophers), ["Knapsack Problem"](http://rosettacode.org/wiki/Knapsack_problem) or ["Towers of Hanoi"](http://rosettacode.org/wiki/Towers_of_Hanoi)) in many different programming languages. Besides "standard" languages like C, Python, Java, you will find also many examples for historical or minor languages, which is quite fun to read. Among them of course you will also find many many examples of [PicoLisp](http://www.rosettacode.org/wiki/Category:PicoLisp).

During this loose series, we will pick out some interesting code examples and highlight how the algorithmn is implemented and what are its key points. It will also help us to grasp the difference between a **functional implementation** of a code vs. for example an object-oriented one.

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

We will start with the PicoLisp translation of the [Caesar Cipher](https://en.wikipedia.org/wiki/Caesar_cipher), which is a very simple cryptographic system. We will mainly need the string and list functions for this one. Stay tuned :)

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

## Sources

- Cover: https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/2007-08-27_Rosetta_Stone_London_0309.JPG/800px-2007-08-27_Rosetta_Stone_London_0309.JPG  
- http://www.rosettacode.org/wiki/Rosetta_Code
I created a terminal style website.
Tags: javascript, react, linux
Published: 2021-11-15 08:38:22

![Screenshot of the website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qs9ecnjqwnwta7utn1gz.jpeg)
Link: https://term.m4tt72.com
Repo: https://github.com/m4tt72/terminal

## Why?
I'm a Linux enthusiast, and I tried creating something that will allow 'normal' people to have a glimpse at my world.

Feedback is welcomed 🙏
Top VS Code extensions that would bust your brain 🤯
Tags: webdev, beginners, javascript, programming
Published: 2021-11-15 08:28:42

## 1  JavaScript (ES6) Code Snippets

It provides JavaScript, Vue, React and HTML code snippets.[JavaScript (ES6) code snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)

##2 Live Server 

Live server extension provides the live preview of your web applications right within the editor. This is handy and useful for front-end developer.[Live Server ](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)


##3 Prettier -Code formatter

This Extension helps in code formatting for JavaScript, Html and  CSS.[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)



##4 Better Comment 

This extension helps you to create user friendly  comments on your code.[Better Comment](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)


##5 Bracket Pair Colorizer

This extension allows matching brackets to be identified with colors. The User can define which token to match.[Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)


##6 Git Lens

We use Git almost every day of our life .Git lens is the visual studio code plugin to supercharge git capability 
[Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)


##7 GitHub Copilot


GitHub Copilot is an AI pair programmer which suggests line completions and entire function bodies as you type. GitHub Copilot is powered by the OpenAI Codex AI system, trained on public Internet text and billions of lines of code

[GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)



##8 Git History 

Git History extension gives you the complete Git History ,including a history of inland files all within Visual Studio code .[ Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)


##9 HTML CSS Class Completion

This extension auto-completes CSS class names as you type, based on the CSS files in your workspace.[HTML CSS Class Completion](rketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)


##10 Thunder Client
Thunder Client is a lightweight Rest API Client Extension for Visual Studio Code, hand-crafted by Ranga Vadhineni with simple and clean design. It works just like postman.

[Thunder Client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)
How to change default title in client login screen using Keycloak?
Tags: keycloak, security, tutorial, beginners
Published: 2021-11-15 08:28:17

In your <b>realm settings > HTML Display name</b>

replace:
```
<div class="kc-logo-text"><span>Keycloak</span></div>
```
with your Application name that you wish to show on your login screen. you can also provide HTML code for using image instead of title

use
```
<img alt="..ALT-TEXT.." src="../../SOURCE" width="400"/> 
```
to insert your logo instead

Happy Hacking..
Video Analytics - Future of Analytics?
Published: 2021-11-15 08:13:15

Hello from Sarvesh - one of the co-founders at https://fusionhq.co, excited to share some deep insights into the world of video analytics! 

**What is Video Analytics?**

Video Analytics can be understood something related to monitoring the user's behaviour for your product! Often it happens you have event analytics turned on giving you the product usage in an abstracted manner but doesn't provides the exact sense of product usage leading to less behavioural insights of product usage. 

*Let's take a scenario?* 

You have a product XYZ and you are tracking a certain KPI of login dropoff on the platform! And you have certain A tool tracking events for that purpose. Now let's assume two scenarios.

a. A person clicks on the Login button
b. A person doesn't clicks on the Login button

But you get to know that you have a high dropoff on that step. Now you are bound to see what was the behaviour of users dropping off at the location/instance!! But you can't simply do it with a regular event analytics tool!

Let's assume now you want to run an A/B testing for that section. But you don't have any POC of what you should do to incur a lower dropoff than before! You can do it in random but not in targetted manner leading to more time wastage.

**How does Fusion helps in Video Analytics?**
At Fusion we care for both company's time and also development effort and minimize the efforts with larger output and assured success!

We provide with the visual analysis of your product through small video recordings and help to see the visual journey of a particular user and then convert him by either engaging him or running an A/B testing for a certain set of users. (A/B testing in pipeline yet to be developed). 

You can view product usage videos and take actions according to that with backing of event analytics to confirm you POC and run engagement in a certain targetted manner!

Hope you like the article and definitely visit https://fusionhq.co for more insights.
BotMeNot performs its first test!
Tags: javascript, security, discuss, testing
Published: 2021-11-15 08:28:16

We are very proud to announce that BotMeNot has successfully performed its very first test!

And guess what website did we choose? BotMeNot’s own https://botmenot.com/ :-)

Not only we have tested how BotMeNot works, but we also tested how our bot is seen in raw HTTP log files (in our case - Apache’s .access log).

As you can see - BotMeNot protection score is 40%

Here’s what the results look like!

![BotMeNot's first test results](https://i.imgur.com/YHgKoYW.png)

Let us know what you think!
Taskforce 4.0 week 3.
Published: 2021-11-15 08:23:19

Hello Good people✌!

I can't believe my Taskforce journey has now reached to the half.
It was really an amazing and fruitful week since I learnt a lot and I was able to apply acquired skills into practice.

In this week, with the help of Regis (software engineer @CodeofAfrica) we learnt the crucial part in software development which is event storming and ERD establishment. I called it the crucial part because it is where you get to design the whole application logic and it is the part that you are not allowed to make any mistake.

we also had session about code review with Blaise where we were looking into techniques and methodology of reviewing code.
later on we had to demo about all we did within the whole week with Regis.

Well, last week I promised you to tell you why everyone loves Friday after weekly demo and here is why : after weekly demo whole team (employees, interns) we have time to meet and chill last Friday we had traditional dancing session (am not gonna lie I was one of the best).

Please bare with me in this journey and I will be back next week and share with you how week 4 went down
and trust me week 4 is going to be fire and fire🔥🔥.
HACKTOBERFEST 2021
Tags: hacktoberfest, digitalocean, opensource, programming
Published: 2021-11-15 08:07:05

![Complete profile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1liz460tsuus7ikveukl.png)

It was such a great experience participating in Hacktoberfest this year. I am glad to share that I have successfully completed Hacktoberfest and that I learned a lots of things.

I was already involved in Open-Source projects but This was actually my first participation in Hacktoberfest.

As a reward, I'm happy to say that I just ordered my Hacktoberfest T-shirt and also my new Hacktoberfest DEV badge (256$ saved, Yeah !).

It's actually my first swag that's dev/tech related so I'm really excited to receive it. 😀

See you next year !🚀

Thanks to #[hacktoberfest](https://hacktoberfest.com/), #[digitalocean](https://digitalocean.com/) & #[dev.to](https://dev.to/) !
How Banking Error in QuickBooks Affects Your Business?

Tags: quickbooksissues, qberror176
Published: 2021-11-15 07:41:03

Online banking is one of the most important features in QuickBooks that enables you to download the transactions. Once you connect your bank account with QuickBooks then you can easily make payments to the vendors, customers online even while travelling. But at times, users might end up with banking errors that might affect your business. One such banking error is <a href="https://dataservicesolutions.com/blog/a-step-by-step-guide-to-troubleshoot-quickbooks-error-176/">QuickBooks Error 176</a> that might occur while connecting your bank account with the QuickBooks Online application. However, there are numerous other banking errors that might occur in QuickBooks. We have listed some of the banking errors in the further section of this blog.

Looking for immediate help to get detailed information on how banking error in QB affects your business? Well, if that’s the case, don’t worry and reach out to our experts to get all answers to your queries. 

<b>What are the issues that might be caused due to the banking errors in QuickBooks? </b>
QuickBooks Error 176 is one such issue that might be caused due to the banking errors in QuickBooks. However, there are numerous other issues as well that might give rise to banking errors and thus affects your business. We have listed some of them below, go through them carefully:

1. Once you encounter the banking error within QuickBooks you won’t be able to connect your bank account with QB. Thus, it might hamper the ongoing work in the organization and thus lead to several banking errors.
2. Banking error might interrupt you to connect with your bank account within QuickBooks. Due to which you won’t be able to make the payments to the customers, vendors, clients etc. 
3. If your bank or credit card company has changed the account or moved it to the server then you might come across QuickBooks error 324. On the occurrence of the error you won’t be able to connect with your bank or credit card company and thus it might hamper the overall work in the organization. 
4. In case you are unable to match the balance of your company’s records with the corresponding of the bank statement then you might have to encounter reconciliation issues within QuickBooks. As a consequence, you won’t be able to reconcile the bank statements and you won’t be able to check the financial status of the company. Thus it hampers the overall growth of the company and might lead to severe loss. 
5. Banking errors in QuickBooks might interrupt you to download the banking transactions. Thus you have to check all the transactions of the users manually and find if there is any fault to avoid the banking issues within QuickBooks. 

<b>Summing It Up!!</b>
We hope that this blog will help you to know how banking errors in QuickBooks affects your business. Thus it helps in preventing QuickBooks Error 176. For any additional help, get in touch with our experts to get instant results to your queries.
No-code tools, freelancing 101, CSS roadmap, and more

My 10 favorite Tech Twitter tweets from this week:
Tags: javascript, webdev, beginners, programming
Published: 2021-11-15 07:31:23

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

No-code tools, freelancing 101, CSS roadmap, and more

My 10 favorite Tech Twitter tweets from this week:


Using no-code tools can save you a lot of time

By JustinSaaS

{% twitter 1458116063074340867 %}

The only web dev roadmap you'll ever need

By heyOnuoha

{% twitter 1458029887453863941 %}

Freelancing 101

By study_web_dev

{% twitter 1458398531203514371 %}

The daily inspiration dose

By csaba_kissi

{% twitter 1458332527056261125 %}

The VScode extension that can save you a ton of time

By Prathkum

{% twitter 1457980198574600195 %}

Learn CSS from here

By __georgemoller

{% twitter 1457730300860108812 %}

Everyone is figuring it out on the go

By SimonHoiberg

{% twitter 1458410262009159685 %}


Never stop practicing

By razacodes

{% twitter 1457980189787492356 %}


It's always a love and hate relationship

By VittoStack

{% twitter 1458332778500698114 %}

_I hope found this useful and if you did please let me know. If you have any questions feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)._let me know. If you have any questions feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)._
Instagram Reels downloader
Published: 2021-11-15 07:27:11

Hello peeps!
If you want to download Instagram reels online and want it to be in HD quality then head over to <a href="https://reelit.io/">Instagram reels downloader</a> 
Its just 3 steps:
1. Copy the link of the reel.
2. Paste it on our website.
3. click #download
Voila! It will be downloaded in just seconds. 
You can enjoy having your own fun and cool collection of reels.
How MoleculerJS Powers Dyte!
Tags: microservices, agile, webrtc, javascript
Published: 2021-11-15 06:52:33

Microservices enable organizations to be more agile and build highly scalable applications. We, at Dyte, take advantage of MoleculerJS to connect our different microservices and APIs.

In this blog post, we will be talking about how we structure all of our services around Moleculer and use it to collect critical insights and metrics to debug and optimize our infrastructure to serve millions of minutes of #livevideo calls every month.

We would love to hear from you especially about what frameworks and tools you use to manage your microservices.

[Read the blog here](https://blog.dyte.io/how-moleculerjs-powers-dyte/)!
Make your life easy with the Tailwind typography plugin
Tags: tailwindcss, css
Published: 2021-11-15 06:38:36

I'm sure by now you are a tailwind rockstar, but you might have found yourself in a situation where you struggled to get that perfect reading font?

Or you just couldn't be bothered setting up the basic heading, list, and whatnot styles.

That's precisely why you should try out the [typography plugin](https://github.com/tailwindlabs/tailwindcss-typography)!

## What is this Tailwind typography plugin?

Basically, this is a plugin you can add to your Tailwind project. It comes with a new class called `prose`, and if you use that on your content wrapping div, everything inside of it will be automatically styled in a super neat way.

I love to use this for markdown rendered posts, as I don't want to think about the styling of each element I might ever add to it.

And the best part about this plugin? You can customize it to fit your needs!

## Installing the Tailwind typography plugin

To install the plugin, go to your project in a terminal and run the following command. 

```bash
npm install @tailwindcss/typography
```

Once that's done, open up your `tailwind.config.js` file and add the plugin like so:

```js
module.exports = {
  // ...
  plugins: [require('@tailwindcss/typography')],
}
```

Let's try it out and place some basic HTML in an article element.

```html
<article>
	<h1>Welcome to my article</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis orci at erat vulputate, at mattis leo facilisis. Vestibulum non tortor a leo sodales facilisis vitae at nunc. Cras maximus eros sed lectus viverra commodo. Nunc vulputate sem quam, ac mollis ligula tincidunt eget. Aenean a aliquet est, quis mollis lacus. Maecenas eu porta arcu. Suspendisse vulputate ipsum id dui aliquet pellentesque. Nullam non quam nec sapien sollicitudin maximus. Vivamus aliquam ornare odio, pellentesque condimentum diam finibus eu. Nunc vehicula tincidunt tempor.</p>
	<ul>
		<li>List item 1</li>
		<li>List item 2</li>
		<li>List item 3</li>
		<li>List item 4</li>
		<li>List item 5</li>
	</ul>
	<h2>Closing with a H2</h2>
</article>
```

If we run this, we get a soup of words, not styled at all.

![Tailwind un styled content](https://cdn.hashnode.com/res/hashnode/image/upload/v1636005097962/D2mzqoTDU.png)


Let's change that and make this a typography item.
To do this, simply add a `prose` class to the article.

```html
<article class="prose">
```

![Tailwind typography in action](https://cdn.hashnode.com/res/hashnode/image/upload/v1636004973281/4txSQlIgZ.png)

Way better, right!

You see, we didn't have to think about anything, and it just looks great.

You can also find this on my [plain HTML Tailwind starter](https://daily-dev-tips.com/posts/plain-html-starter-with-tailwind-css/) on [GitHub](https://github.com/rebelchris/HTML-Tailwind-Starter/tree/tailwind-typography).

### 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)
Error: Unable to resolve module - Toolbar Android
Tags: react, javascript, php, tutorial
Published: 2021-11-15 06:31:54

You can install the 
@react-native-community/toolbar-android 
by using below command:


yarn add @react-native-community/toolbar-android

Or

npm install --save @react-native-community/toolbar-android


Read more: https://easycodesardar.blogspot.com/2020/07/error-unable-to-resolve-module-react.html
hhhhhhhhhhh
Tags: taghj, hgh, javascript
Published: 2021-11-15 06:06:05

```
code block sk d[s
ds ds
dhsds
 ds
dsh dikh dgh ydkg fdjgdhfdjhfksh hsi dhiu dhskuyfg udsk fsdg fsg fis figsi gsigfdjhg dkjhsi gish if hsifhskdksj hfs fsfk 
s fousuf[sjfs
 
```
Tapping the Right Ground: What Customers Need and Not What They Want

Published: 2021-11-15 06:00:30

The last decade has seen so many changes in terms of the number of new inventions in the market. Just count the number of items that you own right now which weren't even there a decade ago! Mobile phones, touch screens, video chats, electric automobiles, Instagram, Snapchat, and the list goes to a hundreds or so, doesn't it? It is amazing how the world is getting smaller day-by-day and the need for making it stay so are increasing inversely. But did we really need all that we have right now? How have marketers worked on making something that wasn't even remotely a part of our lives, our sole reason for existence?

The point is they have all really understood what the market could be like! They are visionaries who have foreseen what the future could hold for us. They have designed the future and put us all there in it. They have understood and shaped human mindset so well that they now know how to create new dependencies. We have always heard about our competitors and have worked hard to outrun them. We have all been running the race and trying to catch hold of the same group by offering similar items.

 But as it grows, it just forms a junk. From a product seller, you now become a commodity seller. This is what most people call as the red ocean strategy. Red Ocean strategy refers to a strategy wherein you compete in the existing market and exploit the existing demand. You make the value-cost trade-off by beating the competition. On the other hand, Blue ocean strategy is a strategy wherein the competition is considered irrelevant and you create and capture new demand. While red ocean strategies have been considered easier and more relevant, blue ocean strategy is what is going to keep us unique and going.

If you need any kind of information please visit our website : https://www.latestdatabase.com/qatar-whatsapp-number-list/