teleren/devto huggingface dataset:
A Cup of Tailwind CSS
Tags: webdev, css, tailwindcss
Published: 2022-09-17 05:27:05


As programmers, we love to simplify life. Tailwind CSS is a framework that is created to help programmers from writing a humongous amount of CSS loads while allowing us to style our design in HTML.

However, nothing is perfect. Just like drinking a cup of tea, some people may like Black Tea and some may prefer to drink Green Tea. The post may even be taken down if the author overlooks the idea of Coffee. So, let's not talk about tea and start evaluating the taste.

---

**PROS:**

**One for All**: It makes work easier because one doesn't need to switch between the HTML and CSS Styling. Everything can be done on one page.

**Concise CSS Styling**: CSS code is simplified into smaller blocks of "index" which can be used immediately in an HTML file.

**Robust and Responsive Customization**: Tailwind CSS is a responsive and mobile-friendly CSS Framework. It is also open source, providing freedom for customizations.

**Others**:
- _Great Community Support_: The framework is developed by top-notch engineers. The code is constantly being maintained and updated.
- _CSS Power Up_: One doesn't need to know CSS to use TailwindCSS.

![Power Up Meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1cz67uvgqvmvlmfgbbwc.gif)

---

**CONS:**

**Verbose HTML Code**: Due to the nature of having everything implemented together, codes may become difficult to read.

![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7h10vo6gsxy041mlusfc.png)

**Others**:

- _Lack of Styling Components_: Some people may want to structure their design in components. Tailwind CSS has a different design workflow.
- _Learning Curve_: Some people hate to memorize vocabulary.

---

####Summary
Great for writers, sad for readers

---

#####Secret Message
You can balance code's readability and coding efficiency by using Tailwind CSS only for styling such as hovering effects. Everything else (styling components, positioning, etc.) could remain the same.
Loop functions in synchronous way #React Quick Notes.
Tags: javascript, react, node, beginners
Published: 2022-09-17 05:17:33

We all know term called **Recursion**. That is same we are doing in below example to loop through multiple functions which should execute one after another.

This is one of the ways we can achive function serialization and can be usfull to your application.

```javascript
const objFunctions = [
  { func: function1, args: args1 },
  { func: function2, args: args2 }
];  //We defined functions that we want to call one by one.

function LoopFunctionOneByOneCallAfterOneAnother(objFunctions) {
  if (!objFunctions) process.exit(0); // finished
  ExecuteSingleFunctionCall(objFunctions, function (result) {
    // continue AFTER callback
    LoopFunctionOneByOneCallAfterOneAnother(objFunctions.shift());
  });
}  // notice we called same function under this function which has parameter to get next object from objFunctions.

function ExecuteSingleFunctionCall(objFunction, callback) {
  const { args, func } = objFunction;
  func(args, callback);
} // Supportive function to execte single function. 


LoopFunctionOneByOneCallAfterOneAnother(objFunctions.shift()); // In the end we call our function.
```
So this whole block will execute in serialized manner. 
Above referenced from site https://nodejs.dev/en/learn/asynchronous-flow-control/, you can find more usefull ways over here.
System Design: Circuit breaker
Tags: distributedsystems, architecture, tutorial
Published: 2022-09-17 04:48:42


The circuit breaker is a design pattern used to detect failures and encapsulates the logic of preventing a failure from constantly recurring during maintenance, temporary external system failure, or unexpected system difficulties.

