teleren/devto huggingface dataset:
CSS container queries with SASS mixins
Tags: css, sass, frontend
Published: 2023-08-23 20:04:54

---
title: CSS container queries with SASS mixins
published: true
description: create custom mixins with breakpoints to be used across the project
tags: css, sass, frontend
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xoxp4a2lkw4912iauv7.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-08-22 00:55 +0000
---

Have you ever wanted to apply certain styles based on the container width instead of the viewport width? well now you can do it using [CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries)

That's pretty cool but as we used to do with media queries we might want to set standards for the codebase and define common breakpoints' variables to be used across the project.

- Mobile devices – 320px — 480px.
- iPads, Tablets – 481px — 768px.
- Small screens, laptops – 769px — 1024px.
- Desktops, large screens – 1025px — 1200px.
- Extra large screens, TV – 1201px, and more.

If you're using some css pre-processor like SASS, then we will do something like a mixin to wrap the code:

### For Media Queries
```sass
$breakpoint-xs: 480px;
$breakpoint-s: 768px;
$breakpoint-md: 1024px;
$breakpoint-l: 1200px;
$breakpoint-xl: 1900px;

@mixin x-small {
  @media screen and (min-width: $breakpoint-xs) {
    @content;
  }
}

@mixin small {
  @media screen and (min-width: $breakpoint-s) {
    @content;
  }
}

@mixin medium {
  @media screen and (min-width: $breakpoint-md) {
    @content;
  }
}

@mixin large {
  @media screen and (min-width: $breakpoint-l) {
    @content;
  }
}

@mixin x-large {
  @media screen and (min-width: $breakpoint-xl) {
    @content;
  }
}
```

### For Container Queries
If we try to do exactly the same for container queries, it won't work out, we need to make a slight change (*scaping the variables values*)
```sass
...
@mixin x-small {
  @container (min-width: $breakpoint-xs) { /* this will not work and you will see no error */
    @content;
  }
}

...
```

So to make it work for container queries we need to scape the variables with the breakpoints like this: `#{$breakpoint-xs}`

```sass
...
@mixin x-small {
  @container (min-width: #{$breakpoint-xs}) { /* this will work but you will see the vs-code complaining about some syntax error, so just ignore it */
    @content;
  }
}
...
```

The solution above is reported as an error (scss-(css-ruleorselectorexpected)) by VSCode, but when it compiles and runs just fine.

