teleren/devto huggingface dataset:
CSS Cascade: Understanding the Style Sheet Hierarchy
Published: 2024-05-16 13:05:39


CSS (Cascading Style) is a crucial component of modern web design, allowing developers to control the layout, appearance, and behavior of web pages. One of the fundamental concepts in CSS is the cascade, which determines how styles are applied when multiple style sheets or conflicting rules are present. In this article, we will explore the CSS cascade and how it works to ensure that styles are applied in a logical and predictable manner.

The Cascade Process

When a web page is loaded, the browser combines multiple style sheets into one virtual style sheet. This process is known as the cascade. The browser applies styles in a specific order, giving more importance to some sources over others. The cascade process can be broken down into several stages:

1. Author Styles: The author's own CSS file has the highest priority in the cascade. This file is usually written by the developer and contains custom styles for the specific website.

2. User Styles: User-defined styles have the second-highest priority. Users can create their own CSS files or use user style sheets provided by browsers to customize their browsing experience.

3. Default Styles: Browsers come with their own set of default styles that define how various HTML elements should be displayed. These styles have a lower priority than author and user styles.

4. Inherited Styles: If no other style sheets are present, inherited styles from parent elements are used as fallback options.

How Styles Are Resolved

When there are conflicts between different style sheets or rules within a single style sheet, the browser resolves them using a set of rules known as the CSS specification:

1. Specificity: The browser calculates each rule's specificity based on its selector complexity and origin (author vs user vs default). A more specific rule takes precedence over less specific ones.

2. Order: If two or more rules have equal specificity, the one that appears last in the CSS file has higher priority.

3. Importance: The !important keyword can be used to increase a rule's importance, making it override other rules with lower importance levels.

Understanding and leveraging the CSS cascade is essential for creating consistent and visually appealing websites. By mastering this concept, developers can write efficient and maintainable CSS code that adapts to different user preferences while maintaining a cohesive design throughout their website.

In conclusion, CSS cascade is an essential aspect of web design that allows for flexibility and customization while ensuring that styles are applied consistently across different browsers and devices. By understanding how it works and applying best practices when writing CSS code, developers can create
Airline Ticket
Published: 2024-05-16 12:59:41

Introducing SmartFlightFares, your passport to seamless travel experiences at unbeatable prices. Embark on your journey with confidence, knowing that you’re not just booking a ticket, but investing in a stress-free adventure.

With SmartFlightFares, we redefine the way you fly. Our advanced algorithms meticulously scan thousands of flights to curate personalized options tailored to your preferences and budget. Whether you’re a spontaneous traveler seeking last-minute deals or a meticulous planner aiming for the best value, we’ve got you covered.

Experience unparalleled convenience with our intuitive platform, where booking your dream getaway is as easy as a few clicks. Say goodbye to endless browsing and complicated booking processes. At SmartFlightFares, simplicity is our mantra.

But that’s not all. We understand the importance of flexibility in today’s dynamic world. That’s why we offer flexible booking options, allowing you to modify your itinerary with ease. Need to change your travel dates or destination? No problem. With SmartFlightFares, your convenience comes first.

And when it comes to customer service, we go above and beyond. Our dedicated support team is available around the clock to assist you with any queries or concerns, ensuring a smooth and hassle-free travel experience from start to finish.

So why wait? Join the thousands of satisfied travelers who trust SmartFlightFares for their travel needs. Whether you’re jetting off for business or pleasure, let SmartFlightFares be your wingman in the skies. Book your ticket today and unlock a world of possibilities. SmartFlightFares: Where every journey begins.
Calculus for ML: Derivatives. Part - 2
Published: 2024-05-16 12:52:09

Today I'll be talking about the Inverse function, derivative of trigonometric function, exponential and logarithms. 

**Inverse function**
The inverse function's job is to basically undo another function. The general definition is - if you get y out of f(x), then if you put y into the inverse of f, then you will get x. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjfushc9yfwd0fkuxua7.png)
If you put x through f function and you get x^2, then you put x^2 into g function, then you get x. That's why inverse function is also known as anti-function.

