teleren/devto huggingface dataset:
Anti-Pattern
Tags: antipattern, designprinciples, designpatterns, objectorientedprogramming
Published: 2022-07-10 05:30:02

## What is an anti-pattern?
The term "anti-pattern" was first used in 1995 by a computer programmer, Andrew Koenig, in an article called "Journal of Object-Oriented Programming."

> **An antipattern is just like a pattern, except that instead of a solution it gives something that looks superficially like a solution but isn't one. - Andrew Koenig**

Anti-patterns in software engineering are a commonly used, simple-to-implement solution to recurring issues that is often inefficient and has the potential of being incredibly counterproductive. It demonstrates how to go from a problem to a bad solution. We just call these bad ideas.

> It's important to keep in mind that identifying bad practices can be as valuable as identifying good practices.

Although they first seem to be quick and reasonable, anti-patterns typically have adverse effects in the future. We will eventually come to understand that anti-pattern results in more negative outcomes than positive ones.

A well formulated anti-pattern reveals us:

- Why does the poor solution seem appealing?
- Why it ends up being bad?
- What best patterns are available to replace it?

> The issue that the anti-pattern is attempting to solve already has a better alternative solution in place that is proven to be effective in contrast to the anti-pattern.

Keep in mind that the same solution act as both a pattern and an anti-pattern depending on the situation.
El estado de flow, en las reglas de hooks, React Js
Tags: react, productivity, hooks, hooksrules
Published: 2022-07-10 05:12:13

Es muy importante tener los fundamentos acerca de estas reglas ya que nos beneficiara siempre tenerles en cuenta en cada proyecto en que estemos desarrollando, estas reglas se aplican a los hooks incorporados en React, como useState(), useEffect(), así como cualquier otro hook personalizado.

**Empezemos…**

_**1. Solo se puede llamar a los hooks dentro de componentes de función (functional components).**_

Es base saber esta regla si o si. No podemos usar hooks en componentes de clase (class components) ya que no admite hooks. Tampoco podemos usar hooks en funciones regulares de JavaScript esto es con el propósito de mantener el código.


_**2.Solo llama a los hooks en el nivel superior de los componentes de tu función. No los llame dentro de otras funciones, condicionales o bloques de bucle.**_

Esto nos asegura que nuestros hooks se llamen,  en el mismo orden, cada vez que se vuelva a renderizar un componente, un ejemplo cotidiano, cuando los usuarios interactúan con la con la app y la aplicación/software vuelve a renderizar, React llama a todas las funciones que estan definidas dentro de los componentes en cada nuevo renderizado, incluido los hooks.

**Entonces te preguntaras** _¿Como React puede realizar un seguimiento de las llamadas useState(), useEffect(), que se realizan entre los renderizados?_ 

React realiza un seguimiento de los datos y los callbacks que se administran con hooks en función de su orden en la definición del componente. Si ejecutamos nuestros ganchos solo durante algunos re-renderizados y no en otros, este orden se confundirá y causará resultados inesperados.

Si colocamos una llamada de useEffect(), dentro de un condicional if nos causa un Error.

```react
const [searchQuery, setSearchQuery] = useState('');

if (!searchQuery) {
  useEffect(() => {
    fetchData(`someapi.com/search?q=${searchQuery}`);
  }, [searchQuery]);
}
```

Entonces el componente llamaría a useState() cada vez, pero solo algunas veces llamaría a useEffect(). 

**_En cambio podemos lograr el mismo objetivo mientras llamamos contantemente a nuestro hook._**

```react
const [searchQuery, setSearchQuery] = useState('');
useEffect(() => {
  if (!searchQuery) {
    fetchData(`someapi.com/search?q=${searchQuery}`);
  }
}, [searchQuery]);
```

Siguiendo esta regla, podemos asegurarnos de que nuestros hooks se llamen en el mismo orden y en cada renderizado.

> _Ten siempre presente estas reglas en tu desarrollo con React Hooks._ 

**_PEACE!!!_**
Cross-Validation Clearly Explained in 5 Graphs
Published: 2022-07-10 05:05:20

## Introduction
In this article, I will introduce holdout validation and several common cross-validation methods.

