teleren/devto huggingface dataset:
Start using console logs in this way!🏳️‍🌈
Tags: javascript, frontend, beginners, javascripttricks
Published: 2023-05-16 08:27:58

---
title: Start using console logs in this way!🏳️‍🌈
published: true
series: Javascript tips & tricks
date: 2023-04-26 15:23:37 UTC
tags: #javascript #frontend #beginners #javascripttricks
canonical_url: 
---
![Style console logs!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6adk8r825482ybk7auo.png)

We use console logs mostly while debugging our application. Sometimes we use it for giving some warnings, or information or displaying some errors to users. What if I say that you can style these logs in whatever way you want? Yes, this is possible. This can be handy when you are working on a huge application with loads of logs printed on the console. Styling these important logs will make sure it doesn't get lost in those number of logs. We will be seeing how we can do this. Also, I will share some tips and tricks to easily manage the styles for your logs.

* * *

## `%c` specifier

%c gives you the power to style your logs. let's see how it works with some examples.

```javascript
// Try to run this directly in the browser console and check the magic!
console.log('%cMy Log', 'color: red; background: wheat; font-size: 30px');

```

What did you see after running this code in your browser's console? Yes! :grin:

![example](https://cdn.hashnode.com/res/hashnode/image/upload/v1682520871516/21a1d6dc-3eae-41bd-b767-e35ff88e1325.png)

You got the power now !

**%c** : Applies CSS style rules to the output string as specified before the log string.

* * *

## Use multiple %c in a single console log

```javascript
console.log(
  'Multiple styles for %cHi John %cHey Alice', // Console Message
  'color: blue', // CSS Style for Hi John
  'color: red', // CSS Style for Hey Alice
);

```

![example](https://cdn.hashnode.com/res/hashnode/image/upload/v1682521221847/8bfb23d1-44bf-4e5c-8a4c-d9b8e7dadcc8.png)

<mark>%c can be used in all available types of console logs ie, console.info, console.debug, console.warn, console.error. It can be used in the same way in all types of logs.</mark>

* * *

## Tips for clean code

- Separate the complex CSS styles in a variable.

```javascript
    const styles = ['color: green', 'background: yellow'].join(';');

    const message = 'My Logs';

    // 3. Using the styles and message variable
    console.log('%c%s', styles, message);
    // here %c is used for style as we all know, and %s will be replaced with the string stored in message variable ie; "My Logs"

```

* * *

Hope you have learnt something new today. If you find this useful share this knowledge with other passionate developers like you. Happy Reading. 🌈
Entities in Apache AGE
Tags: apacheage
Published: 2023-04-26 15:10:26

An entity has a unique, comparable identity which defines whether or not two entities are equal.

An entity is assigned a set of properties, each of which are uniquely identified in the set by the irrespective property keys.

## Simple Entities

- GraphId: Simple entities are assigned a unique graphid. A graphid is a unique composition of the entity’s label id and a unique sequence assigned to each label. Note that there will be overlap in ids when comparing entities from different graphs.

- Labels: A label is an identifier that classifies vertices and edges into certain categories. Edges are required to have a label, but vertices do not. The names of labels between vertices and edges cannot overlap.

- Properties: Both vertices and edges may have properties. Properties are attribute values, and each attribute name should be defined only as a string type.

- Vertex: A vertex is the basic entity of the graph, with the unique attribute of being able to exist in and of itself.

```
# typecasting a map to vertex
SELECT *
FROM cypher('graph', $$
	WITH {id: 0, label: "label_name", properties: {i: 0}}::vertex as v
	RETURN v
$$) AS (v agtype);

```
- Edge: An edge is an entity that encodes a directed connection between exactly two nodes, the source node and the target node. An edge is assigned exactly one edge type.

```
# typecasting a map to vertex
SELECT *
FROM cypher('graph', $$
	WITH {id: 2, start_id: 0, end_id: 1, label: "label_name", properties: {i: 0}}::edge as e
	RETURN e
$$) AS (e agtype);

```

## Composite Entities
It is combination of multiple simple entities.

- Path: A path is a series of alternating vertices and edges. A path must start with a vertex, and have at least one edge.

```
# typecasting a list to path
SELECT *
FROM cypher('graph', $$
	WITH [{id: 0, label: "label_name_1", properties: {i: 0}}::vertex,
            {id: 2, start_id: 0, end_id: 1, label: "edge_label", properties: {i: 0}}::edge,
           {id: 1, label: "label_name_2", properties: {}}::vertex
           ]::path as p
	RETURN p
$$) AS (p agtype);

```
51 berufliches Vorwärtskommen: … statt Lästereien.
Tags: deutsch, career, motivation, discuss
Published: 2023-04-26 15:07:01

Moin Moin,

ich behaupte mal, es sei offensichtlich, dass gegenseitige Motivation, besser für unsere Teams ist als Lästereien.
Folglich schlage ich vor, dass wir uns täglich motivieren – dann schauen wir mal wie lange der Lästerer noch aktiv ist (1). Motivieren wir uns vor der Arbeit, bedanken wir uns für gegenseitige Hilfe und für gute Arbeit. Motivieren wir uns zu besserer Arbeit.  Es geht ja nicht darum etwas herbeizureden oder schönzureden. Achten wir also darauf, dass jeder mit Begeisterung und Motivation dabei ist, so dass jeder sein bestes geben kann.

Was machen wir nun, wenn wir einen Lästerer im Büro auffinden? Mein Vorschlag wir sprechen ihn direkt, in einem Vieraugengespräch, darauf an. Dabei geht es lediglich darum ihn die Frage zu stellen aus welcher _Motivation_ er lästert. Es geht also nicht darum ihn zu belehren oder ihn kleinzumachen ( wäre kontraproduktiv ). Dabei kann man betonen, dass man selbst daran interessiert ist, dass Team möglichst motiviert zu halten und man daher wissen möchte was ihn stört.

1) Ist es bei euch im Team normal täglich die Motivation hochzuhalten?
2) Kannst du dir vorstellen die Rolle zu übernehmen auf Lästerer zuzugehen oder tust du dies bereits?