Now, let's have a look at their graphs. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20jfu8z3ypqhwnl1drk1.png)

As we saw, they are a reflection of each other (check the axis if you have any confusion). So. the slope is inverse of one another. 
Slope :  ∆f/∆x =  ∆y/ ∆g and, g'(y) = 1/f'(x) 

**Derivative of trigonometric function**
Derivatives of the trigonometric functions can be found on sin(x) and cos(x). The tangent, tan(x) = sin(x)/cos(x)

f(x) = sinx 
=> f'(x) = cosx

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

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

**Exponentials**
Do you know Euler's number? To understand exponential function we need to first understand euler's number. Euler's Number 'e' is a numerical constant used in mathematical calculations. The value of e is 2.718281828459045…so on. As it's an irrational number, e can't be expressed through ration between two integers. So, we will define it is by using the expression (1 + 1/n)^n. Let's look at this expression for several values of n.


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

Look here, the more we increase the number o n, the more it goes to a certain value and if we keep doing this, it gets more closer to 2.7182818284...

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

the function and it's derivative both are the same. Why it is the same? I'll explain it to another blog!!

Exponential function is related to many real life situations such as any kind of growth, investment, bank deposits, loans and profit, et cetera. 

**Logarithms **
The logarithmic function is the inverse function of exponentiation. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gc5gp03vjx31bb32g54t.png)

The right graph was calculated by using the result for inverses.
Therefore, the derivative of logarithm is 1 over y.
Opinionated Architecture: Simple Guide for Beginners
Tags: opensource, webdev, beginners, programming
Published: 2024-05-16 12:40:44

Recently I have started working on Abp.io. In documents I read about opinionated architecture. This was the first time I read this terminology. Thought to explore more about it. 
Are you familiar with the term "opinionated architecture"? If no, I will try to explain with some examples.

Imagine you're building a house. You have two options: a non-opinionated architect who gives you a basic blueprint and lets you decide everything from the layout to the color of the walls. On the other hand, an opinionated architect already has strong preferences and recommendations about how your house should look and function.

Non-opinionated architecture is like a blank canvas. It gives you the freedom to make choices, but it also means you have to figure out a lot of things on your own. You might spend hours researching different materials or layouts, and it can be overwhelming.

Opinionated architecture, on the other hand, comes with built-in decisions. The architect has already made choices based on their expertise and experience. They might suggest specific materials that are known for their durability or recommend a layout that maximizes space and light.

Think of it like ordering a pizza. With a non-opinionated approach, you start with a plain crust and add toppings based on your preferences. But with an opinionated approach, the chef has already curated a menu of delicious flavor combinations, so you just have to choose your favorite.

Opinionated architecture isn't about taking away your freedom—it's about making the process easier and more efficient. It's like having a knowledgeable friend guide you through the decision-making process, saving you time and stress.

So, which approach is better? It depends on your preferences and priorities. If you enjoy having complete control and don't mind doing research, non-opinionated architecture might be the way to go. But if you value convenience and trust the expertise of an architect, opinionated architecture could be a better fit.

In the end, the most important thing is to find an approach that works for you. Whether you prefer to design your own custom home or rely on the recommendations of a seasoned architect, the goal is to create a space that feels like home.

Below are few well-known frameworks based on Opinionated Architecture 

1. abp.io (Application Boilerplate for .NET)
2. Angular
3. Ruby on Rails (Rails)
4. Django
5. Spring Boot
Exploring Controlled and Uncontrolled Components in React
Tags: javascript, react, beginners, programming
Published: 2024-05-16 12:36:28

**Let's Dive In:**
Imagine you're building a form in your React application. You've got input fields, checkboxes, and maybe even a file upload option. But how do you handle user input? That's where controlled and uncontrolled components come into play.

**Meet the Uncontrolled Components:**
Uncontrolled components are like free spirits—they operate independently of React's state management. They're perfect for scenarios where you need to interact with the DOM directly, like when dealing with file inputs or integrating with third-party libraries. They're flexible, adaptable, and have a mind of their own. But beware—without React's oversight, they can sometimes lead to unexpected surprises.