![circuit-breaker](https://raw.githubusercontent.com/karanpratapsingh/portfolio/master/public/static/courses/system-design/chapter-IV/circuit-breaker/circuit-breaker.png)

The basic idea behind the circuit breaker is very simple. We wrap a protected function call in a circuit breaker object, which monitors for failures. Once the failures reach a certain threshold, the circuit breaker trips, and all further calls to the circuit breaker return with an error, without the protected call being made at all. Usually, we'll also want some kind of monitor alert if the circuit breaker trips.

## Why do we need circuit breaking?

It's common for software systems to make remote calls to software running in different processes, probably on different machines across a network. One of the big differences between in-memory calls and remote calls is that remote calls can fail, or hang without a response until some timeout limit is reached. What's worse if we have many callers on an unresponsive supplier, then we can run out of critical resources leading to cascading failures across multiple systems.

## States

Let's discuss circuit breaker states:

### Closed

When everything is normal, the circuit breakers remain closed, and all the request passes through to the services as normal. If the number of failures increases beyond the threshold, the circuit breaker trips and goes into an open state.

### Open

In this state circuit breaker returns an error immediately without even invoking the services. The Circuit breakers move into the half-open state after a certain timeout period elapses. Usually, it will have a monitoring system where the timeout will be specified.

### Half-open

In this state, the circuit breaker allows a limited number of requests from the service to pass through and invoke the operation. If the requests are successful, then the circuit breaker will go to the closed state. However, if the requests continue to fail, then it goes back to the open state.


---

_This article is part of my open source [System Design Course](https://github.com/karanpratapsingh/system-design) available on Github._

{% github karanpratapsingh/system-design %}
Android Mini Projects With Source Code
Tags: programming, android, miniprojects, beginners
Published: 2022-09-17 04:48:19


Over 74% of smartphones on the earth work on Android OS. Additionally android OS allows companies to develop customized android apps to interact with their customers or followers through android apps. A wide variety of successful online business ideas can be developed using android apps. Takeoffprojects compiles the best [android mini projects with source code](https://takeoffprojects.com/android-mini-projects-with-source-code) for students.

Important Android Mini Projects Ideas for 2022

- [Smart Event Invitation](https://takeoffprojects.com/project-details/smart-event-invitation--9118)
- [On Road Vehicle Assistance Finder](https://takeoffprojects.com/project-details/on-road-vehicle-assistance-finder--9115)
- [Agriculture Updates Android Project](https://takeoffprojects.com/project-details/agriculture-updates-android-project--9084)
- [Anti-Ragging App](https://takeoffprojects.com/project-details/anti-ragging-app--9098)
- [Android File Storage](https://takeoffprojects.com/project-details/android-file-storage--9094)
- [Android Habit Tracker](https://takeoffprojects.com/project-details/android-habit-tracker--9090)
- [Panic Control](https://takeoffprojects.com/project-details/panic-control--3890)
- [College Notification Voice Alerts](https://takeoffprojects.com/project-details/college-notification-voice-alerts--3965)
- [Android Based Vehicle Mechanic System](https://takeoffprojects.com/project-details/android-based-vehicle-mechanic-system--3771)
- [Course Recommendation System](https://takeoffprojects.com/project-details/course-recommendation-system--3939)

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

These innovative [android app project ideas](https://www.youtube.com/watch?v=lAuXRxqkNd0&t=233s) for students for learning as well as academic projects. Your search for the new project topics ends here. These ideas have been researched and updated here every week for students. The Android platform has grown exponentially in terms of size and technology in the decade. Android is used for standalone as well as server based hybrid mobile phone system implementation.
AssociateBy - List to Map in Kotlin
Tags: kotlin, android
Published: 2022-09-17 04:45:44

---
title: AssociateBy - List to Map in Kotlin
published: true
description: In this blog, we will learn about the Kotlin Collection Functions - associateBy that converts a list into a map.
tags: kotlin, android
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/etqa581cnrtr9oqhqfee.png
canonical_url: https://outcomeschool.com/blog/associateby-list-to-map-in-kotlin
---

Hi, I am Amit Shekhar, Co-Founder @ [Outcome School](https://outcomeschool.com) • IIT 2010-14 • I have taught and mentored many developers, and their efforts landed them high-paying tech jobs, helped many tech companies in solving their unique problems, and created many open-source libraries being used by top companies. I am passionate about sharing knowledge through open-source, blogs, and videos.

In this blog, we will learn about the Kotlin Collection Functions - `associateBy` that converts a list into a map.

**This article was originally published at [Outcome School](https://outcomeschool.com/blog/associateby-list-to-map-in-kotlin).**

There are many useful collection functions in Kotlin. It is good to know about those and use those based on the requirement. One of those collection functions is `associateBy`.

`associateBy` let us convert a list into a map.

Let's learn by example.

Consider a `data` class `Contact` like below:

```kotlin
data class Contact(val name: String, val phoneNumber: String)
```

And, a list of `Contact`:

```kotlin
val contacts = listOf(
    Contact("Amit", "+9199XXX11111"),
    Contact("Messi", "+9199XXX22222"),
    Contact("Ronaldo", "+9199XXX33333"))
```

Now, let's use the `associateBy` function on this list of `Contact` to get a `Map` with the

- `key` as `name`
- `value` as `phoneNumber`

```kotlin
val nameToNumberMap = contacts.associateBy( {it.name}, {it.phoneNumber})
println(nameToNumberMap)
```

This will print the following:

```
{Amit=+9199XXX11111,
Messi=+9199XXX22222,
Ronaldo=+9199XXX33333}
```

If we go through the source code, we will find the following definition:

```kotlin
inline fun <T, K, V> Iterable<T>.associateBy(keySelector: (T) -> K, valueTransform: (T) -> V): Map<K, V>
```

**Note:**

- Returns a `Map` containing the values provided by `valueTransform` and indexed by `keySelector` functions applied to elements of the given collection.
- If any two elements is having the same key returned by `keySelector` then, the last one will get added to the map.
- Maintain the original order of items.

That's it for now.

Thanks

**Amit Shekhar**

Co-Founder @ [Outcome School](https://outcomeschool.com)

You can connect with me on:

- [Twitter](https://twitter.com/amitiitbhu)
- [YouTube](https://www.youtube.com/@amitshekhar)
- [LinkedIn](https://www.linkedin.com/in/amit-shekhar-iitbhu)
- [GitHub](https://github.com/amitshekhariitbhu)

[**Read all of our blogs here.**](https://outcomeschool.com/blog)
CSS calc() function
Tags: html, css, webdev, beginners
Published: 2022-09-17 04:24:51

Hello Everyone today i will be discussing calc() function in CSS.

* Sometimes we have to provide the numerical values to the properties and wants a type of equations that can help us to create a constant way to apply that numerical value and you don't have to set the values manually everytime if there is a change in the values.
* Example - Suppose you created 3 elements and make them inline-block and wants them equal width and between them , a space of 30px and also wants that the entire width of the parent container to be used by those elements, Well you might think providing the elements equal width in pixels to those elements but whenever the container width changes , you have to change the width of those elements also to keep them in one row.There you will be in need of something that could do the work for you.
* calc() function does this for you , it can be used to create some equation that does the mathematical part for you.

## Example - Creating Elements of equal width 
```html
<div class="container">
      <div class="child-element">First</div>
      <div class="child-element">Second</div>
      <div class="child-element">Third</div>
</div>
```

```css
* {
    padding: 0;
    margin: 0;
}

.container {
    font-size: 0;
}

.child-element {
    width: calc((100% - 60px) / 3);
    height: 300px;
    background-color: crimson;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 2rem;
    font-size: 20px;
}

.child-element:nth-child(2) {
    margin: 0 30px;
}
```

## Output - 

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

* As you can see we have 3 child elements and we provided the equal width to all using calc() function.
* (100% - 60px) / 3, it means the elements width will be 100% - 60px (60 px due to margin left and right in the second element takes 60px , 30left + 30right = 60 ), then we divide it by 3 taking 1/3 space equally.
* In the container , we have given font-size:0, to cancel out the spacing created due to inline-block property.

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90
Work Manager Android
Published: 2022-09-17 04:07:13

Work manager handles the scheduled tasks that can run even if app exits or device restart.

In simple we can say ,Run background jobs using work manager.

For example : sync data from server.

Explanation :

suppose, we have  a news app and every 2 hours we goes to server and check whether there is new updated news or not. If there any lets notify the users that new updated news .This is done with the help of work manager.
336. Leetcode solution in Java
Tags: java, programming
Published: 2022-09-17 03:54:39

```
class Solution {
  public List<List<Integer>> palindromePairs(String[] words) {
    List<List<Integer>> ans = new ArrayList<>();
    Map<String, Integer> map = new HashMap<>(); // {reversed word: its index}

    for (int i = 0; i < words.length; ++i)
      map.put(new StringBuilder(words[i]).reverse().toString(), i);

    for (int i = 0; i < words.length; ++i) {
      final String word = words[i];
      // special case to prevent duplicate calculation
      if (map.containsKey("") && map.get("") != i && isPalindrome(word))
        ans.add(Arrays.asList(i, map.get("")));
      for (int j = 1; j <= word.length(); ++j) {
        final String l = word.substring(0, j);
        final String r = word.substring(j);
        if (map.containsKey(l) && map.get(l) != i && isPalindrome(r))
          ans.add(Arrays.asList(i, map.get(l)));
        if (map.containsKey(r) && map.get(r) != i && isPalindrome(l))
          ans.add(Arrays.asList(map.get(r), i));
      }
    }

    return ans;
  }

  private boolean isPalindrome(final String word) {
    int l = 0;
    int r = word.length() - 1;
    while (l < r)
      if (word.charAt(l++) != word.charAt(r--))
        return false;
    return true;
  }
}

```

#leetcode
#challenge
here is the link for the problem: 
https://leetcode.com/problems/palindrome-pairs/
Scoped Function in Kotlin
Tags: let, run, also, apply
Published: 2022-09-17 03:53:38

There are five scope functions in kotlin : let, run ,with ,also & apply.

1. let: It takes object it is invoked upon as the parameter & return the result of the lambda expression.let is used for checking nullable property.
`Syntax : var name : String? = "Hello"
name?.let{println(it)}`


For Example :

```
fun PerformOperation() {
val name:String = "Ram"
val person = Person.let {
return "Name: ${it.name}"
}
print(person)

}
```
`Output : Ram`

2.also :
 It does some additional processing on object it was involked 
 unlike let object. but returns original object instead of new 
 return data.

3.run :
 It is similar to let function .It returns the last statement .It does not contain 'it' keyword. 

4.with :
 It is just like run operator .It refers context of the object.
Kotlin Flows On android
Published: 2022-09-17 03:44:20

In [Coroutines](url), a Flow is a type that can emit multiple values sequentially as opposed to suspend functions that return only a single value.

For Example : we can use Flow  to receive live updates from database.

Flows are built on top of coroutines and can produce multiple values.

A flow is conceptually a stream of data that can be computed asynchronously. The emitted values must be of the same type. For example, a `Flow<Int>` is a flow that emits integer values.
👨🏻💻 How to code for 8 hours without feeling tired.
Tags: webdev, beginners, programming, tutorial
Published: 2022-09-17 03:40:24

🔴 I’ve been coding wrong my whole life.

I thought it was okay to just sit down at my desk, open my laptop, take a task from my To-Do list, play some music and code until I felt tired.

But in reality, this style of work always kills my productivity level after 2–4 hours of coding.

I felt so tired that I did NOT want to do anything except different low energy tasks ( Like Code Review )

Today I can code 8+ hours without like crap after.

WHAT HAS CHANGED 🤔? YOU MAY ASK ME.

THE ANSWER? MY APPROACH TO WORK 🛵

Over time, I’ve created a productivity system 🪐 that helps me to code, write, create and live at my maximum capabilities without getting bored, tired, or burnt out.

My productivity system stays on 3 main pillars:

Schedule
TO-DO for tomorrow
System 69!
Let’s look closer at each of them

**📆 Schedule**

Everything starts with a schedule. What, where, and when I do.

My schedule looks like this:

7 AM to 8:30 AM: Meditation, Sport, Shower.

8:30 AM to 9:00 AM: Breakfast.

9:00 AM to 12:00 PM: My 3 hours programming time.

12:00 PM to 1:00 PM: Lunch and go out walking for 15–20 minutes.

1:00 PM to 6:00/7:00/8:00 PM: My Next hours for coding.

8:00 to 9:00 PM: Family Time, Watch a movie or something.

DO NOT FORGET TO SLEEP 8 HOURS A DAY.
YOUR BRAIN NEEDS TO COLLECT THE GARBAGE AND RID OF THEM.

🗺 To-Do for Tomorrow

My To-Do list is simple. I use a plain paper notebook to make it and Notion digital copy.

I create my To-Do list in the evening for tomorrow day.

I create my To-Do list for tomorrow, and not in the morning because it saves my productivity time and my energy attention.

**🚦Systematic Breaks**

When I started coding I did it like this:

Open laptop 👉 Open code editor 👉 Pick a task 👉 code until I feel tired 👉 take a break ( Meditate or walking for 5 minutes / spending time on social media ).

Yup!

Until I read about Pomodoro. The Pomodoro Technique is a time management method when you break down work into intervals, traditionally 25 minutes in length, separated by short breaks.

Do You Code 8 hours a day?

Read More

[**It’s 2022, Please Don’t Just Use “console.log” Anymore 😎**
](https://dev.to/ashishdonga/its-2022-please-dont-just-use-consolelog-anymore-2oel)
Progress on Release 0.1
Tags: opensource
Published: 2022-09-17 03:30:58

Hello!

This week I got started on Release 0.1, though I've run into a lot of bugs so far, it's been very engaging trying to build my own SSG tool.

I worked with my partner ([anshul137](https://dev.to/anshul137)) to improve the code in both SSG tools. We've known each other from previous classes and discussed this project via Slack.

Reviewing Anshul's SSG tool was relatively easy — his logic was straightforward and not difficult to understand. I did find a few issues in his code but not very many as of this post.

Anshul reviewed my SSG tool and found some issues that I wasn't aware of initially (such as the /dist folder not being created) as well as some minor errors I had overlooked.

**The issues I filed:**

[minor errors in README.md file](https://github.com/anshul137/ag-ssg/issues/1) - There were some minor spelling, formatting and information errors in the README.md file.

[Help message from CLI `--help` flag is minimalistic](https://github.com/anshul137/ag-ssg/issues/2) - Help message generated by the CLI `--help` flag looks like a placeholder help message. It does not yet provide any intuitive information about the tool.

[Attempting to run `npm link` gives an error](https://github.com/anshul137/ag-ssg/issues/3) - The instructions stated to run the `npm link` command before using the tool but this generated an error.

[Version number in `package.json` is an invalid number](https://github.com/anshul137/ag-ssg/issues/4) - The version number listed in the `package.json` file for the app was not in a valid format.

[Error when attempting to use `--input` flag](https://github.com/anshul137/ag-ssg/issues/5) - Attempting to use the `--input` flag generated an error when the program attempted to delete the old /dist folder. A function invoked by the code is not recognized.

**The issues my partner filed:**

[README.md file missing](https://github.com/a-parris21/ap21-ssg/issues/1) - I was working on the 'test' branch of my repos and did not switch back to the 'main' branch in order to push the updated README.md file there. It has now been pushed to the 'main' branch though it is not yet fully completed.

[Output files are missing](https://github.com/a-parris21/ap21-ssg/issues/2) - My program currently does not generate output `.html` files as intended. Currently working to resolve this.

[/dist folder is not created](https://github.com/a-parris21/ap21-ssg/issues/3) - The /dist folder is not created when the program executes. Currently looking into this.

[2 optional implementations are missing](https://github.com/a-parris21/ap21-ssg/issues/4) - The optional implementation features for the code were missing. They have been added to the program and also to the README.md file.

[--version CLI flag not function correctly](https://github.com/a-parris21/ap21-ssg/issues/5) - The name of the tool prints to the console when Anshul tests the app but the version number either does not appear or has the wrong value.

Anshul was able to fix most of his issues thus far. 
I am currently working to resolve issues #2 and #3 in my code.
When do you use which one?
Tags: css, discuss, frontend, webdev
Published: 2022-09-17 03:16:50

Hey Front-end web developers, I have a question for you !

Nowadays there are multiple choices between CSS frameworks and Component libraries.

The question is simple, how you decide which technologies you are selecting. ( Bootstrap, TailwindCSS, MaterialUI, ChakraUI, Storybook etc...)

Let's discuss it on comments. The points you should mention:

- Size of project
- Technology requirements for project
- Time-efficiency curve
- Knowledge
- Your rating
- Number of people involved

Maybe we can generate a equation to select the most-suitable technology for our future projects