teleren/devto huggingface dataset:
How to write great logs
Tags: programming, javascript, devops, discuss
Published: 2023-03-01 16:50:53

Creating good logging in the application is hard. The application should not log too much or too little, so it's always a game of balance. Use log level wisely and always log errors. 

Ideally, all application component should use the same logs format and include the following information:

- Time (ISO8601, UTC)
  - Avoid using local time. UTC should be a golden standard for all timestamps as it will help to unify all systems in one time zone and to avoid misunderstandings while analysing logs from different systems.
- Logging level (FATAL, ERROR, WARN, NOTICE, INFO, DEBUG, TRACE)
- Meaningful message

To make the message meaningful you should include some important pieces of information in it, like:
- include stack trace if any 
- include thread name if it's a multi-threaded application
- include context like:
  - Global request-id (to trace the whole operation across the services)
  - Module/class (for errors and logic flow). This is not always possible
  - Additional information about the event (like not just "user registered" but "user with ID 1234 registered")

It's better to use tabs to separate fields. Anyway, **sticking to the libraries your language/framework provides is usually the best strategy**. Try to avoid multi-line logs and context variables is preferable to separate extra fields. 

**Don’t log for troubleshooting purposes only!** Logs could provide much more useful information for audit (who did what), profiling (part of the application surrounded by logs will give enough information about operation duration in milliseconds).
What is Firebase? Products, Features & Preference.
Tags: firebase, baas, webdev, beginners
Published: 2023-03-01 16:43:16

## What is Firebase
Firebase is an application development platform which offers active Backend-as-a-Service (BaaS) for building dynamic web and mobile applications. Firebase was developed by Firebase, Inc. in 2011 which is now acquired by Google.

## Firebase Products
Firebase provides a wide range of products or services that include:

- **Real-time Database:** A cloud-based NoSQL database that allows developers to store and sync data across multiple devices in real-time.

- **Authentication:** A set of tools that allow developers to easily implement user authentication in their apps, including email and password authentication, as well as support for popular social media platforms such as Google, Facebook, and Twitter.

- **Cloud Firestore:** A flexible, scalable NoSQL cloud database that stores and syncs data in real-time.

- **Cloud Storage:** A scalable and secure object storage service for storing and retrieving files, such as images and videos.

- **Cloud Functions:** A serverless platform for building and deploying backend code, such as triggers for events in the Firebase Real-time Database or Cloud Storage.

- **Hosting:** A fully-managed hosting service for deploying web apps and static content to a global network of edge locations.

- **Analytics:** A powerful analytics platform that allows developers to track and understand user behavior in their apps, including demographics, user engagement, and revenue.

- **Crashlytics:** A real-time crash reporting service that allows developers to quickly identify and fix issues in their apps.

- **ML Kit:** A set of machine learning tools that allow developers to add advanced features such as text recognition, image labeling, and face detection to their apps.

## Why do most people prefer Firebase?
Many people use Firebase because it provides a comprehensive and easy-to-use set of tools and services that help them build and deploy their apps quickly and easily. The platform is particularly popular with web & mobile app developers, as it allows them to easily add features such as user authentication, real-time data syncing, and analytics to their apps without having to build and maintain their own backend infrastructure. Additionally, Firebase is built on Google's infrastructure and is therefore highly scalable and secure.

## Conclusion
In short, Firebase is a powerful and flexible platform that provides a wide range of services to help developers build and deploy their apps quickly and easily, making it one of the most popular development platforms available today.
Should you use Svelte or SvelteKit when working with a headless CMS?
Tags: headless, cms, svelte, discuss
Published: 2023-03-01 16:19:18

If you have ever been wondering what the best options are when it comes to working with Storyblok and Svelte vs. SvelteKit, you have come to the right place. 

First of all, let's start by saying both Svelte and SvelteKit are great options - Congrats on your choice ;) The outstanding developer experience, lovely community and great learning experience are part of what makes Svelte & SvelteKit great 🎉

Now let's dive into it: Svelte vs. SvelteKit - what's your go to when working with a headless CMS like Storyblok?

