teleren/devto huggingface dataset:
auto-adjusting blocks+content in html,css
Tags: html, css, autoadjustment, help
Published: 2022-11-09 15:58:54

Hello to everyone

**im new (noob)** into coding and related to that, in this forum.

My **Problem** is i want create a **code in html/css** **which adjust automatically** the website(**blocks+content**) whenever i minimize the browser window.

**e.g.** ive got the **problem of _text overflow_** in the block which i created, when i minimize the browserwindow.
There is a Textoverflow, sure i can solve it with overflow: auto;
but its an ugly solution. 

I want the block element to adjust to the lenght of my content (here the text ).

Code incoming in next post. 

**Best regards** and sry if im not that clear with what i want, but english is not my native and i hope to get better in this by time as well
_nima_
WaterNav Project Part 1 (08/11/2022)
Published: 2022-11-09 15:57:11

Ok so today I worked on a android Testing platform while I wait for the kotlin implementation from my co-worker.

The application is simple in the fact that Its sort of a login page, I simple make a HTTP POST request to our webservers and handle that information in the backend and talk with the SQL Database.

the two pieces of information to process are User details and location details.

if the inputted location is invalid the process kills itself and reports an error to the user.

however if the user details is not found it will attempt to create a new account with those details. after we have validated the Location (to make sure it actually exists in the Database) and the user details.

I launch the Unity player.

from here my plan is to load in the appropriate base map for that user specific to that location.

some challenges I faced were stuff like running background processes on Android and SQL syntax errors were a trouble as well.
PhpStorm Shortcut for php-cs-fixer
Published: 2022-11-09 15:38:45

PhpFixer has become an essential tool to ensure our team's coding standards are kept in line.

Rather than run "/vendor/friendsofphp/php-cs-fixer/php-cs-fixer fix" each time from the command line before a commit

I configured the command as an "External Tool" called "fix" in PhpStorm, and assigned it to 'ctrl-alt-shift-l" in PhpStorm.

Now all I need to do is press the hotkey combination while programming to clean up my code before a commit!

