teleren/devto huggingface dataset:
Anchor Links in SPA
Tags: frontend, html
Published: 2023-07-18 14:00:00

Single-page applications (SPA) are a popular approach to building modern websites. And it is not just a passing trend: SPAs have a number of advantages over traditional applications.

The disadvantages of this approach are also known. For example, SPAs may experience search engine optimization (SEO) issues, applications may take a long time to open on the first launch, and can burden users' devices.

But there are less obvious problems that can arise when developing a SPA. One such problem is broken anchor links.

Anchor links are used to navigate within a single page. They also allow you to link to a specific section of an external page. For instance, you can share a link to your landing page and immediately scroll the user to the section with information about the company.

If you try to implement anchor links in a simple SPA, they simply will not work. When following such a link, the browser will display the very beginning of the page and will not scroll to the target section.

Why is this happening?

When directly following an anchor link from external resources, the browser scrolls the page to the desired section immediately after the `DOMContentLoaded` event occurs. This means that the document has been analyzed, the DOM is ready, and the synchronous and deferred scripts have been loaded and have just started executing. This is how anchor links work in Chrome and Safari, at least. At this moment, it is possible that the required element is simply not present in the document because not all resources have been loaded yet and not all scripts have had a chance to execute.

And during transitions between pages within a single application (that is, when using, for example, react-router in a single-page application), the browser attempts to navigate to the section by changing the URI before the new page has time to render.

If you follow the anchor link within the same page, then most likely there will be no difficulties, since in this case all page elements have already been drawn.

To solve this problem, you can write a script that will scroll the page to the intended element after the DOM has undergone all changes.

You can also take a ready-made package, for instance, react-router-hash-link for react-router. It fixes a number of problems related to the work of anchors in SPA on React. There are similar implementations for other popular frameworks.

However, the best option would be to render a full HTML page from the server using server-side rendering (SSR) or a static site generator (SSG). This can be done using Next.js, Gatsby, etc. In this case, when the browser tries to navigate to the desired section, the DOM will already be ready and the target element will be available.

This way looks more natural. We are not inventing anything new, but using existing mechanisms implemented in browsers long before single-page applications. With the help of modern solutions, we can 'restore' the original working principle of our websites, while maintaining the benefits of the SPA.
How to prevent dark mode effect on HTML form elements
Tags: html, css, webdev, programming
Published: 2023-07-27 04:01:08

# 

I was working on a project, suddenly I faced an issue. There should be normal mode to html form elements for example input, select, and textarea fields when desktop dark mode is on. Dark mode affects the form element's background color, Then I started to look for a solution and found the answer. There is css property called `color-scheme` which indicates what color scheme can be used.

add color-scheme property as below

`input, select, textarea{
    color-scheme: light;
}`

If I use `light` then it will use light mode only

`input, select, textarea{
   color-scheme: light dark;
}`

If I use `light dark` then it will use dark mode and light mode both.

I used only `light` so that my form elements can remain as normal design, not dark color background.
Git Cloning
Tags: coding, github, git, help
Published: 2023-07-27 03:57:30

# HELP  

I am currently enrolled in a coding bootcamp within the university i'm currently attending. The bootcamp starts on the 31st but there is some pre work that has to be done before the class stars (building a website for me to save classwork work and access from anywhere)  All modules have step by step resources but I have been stuck in one particular step for over a day now. Which is git cloning.  We are using VS Code and i have to clone my Github Repos into it. I have copied my SSH code from GH like instructed but when I get to this step I get > zsh: parse error near `\n' can someone help me out with this?
Developers tool for 10x better Tests
Tags: webdev, beginners, javascript, programming
Published: 2023-07-27 03:30:00