**Let's Explore with an Example:**
Imagine you're building a file upload component. With an uncontrolled approach, you let the browser handle the input, and you use refs to access the selected file. It's hands-off, easy to implement, and integrates seamlessly with the browser's behavior.


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



**Now, Let's Meet the Controlled Components:**
Controlled components, on the other hand, are the guardians of your form data. They embrace React's state management, giving you precise control over every input. They're predictable, reliable, and offer a structured approach to handling user input. When data integrity is paramount, controlled components are your best friends.

**Let's Explore with an Example:**
Let's say you're building a controlled input field for a username. With a controlled approach, every keystroke updates the component's state, ensuring real-time synchronization between the input and React's state.


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



**Choosing the Right Tool for the Job:**
So, when should you use controlled versus uncontrolled components? It all depends on your use case. Need flexibility and integration with external systems? Go with uncontrolled components. Want predictability and data integrity? Opt for controlled components. And don't be afraid to mix and match based on your application's needs.

**Conclusion:**
Controlled and uncontrolled components offer different approaches to handling user input in React. By understanding their strengths and weaknesses, you can choose the right tool for the job and build robust, interactive forms in your applications.
Salesforce Consulting Services
Tags: services
Published: 2024-05-16 12:35:47


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fl818yrpsga63rqpwnk9.png)
Empower your business with top-notch Salesforce consulting services! Discover how Mobisoft Infotech can transform your operations and maximize your Salesforce investment. Explore more at https://mobisoftinfotech.com/services/salesforce-consulting-services. #SalesforceConsulting #DigitalTransformation
Baka4LLM. New horizons
Tags: machinelearning, llm
Published: 2024-05-16 12:24:57

Hello fairy dairy diary~!

Conserved Causal LLM for a while, moved to new horizon...
  

![Cieno wears a mask](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uj6h0d8srznolc1lv7vy.png)

...Masked LLM..

The reasoning is simple: hypothesis it's easier to train acceptable MLM on 16GB VRAM. Which then can be chained to itself. 

For now points of references are

https://github.com/samvher/bert-for-laptops/blob/main/BERT_for_laptops.ipynb


https://arxiv.org/abs/2212.14034


and there was a paper that explored if it was possible to train decoder from encoder-only, IIRC, they found it can I think, but I can't find it and I might hallucinate it, will look for it later.

For now some pretraining is to go, then to decide what to do with it and how update it!

Chill!
Software Developer to manager
Tags: productivity, learning, softwaredevelopment, startup
Published: 2024-05-16 12:22:18

As a developer, I used to think project management was reserved for big teams with dedicated managers.
But then I started implementing simple project management techniques that revolutionized my work.

**_I started:_**
- _Meeting deadlines effortlessly_
- _Staying organized amid chaos_
- _Delivering projects with finesse_

All are achievable with the right project management approach.

**Want to get started today?**

Organize your tasks using a simple to-do list or project management tool.
And then prioritize your tasks based on urgency and importance, and most importantly eat meat to tackle them.
You’ll be amazed at how this small step can enhance your productivity and sense of control.

If you wanna learn more about this, I am hosting a **workshop** through this link.

