teleren/devto huggingface dataset:
Say no to console.log!
Tags: javascript
Published: 2024-06-17 18:34:53

Do you always use `console.log` in your projects during development?

And even though we will keep using `console.log`, there are other alternatives that will make your development more fun and productive.

&nbsp;
> NOTE: If you are viewing log in a terminal especially if you are a backend developer then you can try `JSON.stringify(your_data, null, 2)` and use `console.log()` on the result. This will make sure that you don't get `{... value: [Object, Object]}` in the log and the log will also be formatted making it easier to read.

&nbsp;
## console.dir()
For hierarchical listing of arrays and objects.

```javascript
console.dir(["apples", "oranges", "bananas"]);
```

![console.dir example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ksvxyavsmejk1eb73u5.png)



&nbsp;
## console.table()
For rows and columns listing of arrays (might not be suitable for objects).

```javascript
console.table(["apples", "oranges", "bananas"]);
```

![console.table array example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwzq9uf4t643lorq1qbu.png)

```javascript
console.table({"a": 1, "b": 2, "c": 3});
```

![console.table object example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r45pzliuaaxbx4preo4k.png)



&nbsp;
## console.group()

```javascript
console.log('This is the top outer level');

console.group('Task 1');
console.log('Task activity 1');
console.log('Task activity 2');
console.groupEnd();

console.group('Task 2');
console.log('Task activity 3');
console.log('Task activity 4');
console.groupEnd();

console.log('Back to the top outer level');

```

![console.group example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qomtbv7ifve72l51hino.png)


  
&nbsp;
## console.time() & console.timeEnd()

```javascript
try {
  console.time("record-1");
  await someAsyncTask();
} catch (error) {
   // handle error
} finally {
  console.timeEnd("record-1");
}
```

![console.time log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d102ywfw05lmnp69lc0l.png)

  
  
&nbsp;
## console.clear()
This will clear the console.
  
  
&nbsp;
I hope this was helpful! 🚀
i got followers here a lot and quickly !
Tags: community, devto, opensource
Published: 2024-06-17 18:33:04


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

this is actually so crazy !!!


## thank you all so much !

i'll try to not let you down and keep the cool oss / ai / enterprise / fintech (not crypto, just normal) projects coming and make life on earth !
Not All Market Research Studies Need to Have Real-Time/Live Data Reporting!
Tags: realtime
Published: 2024-06-17 18:21:40

There’s a surge in demand for “Real Time/Live Data Reporting,” often utilizing Power BI Dashboards as part of market research deliverables.

Power BI Dashboards are fantastic for bringing data to life, allowing users to customize with minimal training. They’re visual, and as they say, “a picture speaks a thousand words.” In the “Age of Data,” such technologies have made data easily accessible and understandable, with “Real Time Updates” being a game-changer in data-driven decision-making.