[CodiumAI](https://www.aiforme.wiki/ai/tools/Codium) is an advanced tool designed to assist busy developers in generating meaningful tests effortlessly.

By suggesting non-trivial and trivial tests right inside your IDE, CodiumAI enables you to code smartly, create more value, and maintain confidence in your codebase during each push.

Key Features of CodiumAI:

Code Smart:
With CodiumAI, developers gain full visibility of their code's behavior and understand how changes affect the rest of their codebase. This smart coding approach enhances code quality and streamlines development.

Create Value:
By automating the generation of test cases, CodiumAI saves developers valuable time that would otherwise be spent on writing questionable test cases. This allows them to focus on developing useful features that benefit their users.

Stay Confident:
Meaningful tests provided by CodiumAI effectively check your code's functionality, offering true confidence in the reliability of your codebase. Unlike code coverage quotas, CodiumAI's tests provide real assurance during code commits.

Wide Language Support:
CodiumAI supports Python, JS, TS, and Java (coming soon), making it a versatile tool for developers across different programming languages.

Tackling Complex Code:
CodiumAI excels in handling big and complicated codebases, efficiently generating tests that help developers understand their code's behavior and ensure robustness.

Conclusion:
CodiumAI empowers developers by automating the generation of meaningful tests, enabling smarter coding practices, and providing confidence in code quality. By reducing the time spent on test case creation, CodiumAI allows developers to focus on adding value to their projects and delivering better features to their users.

Embrace [CodiumAI](https://www.aiforme.wiki/ai/tools/Codium) to streamline your development process, code with precision, and create reliable software that stands the test of time. With CodiumAI, you can code as you meant it and take your development journey to new heights.
What are custom properties in CSS?
Tags: css
Published: 2023-07-27 03:29:08


In CSS3, a feature called custom properties or CSS variables was introduced. This feature enables developers to define variables that can be reused.

In a large project, we apply the same styles in many places, like a color used in many places. Now, suppose there is a requirement to change the color, then we have to replace the color in all places where it has been used. It is tedious and time-consuming.

Example:

```
.selector1 {
   color: "#aaa";
}
.selector2 {
   color: "#aaa";
}
.selector3 {
   color: "#aaa";
}
```
In this example, the same color has been used in three places. If we want to change it, then we have to update in all places.

The custom properties solve this problem by defining the color in a single place and using it wherever we want.

```
:root{
  --mycolor: "#aaa";
}

.selector1 {
   color: var(--mycolor);
}
.selector2 {
  color: var(--mycolor);
}
.selector3 {
   color: var(--mycolor);
}
```


## syntax
A custom property is prefixed with double dash(--). 
Example:

```
   --main-color: blue;
  --secondary-color: black;
  --card-padding: 8px; 
```
## How to use them
To use a custom property, We use var() function. For example:

```
.container {
   background-color: var(--main-color);
}
```


## Fallback value
The var() function takes two parameters: 
 
1. Referece to custom property
2. A fallback value (optional). If first parameter is not undefined or invalid, the fallback value is used.

Example:

```
.container{
  background-color: var(--main-color, green);
}
```
In this example, the `var() `function uses first parameter (--main-color) if it is available, otherwise it use `green` color as background color of the `.container`.

## Scope of custom properties

A custom property can have global scope or local scope. 

**Global scope:**

We can define global properties in the :root pseudo-class, and then we can access it across the whole HTML document. We can use them inside any selector.

Example:

```

:root{
  --main-bg-color: blue;
  --primary-color: "#ccc";
  --text-light-grey: "#aaa";
}

.selector1{
  background-color: var(--main-bg-color);
}

.selector2{
  color: var(--text-light-grey);
}

```

**Local scope:**

A custom property that is defined within a selector can be accessed within that selector and its children. We can't access it outside of that selector.


Example:

```
.selector1 {
  /* local scoped variable */
  --bg-color: red;
   
   background-color: var( --bg-color);
}

.selector2 {
  /* Wrong!  can't access local scoped variable  */
   background-color: var(--bg-color);
}

```

## summary
* Using CSS custom properties (also known as variables) can help improve code reusability.

* We can define global properties within the : root pseudo-class

* To use custom properties, we use the var() function.
Pretty print JSON on command line
Tags: python, unix, json
Published: 2023-07-27 02:17:28

Use python to pretty print JSON on command line using [json](https://docs.python.org/3/library/json.html#module-json.tool) std library module 
```
python -m json.tool
```

Example: 
```
echo '{"foo": "bar", "baz": [1, 2, 3]}' | python -m json.tool
```

Output: 
```
{
    "foo": "bar",
    "baz": [
        1,
        2,
        3
    ]
}
```
Gmail + email address trick for multiple accounts
Tags: gmail
Published: 2023-07-28 07:34:38

---
title: Gmail + email address trick for multiple accounts
published: true
date: 2023-07-27 02:13:04 UTC
tags: gmail
canonical_url: https://eplus.dev/gmail-email-address-trick-for-multiple-accounts
---

As of my last update in September 2021, Gmail had a useful trick that allowed users to create multiple accounts using a single email address. This trick exploits Gmail's ability to recognize variations in the email address while still delivering emails to the same primary account. Please note that Google may change or update its policies, so it's best to verify this information with the latest Gmail documentation.

Here's how the trick works:

1. **Using the "+" symbol:** Gmail ignores any characters after a "+" symbol in the email address. For example, if your primary email address is "[**myemail@gmail.com**](mailto:myemail@gmail.com)," you can create multiple accounts by adding a "+" followed by a unique identifier before the "@" symbol. For instance:

2. **Using dots (periods):** Gmail also ignores dots in the email address. For example, "[**myemail@gmail.com**](mailto:myemail@gmail.com)," "[**my.email@gmail.com**](mailto:my.email@gmail.com)," and "[**m.y.e.m.a.i.l@gmail.com**](mailto:m.y.e.m.a.i.l@gmail.com)" all deliver emails to the same account.

This trick is useful for organizing emails and signing up for various services while still receiving all correspondence in your primary Gmail inbox. It helps you differentiate the sources of emails and filter them accordingly using Gmail's filters and labels.

Remember that while this trick works with Gmail, not all email providers support the same feature. So, if you use other email services, it may not work in the same way.

Always be cautious while using email variations, especially for sensitive accounts, as it may make your email more accessible to spammers or attackers if they figure out your pattern. It's better to use strong passwords and two-factor authentication for securing your accounts.
New tool: OpsGPT for Elasticsearch & OpenSearch
Tags: elasticsearch, opensearch, devops, ai
Published: 2023-07-27 01:57:06

OpsGPT is an AI search specialist that will guide you through complex processes with ease and answer any Elasticsearch & OpenSearch questions you may have.

Need help with Elasticsearch configuration? Wondering about the best practices for data architecture in OpenSearch? Simply chat with OpsGPT to get the answers you need.

Check out OpsGPT for yourself: https://checkups.opster.com/ops-gpt
TIL Week 3
Published: 2023-07-27 01:14:51

Today, we are starting Ruby!!
Very excited for this. 
As of now just started with if else/elsif statements which make sense.
!true = false
!false = true 
|| = or 
&& = and almost like an also
for num 1..10 - writes all numbers except 10
adding ... includes what inside that range and .. includes the ending number

for text 
```
i= 0
loop do
print "ruby!"
i += 1
break if i == 30
end
```

when talking about index's in array remember that 0 would be considered the first index.
arrays can constitute as different variables like integers, words, boolean
Hashes are like javascript objects or python dictionaries
key-value pairs
How do you enhance LLM app response quality?
Tags: langchain, llm, opensource, openai
Published: 2023-07-27 01:10:10

I started an open-source project that helps A/B test LLM-based apps: [LangBear](https://langbear.runbear.io). It'll help you manage prompts and few-shot examples, run A/B tests, get user feedback, and see results.

As long as I cannot provide all at once, I want to know what developers need the most. 

If you conduct A/B testing to enhance the quality of LLM responses, what aspect would you be most interested in testing? e.g., Prompts, Vector stores, Foundation models, or Agents
Running Redis on Ampere Processors- getting better performance by moving from a legacy architecture
Tags: redis, arm64, cloudnative
Published: 2023-07-27 00:13:01



If you are already running Redis, you already know its power and speed has made it the most popular key-value database.  This comes from it holding the entire dataset in memory, allowing low latency reads and writes.  But this isn’t anything that you don’t know. 

What you might not know is that you can get better performance and better performance/watt (i.e. better energy efficiency) by just switching your server architecture from a legacy x86 system to the modern cloud native AArch64 architecture like Ampere Computing's Altra and Altra Max processors. 

![Image of the comparative performance of Intel Ice Lake, AMD Milan, Ampere Altra, and Ampere Altra Max](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgpo5mypz03p9375n4ml.png)

Want to get started and learn how to fine tune your [Redis](https://amperecomputing.com/solution/redis)? Check out our Redis documentation on our [developer site](developer.amperecomputing.com).

Questions or want to learn more about the [Ampere AArch64/ARM64 community](community.amperecomputing.com), check out our forum.
Introducing Prism: A Novel, Open-Source Data Orchestration Software. Feedback needed!
Tags: opensource, datascience, programming, python
Published: 2023-07-27 00:04:06

I'm thrilled to introduce you to Prism, an innovative open-source data orchestration platform. We've been working tirelessly to develop this tool, and now we're excited to invite you all to be a part of our alpha testing phase.

- 🔗 Website: https://runprism.com/
- 📢 GitHub Repository: https://github.com/runprism/prism
- 📄 Documentation: https://docs.runprism.com

## What is Prism?
Prism is a powerful yet user-friendly orchestration platform designed to streamline your processes, boost productivity, and enhance collaboration across teams.

## Key Features
🔹 **Real-time dependency declaration:** With Prism, analysts can declare dependencies using a simple function call. No need to explicitly keep track of the pipeline order — at runtime, Prism automatically parses the function calls and builds the dependency graph.

🔹 **Intuitive logging:** Prism automatically logs events for parsing the configuration files, compiling the tasks and creating the project, and executing the tasks. No configuration is required.

🔹 **Flexible CLI:** Users can instantiate, compile, and run projects using a simple, but powerful command-line interface.

🔹 **Extensive Plugin Library:** Enjoy a rich collection of integrations with your favorite tools and services.

🔹 **“Batteries included”:** Prism comes with all the essentials needed to get up and running quickly. Users can create and run their first project in less than 2 minutes.

## How to Get Involved
By joining our Alpha testing phase, you have the unique opportunity to be among the first users to experience Prism in action. Your invaluable feedback will directly impact the development of this platform, helping us make it even better, more stable, and tailored to your needs.

Visit our website https://runprism.com to learn more about the platform and its features. In addition, check out our documentation at https://docs.runprism.com to get started right away!

Access the GitHub repository https://github.com/runprism/prism to view the source code, report issues, and contribute to the project.

Try out Prism in your own workflow environment and let us know what you think!

We highly encourage you to share your thoughts, suggestions, and bug reports with us. Feel free to post your feedback directly in this thread, or if you prefer, you can raise issues on GitHub. Your input is invaluable to us, and together, we can shape Prism into the go-to platform for data workflow orchestration.

## Who We Are
Our team is a group of passionate data engineers, scientists, and developers. We're open-source enthusiasts who believe in the power of community-driven software, and we're committed to making Prism an exceptional orchestration tool and fostering an inclusive environment for all contributors.
Scoped CSS Styles with Declarative Shadow DOM
Tags: javascript, dom, css
Published: 2023-08-01 13:29:34

---
title: Scoped CSS Styles with Declarative Shadow DOM
published: true
date: 2023-07-27 00:00:00 UTC
tags: javascript,dom,css
canonical_url: https://goulet.dev/posts/scoped-styles-dsd/
---

![Codepen showing Declarative Shadow DOM](https://goulet.dev/posts/scoped-styles-dsd/codepen.png)

I've always thought of the Shadow DOM as something to use for custom elements only... but it can be useful for non-custom elements as well!

I was reading [this excellent post](https://medium.com/@eisenbergeffect/a-few-dom-reminders-2a0f18e40804) by Rob Eisenberg and came across the part about composing shadow DOM and realized that you can use [Declarative Shadow DOM](https://developer.chrome.com/articles/declarative-shadow-dom/) to scope CSS to a particular element without any JS. And without any framework/dependencies. 💪

```html
<p>
  <template shadowrootmode="open">
    <style>
      :host {
        color: red;
        font-size: 1.5rem;
      }
    </style>
    <slot></slot>
  </template>
  This paragraph is scoped
</p>
```

You can see a live example at [this Codepen](https://codepen.io/wes_goulet/pen/wvQEJod).

> One thing to note is that as of July 2023 Firefox has not implemented Declarative Shadow DOM yet (see [caniuse](https://caniuse.com/mdn-html_elements_template_shadowrootmode)), but a [polyfill](https://developer.chrome.com/articles/declarative-shadow-dom/#polyfill) is possible. Firefox [does currently support](https://caniuse.com/mdn-api_element_attachshadow) the imperative `attachShadow` API.

## Imperative Shadow DOM

Alternately, you can use the imperative [`attachShadow` JS API](https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow) to accomplish the same thing. It is supported in all modern browsers, however it's more verbose, requires JS, and is not as SSR-friendly as Declarative Shadow DOM. For an example of using `attachShadow` check out [this codepen](https://codepen.io/wes_goulet/pen/NWELmoy).

The imperative Shadow DOM works well when writing [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) (like [side-drawer](https://github.com/wes-goulet/side-drawer)) and declarative Shadow DOM works well when styling a non-custom element (like `<p>` or `<button>`).
GPT-4 Isn't 95.2% Worse Now
Published: 2024-03-28 08:41:06

---
title: GPT-4 Isn't 95.2% Worse Now
published: true
date: 2023-07-27 00:00:00 UTC
tags: 
canonical_url: https://www.tercmd.com/gpt-4-isnt-952-worse-now
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrczj21temqlsoxa2zm5.png
---

A paper from Stanford & Berkeley University being spread around as proof that GPT-4 is getting dumber makes no sense.

Heres the study: [How Is ChatGPTs Behavior Changing over Time?](https://arxiv.org/pdf/2307.09009.pdf)

> Let me start off by saying that other users have experienced that it does feel inferior and I dont doubt that. But quoting a 95.2% drop (in that ONE example) is unfair.

Lets address each of the tasks tested for (solving math problems, answering sensitive/dangerous questions, generating code and visual reasoning)

## Solving Math Problems

The paper does state that GPT didnt provide steps in the June version (even with Chain-of-Thought prompting), so perhaps thats where it failed. This does indicate that its worse in some sense, but math is also one of the weak points for AI.

## Answering Sensitive/Dangerous Questions

The rate of answering such questions is something that OpenAI wants to reduce (and so it has). GPT-3.5 did have an increased answer rate in June, which suggests filtering does need to be improved. But answering these (or not) doesnt mean models are getting dumber.

## Generating Code

This section showed GPT-4s executable code rate reducing, due to the model adding three backticks before the code, thus making it not directly executable.

This wasnt fair in my opinion since most users use ChatGPTs web interface, so the model is expected to add code tags to add syntax highlighting and separate it from other model output (if any).

## Visual Reasoning

This section just shows both models increasing in rates.

## Conclusion

So, people using the findings of the paper as GPT-4 is getting dumber doesnt make sense at all. (And in case youre wondering, the 97.6% to 2.4% prime number example is [very, very widespread](https://www.google.com/search?q=%2297.6%22+AND+%222.4%22+AND+%22GPT%22))

## Other links (External)

[Is GPT-4 getting worse over time? (aisnakeoil.com)](https://www.aisnakeoil.com/p/is-gpt-4-getting-worse-over-time)
Use ChatGPT to Explore Your Database Schema - Part 2
Tags: database, chatgpt, openai, ai
Published: 2023-07-26 23:35:33

---
title: Use ChatGPT to Explore Your Database Schema - Part 2
published: true
description: 
tags: database, chatgpt, openai, ai
---

As a follow on to [Use ChatGPT to Explore Your Database Schema](https://dev.to/sualeh/use-chatgpt-to-explore-your-database-schema-e73), SchemaCrawler's integration with ChatGPT in SchemaCrawler v16.20.4 allows you to share database metadata with OpenAI (ChatGPT), allowing for richer questions. SchemaCrawler needs your permission to share this metadata by means of an additional command-line argument, `--use-metadata`.

You can ask ChatGPT very specific questions on your schema, for example to summarize the purpose of the database or to help you write SQL queries.

You can try prompts such as the following ones:

- Summarize my database schema in one paragraph
- Based on my schema, write a SQL query for book names and author names
- Based on my schema, write a SQL query to find all books that have previous editions

Please note that if you have a large schema, you may run out of the maximum possible tokens. You can adjust this by using SchemaCrawler command-line arguments to limit the number of tables with regular expressions. Or you can use SchemaCrawler's integration with ChatGPT as described in [Part 1](https://dev.to/sualeh/use-chatgpt-to-explore-your-database-schema-e73), without `--use-metadata`.