teleren/devto huggingface dataset:
In JavaScript Console Other Than Console.log()
Tags: javascript, webdev, beginners, tutorial
Published: 2022-01-01 10:39:06

1. Console.count()

Let assume you want to keep a count of how many click the user makes on the button. The code with .log() might look like this


```
let userClickCounter = 0;
function watchUserClicks(){
userClickCounter++;
console.log("User Clicked ${userClickCounter}")
}
<button onclick = "watchUserClicks()">
Click Me to Without pause
</button>
```
The other method is also present
 

```
function watchUserClick(){
consol.count('User Click');
}
<button onclick = "watchUserClicks()">
Click Me to Without pause
</button>
```
Here the need for variable and its related code is eliminated thereby, making the code optimal and readable.

2. Console.Dir()
  

This method shows all the properties of the JS Object.
The console.log() print out toString representation whereas consol.dir() print out a navigation tree

see the difference:-

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/is91b14d3w7eysw2rr93.jpg)
 
This method come to the real help when you want to show a single Dom Element like this
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymxx0s7a2fec36fqmra7.jpg)

3. Console.Time() and Console.ThimeEnd()
 
When you are working on a complex algorithm. time is one of the main factor you need to look on simultaneously.

this is where you can use these console method to know how much time your algorithm is taking to execute.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3utg7zqdox6s8fitq32.jpg)

4. Console.table()

