teleren/devto huggingface dataset:
Sass: Interpolation & Nesting 🎁
Tags: scss, css, design, webdev
Published: 2022-09-24 16:14:54

In the prior post, we discussed the SSCS rules. We began with variables and demonstrated how they cannot be used as placeholders for property names, stating that interpolation was used in their place, so let's expand on the topic of interpolation.

# Interpolation
[sass docs](https://sass-lang.com/documentation/interpolation) said that
> Interpolation can be used almost anywhere in a Sass stylesheet to embed the result of a SassScript expression into a chunk of CSS.

It allows us to insert sass expressions into a simple SASS or CSS code by using `#{expression}`.

Interpolation Syntax:
```
#{expression}
```
Example:

![Interpolation Syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ojaisq0tv2vo38jvqmv.png)

Keep in mind that we may use interpolation as a placeholder for both property names and values.

It can also be utilized as a placeholder for selectors.
Example: 
![Interpolation Syntax Example No. 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4zfj0xech0vhymx0vg4.png)


# Nesting rule
CSS selectors may be nested in Sass just as in HTML.

Take a look at this Sass navigation code example:


![Nesting rule](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fuet0j06r2uncfj5bdg.png)

Notice that in Sass, the `ul`, `li`, and selectors are nested inside the `nav` selector.

While in CSS, the rules are defined one by one (not nested):

You can see that sass is more readable and cleaner than traditional CSS since it allows the nesting of properties.

## Sass Nested Properties

Numerous CSS properties, such as text-align, text-transform, and text-overflow, all begin with the same prefix.

Sass allows you to write them as nested properties:


![Sass Nested Properties Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2g1dtm8yqvs700m8sgd3.png)
For now, that is all there is. We will discuss nesting in further detail in the following post.

See You 🧡
a tiny formwork just like react
Tags: react
Published: 2022-09-24 16:02:26

i have try to create a react like library(just for test), look like it is works fine and also work with other react library(react-router, react-redux, emotion and so on), any one want to play it you can see [@my-react](https://github.com/MrWangJustToDo/MyReact) 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6f44cmowxp1mqnqkdvda.png)

online play [my-react](https://mrwangjusttodo.github.io/MrWangJustToDo.io?overlay=open&playGround=MyReact)
Rails UJS on Vite (⚠️ together with Turbo?)
Tags: ujs, rails, vite
Published: 2022-09-24 15:45:10

[Overview](https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1)

**Attention ⚠️**

Unobstrosive Javascript (UJS) is widely applied in many rails apps. In [5.1](https://github.com/rails/rails-ujs) the Rails team made it indepent from jQuery and moved it to the core of rails. 

Can UJS live alongside Turbo?

Yes, but not on the easy way, [see github/turbo-rails](https://github.com/hotwired/turbo-rails#compatibility-with-rails-ujs) and see [recommendations](https://guides.rubyonrails.org/working_with_javascript_in_rails.html#replacements-for-rails-ujs-functionality).
Killer cross platform pdf reader
Tags: javascript, showdev, webdev, react
Published: 2022-09-24 15:09:21

Project links:

project-demo: https://readsyncpdf.web.app/  
front-end: https://github.com/sarcXD/read-sync-pdf/  
back-end: https://github.com/sarcXD/read-sync-server  

## Alright, what is this?
readsyncpdf (stupid name, yes) is an app that allows you to read pdf files. You can upload a pdf (I think it has a 20mb limit). It will then keep track of how much you have read. So  the next time you want to read something, you just go to the website (on any device), login and it will load the pdf right where you left off.

## Okay, why did you make this?
I built this when I was having trouble reading books or papers. I blamed my environment. I had to switch A LOT!! between my laptop, desktop pc and mobile. To make matters worse I was dual booting on my laptop, so goodbye to anything I read and forgot about. I then decided to make something that could fix this pain point.

## Did I succeed??
YEAH, I wanted to read a book one day, I started off on my laptop, eventually when I wanted to play some games and stop working, I shifted to my desktop reading it there. Eventually when I got tired I just lay on my bed, opened it on my phone and read it there. AMAZING!!

## Why open source
well, several reasons, mainly, none of the people who read books amongst my friends used it, because well they had dedicated devices to read books and they used epub as a format. I realised this was a niche and as much as I would have liked this to be a service, I honestly wanted to do and make other things as well, and I didn't have an indicator of whether this would be successful. THUS, I open sourced it. I also wanted to have some opensource React code that I could show, since I have very little of that even though I've built a ton of *NDA* stuff.

HAVE FUN. I stopped maintaining this a while ago, and might pick it up based on the interest in it, but for now I guess the repo just remains public and requiring a buncha fixes and updates.
How to get the AuthorID (and Type) to use with the API and poost on LinkedIn Pages
Tags: linkedin, api, dotnet
Published: 2022-09-24 15:08:57

The following code explains how to post on your LinkedIn Business Page (Company pages and Showcase Pages) and how you can find the `author id` for your page

Many people are confused with the AuthorID in the API
When you create your access code, you do this with your personal account.   But posting on LinkedIn pages doesn't use the personal ID.  The API needs the Page ID and Page Type

The following code lets you find how you can find it the correct ID.

## Prerequisites
* [CodeHelper.API.LinkedIn](https://www.nuget.org/packages/CodeHelper.API.LinkedIn)
* [Create an App on LinkedIn](https://www.linkedin.com/developers/apps)
* [Get Access Token](https://www.linkedin.com/developers/tools/oauth)
  
  
## Online Tool
I have created an online tool to make it easier:
[Online Tool](https://frederik.today/codehelper/tools/linkedin/page-access-control)
  
  
## The Code
```
use CodeHelper.API.LinkedIn;

LinkedInHelper _helper = new() { AccessToken = "AQWJ0..." };
List<Organisation> _orgs = await 
                _helper.GetUserOrganizationAccessControl();
foreach(var _org in _orgs)
{
   Console.WriteLine(_org.OrganizationalID + " " + 
                              _org.Localized.LocalizedName);
}
```
## The Author ID's
OrganizationalID  return the urn:li:TYPE:ID
BMI calculator
Published: 2022-09-24 14:52:44

BMI calculator came out from a need. My sister always has to do BMI and other math for her nutrition major. So I decided to create a program that take some data for an individual and turn it into a string that tells you, who you are and what is your BMI.

During my coding procedure, I tried to make it simple using OOP and creating variable that do not bring error and the future.

In conclusion, BMI calculator is a simple procedure used to know someone's body mass index which could help you to understand if you are on a healthy weight or not.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwls5n30fn7kqqwkfn72.gif)
[https://github.com/dcesp6599/BMI-calculator/blob/2c9bc4594430145e5f20eb35f37b49fb7a27e874/BMI%20calculator.py](url)
Code Smell 165 - Empty Exception Blocks
Tags: webdev, beginners, programming, python
Published: 2022-09-24 14:02:05

*On Error resume next was the first thing I learned in my first job*

> TL;DR: Don't avoid exceptions. Handle Them.

# Problems

- [Fail Fast](https://dev.to/mcsee/fail-fast-48dm) Principle Violation

# Solutions

1. Catch the exception and deal with it explicitly

# Context

On early programming days, we privileged the systems running before error handling.

We have evolved.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/9569c95218a7d8a33d68587fa70e5782)
```python
# bad
import logging

def send_email(): 
  print("Sending email") 
  raise ConnectionError("Oops")
  
try:
  send_email() 
except: 
  # AVOID THIS
pass
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/02d281247e7baac4d5dca91bc77a146a)
```python
import logging

logger logging.getLogger(__name___)
try:
  send_email()
except ConnectionError as exc:
  logger.error(f"Cannot send email {exc}")
```

# Detection

[X] Automatic 
  
Many linters warn us on empty exception blocks

# Exceptions

If we need to skip and ignore the exception, we should document it explicitly.

# Tags

- Exceptions

# Conclusion

Prepare to deal with the errors. 

Even if you decide to do nothing, you should be explicit with this decision.

# Relations

{% post https://dev.to/mcsee/code-smell-132-exception-try-too-broad-3f8n %}

# More Info

{% post https://dev.to/mcsee/fail-fast-48dm %}

[On Error Resume Next Package](https://www.npmjs.com/package/on-error-resume-next)

# Disclaimer

Code Smells are just my [opinion](https://dev.to/mcsee/i-wrote-more-than-90-articles-on-2021-here-is-what-i-learned-1n3a).

# Credits

Photo by [James Best](https://unsplash.com/@jim_at_jibba) on [Unsplash](https://unsplash.com/)
  
Thank you @[Jan Giacomelli](@jangia)

{% twitter 1571126817322602496 %}

* * *

> Optimization hinders evolution. Everything should be built top-down, except the first time. Simplicity does not precede complexity, but follows it.

_Alan Perlis_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
Why use AWS for DevOps?
Tags: beginners, productivity, devops, aws
Published: 2022-09-24 13:54:55

**AWS** provides a flexible set of  services designed to enable businesses to  build and deliver products faster and more reliably using AWS and DevOps methodologies. 

These services simplify infrastructure provisioning and management, deploy application code, automate the software release process, and monitor the performance of your applications and infrastructure. 


**DevOps** is a combination of  philosophies, practices, and cultural tools that increase an organization's ability to deliver applications and services at high speed: develop and improve products at a faster rate than ever before with organizations using traditional software development and infrastructure management processes. This speed allows organizations to better serve their customers and be more competitive in the marketplace. 

## Why use AWS for DevOps?


### Quick start 

Any AWS service is perfect if you have an AWS account. There are no system or software requirements to install.  

### Fully managed service 

These services can help you leverage AWS resources faster. You can worry less about configuring, installing, and operating the infrastructure yourself. This allows you to focus on your main product. 

### Built for scale 

You can manage a single instance or scale to thousands with AWS services. These services help you get the most out of flexible computing resources by simplifying licensing, configuration, and scaling.  

### Programmable 

You have the option of using each service through the AWS CLI or through the API and SDK. You can also model and provision your AWS resources and your entire AWS infrastructure using  AWS CloudFormation declarative templates.  

### Automation 

AWS helps you use automation so you can build faster and more efficiently. Using AWS services, you can automate manual tasks or processes such as deployment, development and testing workflows, container management, and configuration management. 


### Privacy 

Use AWS Identity and Access Management (IAM) to define user permissions and policies. This gives you granular control over who can access your resources and how they access them. 

### Large ecosystem of partners 


AWS supports a large ecosystem of partners that integrate  and extend AWS services. Use your favorite third-party and open source tools with AWS to build  end-to-end solutions.  

### How much do pay that much 

With AWS, buy the services  you need  and only for the time you plan to use them. AWS Pricing has no upfront fees, termination penalties, or long-term contracts. The AWS Free Tier helps you get started with AWS. Visit each service's pricing page to learn more.


Thanks for reading my article till end. I hope you learned something special today. If you enjoyed this article then please share to your friends and if you have suggestions or thoughts to share with me then please write in the comment box.

Follow me and share your thoughts,
[GitHub](https://github.com/MakendranG)
[LinkedIn](https://www.linkedin.com/in/makendran/)
[Twitter](https://twitter.com/MakendranG)
What the hell is this Execution Context?!
Tags: javascript, webdev, programming, beginners
Published: 2022-09-24 13:47:57

_JavaScript has quite the reputation for being the most popular language in the world, and 98% of world's websites use JavaScript as their main source of development for either front, end or both ends._

But how does JS functions under the hood to be this popular and powerful?

It is all possible because of the JavaScript runtime environment, which contains many functionalities and tools which contains the call stack, the event loop, callback queue, microtask queue, a collection of web APIs. [More on that JS runtime env](url).

Inside the call stack, the code is executed one function at a time. Every time code is executed an Execution context is created with it.

An execution context is a virtual environment which includes 2 parts, the variable environment (memory) & Thread of execution (Code)

## Variable Environment:

The values inside the this are stored as key:value pairs registering all the variables and functions inside the code. The variables are stored as the variable itself, and same with the functions, it stores functions as a whole no matter the size, there are indeed certain exceptions, but overall functions are stored as whole inside the Execution context as a whole.

## Thread of Execution:

Inside this all the functioning happens, the code is executed line by line, since JS is a single threaded language, it can only execute one command of line at once.

Here's my poorly drawn adaptation of an Execution context:
![Execution context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6rsoyq2tnpneh2tlmfg.png)

## The process:

JS skims through the code twice, in the first run, it registers all the variables and functions. Functions are registered as they are, but in case of variables, they are stored as 'undefined'. It means we can access the variable prior to it being defined but it'll return undefined.

for ex: 

```
console.log(a);
var a = 10;
```

This is a valid code in JS it'll log undefined in the console, but do take note this is only possible in ONLY the case of var and not let/const. That's one of the differences between var, let and const. This phenomenon to access variables prior to their declaration is hoisting, more on that in another blog.

On the second run it executes the code line by line and every time there is a variable is defined, it updates the value of that variable from undefined to the value inside the variable environment.

Once the execution is completed, the Execution context is popped off the call stack.
At the base, every time the code is run, the Global Execution context is created, and every Execution context after that is on top of it.

And that is how the code is executed inside the JS runtime, but this is only the tip of the iceberg, there are a LOT of tools inside the JS Runtime that plays a role in executing code!

Hope you liked! :)
Function Undefined while using it from same package
Published: 2022-09-24 13:42:58


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


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


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

HI All,

Unable to find out what is going wrong here.

Newly created 2 Files LibConfig and LibSQL, but LibConfig is undefined  while calling a function in LibConfig from LibSQL.

NOTE: i want to install this complete project as package to local and use it in other projects 

go.mod file here

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kat2nvryypwbjlypneu6.png)
How to debug Laravel App using Laravel Debugbar
Tags: opensource, php, laravelframework, laravel
Published: 2022-09-30 13:20:05

---
title: How to debug Laravel App using Laravel Debugbar
published: true
date: 2022-09-24 13:14:43 UTC
tags: opensource,php,laravelframework,laravel
canonical_url: https://blog.devgenius.io/how-to-debug-laravel-app-using-laravel-debugbar-ec51a8587786
---

[![](https://cdn-images-1.medium.com/max/1350/1*HMZ7X53DhWJ5kAdCn_XKFA.png)](https://blog.devgenius.io/how-to-debug-laravel-app-using-laravel-debugbar-ec51a8587786?source=rss-17217f29618a------2)

Laravel creates an admin panel from scratch — Part 16

[Continue reading on Dev Genius »](https://blog.devgenius.io/how-to-debug-laravel-app-using-laravel-debugbar-ec51a8587786?source=rss-17217f29618a------2)
How to allow users to add their own custom domains?
Tags: webdev, aws, help, beginners
Published: 2022-09-24 12:26:39

I am using node.js and I want to give my users the ability to add their own custom domains. For example, my app is hosted on DigitalOcean with the domain ‘https://app.com’ and the user, say, John, the page is ‘https://app.com/john’ Now I want my user, John, to be able to add his own domain ‘www.john.com’ so that it displays ‘https://app.com/john’ site
What React Is ?. In 1 Min.
Tags: javascript, react, programming, beginners
Published: 2022-09-24 12:24:43

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components.
It is maintained by Meta (formerly Facebook) and a community of individual developers and companies.
React can be used as a base in the development of single-page, mobile, or server-rendered applications with frameworks like Next.js. 

React adheres to the declarative programming paradigm. Developers design views for each state of an application, and React updates and renders components when data changes.
React code is made of entities called components.
Components can be rendered to a particular element in the DOM using the React DOM library. When rendering a component, one can pass the values between components through "props".

React creates an in-memory data-structure cache, computes the resulting differences, and then updates the browser's displayed DOM efficiently.

{% embed https://youtu.be/LIjOavWW8Fo %}

The basic architecture of React applies beyond rendering HTML in the browser. 
For example, Facebook has dynamic charts that render to `<canvas>` tags, and Netflix and PayPal use universal loading to render identical HTML on both the server and client.
JSX in React.js
Tags: javascript, webdev, beginners, programming
Published: 2022-09-24 12:11:36

If you simply google about JSX, google gives us a vaguely rough definition such as: JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React. 
But, in this post, we are going to learn more about JSX.
## Introduction
JSX enables us to construct HTML elements with JavaScript and insert them into the DOM without using the createElement() or appendChild() methods. It only transforms HTML tags into react elements. You are not obliged to utilise JSX, although it makes writing React apps easier.

## Why does React utilise _className_ rather than the _class_ attribute?
The sole reason for this is because the class is a reserved keyword in JavaScript, and because we use JSX in React, which is an extension of JavaScript, we must use className instead of the class attribute.

## Why can't browsers read JSX?
Browsers cannot read JSX because it lacks an intrinsic implementation that allows browser engines to read and interpret it. JSX is not meant to be implemented by engines or browsers; rather, it is meant to be utilised by different trans pilers to convert JSX into legitimate JavaScript code.

## JSX - Summary
- When developing big pieces of code, JSX assists us in keeping our code concise and elegant.
- According to the React documentation, most users use it as a visual assist while dealing with UI within JavaScript code.
- With JSX, React can display more informative error and warning messages.
- It is relatively simple to utilise JSX while constructing a React application if one is familiar with HTML.
- Faster than normal JavaScript as it performs optimization while translating to regular JavaScript.
Flutter: Firebase App distribution using GitHub actions.
Tags: flutter, github, firebase, android
Published: 2022-09-24 11:59:42

## Firebase App distribution


Firebase App Distribution makes distributing your apps to trusted testers painless. By getting your apps onto testers' devices quickly, you can get feedback early and often. And if you use Crashlytics in your apps, you’ll automatically get stability metrics for all your builds, so you know when you’re ready to ship.



## Github Action

GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository or deploy merged pull requests to production.


## Why do we need GitHub actions to distribute our app to the tester in the testing phase?

So the answer is simple, when you change in code, assume you made some changes in the application code, and then you will push code to git and then make release your app through the following command:

`Flutter build apk --release`

and then upload your app to firebase manually and then sent it to tester groups but it's a very lengthy process and you may forget to release the app after pushing the code or something else.

## Why you do not push just code, all the steps will be done by GitHub actions.


![meme1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/039j5zmqnuq2ourac9dd.jpeg)

Yes, We can automate building the flutter app, upload it to the firebase and send it to the testers.

> We are going to use GitHub secrets to avoid releasing firebase keys and other secret keys in the public repo.



![meme 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nugq3ilpurt2iq31rjj0.jpg)

## Solutions : Watch video 



[![video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgilgu8m06gt518501qx.jpg)]
(https://youtu.be/bMbJdZOWl2A)

## OUTPUT



![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qb32zop4dpaayl23euyz.jpg)


Stay Tuned...

- [**Source Code**](https://github.com/Djsmk123/firebase_app_distribution_example)

> Follow me:

- [GitHub](https://github.com//djsmk123)

- [LinkedIn](https://www.linkedin.com/in/md-mobin-bb928820b)

- [Twitter](https://twitter.com/smk_winner)