Sign up [**here**](https://lnkd.in/e4AgEA2E)
Using AllowedValues and DeniedValues in .NET 8
Tags: dotnet, aspdotnet, dotnetcore
Published: 2024-05-16 12:12:51

.NET 8 introduced new attributes, AllowedValues and DeniedValues, as part of the System.ComponentModel.DataAnnotations namespace. These attributes simplify input validation by specifying which values are permitted and which are not for your API parameters. 
The code sample is available in the comments.

### What are `AllowedValues` and `DeniedValues`?

- **AllowedValues:** Ensures that only specified values are accepted.
- **DeniedValues:** Ensures that specified values are not accepted.
   ```csharp
   
           [AllowedValues("Red", "Yellow", "Green")]
           [DeniedValues("Black", "White")]
           public string? AlertValue { get; set; }
      
   ```
 
### Explanation

- **AlertValue string:** Uses `AllowedValues` to ensure only "Red", "Yellow", or "Green" are accepted. Uses `DeniedValues` to reject "Black" and "White".


### Conclusion

Using `AllowedValues` and `DeniedValues` attributes in .NET 8 simplifies input validation in your API, ensuring that only valid values are accepted and invalid ones are rejected. This enhances the robustness and reliability of your application.
How to trade on Pump.fun using the API
Published: 2024-05-16 12:08:20

How to

**Key Features**

The API offers a variety of tools to help you get the most out of Pump.fun, including:

### Buy and Sell Trades

Place trades on Pump.fun programmatically, giving you the ability to automate your trading strategy and react quickly to market changes.

### Newer Mints Details

Get access to details on new mints on Pump.fun, allowing you to stay ahead of the curve and make informed investment decisions.

### Token Metadata Fetching

Fetch metadata for tokens on Pump.fun, providing you with valuable insights into the tokens you're interested in.

### Pump.fun Specific Data

Query data specific to Pump.fun, giving you a deeper understanding of the platform and its inner workings.

## Swap Quotes

Fetch swap quotes and input/output details, making it easier to make informed trading decisions.

**Essential Links**

To get started with our API, be sure to check out the following links:

**API Endpoint**: [https://pumpapi.fun/api](https://pumpapi.fun/api) - Make API requests here

**Documentation**: [https://docs.pumpapi.fun](https://docs.pumpapi.fun/) - Learn how to use our API


```js
const axios = require('axios');



const url = "https://pumpapi.fun/api/trade";

const data = {
    trade_type: "sell",
    mint: "YOUR_MINT_ADDRESS",
    amount: 1000,  # Example amount of tokens
    slippage: 2,
    priorityFee: 500,  # Optional
    userPrivateKey: "WALLET_PRIVATEKEY"
};

axios.post(url, data)
  .then(response => {
    const transactionId = response.data.tx_hash;
    console.log(`Transaction ID: ${transactionId}`);
  })
  .catch(error => {
    console.error(error);
  });
```

The response is:

```json
{

  "tx_hash": "2wJWJW4Ln7N5EA8WnThaq4m4tgH6TPxcPYMP9ZN1VhyD...."

}}

```


More endpoint details are on:

[https://docs.pumpapi.fun/](https://docs.pumpapi.fun)
FINQ's weekly market insights: Peaks and valleys in the S&P 500 – May 16, 2024
Tags: stockmarket, stocks, ai, sp500
Published: 2024-05-16 11:45:33

Delve into this week's market highs and lows, powered by FINQ's advanced AI insights.

## **Top achievers:**

- **Amazon (AMZN)** maintains its top position with strong performance.
- **Salesforce (CRM)** rises to second, bolstered by improved metrics.
- **ServiceNow Inc (NOW)** returns to the top three with notable gains.

## **Facing challenges:**

- **Loews Corp (L)** continues as the least favored.
- **Amcor PLC (AMCR)** enters the list, facing significant declines.
- **Mettler-Toledo International Inc (MTD)** joins the bottom ranks, struggling with Professional Wisdom.

Explore the dynamics and understand the shifts with our detailed analysis and insights.

**Disclaimer:** This information is for educational purposes only and is not financial advice. Consider your financial goals and risk tolerance before investing.
Mastering Button Alignment in CSS: Tips and Tricks
Tags: css, bootstrap, webdev
Published: 2024-05-16 11:32:03

Centering a button in CSS might sound trivial, but it's a challenge that often trips up even seasoned developers. Whether you’re dealing with flexbox, grid, or good old-fashioned margin auto, there’s always a solution that fits your needs. Let’s dive into the most effective techniques to ensure your buttons are perfectly centered, every time.

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



**1. The Flexbox Way**
Flexbox is the go-to tool for centering elements. It’s powerful, versatile, and simplifies many layout problems. Here’s how you can use it to center a button:

```
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Optional: centers vertically within viewport */
}

button {
  padding: 10px 20px;
}
```

With just a few lines of code, Flexbox handles both horizontal and vertical alignment, making it an ideal choice for centering buttons within containers.

**2. Grid Layout Magic**
CSS Grid is another robust method that offers precise control over layout. Here’s a quick example of centering a button using Grid:

```
.parent {
  display: grid;
  place-items: center;
  height: 100vh; /* Optional: centers vertically within viewport */
}

button {
  padding: 10px 20px;
}
```
The place-items: center; property is a shorthand that combines both justify-items and align-items, making your code clean and efficient.

**3. The Classic Margin Auto Trick**
For those who love classic solutions, using margin: auto; is a reliable method for horizontal centering. Here's how it works:

```
.parent {
  text-align: center; /* Centers inline-block elements horizontally */
}

button {
  display: inline-block;
  margin: 0 auto;
}
```
While this method doesn’t handle vertical centering, it’s perfect for simple horizontal alignment tasks.

**4. Positioning with Absolute and Transform**
For more complex layouts, combining position: absolute; with transform can be highly effective:

```
.parent {
  position: relative;
  height: 100vh; /* Ensures the parent has a defined height */
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```
This technique places the button in the center of its parent, regardless of the parent’s dimensions, making it a versatile solution for dynamic layouts.

**Conclusion**
Mastering these techniques will give you the flexibility to handle any centering task that comes your way. Whether you’re a Flexbox fan, a Grid enthusiast, or prefer the classic approaches, knowing how to center elements in CSS is a vital skill for creating polished, professional web designs.

What’s your favorite method for centering elements? Share your tips and tricks in the comments below!
Testing experimental browser features on Linux - Is Linux supported?
Tags: webdev, linux
Published: 2024-05-16 11:30:00


I was exploring new HTML and CSS feaures yesterday, a new proposal called [Invokers (InvokeEvent API)](https://open-ui.org/components/invokers.explainer/) caught my attention. According to caniuse, [invokers are available in the following browsers as an experimental feature](https://caniuse.com/mdn-api_invokeevent):
1. Chrome - Available in Canary build only
1. Firefox - Can be enabled by setting `dom.element.invokers.enabled` to true
1. Safari - Can be enabled by setting `InvokerAttributesEnabled` to true

On my linux workstation, I looked to install Chrome Canary. I couldn't find it in an app repository. When I looked at the Chrome Canary website I saw that Linux is not supported. That's a shame!

![Google Canary homepage says Linux is not supported. Try a supported OS.](https://www.roboleary.net/assets/img/blog/2024-05-08-experimental-browser-features-linux/google-canary-homepage.webp)

I moved onto Firefox to enable the experimental setting. You can open the config settings by typing `about:config` in the omnibar. There I searched for the setting and enabled it.

![The browser settings are opened by entering about:config into the omnibar. You can search for settings and enable them.](https://www.roboleary.net/assets/img/blog/2024-05-08-experimental-browser-features-linux/firefox-enable-setting.png)

I tried out an [invoker demo (codepen)](https://codepen.io/utilitybend/pen/GRLBVZX) from [Brecht De Ruyte's article on the topic](https://utilitybend.com/blog/invoking-elements-by-using-only-html-a-first-look-at-invokers), but it did not work! 😒 I tried the codepen in debug mode. Recently, [Ubuntu has shifted to a snap as its default installation for Firefox.](https://www.omgubuntu.co.uk/2021/09/ubuntu-makes-firefox-snap-default). Sometimes there can be gotchas around snaps. I installed Firefox through the Apt package to see if it made a difference, then tried again. No dice.

Since Safari is OS X only, bar some devilish tricks to force an installation on Linux, that puts the kibosh on my experimentation!

I don't know if I am just unlucky with my system configuration not to at least get Firefox to cooperate. It is sad that Linux is not given the same level of support as other Operating Systems in this regard.

--- 
Written by [Rob O'Leary](https://www.roboleary.net)

[Subscribe to web feed](https://www.roboleary.net/feed.xml) for the latest articles.

<small>© Rob OLeary 2024</small>