teleren/devto huggingface dataset:
What is Flutter Layout Builder?
Published: 2022-10-22 02:52:53

In Flutter, LayoutBuilder Widget is similar to the Builder widget except that the framework calls the builder function at layout time and provides the parent widget's constraints. This is useful when the parent constrains the child's size and doesn't depend on the child's intrinsic size

In Flutter, it takes only a few steps to put text, an icon, or an image on the screen.

Select a layout widget.
Create a visible widget.
Add the visible widget to the layout widget.
Add the layout widget to the page.


You can read this article to learn more about Flutter layout builder: 
[Flutter layoutbuilder widget example](https://flutterservice.com/flutter-layoutbuilder/)
You can also learn more from this website:[Mobile app development](https://coseries.com/)
How to switch the image on Android?
Published: 2022-10-22 02:49:54

Sometimes you don't want an image to appear abruptly on the screen, rather you want to apply some kind of animation to the image when it transitions from one image to another. This is supported by android in the form of ImageSwitcher.

An image switcher allows you to add some transitions on the images through the way they appear on screen. In order to use image Switcher, you need to define its XML component first. Its syntax is given below −

<ImageSwitcher
   android:id="@+id/imageSwitcher1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_centerHorizontal="true"
   android:layout_centerVertical="true" >
</ImageSwitcher>

Now we create an intance of ImageSwithcer in java file and get a reference of this XML component. Its syntax is given below −

private ImageSwitcher imageSwitcher;
imageSwitcher = (ImageSwitcher)findViewById(R.id.imageSwitcher1);
The next thing we need to do implement the ViewFactory interface and implement unimplemented method that returns an imageView. Its syntax is below −

imageSwitcher.setImageResource(R.drawable.ic_launcher);
imageSwitcher.setFactory(new ViewFactory() {
   public View makeView() {
      ImageView myView = new ImageView(getApplicationContext());
      return myView;
   }
}
The last thing you need to do is to add Animation to the ImageSwitcher. You need to define an object of Animation class through AnimationUtilities class by calling a static method loadAnimation. Its syntax is given below −

Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left);
imageSwitcher.setInAnimation(in);
imageSwitcher.setOutAnimation(out);  

You can learn more about image switcher on android from this article: [Image Switcher in Android Example Programmatically](https://flutterservice.com/image-switcher-in-android-example/)
Render Props in a React Functional Components
Published: 2022-10-13 18:42:31

I think render props is a little more straightforward to implement in Functional Components compared to the class components.

One example that I have here is the the `OutsideClickObserver.jsx` HOC that I created to observe outside click of from the wrapper div.

```
/**
 * Component that alerts if you click outside of it
 */
 export default function OutsideClickObs(props) {
  const wrapperRef = useRef(null);
  //Take note to use a function keyword as the shorthand does not work as expected ( error: is not a function)
  useOutsideClickObserver(wrapperRef, (clickedOutside, result)=>{
    if(clickedOutside){
      props.outsideClickHandler();
    }else{
      //nothing here.
    }
  });

  return <div ref={wrapperRef}>{props.children}</div>;
}
```

In this example we are using `props.children`, which is fine actually. 
However if we want to achieve similar results compared to the example given in React [documentation](https://reactjs.org/docs/render-props.html), then all we have to do is to pass a `props.component` to our HOC and render that instead of the `props.children`.
Parcelas No WooCommerce
Tags: wordpress, woocommerce, php
Published: 2022-10-22 01:55:02

Caso precise incluir parcelas em seu WooCommerce, tem como fazer de modo simples, sem a necessidade do uso de plugins, veja o exemplo abaixo:

```php
<?php 
$getPrice = $product->get_price(); 
$customInstalment = $getPrice / 3;
$formatNumber = number_format($customInstalment, 2, ',', '.');
echo 'Em até 3x de R$ '.$formatNumber;

```

Basta adicionar esse código no template de exibição do preço, também é possível alterar o dividendo por uma variável, buscando de um campo personalizado, assim o usuário poderá adicionar produtos com diferentes parcelamentos.
[SwiftUI] Animate placeholder modifier for View
Tags: swiftui, swift, ios, uiux
Published: 2022-10-22 01:41:28


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0km0a51cizeqesik1gus.gif)


## How to use
```
// prepare `isLoading: Bool` variable.
VStack { ... }
    .redacted(reason: viewModel.isLoading ? .placeholder : [])
    .animatePlaceholder(isLoading: $isLoading)
```

---

## 2 Steps

1. Create AnimatePlaceholderModifier
2. Add extension method to View


**Step1: Create AnimatePlaceholderModifier**
```
struct AnimatePlaceholderModifier: AnimatableModifier {
    @Binding var isLoading: Bool
    
    @State private var isAnim: Bool = false
    private var center = (UIScreen.main.bounds.width / 2) + 110
    private let animation: Animation = .linear(duration: 1.5)
    
    init(isLoading: Binding<Bool>) {
        self._isLoading = isLoading
    }

    func body(content: Content) -> some View {
        content.overlay(animView.mask(content))
    }
    
    var animView: some View {
        ZStack {
            Color.black.opacity(isLoading ? 0.09 : 0.0)
            Color.white.mask(
                Rectangle()
                    .fill(
                        LinearGradient(gradient: .init(colors: [.clear, .white.opacity(0.48), .clear]), startPoint: .top , endPoint: .bottom)
                    )
                    .scaleEffect(1.5)
                    .rotationEffect(.init(degrees: 70.0))
                    .offset(x: isAnim ? center : -center)
            )
        }
        .animation(isLoading ? animation.repeatForever(autoreverses: false) : nil, value: isAnim)
        .onAppear {
            guard isLoading else { return }
            isAnim.toggle()
        }
        .onChange(of: isLoading) { _ in
            isAnim.toggle()
        }
    }
}
```

**Step2: Add extension method to View**
```
extension View {
    func animatePlaceholder(isLoading: Binding<Bool>) -> some View {
        self.modifier(AnimatePlaceholderModifier(isLoading: isLoading))
    }
}
```
Letreros Publicitarios Lima
Published: 2022-10-22 01:30:03

**Letreros publicitarios LED**
Este tipo de [letreros publicitarios](https://avisoscorp.com/letreros-publicitarios/) para negocios no sólo iluminará y llamará la atención sobre tu empresa, sino que también es una alternativa rentable que hablará bien de ella. Las luces LED consumen menos electricidad que los letreros con iluminación incandescentes, esto no solo es bueno para el medioambiente ¡también para tu economía! ¡El recibo de electricidad de cada mes te lo agradecerá! Son perfectos como letreros publicitarios para restaurantes, letreros publicitarios para peluquería, etc.

Letreros para Negocio
Los [letreros para negocio](https://avisoscorp.com/letreros-para-negocios/) son uno de los letreros publicitarios en Perú favoritos de las marcas, pero ¿por qué? ¡Por que además de permitir un amplia variedad de diseños es sumamente resistente a la intemperie! De esa forma, tendrás un letrero exterior de bonito acabado, resistente al envejecimiento, intemperie e impactos; ligero y a un buen precio. ¡Solo hará falta elegir la mejor ubicación de la ciudad para tener el éxito garantizado!
'vite' is not recognized as an internal or external command
Published: 2022-10-22 01:20:23

hello folks, yea i know just wanted to share a quick fix, about this that i just learned that you CANT RUN A PROJECT after you forked, without install dependecy

So im pretty knew to programming i wanted to share the meaning of Dependency, what it means?

A dependency is defined as a file, component, or software package that a program needs to work correctly.


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

Like a bookshelf, you cant LEARN if you dont have a place where you put all your books that you actually learn, in this example its not the same thing but i just wanted to share a example with you.

Ok but what do i need to do?

its easy

`npm i`

Ok what is that lol? 

You are installing all dependencies or devDependencies from a package. json file.

Im using this github project as example using Vite instead of CRA

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

after that you can do 

`npm run dev`

using VITE to open the project

And you done !
Temporal Dead Zone (TDZ) in JavaScript
Published: 2022-10-21 23:53:50

The hoisting of variables declared with var is well known among JavaScript developers.

ES2015 version introduced two new keywords to declare variables and constants: let and const.

Unlike var, which can be accessed before it is declared, variables declared with let and constants declared using const cannot be accessed before their declaration.

```
console.log(name); // undefined
var name = "Neeraj";
```

```
console.log(name); // Error
let name = "Neeraj";
```
hoisting doesn’t apply to let and const; that is an incorrect assumption.
Example:

```
let name = "Neeraj Kumar";

function printName() {
  console.log(name);
  let name = 30;
}

printName(); // Error
```
**Temporal Dead Zone**

So, if the let and const are also hoisted, why is it that they cannot be accessed before their declaration? The answer to this lies within the concept of the Temporal Dead Zone (TDZ).

Variables declared using let and the constants declared using const are hoisted but are in a TDZ. This prevents them from being accessed before their declaration has actually been executed during the step-by-step execution of the code.

Temporal Dead Zone is the period of time during which the let and const declarations cannot be accessed.

Temporal Dead Zone starts when the code execution enters the block which contains the let or const declaration and continues until the declaration has executed.

In our code example above, Temporal Dead Zone starts after the opening parenthesis of the printAge function and continues until after the declaration of the age variable.

Consider the following code example that illustrates an interesting point about the Temporal Dead Zone.

```
function print() {
  function log() {
    console.log(name);
  }

  const name = "Neeraj Kumar";
  log();
}

print(); // Neeraj Kumar
```
name is accessed after the declaration of name variable because the console.log is inside another function that is called after the declaration of the age variable. By the time the age variable is accessed inside the log function, the age variable’s declaration has already been executed.

![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2s4i836pyo0hh0ve4a4.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2s4i836pyo0hh0ve4a4.png)
Learn how to build a netcat clone in Rust
Tags: rust, networking, programming, tutorial
Published: 2022-10-22 00:59:56



Check out the second part of a series I'm working on over on [YouTube](https://youtu.be/fxjG0eo7O8o). In this video we look at creating a TCP server in Rust and reading data from the network.

Feedback welcome and if you're intested in seeing the code it's all available on [GitHub](https://bit.ly/3MLq3rJ).

Photo by [Moritz Kindler](https://unsplash.com/@moritz_photography?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/network?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Day 641 : Psycho
Tags: hiphop, code, coding, lifelongdev
Published: 2022-10-21 23:36:53

_liner notes_:
- Professional : With the past couple of weeks I had, I took it a little easier today. All the projects that needed to be done are done. So I just worked on getting ahead on some other projects.

- Personal : Last night, I basically worked on recording the talk for a conference so I could get it submitted. I had to make some changes to the slides and script so it took a little while. But I was able to get it recorded (had 4 minutes to spare) and did some slight editing. When I exported it at 4K, on my laptop, the video seemed to get out of sync with the audio. The 1080p looked fine to me. I uploaded the videos and the conference organizer said it looked good to them. Cool. I went to bed and watched a couple of "MOB Psycho 100" OVA and season 3 episodes.

![A rocky waterfall in the middle of a forest](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xqw7nmd4km4ncktn7chs.png)

Going to work on the radio show and watch some anime. Kind of ran into a roadblock on my side project, but there's other stuff I can work on around it.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube nW0t2vQu5r4 %}
bug fix: VS Code was deleting my curly braces { } in a Sveltekit file
Published: 2022-10-21 23:30:43

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

It's Friday night so of course I'll get a strange bug to work on 🤪

VS Code was auto formatting an {#if} block and removing the { } I was quick to pile blame on Prettier or maybe ESLint.  It turns out this was an Emmet issue.  You can see "Emmet Abreviaton" in the image.  Hitting return was triggering Emmet to delete the { } "mustache brackets". I had to adjust some of the VS Code settings.

It seems I was able to resolve it after changing some setting in VS code based on info I found on Github.


https://github.com/sveltejs/language-tools/tree/master/packages/svelte-vscode#setup
post 1, 10/21/22
Published: 2022-10-21 23:27:03

Today I learned that there are a ton of resources online for coding. There are those who share this information via Twitter and others who share via blogs on their own websites. Very nervous to start this path but hopefully it will be worth it. I will be using this to document my progress during a Boot Camp I will be taking so if you happen to actually come by this it might be an interesting read at some point. I quite literally now nothing as of this moment.
5 Debugging Tips that can Save you 5hrs of Debugging Time
Tags: javascript, jwt, auth, node
Published: 2022-10-21 23:14:17

## 1. Document Everything
You should always document everything from instructions on how to replicate the bug, to defined strategies on how to resolve the bug, to any side effect that results from a solution implementation. This is probably the most important one and I learnt this from working at Loxe Inc.

## 2. Error Logging

Always log your errors through a properly implemented error handler middleware and when an error occurs be sure to check your logs. I don't also forget the remove log statements from your debugged code. I learnt this from working at Loxe Inc.

## 3. Only refactor working code
When debugging it is best to work with the most simplistic-looking code piece of code to speed up the refactoring process and refactor after the code has been debugged.

## 4. Fix one problem at a time
This is also one major mistake most people make including myself of trying to resolve all the bugs at the same time before testing or grouping a lot of small bugs into one big bug, never do this. Always fix one bug at a time

## 5. Take Breaks
This can be linked to the spacing effect which refers to the finding that long-term memory is enhanced when learning events are spaced apart in time, rather than massed in immediate succession.
What this translates is that when trying to resolve bugs don't feel that you have to do it all in one go. it's okay to take breaks while resolving a bug.
Roadmap to becoming a Python Developer
Published: 2022-10-22 08:31:47

---
title: Roadmap to becoming a Python Developer
published: true
date: 2022-10-21 23:10:56 UTC
tags: 
canonical_url: https://pedrohfss.hashnode.dev/roadmap-to-becoming-a-python-developer
---

Hi, recently I decided to start a series of articles about my advance in the studies to become a python developer. I saw some roadmaps for having a better guide during the progress of my studies in Python.

In GitHub, I shall start a repo that will contain files README with my notes and code examples. To learn to create a habit of writing tests, I will also add unit tests to learn more about this practice.

![gif](https://i.giphy.com/media/Ln2dAW9oycjgmTpjX9/giphy.gif)

## A brief introduction to Python

Python is a programming language high level, interpreted of script, multiparadigm, owning typed dynamic and strong. It was developed in 1991 by **Guido Van Rossum** , with your origin name coming from a group of humor called Mont Python.

Having your code open and available by the license PSF License Agreement, Python receives many updates doing your community continues active enough.

Being considered one of the most programming languages easy to learn, Python also is portable and multiplatform  
allowing multiple possibilities of development. Since applications from desktops to software are more complex in Machine Learning and IA, we developed using Python.

Like these other programming languages, Python also provides to work with libraries and frameworks, potentializing more than your areas of development.

Extremely powerful and with vast possibilities in development, Python is no doubt a programming language indicates to learn. With a syntax simple and intuitive, it facilitates learning. Having too many libraries for web development, Data Science, automatization, games, and Machine Learning.

In the next articles in this series, I will advance in the roadmap of becoming a Python developer.
5 VSCode extensions every programmer needs
Tags: vscode, webdev, productivity, news
Published: 2022-10-21 22:53:00

VSCode extensions enhance the productivity of your environment, anywhere to language support, formatters, and debuggers, they all assist your workspace ecosystem.

##1. Prettier - Code Formatter 
![Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gen0x0slu5avqxlxjye.png)
Prettier takes your code and parses it into a nice-looking block of code.
![Prettier Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6iagn6yfurlfobuoy1x2.gif)
##2. Python
![Python Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/udd0fnbk5htzp71grhqz.png)
The Python extension comes with Intellisense, Linting, Debugging, Pylance, Jupyter Notebook, and so much more. A **must** have for Python developers using VSCode. 
##3. SSH FS / SSH
![SSH FS Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3vktt5by84bkoi2i3ev8.png)
If you need to connect to some other host computer SSH along with SSH FS are great VSCode extensions to make your life easier. 
![SSH FS DEMO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6e2ehj85eah6mu42zdk.gif)
##4. Edit CSV
![Edit CSV Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x30g0n63h41fhjdgpg2a.png)
If you need to make adjustments to a CSV table quickly and effectively, Edit CSV is for you.
![CSV DEMO](https://github.com/janisdd/vscode-edit-csv/raw/HEAD/images/titleImg.gif)
(Gif from [Extension Page](https://github.com/janisdd/vscode-edit-csv/raw/HEAD/images/titleImg.gif))
##5. Auto Rename Tag
![Auto Rename Tag Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29p2moi84pneo46pbc77.png)
If you work with React JS or anything similar you may know how annoying it is to keep renaming JSX or HTML tags for both the opening and closing tags. Be annoyed no more!
![Auto Rename Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xa8zbudsbalpo34dbdz.gif)

### BONUS: Vim
![Vim Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/107gc4kvktf3d2cy6wk1.png)
This VSCode extension emulates Vim for Visual Studio Code, Vim increases the productivity by emphasizing the use of the keyboard while programming. (Only _real_ programmers use Vim)

_Happy Hacking!_
That's my stack (and products)
Tags: webdev, programming, codenewbie
Published: 2022-10-21 22:41:11

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

Hey guys,

This was a quick but interesting video to talk about my stack and all products that I am using to create my web applications.

Here's the list:

Vue.js / Next.js for Front-End
Vercel / Netlify for deployments
Supabase / Node for back-end or back-end as a service
Stripe for payments
Tailwindcss / MUI / Vuetify for CSS or design system
Plausible for analytics
Tally for forms
Livestorm for lives
Make for automation
Namecheap for domain names
Whimsical for brainstorm

Hope you'll enjoy !

Best,

Guillaume
Scribble Cloud - Automation for E-writing Pads
Tags: writing, ios, automation, showdev
Published: 2022-10-21 22:38:21

When in need for a notebook, being the tech geek that I am and trying to get eco-friendly, I decided to purchase a generic lcd writing pad from amazon. The biggest issue faced by users of such a writing pad is that it does not have storage. All the notes scribbles on it are wiped off with the click of a button.

The most common FAQs about these generic writing pad are whether they can store the sketches scribbled on them or not. This prompted me to believe that there is a demand for a solution to store and probably share the sketches. That is when the idea of creating a Siri Shortcut to click a picture and automatically send it to a designated EMail with timestamp in a template subject line.

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

Then I created a rule in my outlook inbox to automatically divert the mails containing the template subject line into a folder.

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

Then I purchased an NFC Tag Sticker, stuck it to the back of the writing pad and created an automation to trigger my shortcut on scanning this NFC Tag.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fbct4cvxbgl610kcwwq.PNG)

So this is a quick automation project that I implemented.

[Click here](https://www.icloud.com/shortcuts/9d1d397088da4b289e664fd8481fbbd5) to access the Siri Shortcut that I created. You can make changes to the recipients mail.
Software Developer Interview
Tags: career, beginners, interview, help
Published: 2022-10-21 22:06:15

Hi everyone! I am a senior in high school and am interested in software development. I am looking to interview someone for my senior project. My contact info is below.
Thanks, Marion Estabillo
You best contact me at (562) 340-3355
Email: estabill.marion176@student.wuhsd.org