I have created some beautiful illustrations to help understand these concepts.

## Holdout Validation


![cross-validation-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4iovqb9rmse8q5a2pwrz.png)

## Leave-p-out Cross-Validation(LpOCV)

![cross-validation-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6uncg4qg8vf3cbctww6.png)

## Leave-one-out Cross-Validation(LOOCV)

![cross-validation-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mukxgzy1bjao6jt0nuvv.png)

## K-Fold Cross-Validation


![cross-validation-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuof217uv8wmucv8z1s9.png)

## Repeated Random Subsampling Validation


![cross-validation-5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zitdg7szzvj537h1wuqp.png)
Learning Resources for TypeScript
Tags: typescript
Published: 2022-07-10 04:16:00

I've had folks ask me for Typescript resources a few times over the past couple of months, so I might as well share what I think are great resources for getting started with and continuing with TypeScript.

![Obiwan saying hello there!](https://media.giphy.com/media/xTiIzJSKB4l7xTouE8/giphy.gif)

These are paid and free resources, but I think they're all great. Remember that your work probably has an educational stipend, so leverage that if you can.

I'll update these resources as I find new ones.

## Tools

* [TypeScript Playground](https://www.typescriptlang.org/play)
* [TypeScript Error Translator Extension](https://www.iamdeveloper.com/vscodetips/2022/may-2nd-2022-vs-code-tip-of-the-week-2l6m) for VS Code

## Reading + Videos

* [TypeScript in 50 Lessons book](https://www.smashingmagazine.com/printed-books/typescript-in-50-lessons/)
* [Learning TypeScript book](https://www.learningtypescript.com) - The book, companion projects and articles
* [Marius Schulz's blog](https://mariusschulz.com/blog/series/typescript-evolution)
* [TypeScript Deep Dive](https://www.gitbook.com/book/basarat/typescript)
* [TypeScript Official Docs](https://www.typescriptlang.org/docs/)
* [TypeScript Cheatsheets](https://www.typescriptlang.org/cheatsheets)
* If you're a fan of React, check out the [React+TypeScript Cheatsheets](https://github.com/typescript-cheatsheets/react)
* Matt Pocock's [Tweet thread of TypeScript tips](https://twitter.com/mattpocockuk/status/1497262298368409605)
* [Matt Pocock's YouTube channel](https://www.youtube.com/channel/UCswG6FSbgZjbWtdf_hMLaow)
* Matt’s mega thread of his free content

{%embed https://twitter.com/mattpocockuk/status/1566739592249835520 %}

## Courses

* [TypeScript Fundamentals](https://typescriptcourses.com/typescript-fundamentals) (free) from James Henry. If you enjoy this, I encourage you to purchase his [TypeScript Pro](https://typescriptcourses.com/typescript-pro) course.
* The [Advanced TypeScript](https://www.mattpocock.com/) course hasn't dropped yet, but anything Matthew Pocock is worth checking out. (see his TypeScript Tips I mentioned above)
* Marius Schulz's [Advanced TypeScript Fundamentals](https://egghead.io/courses/advanced-typescript-fundamentals-579c174f) egghead.io course
* Rares Matei's [Practical Advanced TypeScript](https://egghead.io/courses/practical-advanced-typescript) egghead.io course
Doodle 0.8.0 Supports 3D
Tags: webdev, javascript, kotlin, showdev
Published: 2022-07-10 03:04:37

## [3D Transforms](https://nacular.github.io/doodle/docs/transforms)

Views can now have full 3D transformations via their `transform` property. This works because `AffineTransform` has been updated to support scale, rotation, and translations that involve x, y and z axes. The result is that Views can now be placed in a full 3D space by simply giving them a transform that has been modified accordingly.

    import io.nacular.doodle.drawing.AffineTransform.Companion.Identity
    import io.nacular.measured.units.Angle.Companion.degrees
    
    // Rotate this View around they y-axis (through its center) by 45°
    view.transform *= Identity.rotateY(around = view.center, by = 45 * degrees)

Views can also now [render in 3D](https://nacular.github.io/doodle/docs/rendering/3d), since `Canvas` also supports the new 3D transforms.

    view {
        render = {
            transform(Identity.rotateY(by = 45 * degrees)) {
                // ...
            }
        }
    }

## [3D Perspective](https://nacular.github.io/doodle/docs/transforms#cameras)

A realistic 3D space requires more than just affine transforms (which keep parallel lines parallel). Simulating this requires perspective transforms. Views now have a `camera` property, which gives them a perspective when combined with a 3D transform. The following allows the y-axis rotation to look more realistic.

    import io.nacular.doodle.drawing.AffineTransform.Companion.Identity
    import io.nacular.measured.units.Angle.Companion.degrees
    
    // Rotate this View around they y-axis (through its center) by 45°
    view.transform *= Identity.rotateY(around = view.center, by = 45 * degrees)
    
    // Position the View's camera to apply some realistic perspective warping
    view.camera = Camera(position = view.center, distance = 1000.0)

Canvas also takes a `Camera` in its `transform` method to enable perspective.

    view {
        render = {
            transform(Identity.rotateY(by = 45 * degrees), camera = Camera(Origin, distance = 1000.0)) {
                // ...
            }
        }
    }


[Doodle](https://github.com/nacular/doodle) is a pure Kotlin UI framework for the Web (and Desktop), that lets you create rich applications without relying on Javascript, HTML or CSS. Check out the [documentation](https://nacular.github.io/doodle) and [tutorials](https://nacular.github.io/doodle-tutorials) to learn more.
My language now can make instances
Tags: rust, diy, showdev
Published: 2022-07-10 02:23:56

I made [a language](https://github.com/lechatthecat/marie) and the language now can make instances:
```rust
class A {
    pub name = "john";
    pub weight = 10;
    pub fn f() {
        return "cat";
    }
}
let b = new A();
print(b.name);
print(b.f());
```

Wow, I'm happy for this :)
Add sign-up/sign-in to webflow in 2 minutes!
Tags: nocode, webdev, webflow, dotenx
Published: 2022-07-10 02:18:43

In this short video you learn how to add sign-up and sign-in to your Webflow website using [DoTenX](https://dotenx.com) in 2 minutes!

{% youtube https://youtu.be/WYSwqM5VuTM %}
EasyJobs | Made with Vue JS
Published: 2022-07-10 02:02:36

![EasyJobs | Made with Javascript | Vue JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1657258813/large_easy_jobs_made_with_vue_js_d1ce60c8cb.png "EasyJobs | Made with Javascript | Vue JS")


### Your one-click solution to job applications. Powered by AI.

> Making job applications faster so that you have more time to focus on what’s important! Free Chrome extension and dashboard for job applications. Find relevant job postings and apply with just one click. Automatically manage and track applications.
> 
> ### Save Hours on Job Applications
> Say goodbye to “apply on external site”. EasyJobs is the one-stop, one-click solution to job applications. 100% FREE.
> 
> ### Cross Platform Job Seeking
> EasyJobs collects job postings from countless external sites and put it all on here. Sit back and relax, finding your dream job has never been easier!
> 
> ### Autofill Job Applications
> Tired of filling out the same exact info over and over? Our Chrome extension does all the work for you.
> 
> ### Automatically track your job applications
> No more annoying spreadsheets. EasyJobs automatically records job applications you submitted so you can view and track them all on one dashboard.


Read More here about EasyJobs and find the link to view the showcased website

[EasyJobs | Made with Javascript | Vue JS](https://madewithjavascript.club/posts/easy-jobs-made-with-vue-js)

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [EasyJobs on Twitter](https://ReplaceLink.com)
 |
| Medium | [EasyJobs on Medium](https://medium.com/@madewithjavascript/easyjobs-made-with-vue-js-560cac2c4fb7)
 |
| Facebook | [EasyJobs on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid09mtxVN3Cq9isUcKWr9thLcuUW93WzkgDUoLDELyV9P3ng6eumqb2CDeywPRwWnjgl)
 |
| Tumblr | [EasyJobs on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/689353214782488576?source=share)
 |
| LinkedIn | [EasyJobs on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6951716089638633472)
 |
| Pinterest | [EasyJobs on Pinterest](https://pin.it/637sGhP)
 |


Filled Under:


 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with Vue JS](https://madewithjavascript.club/categories/vue-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
746. Leetcode solution in JavaScript
Tags: javascript
Published: 2022-07-10 01:49:17

```
var minCostClimbingStairs = function(cost) { for (let i = cost.length - 3; ~i; i--) cost[i] += Math.min(cost[i+1], cost[i+2]) return Math.min(cost[0], cost[1]) };
```
#leetcode
#challenge
here is the link for the problem: 
https://leetcode.com/problems/min-cost-climbing-stairs
Next.js Adventures: Some Blasphemy Against The Holy Image Component
Tags: nextjs, webdev, javascript, discuss
Published: 2022-07-10 01:38:26

Dear Next.Js Aficionado,

I don’t want to spoil the party, you know…

So if you believe that the component is the finest solution for handling images ever invented, then I suggest you stop reading and go find other exciting stuff.

I’m about to tell a “horror story” involving the component, and I don’t want to destroy the happy bubble you’re living in.

####

## You’re still here?

Good.

I’m glad you’ve chosen to be informed…

In the end, everything in this world has its pros and cons. The image component isn’t an exception to the rule. And there’s nothing wrong with pausing for a moment and talking about the possible pitfalls.

First, it’s important to mention that [my website](https://buhalbu.com) isn’t deployed with [Vercel](https://vercel.com/).

So all the cool stuff that comes automatically with their service isn’t available to me — the special image loader, the edge network optimization, etc.

## Those are out of reach…

My website’s containerized and deployed with [Google’s Cloud Run](https://cloud.google.com/run).

If you’re not familiar with the service, it’s “a managed compute platform that enables you to run containers that are invocable via requests or events.” Cloud Run is serverless, but it’s a kind of middle ground.

It’s not a cloud function nor – a virtual machine.

My favorite feature is the automatic scaling. That means my new site runs on a single instance most of the time. It’s super cost-effective.

But when a traffic spike happens, Cloud Run automatically creates new instances up to the maximum number I’ve set.

## And here comes the kick…

If Next.Js uses the default image loader, which creates a local cache of the optimized copies, then the new instances don’t have access to that cache and need to optimize every image by themself.

So you have traffic ups and downs… Cloud Run constantly starts and kills new app instances… and each new app instance optimizes every image anew.

Yeah, pretty bad setup…

We need a custom loader in that scenario.

And when we use a custom loader, we need to apply the optimizations ourselves because 60% of the fantastic image handling features are unavailable.

However, don’t take this short article personally.

I’m not saying that the component isn’t handy. After all, many smarter than me people talk about it very favorably, like the authors of the article “[Building an Effective Image Component.](https://web.dev/image-component/)“

But we need to be careful…

Cheers,
Sashe Vuchkov
Day 91: Dashboard responsiveness yuck!
Published: 2022-07-09 23:37:12

I think dashboards are not meant for mobile devices at least they should be completely redesigned to have a dedicated design because there is too much information with little to no space to show them considering just responsiveness , that's what I was fighting with for the evening I removed some of unnecessary information and tweaked sizes a bit but at least now I have something that works on my phone (not bad) 
tomorrow I have to rest and fill some docs and get ready for the next week
not much today maybe that's because I'm too tired to type anything else hahah😀
signing off...
The Power of WebP
Tags: modernweb, webp, frontend, ecofriendly
Published: 2022-07-09 23:01:05

---
title: The Power of WebP
published: true
description: How WebP can make your site load faster, and help save the planet.
tags: modernweb, webp, frontend, ecofriendly
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k64i1uims1zqcfx837x2.jpg
# Use a ratio of 100:42 for best results.
canonical_url: https://flipsphere.net/2022/07/09/the-power-of-webp.html
---

#What is WebP?#

WebP is an image format for the web created by Google. It provides superior compression which outputs high quality images on average 25% smaller than other formats.

#How to save as WebP#

You can save straight to WebP in Photoshop by going to File > Saves as... > and selecting WebP from the file type dropdown.

If you don't have Photoshop, you can use an online converter such as [cloudconvert.com](https://cloudconvert.com/).

#Real Example#

I've recently relaunched my wallpaper design site [divine-designs.net](https://www.divine-designs.net/). The homepage is very image heavy, and whilst the site was loading very quickly in my local environment, when I pushed it to production it slowed to a crawl. 

I'm running on a shared hosting server, so I knew it was always going to be slow (hence the decision to go purely frontend), however at almost 10 seconds loading time it was _too_ slow. 

I could just move it onto a different hosting provider, maybe even host it on AWS, however that doesn't solve the crux of the problem. So I needed to review and optimise my code, and as it's an image heavy site, I decided to start there.

**The homepage was loading 53MB of images.**

That number needed to come down. I was loading the wallpapers at their full size, in JPG format. So I opened photoshop, resaved them all at only 1000px wide (which is the largest the thumbnails sit at) and also saved them as WebP.

**This dropped the image load to 1.68MB!** That's a reduction of 96.84%!!

The site now loads in around 1 second.

#Why is this important?#

Aside from the obvious of making your website load quicker, it also reduces the amount of CO2 required to load your website and with the communications industry predicted to use 20% of all the world’s electricity by 2025, as developer's we all have a duty to keep our CO2 as low as possible.

Currently divine-designs.net produces only [0.41g of CO2 per page load](https://www.websitecarbon.com/website/divine-designs-net/).
Creando nuestros comandos personalizados en Linux
Tags: linux, spanish
Published: 2022-07-09 21:34:29

¿Cansando de tener que escribir veinte variables para ejecutar un simple comando? Pues hoy aprenderemos a mapear nuestros comandos haciendo uso de **Alias**. 
<!--more-->

# Creando nuestros Aliases

Alias es una forma sencilla de mapper, bindear, unir(?) comandos. Esta es la mejor manera de ahorrarnos tiempo a la hora de escribir cadenas larguísimas de comandos. Si nosotros escribimos "alias" en nuestra terminal debería aparecernos los aliases predeterminados de nuestro sistema, algo así:
![ALIASES-DEFAULT](https://res.cloudinary.com/rooyca/image/upload/v1632189896/Blog/Imgs/Commands-Linux/alias-predeterminados_lhjdfr.png)

Como podran notar, en mi caso tengo dos alias customizados: **price** y **subl**; el primero es un script en python que uso para ver el comportamiento del mercado crypto y el segundo es simplemtente para abrir SublimeText. 

### Modificando nuestro archivo .bashrc

Para poder lograr que nuestros alias sean permanentes y no solo durante una seccion de la terminal debemos modificar un archivo llamado .bashrc, que por lo general se encuentra en */home/usuario/* para esto debemos abrirlo con el editor de texto de nuestra preferencia, en mi caso voy a utilizar vim:

    vim ~/.bashrc

![VIM-ALIASES](https://res.cloudinary.com/rooyca/image/upload/v1632190837/Blog/Imgs/Commands-Linux/vim-aliases_wgtx0d.png)

Bajamos hasta encontrar la seccion de Aliases y añadimos nuestro comando de la siguiente manera:

    alias nuestro-comando='comando-a-mapear'

Un ejemplo más claro sería el siguiente:
    
    alias price='python3 ~/Desktop/get_price.py'

En donde "price" es el comando que le quiero asignar a la cadena: "python3 ~/Desktop/get_price.py". Ahora lo último que nos queda es guardar los cambias y listo, así de sencillo tenemos nuestro comando personalizado. 

![GET-PRICE](https://res.cloudinary.com/rooyca/image/upload/v1632191334/Blog/Imgs/Commands-Linux/get-price_mntpwd.png)

Eso sería todo, si tienen alguna duda no duden en hacermelo saber.
First Blog Post!
Tags: beginners, programming, javascript, introductions
Published: 2022-07-09 20:48:26

   Hello to whoever takes the time to read this! Thank you, and welcome to my first blog post. Right now I am an absolute beginner when it comes to software engineering, so please be gentle ( ﾟヮﾟ). I've also never blogged before, so forgive me if my posts are boring. Since this first post is more of an introduction, I will not be diving into any progress with my studies just yet. Stay tuned! ʕ ·ᴥ· ʔ