Beste Grüße,
Mustafa

Austausch mittels E-Mail: mustafa.kevin.dwenger@posteo.de
Betreff: Austausch

(1) Sowohl der in uns, als auch der außen ;-)
Declarative Programming Vs Imperative Programming
Tags: beginners, programming, tutorial, productivity
Published: 2023-04-26 15:04:50


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58w0bpj6wnhg3t4p0g5k.gif)

**Imperative:** My cat is hungry. I'll goto the pantry and grab a can. I'll unfurl the top and walk to the garbage can. At the garbage can I will open the lid with my foot and place said unfurled top with ease into said can. Cat looks at me. I look at cat. I goto the pantry again. I grab a disposable dish from the shelf. I flip the cat can into the dish. I hold the new almost empty cat can and place the disposable dish on the floor with the other hand. I walk to the trash can. I open it up with my foot. I chuck the can. I call the cat. The cat runs in. My cat is now eating.

**Declarative:** I'll feed my cat.

If you enjoy my technology-focused articles and insights and wish to support my work, feel free to visit my Ko-fi page at https://ko-fi.com/philipjohnbasile. Every coffee you buy me helps keep the tech wisdom flowing and allows me to continue sharing valuable content with our community. Your support is greatly appreciated!
Using kafkajs with AWS MSK on a nodejs lambda function
Tags: kafka, aws, node, lambda
Published: 2023-04-26 15:04:22

To use the `kafkajs` package for communicating with AWS MSK (Managed Streaming for Kafka) on a Lambda function, you would need to follow these general steps:

Step 1: Set up AWS MSK
- Create an AWS MSK cluster in the AWS Management Console.
- Note down the bootstrap servers, which are the endpoints that you will use to communicate with your Kafka cluster.

Step 2: Set up your Lambda function
- Create a Lambda function in the AWS Management Console, or using the AWS CLI or SDKs.
- Set up the necessary IAM role for the Lambda function to have the appropriate permissions to interact with AWS MSK. This may include permissions to access the VPC, Subnet, Security Group, and AWS MSK cluster.

Step 3: Install `kafkajs` package
- In your Lambda function, install the `kafkajs` package using a package manager like npm or yarn. For example, you can run `npm install kafkajs` to install the `kafkajs` package.

Step 4: Use `kafkajs` in your Lambda function
- Require the `kafkajs` package in your Lambda function code.
- Create a `Kafka` instance with the appropriate configuration, including the bootstrap servers, SSL configuration (if needed), and authentication (if needed). For example:

