teleren/devto huggingface dataset:
3 new Tailwind color palette generators
Tags: tailwindcss, palette, css, productivity
Published: 2020-10-17 17:48:37

Tailwind is great, but sometimes we want to use colors which are little bit different than original palette. Maybe less saturated.

I wanted an easy way to just generate full color palette, with all the shades, and copy the code into the configuration file and voila, that's it. 

I have made one such tool and also found another 2 similar which I haven't seen anywhere before so I would like to present to you:
<br>

### **Huey**
*Link*: https://huey.design
*Github*: https://github.com/sparkpunk/huey

![Screenshot_2](https://dev-to-uploads.s3.amazonaws.com/i/11jh57g3m2dpnmisgrba.jpg)

This one is awesome. Not only you can create palette and code, but you can choose how many hues you want, how many shades and the factor to create them by: luminosity, lightness, intensity.
Nice. 🌈

It also has convenient display of text so you can easily see is it readable enough. 

And lastly, you can easily export the code for Tailwind, CSS, and SCSS with the click of a button at the top.
<br>


### **UI Colors**
*Link*: http://sitehero.nl/uicolors/

![Screenshot_3](https://dev-to-uploads.s3.amazonaws.com/i/ohb95yg4uvgatk860vsa.jpg)


If you don't need so many colors this one is for you. Doesn't offer creating the full palette from base color, but what does offer is fine tuning of each color. Saturation, brightness and hue are reflected to create shades of each color. You have to try to see 😊

While you are doing you can easily see how the buttons and alerts will look like. 

There's an option to chose the function for brightness easing which we know is useful because some colors often don't match in brightness with other colors. (Looking at you Yellow 🟡)

After you are satisfied, export the code nicely and there you go!
<br>


### **Palettolithic**
*(created by me)*
*Link*: https://palettolithic.com/
*Github*: https://github.com/tombohub/palettolithic

![Screenshot_10](https://dev-to-uploads.s3.amazonaws.com/i/qecn0eriwk30ljosxcuo.jpg)
  

This one is easy peasy too. Chose your color and it will create harmonious (to it's best abilities :smile:) full color palette, with shades for each color. 

Besides Tailwind it also creates code for Bootstrap. Which is basically SCSS so you can use it in other frameworks. 🛠

Edit: now available with CSS variables too!


##### Final word
I hope you will find these tools useful as I do and it will make working with colors little bit easier for you.

If you like them - share them , star them, and show some love :heart: 😊
Team 11 Recap
Tags: collablab, juniordevelopers, earlycareerdevelopers, webdev
Published: 2020-10-17 17:37:06

---
title: Team 11 Recap
published: true
description: 
tags: collablab, juniordevelopers, earlycareerdevelopers, webdev
//cover_image: https://direct_url_to_image.jpg
---

The Collab Lab’s 11th cohort (TCL-11) wrapped up a few weeks ago! This cohort brought with it four amazing members with a very strong technical skill set and amazing collaboration skills. All the members of this cohort would make an excellent addition to a development team (some of them already do), and if you are hiring you should 100% reach out to them! 

[This cohort](https://the-collab-lab.codes/who-we-are/#cohort-11) consisted of [Brandon Lee](https://github.com/brewswain), [Kathy Lambert](https://github.com/CodeMeKathy), [Stefanie Davis](https://github.com/stef-codes), and [ Volha Hancharova](https://github.com/daredtech). [The mentors](https://the-collab-lab.codes/who-we-are/#mentors) were Jennifer Batara, Joey Laguna and LaQuita Gollman. 

The cohort hit the ground running, and even from the first week there were architectural decisions being made that would help the development process in the weeks to come.

![TCL-11's Shopping List App](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe3686892-4c79-4f02-9d2a-72a3e014fefe%2FUntitled.png?table=block&id=a46b8e53-135c-4a89-a9c2-c9560c0ff560&width=1920&userId=&cache=v2)

Collab Lab really focuses on gaining and improving collaboration and working in a development team, and this cohort knocked it out of the park. Aside from their weekly pairing sessions, code reviews and pull requests were a joy to see from the cohort. The right amount of detail went into each pull request so you knew exactly what you were looking at. They even included testing instructions!

To wrap up, I would like to say that it would be an absolute joy to work with any of these amazing folks on a development team. Check out our [Who We Are](https://the-collab-lab.codes/who-we-are/#cohort-11) page to get in contact with them!
Livewire Pagination  / How To Create Livewire Pagination Example
Published: 2020-10-17 10:10:01

In this tutorial, we will create simple pagination using laravel livewire using PHP artisan livewire. you can use laravel livewire pagination with all versions.

Livewire is a full-stack framework for Laravel framework then uses laravel livewire pagination that makes building dynamic interfaces and use simple, without leaving the comfort of Laravel. if you are using livewire with laravel then you don't worry about writing any code like jquery ajax etc, livewire will help to write very simple way jquery ajax code using PHP. without page refresh laravel validation will work, the form will submit, etc.


**[Livewire Pagination  / How To Create Livewire Pagination Example](https://www.phpcodingstuff.com/blog/how-to-create-livewire-pagination-example-laravel-8.html)**

```
<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\User;
  
class UserPagination extends Component
{
    use WithPagination;
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.user-pagination', [
            'users' => User::paginate(10),
        ]);
    }
}
```
IIFE: Immediately Invoked Function Expressions
Tags: javascript, codenewbie, beginners, 100daysofcode
Published: 2020-10-17 17:28:59

IIFE is a function that is declared and invoked at the same time. You create them by using anonymous functions and enclosing the function in round brackets `()`. You can then invoke them by merely calling the expression immediately with a followed pair of round brackets.

```javascript
(function(name){ // function expression enclosed in ()
    console.log(`Hello ${name}`); // Hello Parwinder
})("Parwinder"); // Immediately called by using () in the end. Yes we can pass arguments
```

Immediately invoked function expressions are helpful in:

* Avoiding variable hoisting from within blocks
* Not polluting the global scope
* Allowing us to access public methods while maintaining privacy for variables defined within the IIFE

In short, Immediately Invoked Function Expression is an excellent way to protect the scope of your function and the variables in it.

Just because I wrote the above function using the `function` keyword does not mean you have to. With ES6 popularity, you can use arrow functions as well.

```javascript
(name => {
    console.log(`Hello ${name}`); // Hello Parwinder
})("Parwinder");
```

Another way to create IIFE is by using the negation operator `!`. When we use the function keyword, what we are creating is a function declaration.

```javascript
function myName() {
    return "Parwinder";
}

console.log(myName()); // Parwinder
```

You have to invoke the declaration to the return eventually. If we prefix the function with negation, it becomes a function expression.

```javascript
!function myName() {
    return "Parwinder";
}
```

But this alone will not invoke it! It has only turned the function into an expression.

We must use `()` to call the method.

```javascript
!function myName() {
    console.log("Parwinder"); // Parwinder
}();
```

Ta-Da! Instead of creating a IIFE using `(function => {})()` we have done it using `!function => {}()`. No need to wrap our function block in `()`.

🚨 Do you see that I changed the return statement in my last example to a console.log? It is on purpose. IIFE will always return `undefined`. If we use the negation operator to create an IIFE, it will return `true` because `!undefined` is `true`.
5 Book I believe that every college student must read
Published: 2020-10-17 17:23:06

1. Hello World

The author, Hannah Fry talks about the development of AI and how it has impacted our lives in multiple fields. I found the stories shared by her to be quite deep and insightful.



2. Subtle Art of Not Giving a F***

It's a great book that teaches you how to focus on what’s important and stop overthinking about things that are out of our control. I call it the most REAL book ever!

 

3. 4-Hour Work Week

It gives you a lot of insights into how people are running successful businesses, outsourcing work, and tips on increasing productivity to accomplish more.

 

4. Rich Dad Poor Dad

It gives you a basic explanation for financing, benefits of having an LLC, real estate basics. Best book to begin with financing.

 

5. How to Win Friends & Influence People

This is a great book to learn communication, something that college students lack and don't get a chance to improve. Feel free to read this book every few months. It has helped me out personally!

 

 

There are several more, but right now, these are the best ones i can think of.
Better way to accept arguments
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-10-17 17:01:59

```js
function downloadData(url, resourceId, searchText, pageNo, limit) {}

downloadData(...); // need to remember the order
```

Simpler way to do this-

```js
function downloadData(
{ url, resourceId, searchText, pageNo, limit } = {}
) {}

downloadData(
  { resourceId: 2, url: "/posts", searchText: "programming" }
);
```

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for daily posts.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack ● Javascript  
**[codedrops.tech](https://www.codedrops.tech/)**
Cube World animation
Tags: codepen, css, webdev, showdev
Published: 2020-10-17 17:01:30

Cube World animation was made using CSS with SASS. You can play with it using the different settings in the CSS section. It was inspired by [Dillon](https://codepen.io/Dillo)'s pen [RGB cubes - no library](https://codepen.io/Dillo/pen/yLJLjPX) and by [Johan Karlsson](https://codepen.io/DonKarlssonSan)'s pen [Cube World SVG | three.js](https://codepen.io/DonKarlssonSan/pen/dyMaRJN).

{% codepen https://codepen.io/MenSeb/pen/RwRraKd %}
HacktoberFest 2020, My Second Time!
Tags: hacktoberfest, github, productivity
Published: 2020-10-17 16:56:04

## IT IS THE KEY TO OUR CAR OF PROGRAMMING🏍🏍

This is the second time I am participating in this event. Last year I was a beginner, I didn't even know how to use the GUI interface properly, handling the repositories from git on cmd was way out of my pay grade😅😅<br> 
But, that gave me a start to programming and git. I started working my programming skills and also learned Git. Now after 1 year, I was the one who taught many students how to make their first pull request🤩🤩. <br>
I saw students who were just like me and didn't know anything about Git. But, now I could understand the whole meaning of Hacktoberfest. It was not to just provide free Tees😅😅, but it was to provide the required push to any beginner to dive deep into the world of computers🎇🎇
SAMBA DC üzerinde Koşullu DNS Yönlendirici oluşturma
Published: 2020-10-17 16:44:35

SAMBA DC üzerinde çeşitli durumlarda "Conditional DNS Forwarding" (Koşullu DNS Yönlendirme) oluşturmanız gerekebilir. Bu işlem özetle kısaca belirli bir alanadı zone'unu aratırken belirteceğiniz DNS sunucularına sormanızı sağlayacaktır. 

Bu işlem için SAMBA DC'nin **BIND DLZ** modunda çalışması gerekmektedir. Bind'ın kullandığı **named.conf** dosyasında ise aşağıdaki gibi bir içerik eklenmelidir.

```
zone "yonlenecek.com" {
         type forward;
         forwarders { DNSIPADRESI1; DNSIPADRESI2; };
};
```

Bu şekilde SAMBA üzerinde bulunan DNS sunucusuna yonlenecek.com talebi geldiğinde forwarders olarak eklenen DNS sunucularına yönlenecektir.
Do you know autoboxing in JS?
Tags: javascript
Published: 2020-10-17 16:42:16

Hey folks 👋! 
    I am currently learning javascript. I came across something that I never heard before. I learned about autoboxing and wrapper. I knew wrappers are used in java but had no clue they exist in javascript. 

> Look at the code given below -

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mmuevk7cttnr0lqe1kgl.png)

Strange isn't it? We declared `name` and `age` variables. We didn't declare objects. So where are these methods and attributes coming from?
***
So whenever we try to access functions from the prototype of primitives, under the hood, javascript wraps these variables to its wrapper types.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7u6s0mc1ct3cld04y21n.png)

See above, this is how they are initialized as temporary wrapper objects by the javascript engine. 
***
### **What are wrapper objects?**
  Wrapper objects convert primitive data types to object type. This is the same case in java where primitives are converted to objects by wrappers classes because collection framework doesn't store primitives. The primitives in javascript are `number`, `string`, `boolean`, `undefined`, `null` and `symbol`. Their wrapper objects are `Number`, `String`, `Boolean` as follows.
***
### **How are they temporary?**
Whenever this conversion from primitive to object happens, the objects are dumped after a single-use.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zx9jdy7rzuz2vlsfix46.png)

We are overriding `toUpperCase()` and returning "toUppercase", still `toUpperCase()` was not overridden. Do you know why? Yes because they are temporary. They are invoked when we are accessing functions in the prototype and dumped immediately. 
***
I'd be coming with a follow-up article where we'd discuss what's need for autoboxing.
**Thank You for reading!**
My First #Hacktoberfest
Tags: hacktoberfest, azure
Published: 2020-10-17 16:41:07

We all use open source software. Our lives wouldn't be the same without it. Android OS powers millions of cell phones used daily. Likewise, Linux OS is another example of open source software that countless small and large business depend on to literally run their IT infrastructure. There are entire industries spawned and developed around open source products. It proliferates into all aspects of our society.

In the same way, I am a frequent consumer of open source software in my daily personal and professional life. Unfortunately, with all other happenings and priorities in life, I don't have much time to be involved in the open source community. Not nearly as much as I desire to. However, this year I decided to take part and participate in DigitalOcean's annual month-long [Hacktoberfest](https://hacktoberfest.digitalocean.com/) event. I think it provides a great opportunity to take some time over few weeks and re-focus some of my energy to contribute back to the open source community. 

I am a big fan and user of HashiCorp [Terraform](https://www.terraform.io/), especially their [Azure Terraform provider](https://github.com/terraform-providers/terraform-provider-azurerm). As such, I wanted to give back to the product I use frequently and also help others learn and apply the platform. So I thought the best way to accomplish that was to use my experience and add samples to the collection of [examples](https://github.com/terraform-providers/terraform-provider-azurerm). By providing some reference implementations, my hope is that others find them useful in solving their problems in the future. And it also helped close few open issues in the repository along the way. As a bonus, I ended up learning few new things about Terraform and Azure too!

![Contributions](https://dev-to-uploads.s3.amazonaws.com/i/f7scsxtexezpxgafswtf.JPG)

Overall, my first Hacktoberfest was a great experience. It's a great initiative to promote open source communities and contributions. I really feel that the event is a positive force in the IT and OSS ecosystem, and I hope it continues to inspire people to create more PR's.
Day 38 of 100DaysOfCode
Tags: 100daysofcode, javascript, freecodecamp, bootstrap
Published: 2020-10-17 16:36:40

Hey! 

I took almost a two-week break to finish up some school work and have time to prepare for exams. Now it's finally time to get back to work on this challenge. 

Today I finished the JavaScript algorithms and data structures projects on freeCodeCamp! I also started working and even finished the Bootstrap challenges. Learning frameworks is fun!


### What I did today:

#### 1. Finished the JS algorithms and data structures projects
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/

#### What I learned from it:
* Working with different data structures
* The almighty problem-solving skills

#### 2. Finished the Bootstrap challenges
https://www.freecodecamp.org/learn/front-end-libraries/bootstrap/

#### What I learned from it:
* What is Bootstrap
* Learned about fluid containers
* Using other Bootstrap classes
* Making pretty buttons

#### Time spent learning:
Task 'FCC'. Elapsed time: 1 h 6 min 38 s

#### Total time: 1 h 6 min 8 s
Time spent is tracked by my [TaskTimer](https://www.arttupyykonen.com/tasktimer/) script and the [WakaTime app](https://wakatime.com/about).


**Outro**
See you all tomorrow!
HacktoberFest 2020- My first one!
Tags: hacktoberfest
Published: 2020-10-17 16:06:09

#Hacktoberfest

I am delighted to share my successful completion of Hacktoberfest 2020 & it was really fun to contribute! 

This year I have participated in Hacktoberfest for the first time & ended up with 10 pull requests in total. My contributions included several projects where 7 out of 10 pull requests got accepted by those respective repo/project maintainers. 
Really excited to win a super cool Hacktoberfest T-shirt along with dev-stickers. 
First hacktoberfest swag is always special!

Not sure about the next year but hopefully looking to get another one in my swag-bucket!!
Build Registration Page with HTML and CSS in 30 minutes
Tags: tutorial, webdev, javascript
Published: 2020-10-17 16:02:37

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9xicuox9nisa4ge8xqf2.gif)


Building a Login/Registration page can be tricky. In the video, by using HTML and CSS, I will show how to create Behold registration form. 

We are going to work with:
- Inputs, Form,..
- Grid, Flex, Media query, Transition,...

All the resources will be provided. If you want to try before watching the video or code along, be sure to check out the resources and design below:

🚀 Download the resources and design:
- The starter: https://github.com/nghiemthu/behold-starter
- Design: https://bit.ly/2IGn5Ib


🏝 Source code: You have to create yourself 

📝  Text Editor: https://code.visualstudio.com/

🧑‍💻 BEM naming convention: https://en.bem.info/methodology/naming-convention/

⛑ Other tools that I use

- [Emmet](https://code.visualstudio.com/docs/editor/emmet)
- [Prettier](https://github.com/prettier/prettier-vscode)
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

Video:

{% youtube XXDOUuzzUOY %}

For other resources, check out https://devchallenges.io/

Follow me:
🐦 [Twitter](https://twitter.com/thunghiemdinh)
[Tutorial Linux] Terminal: Mostrando o início ou fim de um arquivo texto
Tags: linux, tail, head, terminal
Published: 2020-10-17 15:55:17

Usamos o comando **head** para mostrar no terminal o conteúdo do início de um arquivo de texto e o comando **tail** para mostrar o final. Por padrão, ambos mostram 10 linhas do arquivo.

```
$ head <nome_do_arquivo_texto>
```

- **$** indica que você deve usar o **usuário comum** para fazer essa operação.

- **head** retorna no terminal as 10 primeiras linhas de um arquivo de texto indicado.

- digite o nome do arquivo de texto sem os sinais **< >**.

![comando head](https://dev-to-uploads.s3.amazonaws.com/i/t83coyutrq1ee6ab5qaz.png)

```
$ tail <nome_do_arquivo_texto>
```

- **tail** retorna no terminal as 10 últimas linhas de um arquivo de texto indicado.

![comando tail](https://dev-to-uploads.s3.amazonaws.com/i/3ap10tab3ziumhn17fcb.png)

## Mostrando um número n de linhas

Caso queira mostrar um determinado número de linhas, digite:

```
$ head -n <nome_do_arquivo_texto>
```

- **-n** é o número de linhas que você deseja que seja mostrado.

```
$ tail -n<número> <nome_do_arquivo_texto>
```

Exemplos:

![mostrando 3 primeiras linhas](https://dev-to-uploads.s3.amazonaws.com/i/5zksicbt7q7gpp0xyass.png)

![mostrando 3 últimas linhas](https://dev-to-uploads.s3.amazonaws.com/i/im7kgoyuiafre6tkd2ch.png)

## Cabeçalho dos arquivos

Para que, ao ler o arquivo, mostre o caminho até ele, digite

```
$ tail -v <nome_do_arquivo_texto>
```

Exemplos:

Mostrando o caminho e 3 primeiras linhas de um arquivo.

![mostrando o caminho e 3 primeiras linhas](https://dev-to-uploads.s3.amazonaws.com/i/82tw95kxuwj1rtgb0si8.png)

Mostrando o caminho e 3 últimas linhas de um arquivo.

![mostrando o caminho e 3 primeiras linhas](https://dev-to-uploads.s3.amazonaws.com/i/a4yr5rca2n82c055rne4.png)

## Mostrando mais de um arquivo ao mesmo tempo

Para mostrar as primeiras linhas de mais de um arquivo ao mesmo tempo, digite:

```
$ head <arquivo_de_texto_1> <arquivo_de_texto_2>
```

Ou para mostrar as últimas linhas de mais de um arquivo ao mesmo tempo,

```
$ tail <arquivo_de_texto_1> <arquivo_de_texto_2>
```

Exemplo:

Mostrando as 3 últimas linhas dos arquivos group e passwd

![mostrando 2 arquivos ao mesmo tempo](https://dev-to-uploads.s3.amazonaws.com/i/30y6066bxyzjqdozdopg.png)

## Mostrando as últimas linhas em tempo real

Para mostrar as últimas linhas de um arquivo dinâmicamente

```
$ tail -f <nome_arquivo_texto>
```

Exemplo:

```
$ tail -f /var/log/messages
```

Para voltar ao terminal, digite **Ctrl** + **C**.
What's Your Tech Journey?
Tags: webdev, career, codenewbie, discuss
Published: 2020-10-17 15:54:54

For the past couple of weeks at [Tech Elevator](https://www.techelevator.com/) we have been learning about different types of roles within the tech industry and thinking about what type of position we might want to pursue at the end of the program. Since I am currently attending a software development bootcamp my main goal is to become a developer. I’m not sure if I want to pursue a full-stack, front-end or back-end position. I’m also curious to learn more about other opportunities that are out there beyond software development. My purpose in writing this post is to hear from people around the world about their tech journey. Feel free to answer any or all questions in the comments below. I’d love to hear your story!


### * What is your current title? 

### * What steps did you take to get there? 

### * What would you have done differently if you had the chance? 

### * What do you love about your job?

### * What’s difficult about your job?

### * What’s been the most interesting/rewarding project you’ve had the opportunity to work on?

### * What’s something you would like to see improve in the tech industry in the next 5-10 years?

### * If you could give one piece of advice to a junior developer, what would it be?

![I don't know where I'm going from here, but I promise it won't be boring!](https://dev-to-uploads.s3.amazonaws.com/i/ftokfbvetdud02fwhegt.jpeg)