Good luck!

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


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5dzyq2s8l54jwkddbu6.png)
Getting Started with Competitive Programming(#preparations before Battle)😎
Published: 2022-11-09 15:36:32


1.**(EQUIP WEAPON)** Choose any well known Programming Language I would prefer C/C++/Java if you want speed then definitely go with the C++…after all you would definitely choose your weapon before fight.

2.**(FIND YOUR MAP)** Now you need a battleground where you think you can good competitors and challenges just like that you have to start with good coding platforms I'll recommend start with Hackerrank /leetcode and then move on to Codechef ,Codeforces, and you'll get to know further…

3.**(GET SOME POWER)** Data Structure and Algorithm for efficiency and time complexity …Always try to think most optimal solution as we find the best route to go at the Finish

4.**(START MISSION)** Practice…Practice…Practice…

**👉Some things that you would require regularly while you Code:**

1.**(PATIENCE)** don't get demotivated if it takes more time for you to reach solution you need to patience and gradually you will surely feel the improvement in solving problems.
2.**(CONSISTENCY)** Please do participate regularly in as many as contest you can, why because participating in the contests you will learn many new topics and will get experienced how to fight with the programmers from across the globe.
3.**(YOUR BEST CODING HABIT)** the habit which you discover is best for your coding ,this key is made by you.

**👉Some links that can help to start**:
1.[Data Structure and Algorithm](https://discuss.codechef.com/t/data-structures-and-algorithms/6599)

2.[Algorithms you must definitely know](https://discuss.codechef.com/t/what-are-the-must-known-algorithms-for-online-programming-contests/2717)

3.[Algorithms for Competitive programming](https://cp-algorithms.com/)

**✅Conclusion:**
So to master the Competitive Programming you need dedication, patience and continuous practice to solve the problems as many as you can.

code...code...code!!!
Have a great day!💜
Is Svelte the "perfectest" framework for solo/indie web developers?
Published: 2022-11-09 15:17:41

First, I wanna apologize for using the word "perfectest", I know it's "most perfect". So, going to the main point. I have been developing web apps independently for 3 three years, and have developed web apps using only Django, only Rails, only NextJs, Django with Next Js and Django with SvelteKit.
So, today I am gonna discuss about my own personal experience with SvelteKit.


Honestly, thesedays when I get a new web app idea, I instantly think of using SveleKit, why you ask? Because of it's simplicity, speed and very-very less overly complexified stuff.

Svelte is smooth, and it's user's are growing daily, because of it's DX [Developer Experiece]. 

The very main thing that forces me to use Svelte/Kit is it's developer experience; very less code, easy to maintain and navigate through directories.

The only thing I wanna complain about Svelte is, there aren't lots of discussion done in bug fixing. Also, at sometime the documentation of SvelteKit feels kinda off [personal experience]. Like, you get to know about it's feature only when you actually use it. Tailwind CSS only gives intellisense with the previous version of Tailwind not the latest one.

Overall, I can skip some minor downsides for greater ease and performance. 

So, yes, I can say Svelte is the most perfect framework for solo developers. But still I would love to add Ruby on Rails on that list as well, though they both act and function differently.

Thanks 😊
Publish a barebones CLI
Tags: javascript, npm, cli, node
Published: 2022-11-09 15:11:19

You don't have to setup a bunch of tooling to just get started with a simple CLI.

A package with little code is often a better start as an open source package because it is easier for contributors to help initially in a lightweight repository.

To create a CLI make a folder:
```bash
mkdir my-cli
```

In this folder run:
```bash
npm init -y
cat <<EOF > cli.js
#!/usr/bin/env node
console.log('my cli');
EOF
chmod +x cli.js
```

open the created package.json file and add:
```json
"bin": {
  "my-cli": "cli.js"
},
```

To test the cli in your shell run `npm link` while in the package folder.

You should now be able to run `my-cli` in any terminal on your local machine.

To publish to `npm` update the package.json file with the correct details and run `npm publish`.

Other people can now run `npm install -g my-cli` to use your CLI.
Buscar un recurso, usando Resource Explorer de AWS
Tags: aws, console, devops, devlive
Published: 2022-11-09 15:04:40

⚡Nueva feature para la ya complicada tarea de buscar un recurso dentro de AWS, los Resource Explorer.⚡

Te permite buscar los recursos de todas las regiones en un solo lugar. 

✌️Está disponible para la consola de administración de AWS, así como para la CLI de AWS. 

🟢Documentación: https://lnkd.in/e2W6hA4U 
🟢Debe habilitar el explorador de recursos en https://lnkd.in/ei4csrBn 


![Resource Explorer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry4b37urzv4ck7xy363t.png)
Luego de que tengas habilitado simplemente en la barra de búsqueda puedes escribir "/resources" y buscar cualquier recurso en tu cuenta (sin importar la region)

Puedes encontrar recursos en su cuenta de AWS en todas las regiones utilizando metadatos como nombres, etiquetas e incluso ID. Cuando encuentra un recurso en la consola de administración de AWS, puede pasar rápidamente de los resultados de búsqueda a la consola de servicio y la región correspondientes para comenzar a trabajar en ese recurso. 

Igualmente, puede utilizar la interfaz de línea de comandos (CLI) de AWS o cualquiera de los SDK de AWS para encontrar recursos en sus herramientas de automatización.

¿ya usas el CLI o solamente usás el dashboard?

--
Soy desarrollador. Trabajo con código todo el día. También estoy certificado como Arquitecto de AWS. ¿Cómo conseguí obtener dos certificaciones en tan poco tiempo? No fue fácil, pero definitivamente valió la pena.

¿Te gustaría que estemos en 📩 contacto? 
![Hector Fernandez, AWS Builder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irkeh0ojicukeqe10fmc.jpg)

Héctor Fernández
AWS Community Builder (Uruguay)
https://hector.builders/
1. Two Sum - Leeetcode - JavaScript Solution using for loops - by Abu Saleh Faysal
Tags: javascript, programming, leetcode
Published: 2022-11-09 14:35:54

## 1. Two Sum

Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

You can return the answer in any order.

**Example**
Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].

**Solution**

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

**Step 01:** I simply iterate the array using for loops, and inside the for loops I iterate the array again but this time start the index with the next position(compare to the first iteration)
**Step 02:** In this way, I got pair of numbers from the array and check if the total of the pair is equal to the target number or not.
**Step 03:** If the total value is equal to the target, I simply return the index numbers.

If you want me to publish more posts like this, Buy me a coffee.

👉 YouTube Channel Link: https://www.youtube.com/channel/UCW_09Nbobf4URLkAlEo84sw
👉 PlayList Link: https://youtube.com/playlist?list=PLUnklBXn8NSefCpBaLe39mds6dQx-tDDD

👉 Connect with me (LinkedIn): https://www.linkedin.com/in/abusalehfaysal
👉 Follow our LinkedIn Page:
👉 Like our Facebook page: https://www.facebook.com/thebacklogprogrammer/
👉 Join our community (Facebook group): https://www.facebook.com/groups/5500588936676942/
👉 Follow me at: https://www.facebook.com/AbuSalehFaysal10
👉 Twitter: https://twitter.com/AbuSalehFaysal

👉 Abu Saleh Faysal’s Blog: https://abusalehfaysal.hashnode.dev/
👉 Hasnode: https://hashnode.com/@AbuSalehFaysal
👉 Dev Community: https://dev.to/abusalehfaysal
👉 freeCodeCamp: https://www.freecodecamp.org/abusalehfaysal
👉 Medium: https://abusalehfaysal.medium.com/

👉 GitHub: https://github.com/AbuSalehFaysal
👉 GitLab: https://gitlab.com/AbuSalehFaysal
Keyoxide Proof
Published: 2022-11-09 14:32:38

---
title: Keyoxide Proof
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

[Verifying my keyoxide cryptographic key: https://keyoxide.org/4C38CC1AF264C3DE8D6D97283B31E6D41B517DA5]
Updating Rails applications with vimdiff
Tags: ruby, rails, vim
Published: 2022-11-09 14:30:42

This is probably one of those things everyone knows about, but I only just figured it out, so here it is for the next person (likely me, six months from now).

Ever run `bin/rails app:update`, been greeted with this:

```bash
   identical  config/boot.rb
       exist  config
    conflict  config/application.rb
Overwrite /home/rodreegez/Projects/my-app/config/application.rb? (enter "h" for help) [Ynaqdhm]
```

...and wondered what to do?

`Y` will overwrite your existing file with the new one. `d` will show you the `diff` between your existing file and the new one. But what if you want the new stuff but _also keep your changes_?

`vimdiff` to the rescue.

The option we're looking for is `m` for merge. To use it, we have to set the `THOR_MERGE` environment variable and tell it which tool to use to show the diff.

Let's cancel out of the update process we just started and try again, this time with `vimdiff`:

```bash
THOR_MERGE=vimdiff bin/rails app:update
```

This time, when we press the `m` key, `vimdiff` will spring into life. It might look something like this:

![vimdiff in action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx4xvxyj3axf471kyevc.png)

In the diff we can see that I have made some changes to `application.rb` (on the right - my additions are highlighted in green) and I'd like to keep those.

The goal of this exercise is to make both of these files the same. We do that by `:diffget`ing and `:difput`ing changes - `diffget` "gets" the corresponding change from the other file, while `diffput` "puts" the change from this file to the other one.

Many changes will be of little consequence - strings being changed from single to double quotes, for example - but some will require a bit of thought.

Both commands work from the perspective of the window we're currently in. I tend to think it's easier to think about if I `ctrl-w` over to "my" version of the file and get and put changes from there.

Every time we `diffget` or `diffput` a change, that change will disappear and we're free to cursor down to the next highlighted change. Once there are no more changes left we can `:wqa` which will save and quit everything, and our update script will move on to the next file.

Rinse and repeat with all the files that `bin/rails app:update` touches and, by the end of it, you'll have a nice and up-to-date Rails application with all your customisations, personalisations and preferences still intact.

Don't forget to configure any new [framework defaults](https://guides.rubyonrails.org/upgrading_ruby_on_rails.html#configure-framework-defaults) and check for any [further changes you might need to make](https://guides.rubyonrails.org/upgrading_ruby_on_rails.html#upgrading-from-rails-6-1-to-rails-7-0). And, of course, make sure your tests still pass.
Variables, Scopes, The visibility of variables
Published: 2022-11-09 14:23:38

In order for a program to create and keep values to store data in them and use them later on JavaScript offers us variables. Variables in JavaScript can be declared in different ways. One of those ways is var, which states that it is going to define a variable. After writing down var, write the name of the variable next to it and in case of wanting to give it a value – use the = operation and type down its value. Let and const are expressed in the same way.  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdfy6ujeyxnoraxxpn65.png)
Variables could also be undeclared, like shown below. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfozbwuwo9hw1u65ap7n.png)
Variable names are better to be chosen logically and carefully. What I mean is no reserved words should be used and the name should not include any spaces. The names can also include numbers, but the same does not go for punctuation symbols (although they can start with an underscore or a dollar sign). Also, the name should not start with a digit. When choosing a name, it is better to somehow connect it to the variable itself. For example, if we want to create a variable that shows the number of students in a class, a better name for that variable would be “numOfStudentsInClassA” and not something like “hdgunjsgsjcbyd”. Moreover, when the variable “catches” a value, that does not mean that the variable is forever tied to it. Using the operator = we can apply a new value to an already existing variable. 

Var has been widely used in JavaScript coding language, however, let and const were added later. What is the difference between those three? Well, var keyword declares a global variable, which are available through the entire code. However, in let keywords case it creates a variable that is only available in the block that it was created. That is why var is mostly replaced by let, as it added confusion and errors in the code. Const keyword declares a constant variable, meaning that the variable cannot be reassigned.  

In addition, var is function-scoped while let and const are block-scoped. What does this mean? What are scopes? Scopes show the accessibility or the visibility of variables. In other words, they show how much the variables are available in the entire code. JavaScript offers us three types of scopes: block scope, function scope, and global scope. As I mentioned, let and const provide block scope in JS, meaning that they cannot be accessed outside of the block they were created in, while var, which is a function-scoped keyword, can be accessed throughout the entire code. 

For example, here a can not be used outside of {}, as let is a block-scoped keyword. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sck12o1t0n8vqz2nl12g.png)
Learn Debounce and Throttle
Tags: debounce, throttle, javascript
Published: 2022-11-09 13:54:42

## Introduction
Debouncing and Throttling are great ways to not only improve your user experience but can also save you resources.

When working with data that changes frequently, it is a good idea to optimize the computation for speed and accuracy.
In this tutorial we are going to learn the difference between throttling and debouncing with a search input. 


Debouncing and Throttling are actually ways to slow down but a function but they differ in the way the function is finally executed.

### Debounce

Debounce checks to see if there has been a delay in the last time the function was called.
When the function is called the second time, it waits to see if there has been a delay since the last time the function was tried to be called.
It is going to wait for the specific delay and as long as nothing changed in the function and the function was not called again then the function will be allowed to run but if something changed or the function was called again then it will reset the timer and waits for a change.

_Essentially Debounce waits until there has been at least a set period of time before it actually calls the function_


#### Let's look at implementing a Debounce function

```

 // we want to make sure our debounce function is generic
function debounce(callback, delay = 1000) {
  let timeout 

 // allow the function to take in any number of arguments
  return (...args) => {
    clearTimeout(timeout)
    timeout = setTimeout (() => {
      callback(...args)
   }, delay)
  }
}
```

With this implementation, the debounce function waits at least 1 second to see if there has been a change before running the callback function. 



### Throttle
On the other hand, what throttle does is - it says 

> Okay as soon as you make a change, I'm going to run the callback and after each delay is over I'm going to continuall run the callback based on whatever the last input was.

This is great when things are changing a lot and you want to send the request with the most recent result while running the callback at a specific interval.

_A fitting example where throttling can be used is in scrolling and resizing a window_
 

#### Let's look at implementing a Throttle function

```
function throttle (callback, delay = 1000){
  let shouldWait = false
  let waitingArgs
  const timeOutFunc = () => {
    if (waitingArgs == null){
      shouldWait = true
    } else {
      cb(...waitingAgs)
      waitingArgs = null 
      setTimeout(timeOutFunc, delay)
    } 
  }


  return (...args) => {
    if (shouldWait) {
      waitingArgs = args
      return
    }

    cb(...args)
    shouldWait = true    

    setTimeout(timeOutFunc, delay)
  }
}
```



### Conclusion
The difference between debounce and throttle is debounce waits until there has been another delay before it runs but throttle runs immediately the function is called.
When throttle is in the waiting stage, the last call to the function is saved with its appropriate args and the callback is later ran with those args
Dark mode in Next.js using Tailwind CSS
Published: 2022-11-09 08:15:07

Now that dark mode is a first-class feature of many operating systems, it’s becoming more and more common to design a dark version of your website to go along with the default design.

Tailwind includes a dark variant that lets you style your site differently when dark mode is enabled:

```
<div class="bg-white dark:bg-slate-900" />
```
The only problem now is to implement a theme manager. But there is no need to reinvent the wheel here, there is an excellent package called next-themes.

To setup dark mode you need enable dark mode in `tailwind.config.js`.

```
darkMode: "class"

```
Then enable class mode in next-themes `_app.tsx`

```
import { ThemeProvider } from "next-themes";
// ...
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <ThemeProvider
        attribute="class"
        defaultTheme="system"
        storageKey="some-key-for-your-application"
      >
         <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
}
```
Then you can create a reusable theme changer component

```
import { useTheme } from 'next-themes'

const ThemeChanger = () => {
  const [mounted, setMounted] = useState(false)
  const { theme, setTheme } = useTheme()

  // When mounted on client, now we can show the UI
  useEffect(() => setMounted(true), [])

  if (!mounted) return null

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
}
```
And now any classes with dark variant will active when you toggle themes.

**Extending with variables
**
You can extend this feature with CSS variables. This will allow you to add single class in classNames but allow for both themes and it much better for customizing your website to your brand liking.

Setup CSS variables in `globals.css`

```
.light {
  --color-text-base: #3c4043;
  --color-text-muted: #5f6368;
  --color-background-base: #ffffff;
}
.dark {
  --color-text-base: #e8eaed;
  --color-text-muted: #9aa0a6;
  --color-background-base: #202124;
}
```
Setup up classes in `tailwind.config.js`

```
// ...
theme: {
    extend: {
      textColor: {
        skin: {
          base: "var(--color-text-base)",
          muted: "var(--color-text-muted)",
        },
      },
      backgroundColor: {
        skin: {
          base: "var(--color-background-base)",
        },
      },
    },
  },
// ...

```
Example code: `globals.scss`.

```
@layer base {
  html {
    @apply h-full;
  }
  body {
    @apply text-skin-base bg-skin-base h-full;
  }

  div#__next {
    @apply h-full;
  }
}
```