Thanks a lot to the solution I found in this [thread](https://stackoverflow.com/questions/71006004/variables-inside-media-query-in-scss-files-not-working) by [Michel Reij](https://stackoverflow.com/users/3528440/michel-reij)

Hope this could be helpful to someone else!
Thanks for reading.
How to set a different Git branch name on remote
Tags: git
Published: 2023-08-23 19:54:40

This post is part of my ["Shorts"](https://poddarayush.com/shorts) series, where each post is concise and hyper-focused on a single concept.

Some software development teams - who use project management tools like JIRA - enforce conventions like naming your branches after the ticket IDs _(e.g. `T-1234`)_. This practice helps create automated workflows and debugging. However, you might want a more descriptive branch name in your local development workflow _(e.g. `feat-user-auth`)_.

In this post, we will be discussing how you can use different names for the same branch in your local and remote repositories.

## How?
When we run the command `git push origin branchName`, under the hood, Git expands the command to `git push origin branchName:branchName`. This expanded command means that the local branch named "branchName" should be pushed to remote branch named "branchName".

So, using this as a hint, the way to use a different branch name in remote would be:

```bash
git push origin localBranchName:remoteBranchName
```

In the context of our example, the command would be:

```bash
git push origin feat-user-auth:T-1234
```

> You could also add the `--set-upstream` flag to the command, so that you can directly run `git push` next time when trying to push the changes in `feat-user-auth` to its corresponding remote branch - `T-1234`.

## Final words
When working in teams, having conventions for branch names is a very common practice. That does not mean that you should be losing your freedom to have your own custom branch names. Since now, you are in the position to have your own custom branch name while also following the conventions followed by your development team.


## Reference
- [https://git-scm.com/book/en/v2/Git-Branching-Remote-Branches](https://git-scm.com/book/en/v2/Git-Branching-Remote-Branches)
Beginners should use a preconfigured Neovim distribution
Tags: vim, beginners, neovim
Published: 2023-08-23 19:52:06



I believe that beginners to Neovim **should** use a preconfigured distribution. I'm talking about distributions such as [LunarVim](https://www.lunarvim.org/), [NvChad](https://nvchad.com/), [AstroVim](https://astronvim.com/), or [LazyVim](https://www.lazyvim.org/), among others.

I've used everything from my own minimal configurations to huge, sometimes bloated, distributions like LunarVim. From my experience, I still believe that those starting out should look toward using a preconfigured distribution and at a later time tailor their own.

## A Whole New World

Coming from a "managed" editor, newcomers may get overwhelmed with the sheer number of choices that come with Neovim. Unless you use Arch (btw), then you're used to it. A preconfigured Neovim setup lightens the configuration load. 
My main complaint about the ecosystem is that it's too vast; the countless plugins, unlimited configurations, and the knowledge needed to get started is bewildering. That's where a preconfigured distribution comes into play.

These configurations act as curated showcases, offering a glimpse of what plugins and configuration types are available. By trying different distributions, you figure out which plugins and settings resonate with your unique coding style and requirements. It's like finding the right pair of shoes in an infinite store; each fits and feels differently, and you'll never truly know what's comfortable until you've tried several. 

## Monkey See, Monkey Do

The exposure to different types of configurations helps guide newbies on different ways to write their own. I know that after looking at several different formats I found what stuck to me. Yes I am referring to using other's configurations as a reference too. Try them out first, then delve in deep and see how it was done.

By exploring different Neovim configurations, you get inspiration from the tried-and-tested configurations. After some time, it is easy to modify the configurations a little more to your liking. 

## Don't Stop There

I still believe that after trying out multiple Neovim distributions, is to write your own. At this point, you know what exists, and what you like. You've seen examples of how everything is glued together. And you've graduated from Beginner Academy. A super easy way to start would be to use [Kickstart.nvim](https://github.com/nvim-lua/kickstart.nvim). This configuration is very minimal and all contained within one file, meant for a launchpad for your own configuration.

I don't think that sticking with one distribution forever is the best idea. You get used to another person's particular setup and feel, which may not reside completely with you. When you write your own, you get an even deeper understanding of your editor and how it all works. When something goes awry (and things are bound to do so, what do you think this kind of work is about?), you can figure out pretty quickly how to resolve it since you built it. 

This is my opinion, I am not responsible if your feelings were wounded throughout this read.
The Ethernaut Challenge Walkthrough
Tags: blockchain, security, web3, ethereum
Published: 2023-08-23 19:51:46

Hey everyone! This is my first time posting here at DEV so forgive the mistakes.

Here I am posting walkthroughs of all the Ethernaut Challenges I've done so far. I know there already are a bunch of walkthroughs out there on the internet, but what I'm attempting to do is I'm breaking down the code completely of each challenge, even the code that is not useful for the challenge to solve, because in order to understand code and find a vulnerability in it, you have to break it down and then piece it back together to make it make sense.

[Level 0 - Hello Ethernaut](https://dev.to/hamzairshad02/ethernaut-level-0-hello-ethernaut-2hgd)
[Level 1 - Fallback](https://dev.to/hamzairshad02/ethernaut-level-1-walkthrough-fallback-2aa)
[Level 2 - Fal1out](https://dev.to/hamzairshad02/ethernaut-level-2-walkthrough-fal1out-ilj)
[Level 3 - Coin Flip](https://dev.to/hamzairshad02/ethernaut-level-3-walkthrough-coin-flip-39fj)
[Level 4 - Telephone](https://dev.to/hamzairshad02/ethernaut-level-4-walkthrough-telephone-50c7)
[Level 5 - Token](https://dev.to/hamzairshad02/ethernaut-level-5-walkthrough-token-10c4)
[Level 6 - Delegation](https://dev.to/hamzairshad02/ethernaut-level-6-walkthrough-delegation-456e)
[Level 7 - Force](https://dev.to/hamzairshad02/ethernaut-level-7-walkthrough-force-5co)
[Level 8 - Vault](https://dev.to/hamzairshad02/ethernaut-level-8-walkthrough-vault-1h80)
[Level 9 - King](https://dev.to/hamzairshad02/ethernaut-level-9-walkthrough-king-3bfp)
[Level 10 - Re-entracy](https://dev.to/hamzairshad02/ethernaut-level-10-walkthrough-re-entracy-29k2)

Also, if you wanna know some Web3 Security I have compiled some notes on my Notion notebook here [Web3 Security Essentials](https://hamzairshad02.notion.site/Web3-Security-Essentials-c1a713b3e6c94fbb977ad8a81ab81dd8?pvs=4)
Best Practices for Writing a Dockerfile
Tags: docker, container, webdev
Published: 2023-08-23 19:37:40

Since I have been working with Docker for a long time, I decided to share some of my experience with you on best practices to develop better Containers.

## 1. Start with a Minimal Base Image

Choosing the right base image is crucial. Opt for a minimal image such as Alpine Linux or Debian slim. This reduces the attack surface and minimizes the container size, leading to faster image builds, downloads, and deployments.

## 2. Update and Upgrade Packages
Always run package updates and upgrades in your Dockerfile. This ensures that your container starts with the latest security patches and software updates, reducing vulnerabilities.

## 3. Use a Clear Directory Structure
Organize your project files within the container using a clear directory structure. This aids in readability and maintenance.

## 4. Copy Only What You Need
Minimize the data you copy into the image. Use .dockerignore to exclude unnecessary files from being copied, reducing the image size and build time.

## 5. Combine RUN Commands
Combine multiple RUN commands into a single command using logical operators (&&). This reduces the number of image layers, resulting in a smaller image.

## 6. Use Multi-Stage Builds
Utilize multi-stage builds to create intermediate build images and extract only necessary artifacts into the final image. This helps maintain a small final image size.

## 7. Set Environment Variables
Use ENV to set environment variables that configure your application's behavior. This makes your Dockerfile more configurable and adaptable across different environments.

## 8. Keep Layers In Logical Order
Arrange commands in your Dockerfile in a way that maximizes layer reuse. Commands that change frequently (like copying application code) should come after those that change infrequently (like installing dependencies).

## 9. Use Healthchecks
Incorporate healthchecks to monitor the container's health and ensure that your application is running as expected.

## 10. Secure Your Dockerfile
Avoid exposing sensitive information like credentials directly in the Dockerfile. Use build-time variables or secrets managed by the orchestration platform.

## 11. Document Your Dockerfile
Add comments explaining the purpose of each command and any assumptions you're making. This aids in collaboration and troubleshooting.

## 12. Test Your Dockerfile
Regularly test your Dockerfile by building and running the container locally. Ensure that it behaves as expected before pushing to a repository.

## <u>Conclusion</u>
Writing an effective Dockerfile is an art that requires attention to detail and a deep understanding of both the application and containerization concepts. By following these best practices, you'll create Dockerfiles that lead to optimized images, faster build times, improved security, and a smoother development process.
Who Will Win The First Republican Debate?
Published: 2023-08-23 19:31:21


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xc3te5jqx5lz66g2fn7z.jpg)Wednesday is the biggest day of the 2024 presidential race so far. Eight candidates will take the stage in Milwaukee, Wisconsin, for the first Republican primary debate. Chances are good that something will happen tonight that will be touted as a potential game-changer in the race: a viral moment, a particularly withering attack line, an out-of-nowhere tour de force. But how can we know whether that moment really changes voters’ minds, or if it was just a tale of sound and fury, signifying nothing? Ideally, we’d take voters’ temperatures on the presidential primary just before the debate, then go back to the same people: [READ MORE!](https://tinyurl.com/4zf5reyp)
How to Increase Website Traffic
Tags: traffic, increasetraffic, javascript, android
Published: 2023-08-23 19:22:46



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sh9fplfmgvq2xtzxatil.png)
In today’s world, creating a website is one of the most important steps toward small business success. It’s the foundation that allows you to build an online presence and grow your business.

After all, you can learn alot about the people who visit your website and turn them into an advocate: [Read More!](https://tinyurl.com/4zf5reyp)
How to use (AWS CLI -- Auto-prompt) to help you build your command faster!
Tags: awscli, devopsautomation, awsmanagement, autoprompt
Published: 2023-08-23 19:18:45


## What is auto-prompt mode?

The AWS CLI is a powerful tool for managing and setting up AWS services and automating them through scripting.

Since we use it in our daily operations, it would be helpful to have a list of the commands for quick reference.
Fortunately, AWS CLI has a handy feature that would be helpful when constructing commands. The auto-prompt mode lists the services or options as you type. This would be very useful, especially if you forget a few options.  

There are 3 ways to use this feature. I will walk through them with examples.


## 1- Single command option  
AWS CLI option `--cli-auto-prompt` can be used once per single command. 

Example 1.1:
```bash
$ aws --cli-auto-prompt
> aws
 accessanalyzer                      Access Analyzer
 account                             AWS Account
 acm                                 AWS Certificate Manager
 acm-pca                             AWS Certificate Manager Private Certi...
```

Example 1.2:
```bash
$ aws s3 --cli-auto-prompt
> aws s3
          ls
          website
          cp
          mv
          rm
          sync
          mb
          rb
          presign
```

## 2- Using Environment variables
There are 2 settings that can be used to enable auto-prompt mode inside the environment variables.
* **on** uses the full auto-prompt mode whenever you run aws command. Useful when you are new to aws commands. 
  
  `AWS_CLI_AUTO_PROMPT=on` 

* **on-partial** uses partial auto-prompt mode. This mode is particular useful if you have pre-existing scripts, runbooks, or you only want to be auto-prompted for commands you are unfamiliar with rather than prompted on every command.

  `AWS_CLI_AUTO_PROMPT=on-partial`

## 2.1- How to set auto-prompt inside the environment variables

* **Windows**
  * CMD
    ```
    c:\> set AWS_CLI_AUTO_PROMPT=on-partial
    c:\> set AWS_CLI_AUTO_PROMPT
    AWS_CLI_AUTO_PROMPT=on-partial
    ```
  * PowerShell or Terminal
    ```
    C:\> $Env:AWS_CLI_AUTO_PROMPT = 'on-partial'
    > $Env:AWS_CLI_AUTO_PROMPT
    on-partial
    ```
* **Linux**
  * Terminal
    ```
    $ export AWS_CLI_AUTO_PROMPT="on-partial"
    ``` 


## 3-  Shared config files 
You can enable auto-prompt mode per each profile by updating the AWS CLI **config** file located inside >> (~/.aws/).

Edit the config file then add one of the below settings for each profile.
* `cli_auto_prompt = on` 

  Example:
    ```
    [profile User1]
    region=us-east-1 
    cli_auto_prompt = on
    ```
* `cli_auto_prompt = on-partial` 
    
    Example:
    ```
    [profile User2]
    region=us-east-1
    cli_auto_prompt = on-partial
    ```
<br><br>


For more details, you may refer to the [AWS CLI User Guide - Auto-prompt](https://docs.aws.amazon.com/cli/latest/userguide/cli-usage-parameters-prompting.html)
P4 merge in ubuntu
Tags: p4merge, conflicts, merge, github
Published: 2023-08-23 18:47:15

I have been using phpstorm builtin merge conflict resolving editor, lately, I switched to vscode, but the 3 way merge editor of vscode sucks. So, I discovered this tool called P4 merge which helps to resolve conflict in much easier way.To install in ubuntu, here are the following steps

**Install P4 on ubuntu**

```
cd ~/Downloads
wget https://cdist2.perforce.com/perforce/r18.2/bin.linux26x86_64/p4v.tgz
tar zxvf p4v.tgz
sudo mkdir /opt/p4v
cd p4v-2018.2.1666551 // this may be changed based on the version being downloaded
sudo mv * /opt/p4v
sudo ln -s /opt/p4v/bin/p4merge /usr/local/bin/p4merge

nano ~/.gitconfig

[merge]
    tool = p4merge

[mergetool]
    prompt = false
    keepBackup = false

[mergetool "p4merge"]
    cmd = p4merge "$BASE" "$LOCAL" "$REMOTE" "$MERGED"
    keepTemporaries = false
    trustExitCode = false
    keepBackup = false  
```

**Extension required in vscode**

After merging relevant branches in vscode, if any file gets conflict simply, open that file and press ctrl + shift + p and enter `Terminal: Git mergetool`. For that this extension [Terminal mergetool](https://marketplace.visualstudio.com/items?itemName=hung-vi.terminal-git-mergetool) must be installed.

The p4 merge editor will look like:

![p4 merge editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kexw3str58o6xmjy9ev.png)

**References:**
[P4merge manual](https://www.perforce.com/manuals/v18.2/p4merge/#P4Merge/diff-merge.p4merge.html)
XK keyname question
Tags: linux, xorg, xdotool, programming
Published: 2023-08-23 18:25:56

In XWindows (the Linux desktop), Is the keycode 0x0000ff55 interpreted the same as 0xff55? 

Background: I'm Working on a midi -> keystroke script. 

I've been collecting X keynames from multiple sources to use as a reference, and want to see the list by keycode. The keycode isn't used by xdotool, so it's just a sorting column for me, but that creates the question. I have apparently duplicate entries: 6 digit entries with matching 10 digit with zeros in the most significant places. I don't care about this and would like to normalize it, unless it matters. That is, are the related keycodes to these look-similar entries aliases or derived from a similar ancestor, but don't necessarily function equal in all cases?

(https://github.com/Avante-Vangard/AV-MidiMacros)
Setting Up PostgreSQL with Apache Age for Advanced Data Management
Published: 2023-08-23 18:11:40

**Introduction**:

Hey there, fellow developers! Today, I'm excited to share my experience and insights on setting up a powerful combination of PostgreSQL and Apache Age for advanced data management. If you're looking to optimize your data storage and querying capabilities, this post is for you.

**What is PostgreSQL?**:

First things first, let's talk about PostgreSQL. PostgreSQL is a robust open-source relational database management system. It's known for its extensibility, support for various data types, and SQL compliance. Whether you're working on a small project or a large-scale application, PostgreSQL has got you covered.

**What is Apache Age?**:

Now, let's dive into Apache Age. Apache Age is a modern and open-source extension for PostgreSQL that brings graph database capabilities to the relational world. It's designed to handle complex graph structures and queries efficiently, making it an excellent choice for projects where relationships play a crucial role.

**Setting Up the Environment**:

1. **Install PostgreSQL**:
   Start by installing PostgreSQL on your machine or server. You can find installation guides on the PostgreSQL official website.

2. **Create a Database**:
   Using the PostgreSQL command-line tools or a graphical client, create a new database that will host your data.

3. **Install Apache Age Extension**:
   Next, install the Apache Age extension. You can find the necessary instructions and code snippets in the Apache Age documentation.

4. **Enable the Extension**:
   Once the extension is installed, enable it in your PostgreSQL database using the provided SQL command.

**Creating a Graph**:

Now comes the exciting part—creating a graph using Apache Age! You can define your nodes and edges as tables in PostgreSQL and leverage the power of graph querying without needing a separate graph database.

```sql
-- Create a node table
CREATE TABLE nodes (
    id serial PRIMARY KEY,
    label text
);

-- Create an edge table
CREATE TABLE edges (
    id serial PRIMARY KEY,
    source integer REFERENCES nodes(id),
    target integer REFERENCES nodes(id),
    label text
);
```

**Querying the Graph**:

Apache Age enables you to perform advanced graph queries. For instance, let's find all nodes connected to a specific node:

```sql
SELECT n.*
FROM nodes n
JOIN edges e ON n.id = e.target
WHERE e.source = <your_node_id>;
```

**Conclusion**:

Combining PostgreSQL with Apache Age opens up a world of possibilities for handling complex data relationships. You get the reliability of a mature relational database along with graph database capabilities. This setup is ideal for applications involving social networks, recommendation engines, and more.

Give it a try and unleash the potential of PostgreSQL and Apache Age in your projects. Happy coding!
Chapter 4 of Crafting Interpreters
Tags: 100daystooffload, book, ocaml, craftinginterpreters
Published: 2023-08-23 18:11:31

[Chapter 4](https://craftinginterpreters.com/scanning.html) is the first chapter of part two of the book and this chapter is all about *scanning*.

This is also now we start to implement the lox language with code. The book is using Java for this, however I will try to use OCaml instead.

The first step in any compiler or interpreter is called scanning. The scanner takes in the raw source code as a series of characters and groups them into a series of chunks called tokens. Here we get to learn more about concepts like **lexical analysis**, **lexical grammar**, **lexeme**, **tokens**, **lookahead** and **maximal munch**.

Error handling is being brought up and the importance of location information.

The most challenge part in this chapter has been to setup a new project and learn enough OCaml and its ecosystem to get started to code the scanner.

There has been some thought required to convert the code to another programming paradigm also. Java is an imperative OOP language and OCaml is a functional programming language.

Overall the book is still keeping the same quality as before and has some interesting side notes for those who like to dig deeper into the subject.

It's also fun to get to start to code in a new language.

Happy reading!