The answer is: it probably depends. (As always). Let's explore. 

What is Svelte?

Svelte is a modern JavaScript framework for building user interfaces. It allows developers to get creative, create reactive & high-performing applications. The fact that Svelte compiles your application at build time rather than at runtime makes it more performant and reduces application size. 

A big benefit of Svelte is its reactivity: Svelte updates the DOM "surgically" when the state of the app changes. Paired with the minimalistic code and straightforward syntax is probably what makes it so popular. 

Checkout [Rich Harris](https://twitter.com/Rich_Harris)' talk "Rethinking Reactivity"

{% youtube AdNJ3fydeao %}

What is SvelteKit? 
SvelteKit is to Svelte, what Next.js is to React: it's a higher-level framework build on top of Svelte. It comes with additional functionality, including server-side rendering, routing and code-splitting. All of these features improve the developer experience and help you build more performant apps - which makes it a great option for building more complex web apps. 

Which one should you choose when working with a headless CMS?

So, if you are planning on building a simple web app with Storyblok as your headless CMS, Svelte might be a solid choice. If you are planning on including more advanced features and would like to use SSR, SvelteKit might make your life a little easier. 

As you see, it depends ;) 

If you are interested in getting started with Storyblok and SvelteKit, our [Ultimate Tutorial Series](https://www.storyblok.com/tp/the-storyblok-sveltekit-ultimate-tutorial) might be a helpful resource. Go checkout part 1, ["Add a headless CMS to SvelteKit in 5 Minutes"](https://www.storyblok.com/tp/add-a-headless-cms-to-svelte-in-5-minutes) and let us know what you think! 

Have you worked with Storyblok and Svelte or SvelteKit? What's your experience? Which one do you prefer and for what use cases? We are super curious to learn more!
What's the biggest mistake you've ever made while coding?
Tags: discuss, beginners
Published: 2023-03-01 16:17:44

I really enjoy reading posts where authors talk through a mistake that they have made and what they learned from it. I find these posts to be really relatable and enjoyable to read. It's nice to hear someone teach you something from a place of humility, and when folks are talking about the lessons they've learned from their own mistakes, they often have an empathetic, approachable tone.

So, with that in mind, what's the biggest mistake you've ever made while coding? 

What problems did your mistake cause? How did it happen? And, what did you learn from it?
Difference between textContent vs innerText
Published: 2023-03-01 16:00:02

1. innerText was non-standard, textContent was standardized earlier.

2. innerText returns the visible text contained in a node, while textContent returns the full text. For example, on the following HTML
` <span>Hello <span style="display: none;">World</span></span>`
 innerText will return 'Hello', while textContent will return 'Hello World'.

3. As a result, innerText is much more performance-heavy: it requires layout information to return the result.
Nestjs: right settings for debugging
Tags: nestjs, debug, coding, learning
Published: 2023-03-01 15:25:13

Bored to use a lot of `console.log()` in your [Nestjs](https://nestjs.com) application? 
Want to become more productive and a better coder debugging directly in _VSCode_ to find out what's wrong in your stack trace? 

First thing first: 
open to _VSCode_ settings, then go to **_Extensions_** and then **_Javascript Debugger_**.
Find out **_Auto Attach Filter_** section and select **_Always_** from the dropdown.


Then, create a `launch.json` file in the .vscode folder of your project, then copy/paste the following code:

```json
{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Debug Nest Framework",
        "runtimeExecutable": "npm",
        "runtimeArgs": [
          "run",
          "start:debug",
          "--",
          "--inspect-brk"
        ],
        "autoAttachChildProcesses": true,
        "restart": true,
        "sourceMaps": true,
        "stopOnEntry": false,
        "console": "integratedTerminal",
      }
    ]
}
```
It enables debug and console.log() at the same time.

> <small>thanks to Sasha Ladnov: https://stackoverflow.com/questions/49504765/debugging-nest-js-application-with-vscode/63325135#63325135</small>

Be sure that in your package.json file there's the debug script:

```json
"scripts": {
    ...
    "start:debug": "nest start --debug --watch",
    ...
}
```

Now you're ready to debug your application!

Type `yarn start:debug` or `npm run start:debug` ...

Enjoy!

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egfghs0f3eqwrqvdf0y9.png" alt="Debug and console.log() at the same time">
  <figcaption>Debug and console.log() at the same time</figcaption>
</figure>
HELP Friends
Tags: css
Published: 2023-03-01 15:19:29

can someone help me fix this so my logo gets on the left side of the page , it is the middle
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sy0iwjh8771yasz40mqy.png)
#navbar__logo {
    background-color: #ffc6c2;
    background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
    background-size: 100%;
    position: relative;
    width: 150px;
    float:left;
    margin-top:16px;
    cursor: pointer;
}
Back to the Basics: Why HTML and CSS Are Still Very Much Required
Tags: beginners, codenewbie
Published: 2023-03-01 15:06:32