the best method vs console.log() to show an object In JS. this method is used to represent complex object or arrays in tabular format.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oedhpj9pg8suz7gby9o1.jpg)
  
 
 

 
[buymeacoffee](https://www.buymeacoffee.com/kamranah)
How to add Color to your code snippets using markdown
Tags: programming, tutorial, productivity, beginners
Published: 2022-01-01 10:36:47

Which one of these look better?
this?👇
```
function printHello() {
 console.log("Hello"); // prints hello to the console..
}
```
or this..👇
```javascript
function printHello() {
 console.log("Hello"); // prints hello to the console..
}
```
That's right! The code snippet with colors definitely looks better and there are many advantages of using this feature built into text editors.

This feature that enables us to add colors to our code is known as **_syntax highlighting_** and it makes it easier and more enjoyable to read and understand code.

## How to add syntax hightlighting in markdown
This is actually very easy to implement. All you have to do is add the name of the the programming language after the backticks in your markdown editor.
like this👇
<pre>
```javascript
function printHello() {
 console.log("Hello"); // prints hello to the console..
}
```
</pre>
and viola! You're done!!

Make the world beautiful today by adding some color to it😊
Happy New Year Coders🎉🎉🎉..
Set Up Tailwind Css With create-react-app and yarn
Tags: react, tailwindcss, javascript, webdev
Published: 2022-01-01 10:23:03

### Create a new react project with yarn

```sh
yarn create react-app react-tailwind-css-stater
```

### Install Tailwind CSS with postcss & autoprefixer

```sh
yarn add -D tailwindcss postcss autoprefixer
```

### Generate `tailwind.config.js` and `postcss.config.js`

```sh
yarn tailwindcss init -p
```

### Modify `tailwind.config.js` file

```js
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

### Add tailwind base, components and utilities to `index.css`

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

---

### [GitHub Repo](https://github.com/AshirbadGudu/react-tailwind-css-stater)
flashi - create flashcards quickly!
Tags: atlashackathon
Published: 2022-01-01 10:12:18

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


### Overview of My Submission
An app for creating flashcards quickly. It has integrated long term learning system.

https://flashi.app/


### Submission Category: 

Educational


### Link to Code

It is closed sourced


### Additional Resources / Info

video preview:
https://flashi.app/preview-fast.mp4
How to learn HTML (FREE HTML Course 2022)
Tags: html, webdev, tutorial, beginners
Published: 2022-01-01 10:02:24

**[HTML](https://www.tutorialinhindi.com/html/html-hindi/)** एक मार्कप टेक्स्ट लैंग्वेज (Markup text language) है. इसका पूरा नाम “_Hypertext Markup Language_” है. यह एक [वेब पेज](https://www.solutioninhindi.com/web-page-in-hindi/) की संरचना का वर्णन करता है. यानी की **HTML** की मदद से [वेबसाइट](https://www.solutioninhindi.com/website-meaning-in-hindi/) का structure बनाया जाता है।
HTML Video Link: [HTML को हिंदी में समझें](https://youtu.be/WiYGOPrNgGg)

## Why Everyone Should Learn HTML?
वर्तमान समय में, लोग अपने व्यवसाय को _डिजिटल_ रूप से स्थानांतरित कर रहे हैं।

इसलिए यदि कोई व्यवसायी अपनी कंपनी को डिजिटल रूप से स्थापित करना चाहता है, तो उन्हें कम से कम एक **वेबसाइट** की आवश्यकता होती है।

ताकि वह अपने उत्पाद और सामान को ऑनलाइन बेच सके।

यह केबल वर्तमान परिदृश्य के बारे में नहीं है, भविष्य में, सभी छोटी और बड़ी कंपनी अपने उत्पादों को ऑनलाइन ही बेचेगा। इसलिए **Websites** की हमेशा जरूरत होगा।

वेब डिज़ाइन या विकास करने के लिए पहला कदम **HTML** का होता है।

इसके बिना आप वेब पेज को structure नहीं कर सकते, इसलिए **2022** में सभी को HTML जरूर सीखनी चाहिए।

आजके समय में HTML सीखना बहुत आसान है, अगर आप FREE में HTML सीखना चाहते है तो नीचे की पाठ को पढ़े।
 
## **Basic to Advanced HTML Lessons**

![FREE HTML Course in Hindi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8k802u5gmnu4tymqub2t.png)
यदि आप एक **professional**  [वेब डेवलपर](https://www.tutorialinhindi.com/career/web-developer-hindi/)  बनना चाहते हैं, इसलिए **HTML सीखना** चाहते हो, तो आपके लिए यहां महत्वपूर्ण ट्यूटोरियल पाठ हैं:
1. [HTML क्या है?](https://www.tutorialinhindi.com/html/html-hindi/)
2. [HTML Document.](https://www.tutorialinhindi.com/html/html-document-hindi/)
3. [History of Html in Hindi.](https://www.tutorialinhindi.com/html/history-of-html-hindi/)
4. [Features of HTML in Hindi.](https://www.tutorialinhindi.com/html/features-of-html-hindi/)
5. [HTML Editor क्या है – Best HTML Code Editors.](https://www.tutorialinhindi.com/html/best-html-code-editors-hindi/)
6. [HTML Tags in Hindi.](https://www.tutorialinhindi.com/html/html-tags-in-hindi/)
7. [All HTML Tags List in Hindi.](https://www.tutorialinhindi.com/html/all-html-tags-list-hindi/)
8. [Learn HTML Attributes.](https://www.tutorialinhindi.com/html/html-attributes-hindi/)
9. [HTM Elements.](https://www.tutorialinhindi.com/html/html-elements-hindi/)
10. [HTML Meta Tags.](https://www.tutorialinhindi.com/html/html-meta-tags-hindi/)
11. [Create HTML Table.](https://www.tutorialinhindi.com/html/create-html-table-hindi/)
12. [Create HTML Form (Registration).](https://www.tutorialinhindi.com/html/create-html-form-hindi/)

ये पाठ आपको **basic** से _advanced HTML_ को समझने में मदद करते हैं। 

Learn [FREE HTML Tutorial in Hindi](https://www.tutorialinhindi.com/html-tutorial-hindi/)

अधिक ट्यूटोरियल के लिए [www.tutorialinhindi.com](https://www.tutorialinhindi.com/) पर जाएं...
My javascript / tech / web development newsletter for 2022-01-01 is out!
Tags: javascript, tech, webdev, discuss
Published: 2022-01-01 10:00:06

---
title: My javascript / tech / web development newsletter for 2022-01-01 is out!
published: true
description: A roundup of all the best javascript, tech and web development links posted to my linkblog in the past week
tags: javascript, tech, webdev, discuss
---

Special New Year Edition 2022

https://markjgsmith.substack.com/p/mark-smiths-newsletter-01-01-2022

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
You've Gotta Check Out SnowPack...
Tags: webdev, javascript, programming, codenewbie
Published: 2022-01-01 09:52:22

## Introduction

So like most 2020 developers I used to give 0 fucks about bundlers... 

I mean **react/next/svelte takes care of it** for us right

but then, I started doing this course called [threejs journey](https://threejs-journey.com/) by [brunosimon](https://bruno-simon.com/) in which bruno makes us understand why bundlers are important

![node_modules meme](https://pbs.twimg.com/media/FH_p4ihUUAEAXSQ?format=jpg&name=900x900)
TL;DR helps client import node_modules files that are stored on the server

## WebPack
The world's most popular javascript bundler "webpack" has a bunch of disadvantages
1. It is pretty **complex**, for context and it took me 2 days to understand and be able to configure webpack on my own
2.  It is kinda really **slow** cuz it rebuilds and rebundles the files for every change
*[especially if you want to use typescript]*

### Here's Recordings of WebPack
Time to Initial Load: **35s**
{% youtube ZaX9vVwpEsA %}
Time to Load Changes: **20s**
{% youtube zaSyyna3RTI %}

## Enter Snowpack
Snowpackjs has a fundamentally different approach to bundling... 
It builds each file and caches it for future use, while webpack rebuilds and rebundles every single time
![Help](https://www.snowpack.dev/img/snowpack-unbundled-example-3.png)
### Bonus
Snowpack is _**super easy** to configure_
here's the config I used in the below test
```
module.exports = {
  mount: {
    src: { url: "/" },
    public: { url: "/", static: true },
  },
};
```
it mounts files in src, public dir to "/" (root directory of served content) 

### Here's Recordings of Snowpack
Time to Initial Load: **20s**
{% youtube L7sIkfxBHbg %}
Time to Load Changes: **14ms** 😱
![screenshot](https://pbs.twimg.com/media/FH_vdR2UUAIDtNp?format=jpg&name=900x900)

## Thanks
if you ❤️ this blog post... I'd ❤️ to tell you that this is the blogified version of the following thread
{% twitter 1477165287384305665 %}
Free & Feature-Rich Headless CMS using Google Spreadsheet
Tags: cms, headlesscms, headless
Published: 2022-01-01 09:22:17

The headless CMS arena is flourishing with plethora of solutions, some of are SaaS'ed some are hybrid (cloud + on premise), some are Open Source, some are not even freemium to try-before-you-buy... it lead me to try those 2:

[Strapi](https://strapi.io/) - Open Source, On premise + Cloud.
[GraphCMS](https://graphcms.com/) - Proprietary SaaS

I turned to evaluating ready made solutions from the obvious reasons of not wanting to reinvent the wheel, accelerating my delivery pace and **most of all** - providing a convenient yet a productive way for my system's users (internal and later even external/public) to handle content management;

- Defining a scheme and relationships
- Creating new content items
- Updating drafts and published items
- Localization
- Visualizing the current items state (draft, published, unpublished and deleted)
- Managing content revisions
- Roles and Permissions
- Automatic Assets sync to cloud storage such as AWS S3 (images and other publishable types)
- Logs and stats
- Webhooks

I discovered that the aforementioned headless CMS solutions, although supporting all of or part of my requirements, lacked the most important aspect of handling content en-mass - convenience and productive publishing.

A simple use case to underline my thesis was, updating blocks of content items (ex. Products, Categories, Tags) instantaneously with as few clicks and then having it published in a sync-safe and visible way.  

I ended up writing my own using a combination of Google Spreadsheet and a simple Node.js server implementation (GraphQL/REST + SQL/NoSQL DB adapter)

I will soon release it as an Open Source for all to use ( + examples and use cases)

If you wish to be notified, follow **[this repo ](https://github.com/Orenus/gs-headless-cms)**for announcements + instructions + code 



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/exb347hnyws3v9yi1xhh.png)_Fig 1: Content management view_
 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6ub2yug204gkvcs5i3r.png)_Fig 2: Schema management view_



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmib9odxdei3j7k0ol4r.png)_Fig 3: Google AppScript Dashboard_



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34etzriyib6jqkmf011k.png)_Fig 4: Google AppScript Logs view_
Top 6 Strategies for A.I
Published: 2022-01-01 08:55:55

Artificial intelligence is currently one of the most hotly debated topics in tech. AI has been around for decades, but recently its applications have exploded, from Siri to self-driving cars. Now that its potential is being realized, it’s easy to see why everyone wants to know about this new technology.

One of the many hot discussions happening in the AI space right now is whether or not A.I. can outperform humans at cognitive tasks, such as playing chess, stock trading, and medical diagnosis. This question is hotly debated by AI researchers, entrepreneurs, ethicists and business leaders alike.
At a recent tech event hosted by [JBB](https://www.jbbatteryportugal.com/), I got to hear from an excellent panel of 6 experts about this very topic. Here are the top six strategies for artificial intelligence that they shared:
Using Maven's settings.xml server credentials in Gradle
Tags: java, gradle, cicd, maven
Published: 2022-01-01 08:49:44

![gradle](https://cdn-images-1.medium.com/max/2000/1*89FxNOfLuZC4ZxjNbx0Rkg.png)

## Introduction


An essential part of a [continuous delivery pipeline](https://www.jenkins.io/doc/pipeline/tour/hello-world/) is building a project's binary package. A binary package contains all the files, libraries, etc. needed for the software to work. The majority of these files are the dependencies. Dependencies are external libraries often stored and hosted in a public repository.

Normally you can download these dependencies without any form of authentication, you just have to specify the repository, where it's stored, and the dependency itself:

{% gist https://gist.github.com/heanzyzabala/f956d21725a88b1ab64cd8150647234b.js %}

But if you're in an organization that maintains and hosts their libraries then you may have to set your credentials to your organization's repository in your settings.xml using servers:

{% gist https://gist.github.com/heanzyzabala/0841489879786fc0686adda527b08776.js %}

.. that you can use to download internal dependencies:

{% gist https://gist.github.com/heanzyzabala/0841489879786fc0686adda527b08776.js %}


## **Problem**


Now, we won't be able to port this exact functionality to Gradle as it doesn't have support for [servers](https://maven.apache.org/settings.html#servers) or its any of its equivalent, like how pom.xml is synonymous to build.gradle. But of course, it's still possible to achieve the behavior using this:

{% gist https://gist.github.com/heanzyzabala/332700add4265424a056e3fe66f45c9a.js %}{% gist https://gist.github.com/heanzyzabala/dae898d8ce49cf7d7dd4cfd11b026698.js %}

It's not really a problem, but if you prefer maintaining only  one config rather than creating a separate one for Gradle proejcts, then there's a workaround for that.


## Solution


I did a bit of googling and came across this Stackoverflow [post](https://stackoverflow.com/questions/12522676/reading-a-maven-settings-xml-when-building-with-gradle), which led me to this Gradle [issue](https://github.com/gradle/gradle/issues/1236) and ultimately to this Github [project](https://github.com/hibernate/gradle-maven-publish-auth). And as the project implies:
>  Applies security defined for a repository in Maven's settings.xml file to MavenRepository elements in a Gradle build — both upload and download

To implement it, we just have to install and apply the plugin and replace the credentials block with name, which is the id of the server we defined in the settings.xml.

{% gist https://gist.github.com/heanzyzabala/005066e6a0aa9946e52c3be685eef759.js %}{% gist https://gist.github.com/heanzyzabala/18f3366666bcb56f1f49fe95cbc87eaa.js %}

With this, you should be able to publish artifacts to a secured repository as well.

That's all. Cheers!
Problem using home as a page name in next.js
Tags: nextjs, home
Published: 2022-01-01 08:45:35

Hi, I am new to next.js. To add a page i made a folder with name 'home' and then created an index.js file in it.
when i got to localhost:3000/home it gives error '404 | This page could not be found' but if i change the 'home' to some other name, for example 'test' then the route localhost:3000/test works fine.
Please advise that we cannot create a page with name 'home' in next.js ?
A thought I had..
Tags: react
Published: 2022-01-01 08:25:35

What was the reason react decided to create a jsx syntax rather use something like this:

```
const h1 = (str) => <h1>{str}</h1>;
const h2 = (str) => <h2>{str}</h2>;
const div = (arr) => <div>{arr}</div>;

const world = "world!"

const pureReactElement = div([
    h1("hello "),
    h2(world)
]);
```
Autojump 
Published: 2022-01-01 08:04:39

autojump is a command line utility similar to cd. It helps speeds up file navigation by maintaining a history of directories that have been previously navigated by the user. If there are directories with the same name, autojump maintains a weighted history to favor the most frequently accessed directory.

[complete guide](https://www.linode.com/docs/guides/faster-file-navigation-with-autojump/)

cheat sheet:
- check weight

```
j -s
```
- autojump help

```
j --help
```
- jump to a directory

```
j foo
```
- jump to a child directory

```
jc bar
```
-The o command opens the file manager

```
jo foo
```
about git worktree - working with multiple branches at the same time
Tags: git, worktree, multiplebranch
Published: 2022-01-01 07:42:00

[https://www.youtube.com/watch?v=cRunWRC8ye0&ab_channel=AbinavSeelan](https://www.youtube.com/watch?v=cRunWRC8ye0&ab_channel=AbinavSeelan)

```
<b>aaa</b>
```
Open website shortcuts directly from alfred
Tags: alfred
Published: 2022-01-01 07:28:37

## TL;DR

open website shortcuts from alfred. There is [workflow](https://github.com/JiangWeixian/ifu/tree/master/packages/new)

![@ifu/new](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89urg2r37s33br26hnr6.png)

----

Some website provide shortcuts like [repo.new](https://repo.new) to create project on github.

There are simliar shortcuts like

- [repo.new](https://repo.new) - create github repo
- [codespace.new](https://codespace.new) - create github codespace
- [gist.new](https://gist.new) - create github gist
- [depoly.new](https://depoly.new) - create depolyment on vercel
- [dev.new](https://dev.new) - create depolyment on railway
- [pen.new](https://pen.new) - create codepen
...

you can see all awesome website shortcuts [here](https://github.com/JiangWeixian/awesome-website-shortcuts)

Now you open those url directly from alfred by this [workflow](https://github.com/JiangWeixian/ifu/tree/master/packages/new)
Socket.io Use as Real Time Application like Chatting Gamming in React ,Or Any Application in Express
Tags: javascript, webdev, beginners, programming
Published: 2022-01-01 07:17:08

hello today we discuss a famous library for real time application
like chat app, gamming room etc.


socket.io is a server side library. its use in backend to send messages
that send bye user store the message and we send their message to client.

socket-client.io is a frontend library to connect server and using server link.
client emit the message to the server and server on their emit and server emit their message 
and client on their emitted message into frontend side.


before message we make connection between so

```
//server.js

io.on('connection',(socket)=>{

console.log("connected")

socket.on('send_message',(msg)=>{

socket.emit('send_message',msg);

});

socket.on('disconnect',()=>{
console.log("disconnect")
})

});
```

```
//client.js

let msg="hi i am sandeep"

socket.emit('send_message',msg);


socket.on('send_message',msg=>{

console.log(msg)
});
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbik6fhwimu101yaa1dw.png)
A Recap on My Articles in 2021
Published: 2022-01-01 07:16:20

