teleren/devto huggingface dataset:
Flutter🐬 Auto increment shell command!
Tags: flutter, android, ios, shell
Published: 2023-02-28 23:52:18

Before deploy a flutter project, you always need to increment 
* version number
* version code

In its pubspec.yaml

It’s so lazy.

Fortunately, below one line command would automatically increment them.

```increment.sh
# Increment version
perl -i -pe 's/^(version:\s+\d+\.\d+\.\d+\+)(\d+)$/$1.($2+1)/e' pubspec.yaml
```

Or run it by shellscript so that would be more simpler.
npm install vs npm ci: qual utilizar?
Published: 2023-02-28 23:45:55


![Logo do npm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lxrs6f3sr201usinetn.png)


O comando padrão pra instalar as dependências é o `npm install`. Se você usa o npm há certo tempo, provavelmente já utiliza esse comando sempre que precisa instalar as dependências de um projeto.

O que nem todo mundo sabe é que desde o npm v6, existe um comando similar ao `npm install` chamado `npm ci`.

Nesse artigo, vamos entender as principais diferenças entre eles e quando utilizar cada um.

## npm install

O `npm install` instala os pacotes do package.json e suas dependências. Caso alguma dependência possua o `^` ou ou `~`, ele procura novas versões e atualiza o package-lock.json com a árvore gerada.

## npm ci

`npm ci`, ou "clean install" é utilizado para instalar as dependências do zero. Diferente do `npm install`, esse comando instala as dependências a partir do `package-lock.json` ou do `npm-shrinkwrap.json`. 

Isso garante que você irá sempre instalar a mesma versão de cada pacote, não importa quantas vezes o comando for executado e nem se houver atualizações disponíveis. Ideal para ambientes de build automatizado ou integração contínua (CI).

Como ele pula certas etapas como atualizar o package-lock.json e resolver as dependências, esse comando também é muito mais rápido do que o `npm install`.

## Qual usar?

- No seu ambiente de desenvolvimento, ou sempre que você quiser atualizar as dependências elegíveis, vale continuar usando o `npm install`

- Já no caso de instalar as dependências no seu servidor de integração contínua, ou até mesmo instalar local mas sem atualizar nada, vá de `npm ci`

## Conclusão

Ambos os comandos são similares mas têm aplicações bem distintas. Eu uso o `npm install` no dia a dia, mas recomendo fortemente a utilização do `npm ci` no servidor de integração contínua. Além de ter builds mais confiáveis sem a possível atualização de versões, ele ainda vai ficar mais rápido.
Day 703 : Famous Last Words
Tags: hiphop, code, coding, lifelongdev
Published: 2023-02-28 23:07:01

_liner notes_:
- Professional : Had a meeting with my manager to talk about the projects I'll be working on this sprint. I worked on an outline for a demo/sample application that I'll be coding this sprint. That will happen after I refactor some older demos to use an upcoming SDK. Luckily it won't take much, I think. Famous last words. haha. Rest of the day was spent getting an older demo running. Got it working but had to do some things that I made a note of. It's an internal tool, so it should be alright.

- Personal : Last night, I went through a bunch of tracks for the radio show. Worked a little on my side project. I did a bunch of research on trying to abstract the URL of the endpoints so that when someone else installs the application, it will use their URL to make the calls. Finished the night watching "Vinland Saga".

![A field in Piopio, New Zealand with very tall grass and a gravel road with mountains in the distance.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frs9eqxqzn0nh54gcy88.jpg)

Going to listen to more tracks for the radio show. Then I want to work on my side project to at least get the URL abstraction working. After that, I want to get events and locations saved to the settings file. There's more I want to do, but if I can get that done, I'll feel good. I'll then end the night watching a couple of episodes of "Spy x Family".

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube YGPU4op0NH0 %}
Docker Fundamentals
Tags: aws, cloud, awscommunity, 100daysfcloud
Published: 2023-02-28 23:02:55