## Back to the Basics: Why HTML5 and CSS3 are Still Very Much Required

In the world of web development, it's easy to get caught up in the latest trends and technologies. With the rise of JavaScript frameworks and web apps, it's easy to forget about the basics: HTML and CSS. However, despite all of the advances in web development, HTML5 and CSS3 are still very much required.

## What is HTML5 and CSS3?

HTML5 and CSS3 are the latest versions of the markup language and stylesheet language respectively. HTML5 provides the structure and content of a webpage, while CSS3 provides the presentation and layout. Together, they form the backbone of web development.

## Why are they still important?

1. Compatibility: While newer technologies may be available, not all browsers and devices support them. HTML5 and CSS3 are widely supported, making them the most reliable option for web development. This means that your website is more likely to work on different devices and browsers, resulting in a better user experience.
2. Accessibility: HTML5 and CSS3 provide the necessary tools for creating accessible websites and web applications. With features like semantic markup and ARIA attributes, developers can create websites that are accessible to everyone, including people with disabilities. This is important for ensuring that everyone can access your content, regardless of their abilities.
3. Search engine optimization (SEO): Search engines rely on HTML to understand the content of a website. By using semantic markup and structured data, developers can help search engines understand the content of a website, which can improve search engine rankings. This means that your website is more likely to be found by people searching for relevant content.
4. Performance: HTML5 and CSS3 are lightweight and efficient, which can improve website performance. By using best practices like minification and optimization, developers can create websites that load quickly and provide a better user experience. This is important for keeping users engaged and reducing bounce rates.
5. Flexibility: HTML5 and CSS3 provide a lot of flexibility for web developers. They allow developers to create websites and applications that are responsive and adaptive to different screen sizes and devices. This means that your website can look good on desktops, laptops, tablets, and smartphones, providing a better user experience for all users.

## Conclusion

While it's important for web developers to stay up-to-date with the latest technologies, it's equally important not to forget about the basics. HTML5 and CSS3 are still very much required for web development, providing compatibility, accessibility, SEO benefits, improved performance, and flexibility. As the foundation of web development, they should not be overlooked. By using HTML5 and CSS3, web developers can create websites and applications that are reliable, accessible, performant, and flexible, providing a better user experience for everyone.
Oops ...
Tags: beginners, programming, job
Published: 2023-03-01 15:02:24

## So ... I've been busy 
I didn't realize it had been since August 2022 that I'd posted in here!? What the what. Let me try to catch all four of you that read this what I've been up too lol. 

First off.. **I GOT A JOB!** That's right, ya girl is a developer! But let's put it in reverse Terry. 

After August of last year I started putting feelers out. Going to meetups and just networking online via LinkedIn, Twitter, Discord, whatever. I am a member of a local Discord for Developers here in my town. I noticed in the "Introductions" section one gent was working at a local company. I'd heard of this company before but didn't realize that they were an IT Consulting Company. And just a few days prior one of my good friends sent me the job description for an Entry Level- Software Developer at the same company. Talk about here's your sign. I reached out to the developer on Discord and we agreed to meet for a drink. At our meeting I asked him about the company, what he enjoyed and didn't enjoy, career growth for a young developer and especially the chances of a self/community-taught developer. He was honest, reviewed my resume and portfolio on the spot and provided feedback. After I made those tweaks I sent it over to him thinking well if he does anything with this, cool. If not, I've got to keep applying. 

