teleren/devto huggingface dataset:
Express JS. Why You Should Learn It In 2023
Published: 2023-01-05 16:15:36

If you're questioning whether expressJS is worth learning, let me give some reasons for why you should.
Express is a nodeJS framework that provides lots of features for building web and mobile apps. It is modern and versatile.
It makes developing applications easy and fast because it gives you built in functions for things such as routing.
Another upside of express is that it is written in Javascript, and if you already know a little something about js then express will be easy.

Express is also [event-driven](https://www.tutorialspoint.com/nodejs/nodejs_event_loop.htm#:~:text=Event%2DDriven%20Programming,for%20the%20event%20to%20occur.), making it fast and suitable for handling many requests at the same time.

##Here are some examples of projects that can be built in express
1. Online Photo Collage Maker

2. Real-time Chat Application

3. A to-do app

4. An email sender (for OTPs and sign-ups)

5. An online multiplayer game
Transform Your Webpage from Ordinary to Extraordinary with These Hidden HTML Gems
Tags: css, webdev, programming, productivity
Published: 2023-01-05 16:12:33

HTML (HyperText Markup Language) is the standard markup language for creating web pages. It is composed of a series of tags that tell web browsers how to structure and format the content on a webpage. While there are many commonly used HTML tags, such as the  p tag for paragraphs and the img tag for images, there are also a number of lesser-known HTML tags that are not used as frequently. These tags can be useful in certain situations and can help to improve the structure and formatting of a webpage.

1) The abbr tag: This tag is used to indicate that the text contained within it is an abbreviation or acronym. When hovering over the text, a tooltip with the expanded version of the abbreviation will be displayed. This can be useful for defining technical terms or acronyms that may not be familiar to all readers.

2) The meter tag: This tag is used to represent a measurement within a specific range. It can be used to display progress bars, ratings, or other types of measurement. The <meter> tag is not widely supported by web browsers, so it may not be the best choice for displaying measurement data on a webpage.

3) <mark> The mark  tag: This tag is used to highlight text for reference purposes. The text contained within the <mark> tag will be displayed with a yellow background by default, although this can be customized with CSS. This tag can be useful for drawing attention to important information or for marking text that has been referenced elsewhere on the webpage. This is the example of mark tag

4) The time  tag: This tag is used to represent a specific time or date. It can be used to display the time and date of an event or to indicate the time and date a piece of content was published. The <time> tag can also be used in conjunction with the datetime attribute to specify the time and date in a machine-readable format, which can be useful for search engines and other automated systems.

5) The wbr  tag: This tag stands for "word break opportunity" and is used to indicate a point where the browser can potentially break a long word onto a new line to prevent it from extending beyond the boundaries of its container. This can be useful for preventing text from becoming too difficult to read on small screens or in languages with long words.

While these HTML tags may not be as well-known as some others, they can be useful in certain situations and are worth considering when designing and developing webpages. Experimenting with different tags and attributes can help you find the best way to structure and format your content for maximum readability and accessibility.
CodePen Designs - 16 : SVG rope from path
Tags: codepen, css, design, webdev
Published: 2023-01-05 16:04:10

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space.

---


#### Codepen Design - 16
---
{% codepen https://codepen.io/stanko/pen/vYaEMKX %}


---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)


---
---
My GitHub Contribution History (2014-2023)
Tags: github, career, opensource
Published: 2023-01-05 16:01:05

Green squares on GitHub aren't just a mere activity indicator. Move a step back and look at the bigger picture: they tell a story, your story.

This post will be slightly different from the usual as it's not technical but rather more... personal.