[59/100] #100DaysOfCloud Today, I started learning Docker Fundamentals by Adrian Cantrill. While doing the Free AWS Cloud Project Bootcamp by Andrew Brown, I realized that I needed to know and understand more about Docker and checked out the suggested course.

I learned some basics about Docker and it's Architecture. 
- Docker host or container host is the physical hardware. Containers run on them.
- On top of this is th host OS.
- On top of this is a container engine called Docker Engine.
- By comparison, it is lighter than a hypervisor because it has less to do.
- Any containers running on the Docker host shares the same OS.
- Basically, each container runs as a process in that OS which means that containers don't need their own OS.
- They only need to run the libraries and runtime environment and the application itself and because of this containers are much smaller an lightweight compared to the same application run on an virtual machine.
- Containers can infect other containers as they are not strongly isolated when they use resources aggressively.

I also installed Docker Desktop which installs dockerd. dockerd is the server side component that manages containers as well as command line and graphical client that can be used to interact with Docker.

[GitHub](https://github.com/aaditunni/100DaysOfCloud/blob/main/Journey/059/Readme.md)
Most effective portfolio website features for showcasing a programmer's skills
Tags: webdev, beginners, portfolio, programming
Published: 2023-02-28 22:18:31

Creating a personal website can be a daunting task, especially for new developers. However, with some attention to detail, you can create a website that stands out from the crowd and helps you land your dream job.

When creating your web developer portfolio website, there are several key features that you should focus on:

- **Clear Call-to-Action (CTA) Button:** Your website should have a clear and prominent CTA button that allows visitors to quickly and easily learn more about you and your work.
- **Dark mode:** Many portfolio websites are now using dark backgrounds with light text for a modern and stylish look.
- **Minimalism:** Simple and clean designs are becoming increasingly popular, with minimalistic layouts, typography, and color schemes.
- **Illustrations and animations:** Hand-drawn illustrations and subtle animations can add a touch of personality and creativity to a portfolio website.
- **3D elements:** Three-dimensional elements like depth, shadows, and overlapping layers can make a portfolio website more visually engaging and dynamic.
- **Clean and User-Friendly Layout:** Your website should have a clean and easy-to-navigate layout that is free of clutter and confusion.
- **Concise and Engaging Content:** Your website should have concise and engaging content that highlights your personal talent and professionalism.
- **Meaningful Achievements:** Your website should showcase your meaningful achievements and core issues that users care about.
- **Mobile Responsiveness:** Your website should be designed with mobile responsiveness in mind, so that it can be easily viewed and accessed on a variety of devices.

**Cool Developer Portfolios you should Check out**

1. https://www.davidobodo.com/
2. https://www.micheleverze.com/
3. https://luziaconzeta.net/about/
PHP
Published: 2023-02-28 21:42:12

Boa noite a todos, preciso de uma ajuda, sou iniciante na area de programação e preciso monta uma arvore de natal em php.
segue meu código.

<?php
if(isset($_POST['enviar'])){
   $linhas  = $_POST['linhas'];
   $tamanho = ($linhas) * (2 - 1);
   $espacos = ($tamanho - 1) / 2;
   $i       = 1;

while ($i <= $linhas) {
 echo  "*" *  ($espacos - $i + 1) && "*" * (2 * $i - 1) ; //esta é a linha do erro.
 $i = $i + 1;
}
    
}

?>
quando clico em enviar aparece este erro

Warning: A non-numeric value encountered in C:\xampp\htdocs\Projetos que deram Certos\arvore25.php on line 41
6 Secrets to Become a Good Leader: What You Need to Know
Tags: leadership, webdev, beginners
Published: 2023-02-28 21:26:29

Leadership is a skill that is not easily acquired. It takes years of practice and dedication to become a good leader but there are a few key secrets that can make all the difference.

In this article, we explore the six most important things any leader needs to know in order to be an effective leader and have a long-lasting impact on their team. Read on to find out what these secrets are and how they can help you become a great leader.
Be the hardest worker
Being the hardest worker does not mean working the longest hours. It means being focused and efficient with your time. It means setting goals and working towards them with determination. Leaders are not born, they are made. And becoming a great leader requires hard work.

But it is worth it. Hard work pays off in the form of success. When you are the hardest worker, people take notice. They see your dedication and they respect you for it. Being the hardest worker also means being a good role model for others. When you set the example, others will follow.

2. Motivate people around you
If you want to be a great leader, it’s important to motivate the people around you. Here are some tips on how to do that:

1. Set a good example. If you’re not motivated, it’ll be hard for others to be. Show your team that you’re committed and enthusiastic about your work, and they’ll be more likely to follow suit.
2. Communicate effectively. Let people know what your vision is and why it’s important. Be clear and concise in your instructions and give people regular feedback so they know how they’re doing.
3. Delegate tasks and empower others. Give people responsibility and trust them to do their jobs well. This will help them feel more invested in their work and motivated to achieve results. 
[Read more](https://topscrets.com/how-to-become-a-good-leader/)
Gnarly News February 2023
Tags: netlify, gatsby, typescript, news
Published: 2023-02-28 21:15:25

The software development landscape is constantly changing. As a software consultancy, it’s our responsibility to keep our finger on the pulse of the industry. Here are some headlines that caught our attention recently. 

## [Netlify Acquires Gatsby](https://www.netlify.com/press/netlify-acquires-gatsby-inc-to-accelerate-adoption-of-composable-web-architectures/)

In the [Gnarly News for November 2022](https://www.thegnar.com/blog/gnarly-news-november-2022), we expressed our astonishment that Shopify had acquired Remix. This month we were again surprised to learn about another recent development in tech: Netlify acquired Gatsby! But this one makes more sense right off the bat. We already know that Netlify is deeply invested in the OSS community and static site generators in particular – their [support of SolidJS development](https://dev.to/ryansolid/when-netlify-asks-you-to-full-time-oss-you-say-yes-5ccf) is one other readily available example of their commitment in that arena. So combining their efforts with Gatsby seems like a match made in heaven.

## [Twitter Replaces Free API with a Paid Tier](https://www.theverge.com/2023/2/2/23582615/twitter-removing-free-api-developer-apps-price-announcement)

Be it for research, utility, or shitposting - the Twitter API has long been lauded as one of the Web 2.0 success stories, allowing developers to interact with the social platform on any front. This has changed recently, with Twitter abruptly cutting access to its free API and instituting a hasty payment scheme for API access. Given that they’ve been auctioning off everything not bolted down to their San Francisco HQ, this kind of craven move can be expected. To the moon, Elon.  

## [TypeScript 5.0-beta Released](https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/?ck_subscriber_id=1830129734)

TypeScript 5.0-beta was released this month. Not only did the team add new features, but they also managed to make the packages smaller and faster. 🥇Our team is most excited about the implementation of the decorator pattern which will support the upcoming (much anticipated) ECMAScript feature.


## Contributors

* [Alex Jarvis](https://github.com/alxjrvs)
* [Ethan Fertsch ](https://github.com/efertsch)
* [Royce Threadgill](https://github.com/jrthreadgill)

_Learn more about how The Gnar [builds software](https://www.thegnar.com/software-development)._
JavaScript Tutorial Series: Intro to JS DOM
Published: 2023-02-28 21:08:11

Document Object Model is what JavaScript DOM stands for. JavaScript can communicate with HTML and XML documents using this programming interface for web documents. JavaScript can access and modify the elements, attributes, and content of an HTML or XML document by using the Document Object Model (DOM), which is essentially a tree-like structure.


![Javascript DOM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hr0q09vayyz9ce5r1s8.png)
_Source: [stack overflow](https://i.stack.imgur.com/JatOa.png)_

Programmers can dynamically alter a web page's design and content depending on user interactions or other events using 
JavaScript DOM, which provides a collection of objects, properties, and methods. JavaScript, for instance, can be used to add or remove DOM elements, modify the text or attributes of elements, or produce animations and effects.

A fundamental skill for web developers is knowing how to work with JavaScript to manipulate the DOM because it enables them to make dynamic, interactive websites that improve user experience. Web applications can be made by programmers using the JavaScript DOM to react instantly to user input without requiring page refreshes or server requests.

In the upcoming posts we're going to learn: 

- How to edit HTML elements' content
- How to modify HTML elements' style (CSS)
- Respond to HTML DOM events
- Adding and removing HTML elements
Call Stack - A simplified intro
Tags: javascript, beginners, tutorial
Published: 2023-02-28 21:04:40



## What is it?
The call stack is a data structure that records the execution of functions in JavaScript. Whenever a function is called, it is added to the top of the call stack, and when a function completes its execution, it is removed from the stack. The call stack follows a last-in, first-out (LIFO) principle, meaning that the last function added to the stack is the first function to be executed.


In order to better manage this, the JS engine uses the call stack to handle execution contexts. They are the following:

**Main ones**
  - Global execution context - for code that’s in the global context
  - Function execution contexts - for code that’s inside a function

**Occasionally**
  - Eval execution context - for when we use the eval method (creates its own execution context)

When you execute a script, the JavaScript engine creates a global execution context and pushes it on top of the call stack.

Whenever a function is called, the JavaScript engine creates a function execution context for the function, pushes it on top of the call stack, and starts executing the function.

If a function calls another function, the JavaScript engine creates a new function execution context for the function being called and pushes it on top of the call stack.

When the current function completes, the JavaScript engine pops it off of the call stack and resumes the execution where it left off.The script will stop when the call stack is empty.

In order to better understand this, consider the following example code:

```

function one() {
  console.log('one');
}

function two() {
  console.log('two');
  one();
}

function three() {
  console.log('three');
  two();
}

three();
```
In this example, the three function is called, which then calls the two function, which in turn calls the one function. The call stack will record the execution of these functions in the following order:

```
1. three
2. two
3. one

```
Stack empties in following order:

```
1. one
2. two
3. three

```
When the one function completes its execution, it is removed from the stack, and the same goes for the two function. Finally, when the three function completes its execution, it is removed from the stack, and the stack becomes empty again.

**Summary**

 - The JS engine uses a call stack to manage execution contexts.
 - The call stack uses the stack data structure that works based on the LIFO (last-in-first-out) principle. It's similar to array and uses methods pop and push.
 - Only one function is removed at a time because JS is single-threaded. It can only handle one task at a time. 

**Where can we learn more?**

[Philip Roberts - JSConf EU]  (https://www.youtube.com/watch?v=8aGhZQkoFbQ&ab_channel=JSConf)
[Chrome DevTools] (https://developer.chrome.com/docs/devtools/#stepping)

Thanks for reading and I would love to connect on [Twitter](https://twitter.com/kurgeye)!
#DEVDiscuss: Building Your Own AI 🤖
Tags: devdiscuss, machinelearning, ai, gpt3
Published: 2023-02-28 20:53:55

*image created by [Margaux Peltat](https://www.patreon.com/margauxpeltat) for the [Chilled Cow YouTube channel](https://www.youtube.com/watch?v=lTRiuFIWV54)* 

Time for #DEVDiscuss — right here on DEV 😎

{% embed https://dev.to/vincenius/coding-your-own-ai-in-2023-with-fastai-2pbk %}

Inspired by @vincenius's [Top 7](https://dev.to/devteam/top-7-featured-dev-posts-from-the-past-week-4e99) post, tonight’s topic is...building your own AI 🤖

---

Questions:
- **Have you tried to build your own machine learning model or AI-based application?**
- **What tools did you use to build it? What tools would you recommend, and which ones should devs stay away from?**
- **For you, is working with ML models and AI a career, a hobby/interest, both, or neither?**
- **Any triumphs, fails, or other stories you'd like to share on this topic?**
A first look at Svelte for React Developers
Tags: react, svelte, webdev, javascript
Published: 2023-02-28 20:47:23

If you're a React developer looking for a new way to build web applications, you may have heard of Svelte. Svelte is a modern framework which aims to provide a more efficient and performant way of building web applications compared to traditional frameworks like React. In this post, we're going to look at some common snippets of react code and their equivalent in Svelte.

`useState()` hook

React
```
let [var, setVar] = useState(initialValue)

// mutate
setVar(newValue)
```

Svelte
```
let var = initialValue

// mutate
var = newValue
```

As we can see here, react uses a useState hook, which has an initial value, a state variable and a function to update the variable. Whereas in svelte, the variable's initial value is declared, and mutated by overwriting the variable, without the need of a function for updating. This results in much cleaner, easier to read code.

`useMemo()` hook

React
```
const memoized = useMemo(() => expression,
[dependancy1, dependancy2, ...]
)
```

Svelte
```
$: memoized = expression
```

Here, the useMemo hook takes 2 arguments, a function that returns the value to be memoized and an array of dependencies that the function depends on. If any of the dependencies change, the memoized value is recomputed, otherwise, it is returned from cache without re-executing the function. Whereas in Svelte, the $ sign is used, which means it is a reactive declaration, which is then used to define a variable that depends on one or more other variables. When any of the variables that the reactive declaration depends on change, the reactive declaration is re-evaluated. This, again, results in a much cleaner, easier to read code.

Iteration when rendering

React
```
<ul>
{list.map(item => {
return <li>{item}</li>
})}
</ul>

// with index
{list.map((item, index) => {
}))

// with key
{list.map(item =>
<div key={item.key}>...</div>
)}
```

Svelte
```
<ul>
{#each list as item}
<li>{item}</li>
{/each}
</ul>

// with index
{#each list as item, index}
...
{/each}

// with key
{#each list as item (item.key)}
...
{/each}
```

Event handlers

React
```
<div onClick={handler} />

const handler = event => {
event.preventDefault()
}

const handler = event => {
event.stopPropagation()
}
```

Svelte
```
<div on:click={handler} />

<div on:click|preventDefault={handler} />

<div on:click|stopPropagation={handler} />
```

In conclusion, Svelte offers a fresh and more efficient approach to building web applications compared to traditional frameworks like React. As we have seen from the snippets of code in this post, Svelte's syntax is simpler and more concise, resulting in cleaner and easier to read code. While there may be a learning curve for React developers transitioning to Svelte, the benefits of improved performance and developer experience make it well worth the effort. Whether you're building a small application or a large-scale project, Svelte's modern approach to web development can help you create better user experiences while saving you time and effort.
Simple PHP AJAX using JQuery
Tags: webdev, javascript, php, programming
Published: 2023-02-28 20:22:15

{% embed https://www.youtube.com/watch?v=pELGoSKnTRs %}

In this tutorial, we will learn how to create a simple AJAX application using PHP and JQuery. AJAX is a powerful technique that enables web pages to update content dynamically without requiring a page refresh. By the end of this video, you will be able to build a functional AJAX application using PHP and JQuery.

We will start by explaining the basics of AJAX and how it works with PHP and JQuery. Then, we will walk through the steps of creating a simple AJAX application, including setting up the HTML and JavaScript, writing the PHP code to handle the AJAX request, and testing the application.

Some of the topics we will cover include:
✅ The basics of AJAX and how it works
✅ Setting up the HTML and JavaScript for an AJAX application
✅ Writing PHP code to handle AJAX requests
✅ Testing the AJAX application

By the end of this tutorial, you will have a solid understanding of how to build a simple AJAX application using PHP and JQuery. You'll be able to use this knowledge to create more complex AJAX applications and add dynamic functionality to your web pages. Thank you for watching!
WHY OS and WHAT is OS :)
Tags: day1, interviewpreparation, operatingsystem
Published: 2023-02-28 19:59:30


![WHY OS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sjp9a7arzek7yqi6gvq.png)


WHAT is **an operating system** ?? 
1. OS is made up of System Software . 
2. OS is a piece of **software** that **manages all the resources** of a computer system ,both hardware and software.
3. OS **provides an environment** in which the user can
**execute** his/her **programs** in a convenient and efficient manner .
4. Other than this OS **acts as an interface** between **user and computer H/W** by helping user to Access computer H/W . And It hides complexity of H/W.