```javascript
const { Kafka } = require('kafkajs');

const kafka = new Kafka({
  clientId: 'my-lambda-client',
  brokers: ['<YOUR_BOOTSTRAP_SERVERS>'],
  ssl: true,
  sasl: {
    mechanism: 'plain',
    username: '<YOUR_USERNAME>',
    password: '<YOUR_PASSWORD>',
  },
});
```

- Use the `kafka` instance to produce and consume messages to and from your Kafka topics. For example:

```javascript
// Produce a message
const producer = kafka.producer();
await producer.connect();
await producer.send({
  topic: 'my-topic',
  messages: [{ value: 'Hello, Kafka!' }],
});
await producer.disconnect();

// Consume messages
const consumer = kafka.consumer({ groupId: 'my-group' });
await consumer.connect();
await consumer.subscribe({ topic: 'my-topic' });
await consumer.run({
  eachMessage: async ({ topic, partition, message }) => {
    console.log({
      key: message.key.toString(),
      value: message.value.toString(),
      headers: message.headers,
    });
  },
});
```

Note: The above code snippets are just a basic example and may need to be modified based on your specific use case and requirements.

Step 5: Deploy and test your Lambda function
- Deploy your Lambda function with the `kafkajs` package and its dependencies.
- Test your Lambda function to produce and consume messages to and from your Kafka topics using the `kafkajs` package.

That's it! You have now set up `kafkajs` in a Lambda function to communicate with AWS MSK. Remember to configure your Lambda function, VPC, and security groups properly to allow communication with AWS MSK and ensure the necessary permissions are set up correctly.
[ConsoleTVs\Charts\Registrar]
Published: 2023-04-26 15:02:41

This is one problem Laravel Chartisan users of the older version that was hit with a lawsuit faces.

so i was able to solve it and will show you how to.
first of, remove the package by running 
`$composer remove consoletvs/charts
`
after this the error [ConsoleTVs\Charts\Registrar] will show up.

All you have to do is goto

```
app/Providers/AppServiceProvider
```
you will find the //use ConsoleTVs\Charts\Registrar as Charts;

uncomment or delete it, then reload your browser and everything will work perfectly fine
A deep dive into UseTranslation hook.
Published: 2023-04-26 14:57:19

As I was working on a Next.js project, I came across the useTranslation hook, which I was curious to know more about. In this blog, I will be talking about what the _useTranslation_ hook is and how it can be used in React applications for localization and internationalization.

<u>What is UseTranslation Hook?</u>

useTranslation is a hook provided by the react-i18next library, which is widely used for internationalization and localization in React applications. This hook allows developers to access the translation functionality provided by the i18next library directly in their React components. The useTranslation hook takes no parameters and returns an object with two properties - t and i18n.

The 't' property is responsible for the translation of strings in the specified language. The 'i18n' property is responsible for setting the desired language and managing locale files.

<u>How to use UseTranslation Hook?</u>