He did something with it. And forwarded it to the internal recruiter. Next thing I know I've got a recruiter screen, a first interview and a second interview. By November 2022, I was offered a position as a .NET Developer (I didn't know .NET or C# or any of that lol). I accepted. 

## Now what are you doing?! 

Fast forward to Jan 2023, I start the new job. This sector of the company does something called "Bootcamp". You are in a simulated environment, with a simulated client. You are on a team of developers but you each must build and deploy an application for the client. I don't wanna give too much away on the bootcamp but it was a wild ride. I just finished up Mid Feb just in time for Mardi Gras, and man did I celebrate haha. 

Now I am awaiting assignment, and working to learn TypeScript and Angular since that looks to be what I'll be working on for my first project. I just wanted to come through and update my little blog. It is crazy to see just how far I've come. I can't wait to continue to grow in this career and hopefully help others just like me get their foot in the door. 

We outside and online yall. :)
Discover joins FinTech Open Source Foundation (FINOS)
Tags: finos, opensource, linuxfoundation
Published: 2023-03-01 14:55:40

Read more about why Discover has joined FINOS: https://www.accesswire.com/viewarticle.aspx?id=741405

{% embed https://youtu.be/xquxzAVTbuM %}

"Joining the Fintech Open Source Foundation (FINOS) is a critical step for Discover. Delivering innovative, reliable, secure, and industry-leading technology is at the heart of our mission to build a brighter financial future for our customers. Today, we see innovation happening in the open - in robust communities like the one that has come together around FINOS. We look forward to many years of collaboration and development within the community." - Amir Arooni, Executive Vice President and CIO, Discover Financial Services.
Why Web3 is hyped so much by developers?
Tags: web3, beginners, news
Published: 2023-03-01 14:53:22

The decentralised web, or Web3, is a popular subject among developers. It's all the rage in the computer world and offers users improved security, privacy, and control. But why all the fuss about Web3?

Web3 is first and foremost about decentralisation. Web3 is intended to be decentralised, in contrast to the current web, which is centralised and governed by a small number of powerful companies. It's like the Wild West of the internet, except with more blockchain and less tumbleweed.

Speaking of blockchain, Web3 relies heavily on it. Developers are ecstatic about it since it offers a safe and transparent way to store and exchange data. That resembles a handshake that only cool kids know how to use.

Web3 is also user-centric, putting users in control of their data. It's a departure from the current web, where user data is collected, analyzed, and sold by tech giants without their consent. It's like giving users a superpower – the power to say "no" to data-hungry companies.

In addition to all of this, Web3 is expected to bring new business models that incentivize users to contribute to the network. This includes the use of tokens and other cryptocurrencies to reward users for their contributions. It's like getting paid to be a part of the coolest club in town.

Finally, Web3 is attracting attention from developers because of the potential for innovation. The decentralized web opens up new possibilities for applications and services that were not possible before. It's like the internet has taken a quantum leap forward – or at least a leap forward in blockchain-powered bunny hops.

In conclusion, Web3 is hyped up because it promises a more decentralized, user-centric, and innovative internet. It's like the internet's way of saying "I'm not a kid anymore, I'm a grown-up now." Sure, there are still many challenges to overcome, but the potential benefits of Web3 make it a topic worth exploring – and laughing about with your tech-savvy friends.
Instant merge conflict detection in VS Code
Tags: vscode, github, webdev, productivity
Published: 2023-03-01 14:50:42

Would you like to know  if your branch has conflicts _before_ you go to merge it in? 💥 
If so, check out our newest video or continue reading 👀

**TLDR**;

 {% embed https://www.youtube.com/shorts/52s32HOKaKA %}

*** 


1️⃣ To get started, make sure you have the [GitLive](https://marketplace.visualstudio.com/items?itemName=TeamHub.teamhub) extension installed. 



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


2️⃣ Now when you open a file from your repository you’ll see the changes from all other branches in the gutter of your editor. 



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


3️⃣ You can roll over the affected lines to see the details of the change, the author and the branch the change is coming from, or even cherry-pick the changes into your version of the file.



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

4️⃣ And if you make a conflicting change in the same place you’ll get this bright red indicator instantly showing you the conflict!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43ubw83pjpz68p7n0gks.png)
Paracetamol.ts💊| #22: Explica este código TypeScript
Tags: typescript, javascript, webdev, spanish
Published: 2023-03-01 14:00:00

## **<center>Explica este código TypeScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark> </center>

```ts
enum FinDeSemana {
  "Sabado",
  "Domingo",
}

console.log(FinDeSemana[0]) // 🤔
console.log(FinDeSemana[3]) // 🤔
```

- A. `Sabado`, `undefined`
- B. `0`, `undefined`
- C. `0`, `3`
- D. `Sabado`, `Domingo`

{% spoiler **Respuesta** %} 

✅ A. `Sabado`, `undefined`

En los enums de TypeScript tenemos una característica denominada Acceso Inverso, consiste en proporcionar el valor del enum para acceder al su descriptor.

En este caso, `FinDeSemana` es un enum numérico donde: 

* `console.log(FinDeSemana[0])` nos regresa `Sabado`, el descriptor correspondiente a la propiedad.

* `console.log(FinDeSemana[3])` nos regresa `undefined` por que no hay un valor `3` para ninguna propiedad.

Algo importante a recalcar es que el Acceso Inverso a enums solo esta disponible para enums numericos, intentar hacer lo mismo con enums de strings nos dará errores.

{% endspoiler %}

---

Puedes ver el post anterior acá:

{% post https://dev.to/duxtech/paracetamolts-21-explica-este-codigo-typescript-1m86?preview=d3cce74f17f0de327f5fd8a5f4c904a76665ab05de9a131ace2068cab32fd29f0c27f680f3d9bccb079a935ee324476f84fa1028e36246cab6c21453 %}
Document Plugin for Vue Application
Tags: discuss
Published: 2023-03-01 14:36:04

Hi All,
Looking for feedback from the community. We are building an application for document management using Vue framework and looking for free plugin that we can use to open the documents saved on the application. The documents can be of the following types:
Word
Excel
PDF
JPEG
PNG
Image
Video
others.....
Any feedback/suggestion will be greatly appreciated.
AJ
How to Create a GUI Application in Python
Published: 2023-03-01 14:32:10

Python GUI tutorial is a comprehensive guide that teaches how to create graphical user interfaces (GUI) using the Python programming language. The tutorial then covers the essential elements of GUI programming, such as creating windows, adding widgets (buttons, text boxes, menus, etc.), creating layouts, handling user events, and more. It also covers more advanced topics, such as creating custom widgets, creating animations, and integrating multimedia content.

Python is a high-level programming language that is widely used for various purposes such as web development, machine learning, scientific computing, and more. Python is also popular for its ease of use and readability, which makes it an excellent choice for beginners. In this article, we will focus on how to create a GUI application in Python using different tools and libraries.

Python GUI Tutorial Using Tkinter
Tkinter is a standard GUI toolkit for Python that is easy to use and comes preinstalled with most Python installations. It provides several GUI widgets such as labels, buttons, and text boxes, which can be used to create graphical user interfaces for Python applications.

To start, let’s create a simple Python GUI application using Tkinter. Open your Python editor or IDE, and create a new file called my_gui_app.py. Then, add the following code to create a simple window with a label widget.
`import tkinter as tk
root = tk.Tk()

root.title("My GUI Application")

root.geometry("300x200")

label = tk.Label(root, text="Hello, World!")

label.pack()


root.mainloop()`

When you run this code, it will create a new window with a label that says “Hello, World!”. Read More Click [Here](https://techzpad.com/python-gui-tutorial-how-to-create-a-gui-application)