I saw on Twitter that everyone was sharing their GitHub contribution chart on one image with a simple tool, probably because it was shared by the [official GitHub account](https://twitter.com/github/status/1609112210361516032) and retweeted by [Kent C. Dodds](https://twitter.com/kentcdodds/status/1609597390201454595).

Funnily enough, this tool isn't new but it's been there since 2018 and you can find it at https://github-contributions.vercel.app/

---

So... why not, I decided to give it a try and I generated my contribution chart, from 2014 when I created my GitHub account to today, 2023.


![My GitHub Contribution History](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rotncwpnrorra513i0uz.png)


Even if I don’t have a long and intense career (yet) I immediately realized that those green squares, how they’re grouped and positioned, meant a lot to me. They were depicting my career so far in an image.

I took some time to look at the picture and a lot of great memories came to my mind, so I decided to switch on my webcam and record my thoughts, I hope somehow in an inspiring way.

In the above image I can see some milestones such as:

- My time at the university
- The game development experience
- Quitting my job to find the amazing company I work for today
- The accepted Pull Requests on vscode
- ... and many more!

If you're curious, the outcome is as uploaded on my YouTube channel where I usually talk about Open Source, so here's the video:

{% youtube goYLeZeS1e0 %}

Let me also invite you to try out the tool and take a moment to look at your own chart. I’m sure it will tell a lot about you, so many great memories lie among those green squares. Feel free to write in a comment what a particular square or cluster means to you.


---

Thanks for reading this article, I hope you found it interesting!

I recently launched my Discord server to talk about Open Source and Web Development, feel free to join: https://discord.gg/bqwyEa6We6

Do you like my content? You might consider subscribing to my YouTube channel!
You can find it here:
[![YouTube](https://img.shields.io/badge/YouTube:%20Dev%20Leonardo-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/channel/UC-KqnO3ez7vF-kyIQ_22rdA?sub_confirmation=1)

Feel free to follow me to get notified when new articles are out ;)
{% embed https://dev.to/balastrong %}
Programming Jokes: A Collection of Hilarious One-Liners for Developers
Tags: jokes, programming, oneliners, funny
Published: 2023-01-05 15:55:37

Programming can be a serious business, but it's important to remember to have a little fun too. Here is a collection of some of the funniest programming jokes we could find. These one-liners are sure to bring a smile to any developer's face:

- "Why do programmers hate nature? It has too many bugs."

- "Why was the JavaScript developer sad? Because he didn't know how to 'null' his feelings."

- "Why do programmers always have caffeine on hand? Because Java."

- "Why did the Python programmer quit his job? He didn't get lists."

- "Why did the Ruby programmer refuse to do Halloween? He said it was too "scary" to use objects as hashes."

- "Why was the PHP programmer feeling depressed? He didn't get any syntax."

- "Why did the C++ programmer bring his marriage certificate to work? He needed to override his spouse."

- "Why do programmers always prefer dark mode? Light attracts bugs."

- "Why was the computer cold when the programmer got home? It left its Windows open."

- "Why did the computer go to the doctor? It had a virus."

- "Why did the SQL query go to the gym? It needed to join some tables."

- "Why did the Java developer wear glasses? Because he couldn't C#."


I hope these jokes brought a smile to your face! Do you have any favorite programming jokes that we missed? Share them in the comments below.
let's convert between bytes32 & string & vice-versa
Tags: solidity, web3, blockchain, tutorial
Published: 2023-01-05 15:51:53

## Why

Before we talk about how to convert between bytes32 & string, let us first know the reason why we may want to do this.

So bytes32 has a fixed size and strings are dynamically sized. This produces some interesting cases like a contract can't return another contract a string or a contract can't call another contract with a string. 

So a reasonable alternative is to use bytes32 instead of strings. This makes our code composable.

## string -> bytes32

```
string memory input = "hicksville"
bytes32 output = bytes32(abi.encodePacked(input))
```

![string to bytes32](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsnhsrv1t8ojn6ym837w.png)

## bytes32 -> string

```
string memory reversedInput = string(abi.encodePacked(output))
```

![bytes32 to string](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bz5hh8ubphuf7mfu3b1j.png)
French Podcast #nosql #capella #couchbase
Published: 2023-01-05 15:33:12

Listen to Laurent Doguin, dev community advocate on this podcast
https://bigdatahebdo.com/podcast/episode-153-couchbase-avec-laurent-doguin/

More opportunities :
Essayez Couchbase sur Capella (https://cloud.couchbase.com)
Ou le playground (https://couchbase.live/) Ou dans Gitpod avec du GraphQL

Venez nous voir sur Discord: https://discord.gg/jJfT4pDU6z

On reprend les meetups

ML Meets NoSQL: Integrating Python User-Defined Functions with N1QL for Analytics https://www.couchbase.com/blog/ml-meets-nosql-integrating-python-user-defined-functions-with-n1ql-for-analytics/

Couchbase recrute https://www.couchbase.com/careers/open-positions
Realtime Database or Cloud Firestore, when and why?
Tags: cloud, firebase, tutorial
Published: 2023-01-05 15:18:12

When using Firebase, wether it's for the web or mobile, you'll eventually come to this question: Should I use realtime Database (rtdb) or Cloud Firestore to store this?

In this article we're not going to find the answer, we'll find the right questions for you to get the answer.

## Realtime Database

![Realtime Database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gc4qbo26m0z96re6447g.png)

Firebase Realtime Database, also known as "rtdb", is a realtime key:value database. It's very performant for small data operations and has good transactions capabilities to integrate with Cloud Functions easily. To simplify to the extreme, you can see rtdb as a big JSON where you can observe any property at any depth.

### Pricing

Realtime database's pricing is based on traffic, the cost being $1/GB transferred after the first 10GB (the free tier). Storage cost is also $5/GB after the first GB that's in free tier.


## Cloud Firestore


![Cloud Firestore](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kd0cc7glvlacrqy4tor6.png)

Cloud Firestore is a realtime document database, it scales very well with big amounts of data and documents, allowing stuff like indexes and querying with an easier approach than rtdb. To simplify to the extreme, it's realtime mongodb with less features.

### Pricing

Cloud Firestore's pricing is based on the # of operations you'll do on the database. These prices are:

 - $0.06 per 100K read (50K free)
 - $0.18 per 100k write (20K free)
 - $0.02 per 100k delete (20k free)
 - $0.18 per GB stored (1GB free)

## Ok, cool, but which one to pick?

Now that we have elements about these databases, it's easier to pick one, mainly because these are designed to be cheap if properly used for that they're designed for.

For instance, store big documents that you won't update often on realtime database and your pricing will explode.

My general rules are:

 - Counters, realtime gauges and other things that need to be updated a lot should go on realtime database.
 - Larger documents should go on Firestore.
 - If it's a large document and it should be updated often, consider splitting it into what will be updated often and what won't.

Which gives us these questions when picking which database to use to store something in Firebase:

 - Is it going to be updated more than once per second? 
Yes: RTDB, No: Firestore
 - Is it larger than a couple of primitive fields?
Yes: Firestore, No: RTDB
 - Do you need to search through your data?
If yes, well Firestore but you should definitely use the algolia extension for that !

## Conclusion

In conclusion, make sure to pick the right database for the right thing if you don't want to be one of these nightmare stories people tell you when you're talking about firebase. Big things go to Firestore, things that need frequent updates go to Realtime Database.
Dart Abstract and Factory Keywords
Tags: flutter, dart, abstract, factory
Published: 2023-01-05 15:07:46


### abstract

Örneklenemeyen bir soyut sınıf (abstract class) tanımlamak için abstract değiştiriciyi kullanın. Soyut sınıflar, genellikle bazı uygulamalarla arabirimleri(interfaces) tanımlamak için kullanışlıdır. Soyut sınıfınızın somutlaştırılabilir(instantiable) görünmesini istiyorsanız, bir factory constructor tanımlayın.

Abstract sınıflar genellikle abstract method'lara sahiptir. 

Abstract bir methodu olan abstract bir sınıf örneği:

```
abstract class AbstractContainer {
  // Define constructors, fields, methods...

  void updateChildren(); // Abstract method.
}
```

### factory

**Factory constructors**

Sınıfının yeni bir örneğini oluşturmayan bir constructor tanımlarken factory anahtar sözcüğünü kullanın. Örneğin, bir factory constructor önbellekten(cache) bir örnek(instance) döndürebilir veya bir alt türün(subtype) örneğini döndürebilir.
Factory constructor'larının bir başka kullanım alanı da final değişkenleri başlatmaktır.

İpucu: Bir final değişkeninin geç başlatılmasını ele almanın başka bir yolu da late final kullanmaktır (dikkatlice!).


Aşağıdaki örnekte, Logger factory constructor'ı önbellekten nesneler döndürür ve Logger.fromJson factory constructor'ı JSON nesnesinden bir final değişken başlatır.


```
class Logger {
  final String name;
  bool mute = false;

  // _cache is library-private, thanks to
  // the _ in front of its name.
  static final Map<String, Logger> _cache = <String, Logger>{};

  factory Logger(String name) {
    return _cache.putIfAbsent(name, () => Logger._internal(name));
  }

  factory Logger.fromJson(Map<String, Object> json) {
    return Logger(json['name'].toString());
  }

  Logger._internal(this.name);

  void log(String msg) {
    if (!mute) print(msg);
  }
}
```

Not: Fatctory constructor'larının 'this'e erişimi yoktur.



Kaynaklar:
https://dart.dev/guides/language/language-tour#abstract-classes
https://dart.dev/guides/language/language-tour#factory-constructors
Dart Assert Keyword
Tags: dart, flutter, assert, mobile
Published: 2023-01-05 15:05:50


### assert

"assert" operatörü, Dart dilinde bir koşulun doğru olduğunu test etmek için kullanılır. Eğer koşul doğru değilse, bir "AssertionError" atar ve kodun çalışması durur. "assert" operatörü, genellikle test ve debug amaçlı kullanılır ve çalışma zamanında kapatılabilir.

Kullanımı şöyledir:

```
assert(x > 0);
```

Bu örnekte, "x" değişkeninin sıfırdan büyük olduğu koşulu test edilir. Eğer koşul doğru değilse, bir "AssertionError" atılır ve kodun çalışması durdurulur.

"assert" operatörü, ayrıca bir ikinci argüman olarak bir mesaj verilebilir. Bu mesaj, eğer koşul doğru değilse hata mesajı olarak kullanılır. Örnek:

```
assert(x > 0, 'x değeri sıfırdan büyük olmalıdır');

```
Bu örnekte, eğer "x" değişkeni sıfırdan büyük değilse, hata mesajı olarak "x değeri sıfırdan büyük olmalıdır" gösterilir. "x" değişkeni 0 dan büyükse, iddia başarılı olur ve yürütme devam eder. 



https://dart.dev/guides/language/language-tour#assert
New Year, New Headers.
Tags: discuss, watercooler
Published: 2023-01-05 15:00:59

It's a new new year. Good time to update stuff like header and cover images on your socials.

Here's my previous standard header. If I'm blogging on a project I often use a screen shot as a cover but this was my standard header for other type of blog posts.

It's a list of my contact information. It mimics an editor. But I made it real wide and the sides get cut off. Here just the center part showed on screen. I did this in 2021 so past due for a change.

![text with contact inflammation. ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8p2gal4v4vewlbol9jyd.jpg)

 This was my 2020 cover. It's a photo I took and added a bit of text to it. I liked this and may re-edit it. 

![bb-8 peering from behind a crate.my url, Christopher lee jarvis.com, is on the crate. ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jzpw3hb7kfszj7nikoa.jpg)

So here's my newest one. All my contact information. I changed the color and order of them. In addition I resized it to better fit on DEV and other sites.

![text christopherleejarvis.com and dev.to @jarvisscript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20m07vdw87mvfsonfa1c.jpg)


I used Photoshop for this but there are many options. I experimented with Canva but it looked too generic. So I went to Photoshop and edited the old header image.

### Update ###

I removed the background picture for a cleaner look. Could maybe add something to the left. My Avatar or a one of my CSS images. 

![text in white and bluechristopherleejarvis.com and dev.to @jarvisscript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hoxuah5h49vfsd5uso4h.jpg)

##Header and Cover image sizes ##

You can help your branding if you use the same Cover image across your various social media accounts. Each company has different image size and aspect ratios so you have to play with them to get it right. 

Here's a table of cover image sizes. 

| Site | Pixel | Aspect Ratio 
 ----------------- | :-----------: | :-----------: 
 DEV |  1000px X 420px | 100:42 
 Mastodon  |  1500px x 500px | 3:1 
 Twitter |  1500px x 500px | 3:1 
 LinkedIn  |  1546px x 396px | 4:1 


Size is not the only consideration. Some sites have avatars that overlap the header image. For example on Twitter you need to keep text out of lower left corner or it will be covered by profile image.

I know there are templates out there that adjust for this. I had PSD files that have margins set up for facebook and twitter. They showed where an avatar or frame overlapped the cover image and what was a safe area to use.  But those templartes were out of date. The size requirements have since changed.

## What do you think? ##
Are you making any update for the new year? Are yiu changing your resume or portfolio?

What do you prefer the JSON text?, text over a photo?, Minimum text?

Is the BB-8 one professional?

```
-$JarvisScript git push
```
Understanding Android Runtime Permissions: How to Make Them Work for You
Tags: webdev, career, devops, design
Published: 2023-01-05 14:59:38

A Guide to Runtime Permissions in Android Apps'. This comprehensive guide covers everything you need to know about managing permissions in Android, from requesting permissions at runtime to best practices for handling permission requests. With this guide, you'll be able to easily navigate the complex world of Android permissions and create apps that users love."


** **Demonstrate****

To demonstrate how Android runtime permissions work, we will create a simple app that requires access to the device’s camera.

First, we will define the required permission in our app’s manifest file:

<uses-permission android:name="android.permission.CAMERA" />

Next, we will check if the app has permission to use the camera in our app’s code:

if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) { // Request permission if it hasn't been granted }

If the app does not have permission to use the camera, we will request permission from the user:

ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.CAMERA}, MY_PERMISSIONS_REQUEST_CAMERA);

When the user responds to the permission request, the app will receive a callback with the user’s response:

@Override public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) { if (requestCode == MY_PERMISSIONS_REQUEST_CAMERA) { // Check if the permission has been granted if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) { // Permission has been granted, open the camera } else { // Permission denied, show a message } } }

At this point, the user has granted or denied the app permission to use the camera. If the permission is granted, the app can open the camera, otherwise the app must inform the user that the permission was denied.

[Click To Visit Full Article originally published on:-04/01/2023](https://www.javaoneworld.com/2023/01/understanding-android-runtime.html)
Configure Angular environment injector with Standalone Component
Tags: angular, webdev, javascript
Published: 2023-01-05 14:57:53

Since the arrival of Standalones Component with **Angular 15**, `NgModules` are now completely optional. 

It is still necessary to declare providers to configure the root injector of the application.

With modules, it is possible to import other NgModules that define their own providers like `HttpClientModule`, `BrowserAnimationsModule`, `RouterModule`, etc.

Without the modules, it is necessary to declare these providers when bootstrapping the application. Fortunately, there are functions provided by angular to facilitate the declaration of these providers. For example: 

```js
bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideAnimations()
]})
``` 

Here is a non-exhaustive list of functions to set up regularly used providers : 

## Core

`importProvidersFrom()`: Sets up providers collected from a given module

## Animation

`provideAnimations()`: Enable animation
`provideNoopAnimations()`: Disable animation

## HTTP

`provideHttpClient()`: Sets up HttpClient service and configures it with some features

 * `withInterceptors()`
 * `withInterceptorsFromDi()`
 * `withXsrfConfiguration()`
 * `withNoXsrfProtection()`
 * `withJsonpSupport()`
 * `withRequestsMadeViaParent()`

`provideHttpClientTesting()`: Sets up a mocked HttpClient service

## Router

`provideRouter()`: Sets up router functionality for the application

* `withInMemoryScrolling()`
* `withEnabledBlockingInitialNavigation()`
* `withDisabledInitialNavigation()`
* `withDebugTracing()`
* `withPreloading()`
* `withRouterConfig()`

`provideLocationMocks()`: Sets up a mocked router for testing

## NgRx

`provideStore()`: Sets up the global store 
`provideState()`: Provides additional slices of state in the store
`provideEffects()`: Sets up given effects
`provideStoreDevtools()`: Sets up debug functionality
`provideMockStore()`: Sets up a mocked store