Before using useTranslation hook, your first step is to ensure that the i18next and react-i18next packages are installed and properly configured in your React project, you can follow instructions on how to install it here(https://www.npmjs.com/package/react-i18next). Once you have installed and configured the packages, you can use the useTranslation hook in your React components as follows:

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

The useTranslation hook provides the t function, which accepts a string representing the text to be translated. This string is passed as an argument to the t function, which then returns the translated text.

The useTranslation hook also provides the i18n property, which can be used to set the desired language for your application, manage the caching of translations, and specify various configuration settings.

Remember, useTranslation hook is an essential tool for internationalizing and localizing React apps. With it, developers can easily manage translations within their components, making it easier to develop multilingual web applications.

To use useTranslation hook, both i18next and react-i18next should be configured and installed in your React application.

Happy coding!
Views In Mariadb (part 2)
Published: 2023-04-26 14:57:17

#### Creating and using views in mariadb

Views can be created in a following simple manner in mariadb using **CREATE VIEW** keyword followed by **SELECT** statement as done below

`CREATE VIEW view_name AS SELECT column1, column2 FROM table_name WHERE condition;
`
The above statement creates a view with **view_name** name which retrieves **column1**, **column2** from table **table_name**

Now we can query the view as following

`SELECT * FROM view_name`

#### Updating Views

Views can also be updatable based on the certain criteria which has to be met (like no subqueries or aggregate functions). If the view is updatable then only the data can be inserted, deleted and updated in a view. Updating the data in a view doesn't actually update the data in a view since view is only the container for select statement instead it updates the data in underlying original tables.

#### Dropping Views
Finally the views can be dropped as tables, indexes and other objects in databases using **DROP** statement. 
Following is an example of dropping a view

`DROP VIEW view_name`
Composite Datatypes in Apache AGE
Tags: apacheage
Published: 2023-04-26 14:55:08

Composite Data Types is used to store multiple logically related items of Simple Data Types in Apache AGE. This includes Lists and Maps.

## List
It is a collection of ordered items. This is similar to list in python.

```
# query to create a list
SELECT *
FROM cypher('graph', $$
    WITH [0, 1, 2, 3, 4, 5] as lis
    RETURN lis
$$) AS (lis agtype);
```
To access an individual element in the list we can use square brackets
 like all most other programming languages like C/C++, Python.
```
# query to create a list
SELECT *
FROM cypher('graph', $$
    WITH [0, 1, 2, 3, 4, 5] as lis
    RETURN lis[2]
$$) AS (val agtype);
```
A list can store elements of all Simple Data Types as well as Composite type like list and map.
It can use negative index, which will start counting from the end and index ranges which returns the elements in the given range.

```
SELECT *
FROM cypher('graph', $$
    WITH [0, 1, 2, 3, 4, 5] as lis
    RETURN lis[0..3]
$$) AS (val agtype);

```

## Map
A map is a collection of elements where each element is stored as a key-value pair. It is like maps in python. 
It can use any data type (Simple or Composite) as key or as value, as shown in the example.
```
SELECT *
FROM cypher('graph', $$
    WITH {int_key: 1, float_key: 1.0, numeric_key: 1::numeric, bool_key: true, string_key: 'Value'} as m
    RETURN m
$$) AS (m agtype);

```

```
SELECT *
FROM cypher('graph', $$
    WITH {int_key: 1, float_key: 1.0, numeric_key: 1::numeric, bool_key: true, string_key: 'Value'} as m
    RETURN m
$$) AS (m agtype);
```
To access the value for a key we can use the dot (.) convention as in the example.

```
SELECT *
FROM cypher('graph', $$
    WITH {int_key: 1, float_key: 1.0, numeric_key: 1::numeric, bool_key: true, string_key: 'Value'} as m
    RETURN m.int_key
$$) AS (int_key agtype);

```
E-BOOK: The Ruby on Rails Interview Bible - A Comprehensive Guide with 500+ Essential Questions and Answers!
Tags: ruby, books, interview, bible
Published: 2023-04-26 14:44:00

After so much experiences with interviews I decided to write a book which will be my central place whenever I need to remind myself about all those possible questions I can get in my next interview. The e-book is about Ruby On Rails and probably only book with more than 500+ interviews questions in the market today.

You can buy a book here [The Ruby on Rails Interview Bible](https://nezirzahirovic.gumroad.com/l/azkyi)

![book interview bible ruby](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxn0rhat4ckmrxjqrnkd.png)
![book interview bible ruby](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phf2rl386xzb2mmqbscx.png)

![book interview bible ruby](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1skcmqfwfgx8cwvs0c6.png)
So, whether you're a Ruby on Rails developer preparing for an interview, an interviewer looking for a comprehensive guide to assess candidates, or a **junior developer** or **contractor** looking to refresh your knowledge, The Ruby on Rails Interview Bible is the ultimate resource for you. 

Order your copy today and take the first step towards mastering Ruby on Rails development. With 500+ essential questions and answers, this e-book serves as a comprehensive handbook that interviewers and HR professionals can use to test candidates and assess their knowledge of Ruby on Rails development. 

So what are you waiting for? Order your copy of **The Ruby on Rails Interview Bible** today and take the first step towards acing your next interview and landing your dream job.

Discount 23% only this week!
You can buy a book here [The Ruby on Rails Interview Bible](https://nezirzahirovic.gumroad.com/l/azkyi)
Views In Mariadb (part 1)
Published: 2023-04-26 14:43:10

Views in mariadb are used for simplicity, access management and consistency. Views are basically virtual tables that do not store the data themselves instead take the data from base tables and show them as a single virtual table. We will see below the importance of views and how to create and use them.

Views are simply the saved select statements which help us obtain data from one or more tables. These do not speed up the execution as these are only the saved select queries and do not save the retrieved data so they have to be run again and again each time the view is executed.

## **Advantages Of Views in Mariadb**

Views have following advantages in databases

#### Simplicity

Views allow you to encapsulate complex queries with joins to simplify the table access. Instead of typing a long and complex query in multiple applications, you can create a view based on the query and use the view name in the applications.

#### Security

In terms of security, you can grant a user account to access partial data of the base tables through a view. By doing this, you can hide the sensitive data from the users who do not have the privilege to view it.

#### Consistency

Views can be used to encapsulate business logic and formulas and make them consistent across applications.

In the next part we will see how to create and use the views [link for part2](https://dev.to/umerfreak/views-in-mariadb-part-2-36k4)
Developer marketers and dev rel pros need to get out of the tutorial rut
Tags: devrel, marketing
Published: 2023-04-26 14:40:30

Many developer marketers and dev rel pros I meet are trying to get out of what I call the tutorial rut. 

This is when you know developers DON’T like traditional content and know they DO like tutorials but don’t know what else to create.

First: It’s a good problem to have! Many companies marketing to developers still produce fluffy content that drives developers away. Tutorials are a great way to build “developer love” (as Carly Brantz, CMO at Digital Ocean puts it) and often a very good way to capture organic traffic from SEO.

But second: Content can do more. The limit, really, is your imagination. 

If you Google “types of content marketing,” you’ll find posts that describe over a dozen types, including blog posts, eBooks, case studies, and podcasts. 

This is annoying, for sure, but it also indicates an opportunity: With no settled definition, you don’t have to limit yourself to the expectations you’re used to. 

Step outside of “content marketing” and think about “content.” 

Developers are a unique audience, after all, and we know traditional marketing doesn’t work on them, so maybe we should stop relying on traditional marketing types and definitions. 

Instead, be creative and curious.

Creativity might lead you in novel directions, toward content that surprises you and surprises your skeptical audience. You could create something totally new or something new enough to skip past the “it’s just marketing” radar.

Curiosity might lead you in divergent directions, toward incorporating techniques and ideas from tech journalists or independent bloggers. You could report on a trend instead of merely speculating. You could write a thoughtful essay that challenges expectations instead of repeating what’s known. 

Return to your goals and your problems and use that creativity and curiosity to figure out ways to meet and solve them — ways that satisfy YOUR needs and not the expectations of traditional marketers. 

Do you want more developers signing up for demos? Maybe you need product-led content. But not the stuff that shoves the product in your face — your version, a transparent guide to what the product can and can’t do.

Do you want to rank on HackerNews? Maybe you need thought leadership. But not the cheesy trend predictions — your version, a thoughtful essay based on reflections from the founding team.

Do you have lots of developers signing up but few converting? Maybe you need case studies. But not the empty, hollow, manicured case studies — your version, a technical post about what a customer experienced, gained, and struggled with using your product. 

Don’t underestimate the tutorial. But don’t limit yourself to tutorials either.
nodenv to pnpm
Tags: pnpm, node
Published: 2023-04-26 14:28:56

---
title: nodenv to pnpm

tags: ["pnpm", "Nodejs"]
published: true
---

Nodejsの環境の管理を `nodenv` から `pnpm` に置き換えたので、そのメモです。

{% embed https://github.com/nodenv/nodenv %}

{% embed https://pnpm.io/ %}

### 環境

- WSL2
- npm v9
- bash

## nodenvの削除

ホームディレクトリにある `.nodenv` を削除します。

```sh
$ rm -rf ~/.nodenv
```

`.bashrc` に書かれたnodenvの設定を削除します。

```bashrc
# 以下のような文が書かれているはずです
export PATH="$HOME/.nodenv/bin:$PATH
```

`.bashrc` を再読み込みし、 nodenvコマンドが使えないことを確認します。

```sh
$ source .bashrc 
$ nodenv
Command 'nodenv' not found
```

## pnpmのインストール

Installationに書いてある通り、wgetでダウンロードしshellを実行します。

```sh
$ wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.bashrc" SHELL="$(which bash)" bash -
```

この時点で `pnpm` コマンドが使えるはずです。

```sh
$ pnpm -v
8.3.0
```

## nodejsのインストール

`pnpm use -g` でシステム全体で使用する特定バージョンのnodeのインストールをします。

```sh
# v20.X.Xをインストールする
$ pnpm env use --global 20

# LTS版をインストールする
$ pnpm env use --global lts

$ node -v
v20.0.0
```