Click: [](https://www.glasgowinsights.com/blog/not-all-market-research-studies-need-to-have-real-time-live-data-reporting/)

Industries like Retail, BFSI, Healthcare, Travel, Hospitality, Logistics, Manufacturing, and even Public entities have embraced this trend.  However, not all Market Research Studies may need “Real Time Updates,” even for continuously run Tracker studies.

Firstly, let’s define Tracker studies. There are two types of market research studies – Trackers and Adhocs. Trackers are continuously run market monitors which provide businesses with a steady stream of intelligence (like Mystery Shopping), while Adhocs (also called Need-Based, Custom, Dip-Stick studies) are built to answer specific business questions (like UX studies).

Now circling back to “Real Time/Live Data Reporting,” for Mystery Shopping studies, data is never reported in real-time due to the study’s design construct (pre-decided survey questionnaire, data analyzed and reported at a collated level, and seen basis pre-designated reporting heads, etc.).

Investing in real-time reporting should only be done if there’s a genuine need and capability for immediate action.

For instance, a company with multiple coffee shops may conduct Mystery Shopping to assess staff performance and customer experience.  But do they really need “Real Time/Live Data Reporting “?

Before opting for real-time reporting, stakeholders should justify its absolute necessity. If not warranted, Power BI Dashboards along with tools like Excel PivotTables and Online Dashboards can provide efficient monitoring and decision-making capabilities.

Final comment – a Dashboard is neither an insight nor a strategy toolkit. Invest wisely to maximize business benefits.

If you found this interesting, please do reach out to us to see how we can help you drive data driven business growth.
Contact Us
Office No 6, Unit 402, Level 4,
Crystal Tower, Business Bay,
PO Box 445190 Dubai, United Arab Emirates
Mobile: +971 55 9744360 | Phone: +971 4 566 8869
Website : [](https://www.glasgowinsights.com)
Fundamentos do desenvolvedor frontend
Tags: frontend, webdev, beginners, career
Published: 2024-06-17 18:05:37


![web developer in front of the computer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uai9181as4eryvch627f.jpeg)

Trabalho como frontend desde 2017 e atualmente tenho me especializado em React. Antes disso, atuei como fullstack, tendo a oportunidade de trabalhar com Delphi 7, C#, C++, Angular, ASP.NET e algumas outras tecnologias. Nesse período, priorizei a entrega, sempre focando no produto final e em agradar o cliente, mantendo-me dentro do prazo estabelecido.

Com o tempo, conheci pessoas tecnicamente muito competentes que me inspiraram e apoiaram no meu crescimento técnico e profissional. Comecei a me interessar em compreender cada parte do processo de desenvolvimento de um projeto (frontend). Neste artigo, gostaria de apresentar alguns tópicos e subtópicos que considero de extrema importância, seja você um desenvolvedor com mais experiência ou esteja ingressando agora no mundo da programação.

Estes são os tópicos de maior relevância, na minha opinião. Se faltar algo, sintam-se à vontade para sugerir nos comentários. Afinal, o objetivo deste artigo é compartilhar e também aprender. Abaixo de cada sessão, vou deixar um link para um material onde você pode começar a estudar cada tópico.

### Javascript

- Características e diferenças entre var, let e const;
- Primitive Types;
- for, while, map e foreach;
- Promise;
- Function e Arrow function;
- closure(avançado);

 https://www.w3schools.com/js/

### HTML

- Tags de elementos básicos;
- Acessibilidade;
- Local storage e Session Storage;

https://www.w3schools.com/html/html_intro.asp

### CSS

- Flexbox e grid;
- Design responsivo;

https://web.dev/learn/css?hl=pt

### Algoritmos e Estutura de dados

- Frequence count pattern;
- Sliding window pattern;
- Recusion;
- Pointers;
- BInary Search;
- Linear search;
- Merge Sort;
- Quick Sort;
- Hash Table;
- Graphs;
- Binary Tree;
- Singly linked List;
- Doubly linked List;

https://www.udemy.com/course/js-algorithms-and-data-structures-masterclass/

### Design Patterns

- Singleton;
- Observer;
- Decorator;
- Factory;

https://medium.com/better-programming/javascript-design-patterns-25f0faaaa15

Agora, vou focar um pouco na lib em que estou estudando e trabalhando. Nessa seção, acredito que cada um possa escolher o framework que mais gosta ou está familiarizado, seja por ter iniciado por ele ou por trabalhar e ter um contato diário.

### React

- DOM e Virtul DOM;
- React Hooks;
- Memoization;
- Typescript(aqui poderia ter um tópico próprio mas deixei como subtópico em react por acreditar que os dois estão bem ligados)
- webpack e vite;
- NextJs(SSR);
- Testes (Jest, Vitest ou outra lib de testes);
- Context API e Redux;
- Css in Js (Styled components);

https://react.dev/learn

Resumi em alguns tópicos assuntos que considero muito importantes para fundamentar e ajudar a compreender um pouco mais do que fazemos no nosso dia a dia. Nos próximos artigos, vou trazer informações e fontes com conteúdos detalhados dos tópicos acima, além de indicar onde estudar e praticar alguns deles.
Creative Full Screen Carousal Hero
Tags: codepen
Published: 2024-06-17 17:49:16

This CodePen pin showcases a creative full-screen carousel hero, designed to captivate users with high-impact visuals and smooth transitions. The carousel features multiple slides, each displaying a striking background image with a bold title and a call-to-action link.

**Key Features:**

Full-Screen Carousel: The carousel occupies the entire viewport height, providing an immersive browsing experience.
Responsive Design: The layout adapts seamlessly across different screen sizes, ensuring optimal viewing on desktops, tablets, and mobile devices.
Smooth Transitions: Slides transition smoothly with a sleek sliding effect, enhanced by Swiper.js, a modern touch slider.
Navigation Controls: Users can navigate through the slides using the 'PREV' and 'NEXT' buttons, or the progress bar at the bottom.
Typography: The text elements use the "Poppins" and "Fjalla One" fonts, adding a touch of modern elegance to the design.
Technologies Used:

HTML5: The structure of the carousel is built using semantic HTML5 elements.
CSS3: Custom styles are applied to enhance the visual appearance and ensure responsiveness.
Swiper.js: The popular Swiper library is utilized for the carousel functionality, providing smooth slide transitions and navigation controls.
jQuery: Simplifies JavaScript code for initializing the Swiper carousel and handling DOM manipulations.
Explore this pen to see a visually appealing full-screen carousel that can be a stunning addition to any modern website, perfect for showcasing featured content or high-quality images.

{% codepen https://codepen.io/CreativeSalahu/pen/abrErmK %}
Why CS50?
Tags: webdev, javascript, beginners, programming
Published: 2024-06-17 17:45:38


**Article on CS50 **

_Brief Introduction_ : 

Cs50 is a beginner-friendly course by Harvard University. It was taught by David Malan. It is a basic introduction to programming and computer science. No prior knowledge of programming or any programming language is required.

_Main_ :
Cs50 is a 25-hour course available on YouTube and the edx platform. it covers a range of topics from how the computer works to the concept of programming and what programming languages are. It also teaches how to write programs in various programming languages starting with a visual programming language like Scratch and then moving on to C - a high-level language but considered low-level because of its direct access to memory, it is also the foundation if most languages like, Python - a high-level language, Javascript - a high-level language, SQL - a query language for creating databases. He also teaches about Algorithms - step by step approach to solving a specific task and Data structures - a way of storing and managing data in the system.

Now let's talk about some of the main concepts of the course. 
At the start of the course, we get to learn what programming is. 

_What is Programming and programming language?_ 

Programming is the act of giving instructions to the computer to execute. The syntax in which these instructions are written is called a programming language. As we know Computers are machines and are only able to understand machine code (binary, 1’s, and 0’s) or instructions.  From now on I will call them codes. So how then does the computer understand our programs since they are mostly written in human-readable language? I want to introduce you to something called a compiler, a software that converts our source code into machine code so that the computer can read it and then execute it. 

_What are the concepts involved in programming? _

David teaches about 
Variables - a storage location used to hold data, I like to think of it as a box where you can save items (data) and use them anytime. 

Conditionals - these help us control the flow of our program based on whether a statement is true or false eg the if and else statements.

Loops - they help us run repeated codes effectively eg while loop and for loop.

Functions  - these are blocks of code that help us perform specific tasks and can be reused throughout our program. A function can take an argument which is later referred to as a parameter when called on. 

These concepts are unique to each programming language, their syntax and data types differ. 

_Conclusion_ - 

The most challenging concepts for me after watching the video are Algorithms and Data Structures, understanding Time Complexity, Big O notation, and some of the talked about data structures like Linked Lists, etc will take some time and effort on my part to fully grasp them.   Still, I believe that the CS50 course remains the best lecture online for anyone who is interested in learning programming and computer science because of David Malan's ability to simplify every detail.
React controlled and uncontrolled hooks
Tags: javascript, react, hooks, webdev
Published: 2024-06-17 17:43:47

In React, controlled and uncontrolled components are patterns used to manage form inputs. React Hooks introduced the concepts of controlled and uncontrolled hooks to manage state within functional components. Here’s an overview:

## Controlled Hooks:
**useState Hook:** With controlled hooks, state is managed directly by React. The `useState` hook allows you to declare state variables and update them using setter functions provided by React. When a component's state changes, React re-renders the component with the updated state.
```react
import React, { useState } from 'react';

function ControlledComponent() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
    />
  );
}
```
In this example, the input field’s `value` is controlled by the value state variable, and updates are handled by the `setValue` function.

## Uncontrolled Hooks:
**useRef Hook:** Uncontrolled hooks allow you to manage state directly within the DOM rather than through React’s state management system. The `useRef` hook creates a mutable ref object whose `current` property can hold a value that persists across renders without causing a re-render.
```react
import React, { useRef } from 'react';

function UncontrolledComponent() {
  const inputRef = useRef(null);

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Log Value</button>
    </div>
  );
}
```
In this example, the input field’s value is managed directly by the DOM via the `inputRef.current.value`, and updates are accessed without involving React's state management system.

## Choosing Between Controlled and Uncontrolled Hooks:
- **Controlled Hooks:** Use controlled hooks when you need React to manage and synchronize the state of form inputs across your application. Controlled components provide a single source of truth for form data, making it easier to track and manage changes.
- **Uncontrolled Hooks:** Use uncontrolled hooks when you need direct access to DOM elements or when dealing with large forms where controlled components might lead to performance issues. Uncontrolled components can be faster because they don’t trigger re-renders for every state change. However, they may be harder to track and manage, especially in complex applications.

Both controlled and uncontrolled hooks have their use cases, and the choice depends on your specific requirements and preferences.
633. Sum of Square Numbers
Tags: php, leetcode, algorithms, programming
Published: 2024-06-17 17:33:13

633\. Sum of Square Numbers

Medium

Given a non-negative integer `c`, decide whether there're two integers `a` and `b` such that `a2 + b2 = c`.

**Example 1:**

- **Input:** c = 5
- **Output:** true
- **Explanation:** 1 * 1 + 2 * 2 = 5

**Example 2:**

- **Input:** c = 3
- **Output:** false

**Constraints:**

- <code>0 <= c <= 2<sup>31</sup> - 1</code>


**Solution:**

```
class Solution {

    /**
     * @param Integer $c
     * @return Boolean
     */
    function judgeSquareSum($c) {
        for ($i = 2; $i * $i <= $c; $i++) {
            $count = 0;
            if ($c % $i == 0) {
                while ($c % $i == 0) {
                    $count++;
                    $c /= $i;
                }
                if ($i % 4 == 3 && $count % 2 != 0)
                    return false;
            }
        }
        return $c % 4 != 3;
    }
}
```



**Contact Links**

- **[LinkedIn](https://www.linkedin.com/in/arifulhaque/)**
- **[GitHub](https://github.com/mah-shamim)**
Recursion
Tags: devchallenge, cschallenge, computerscience, beginners
Published: 2024-06-17 17:30:34

* is a submission for [DEV Computer Science Challenge v24.06.12: One Byte Explainer](https://dev.to/challenges/cs).*

## Explainer

<!-- Explain a computer science concept in 256 characters or less. -->
**Recursion**: A function calling itself to solve smaller instances of the same problem. Key in algorithms like sorting and searching. Helps break down complex tasks but requires a base case to avoid infinite loops. Essential in computer science for elegant solutions.
## Additional Context

<!-- Please share any additional context you think the judges should take into consideration as it relates to your One Byte Explainer. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image to your post (if you want). -->

<!-- Thanks for participating! -->
Aprendizaje por Refuerzo Profundo en Ambientes No Estacionarios
Tags: ia, ai, drl
Published: 2024-06-17 17:27:24

El aprendizaje por refuerzo profundo (DRL, por sus siglas en inglés) ha demostrado ser una herramienta poderosa para la toma de decisiones en una amplia variedad de dominios. Sin embargo, la mayoría de los algoritmos de DRL asumen que el entorno en el que operan es estacionario, es decir, que las dinámicas del entorno no cambian con el tiempo. Esta suposición no siempre es válida en aplicaciones del mundo real, donde los entornos pueden ser altamente dinámicos y no estacionarios.

Los ambientes no estacionarios presentan un desafío significativo para los algoritmos de DRL porque las políticas aprendidas pueden volverse obsoletas rápidamente cuando las condiciones del entorno cambian. Para abordar estos desafíos, se han desarrollado varias técnicas avanzadas que permiten a los agentes de DRL adaptarse y generalizar mejor en estos entornos cambiantes.

Una estrategia clave es la transferencia de políticas, que implica entrenar al agente en múltiples entornos relacionados para que pueda transferir el conocimiento adquirido de un entorno a otro. Esto permite al agente adaptarse más rápidamente a nuevas situaciones, aprovechando la experiencia previa. Técnicas como la transferencia de políticas multi-entorno y el aprendizaje por transferencia se utilizan comúnmente en este contexto.

Otra aproximación es la adaptación continua, donde el agente sigue actualizando su política a medida que interactúa con el entorno. Esto puede lograrse mediante el uso de técnicas de aprendizaje en línea, donde el agente ajusta su modelo continuamente basándose en las nuevas experiencias. Además, se puede emplear el entrenamiento meta, que permite al agente aprender a aprender, es decir, optimizar su capacidad para adaptarse rápidamente a nuevas tareas mediante un entrenamiento previo en una variedad de tareas.

Los modelos de mundo también juegan un papel crucial en ambientes no estacionarios. Estos modelos permiten al agente predecir futuras transiciones de estado y recompensas, lo que facilita la planificación y adaptación en tiempo real. El uso de modelos de mundo adaptativos, que se ajustan continuamente a los cambios del entorno, puede mejorar significativamente la robustez del agente.

Finalmente, la robustez adversarial es una técnica que prepara al agente para enfrentar cambios inesperados y situaciones adversas. Al exponer al agente a perturbaciones y escenarios adversos durante el entrenamiento, se puede mejorar su capacidad para manejar cambios no anticipados en el entorno.

En resumen, el aprendizaje por refuerzo profundo en ambientes no estacionarios requiere técnicas avanzadas para la transferencia de políticas, adaptación continua, modelos de mundo adaptativos y robustez adversarial. Estas estrategias permiten a los agentes de DRL mantener un rendimiento óptimo en entornos dinámicos, abriendo nuevas posibilidades para la aplicación de la inteligencia artificial en el mundo real.

[Jordi G. Castillón](https://jordigarcia.eu/)
Registration Closed for Hack4Bengal, But You Can Still Join the Fun!
Published: 2024-06-17 16:54:42

### Introduction
Hack4Bengal 3.0, one of the most anticipated hackathons of the year, has officially closed its registration. While the main event slots are filled, the excitement doesn't end here. There are still plenty of ways for tech enthusiasts and innovators to participate in the vibrant community and engaging activities surrounding the event.

### Hack4Bengal: A Brief Overview
Hack4Bengal is renowned for bringing together some of the brightest minds in technology and innovation. Participants from across the globe come to collaborate, innovate, and push the boundaries of technology. With a wide range of challenges and opportunities, the hackathon fosters creativity, learning, and networking.

### Join the Side Events
Even though the primary registration is closed, Hack4Bengal offers various side events that are open to the public. These events provide fantastic opportunities to learn, interact, and showcase your skills.

#### Workshops
Hack4Bengal hosts numerous workshops on cutting-edge technologies, programming languages, and development tools. These sessions are designed for both beginners and experienced developers. Attending these workshops can enhance your skills and provide valuable insights into the latest tech trends.

#### Networking Sessions
Networking is a crucial part of any tech event. Hack4Bengal's networking sessions allow you to connect with industry professionals, mentors, and fellow tech enthusiasts. These interactions can lead to collaborations, job opportunities, and long-lasting professional relationships.

#### Mini-Challenges
Participate in mini-challenges that test your coding and problem-solving skills. These short, intense competitions are perfect for showcasing your abilities and winning exciting prizes. They also provide a taste of the hackathon experience without the long-term commitment.

#### Keynote Speeches and Panels
Learn from the experts through keynote speeches and panel discussions. Industry leaders and innovators will share their experiences, insights, and predictions about the future of technology. These sessions are a goldmine of information and inspiration for anyone passionate about tech.

### Stay Updated
Follow Hack4Bengal on social media and regularly check their website for updates on upcoming events and opportunities. Engaging with their online community can also provide valuable connections and insights.

### Conclusion
While the main event registration for Hack4Bengal 3.0 is closed, the hackathon's spirit of innovation and community lives on through various side events and activities. Don't miss out on these opportunities to learn, network, and participate in the tech extravaganza. Join the Hack4Bengal community and be a part of something extraordinary!

For more information, visit the [Hack4Bengal website](https://www.hack4bengal.tech/).