In retrospect, I think it has been a good year for me on my blog ([fareez.info](https://www.fareez.info/)). I was able to write more frequently than the previous years. Thanks to a full year of remote working which allowed me to spend some more time to focus on writing than usual. Also, I made the work flow a lot simpler with [Hugo](https://gohugo.io/) and [Netlify](https://www.netlify.com/), so I'm able to publish quicker.

I spent a lot of time experimenting with new tech which eventually lead to writing articles on multiple technologies such as Go, React, Svelte, Angular, Laravel, Javascript and C#. I'll share links of those articles below.

## Go
[Thread Safe Lazy Loading Using sync.Once in Go](https://www.fareez.info/blog/thread-safe-lazy-loading-using-sync-once-in-go/)

[Embedding a React Application in Go Binary](https://www.fareez.info/blog/embedding-react-app-in-go-binary/)

[Why Interfaces in Go Are Not Explicitly Implemented](https://www.fareez.info/blog/why-interfaces-in-go-are-not-explicitly-implemented/)

## Svelte
[Creating a Tree Component using Svelte.js](https://www.fareez.info/blog/creating-tree-component-using-sveltejs/)

[Why I'm Adding Svelte.js to My Toolkit](https://www.fareez.info/blog/why-am-adding-sveltejs-to-my-toolkit/)

## Angular
[Setting Up Tailwind in Angular](https://www.fareez.info/blog/setting-up-tailwind-in-angular/)

## Laravel
[Authenticate Users from Multiple Tables in Laravel](https://www.fareez.info/blog/authenticate-users-from-multiple-tables-in-laravel/)

## C#
[Emulating Discriminated Unions in C# using Records](https://www.fareez.info/blog/emulating-discriminated-unions-in-csharp-using-records/)

## Javascript
[Depth First Traversing using Generators in Javascript](https://www.fareez.info/blog/depth-first-traversal-using-generators/)

There are still many topics pending in my todo list. I wish I get to write about them in the coming months. You can share your opinion on my articles. If you want me to write about something specifically, please feel free to suggest.

Photo by Wilhelm Gunkel on Unsplash