teleren/devto huggingface dataset:
Compile SCSS with Gitlab CI/CD
Tags: saas
Published: 2021-07-16 17:52:08

This article is also published in french on my personal blog: [https://lelibreauquotidien.fr/2021/01/12/compiler-du-scss-avec-gitlab-ci-cd/](https://lelibreauquotidien.fr/2021/01/12/compiler-du-scss-avec-gitlab-ci-cd/)

Hello World !

I use a css preprocessor to make my work easier and especially to gain in code readability, but the problem is that it's quite boring to compile the css and put it in a release (time I could spend doing something productive (or not)).

I host my code on the gitlab instance of framasoft (framagit), the advantage of gitlab is that it comes with a system that allows continuous integration.

> The goal is to build, test and release software faster.
> _Source : Wikipedia_

So let's see how to use this in practice.

To do continuous delivery with gitlab, you just have to create a file named .gitlab-ci.yml and fill in the necessary information.

I will not waste time, I will give you the code now:
```
stages:
- compile
compile:
stage: compile
image: node:14.15.1-alpine3.10
script:
- yarn global add node-sass
- mkdir css/
- node-sass --output-style compressed ./file.scss > css/file.min.css
- node-sass ./file.scss css/file.css
artifacts:
paths:
- ./css
```
I imagine that if you are not initiated, this code does not tell you anything, so I will explain it to you:

* Line 1 and 2: Tells gitlab that there will be a compilation step.
* Line 4 and 5: Tells gitlab that the "compile" step is starting
* Line 6 : We indicate that the docker image to use (yes, gitlab cd works with docker) is an image of alpine (a light linux distribution) with nodeJS preinstalled
* Line 7 : Start the script
* Line 8 : Install sass with yarn
* Line 9 : We create a folder to distribute the compiled files.
* Line 10 and 11: We compile the file .scss (or .sass) in compressed and uncompressed version
* Line 12,13 and 14 : We indicate to gitlab that the compiled files are in the folder css/


You can save the file, the "pipeline" that could be translated as a compilation of our file will start.

This pipeline will be launched after each commit and you can check the status of your pipelines in the CI/CD > Pipelines menu.

Finally, to download the 2 files, you can use this menu and click on "compile":

This is the end of this article, thanks for reading it and don't hesitate to give me feedback in the comments ;).

Cover image by James Osborne on Pixabay
Go and copies
Tags: go, functional, concurrency
Published: 2021-07-16 17:50:40

Copying concept was always weird for me , when I learned GO it was like why? Why! Why GO favorite option is to work on a copy?!
Today I make discovery that I will like to share.

I was reading a book "composing software" and I see an example about Shared State.
"Shared-state concurrency means that concurrent computations communicate through reading and updating a shared location in memory."-[source](https://slikts.github.io/concurrency-glossary/?id=shared-state-vs-message-passing-distributed-state)

I know the title said GO but the examples that let me understand the importance of copying in GO was an example in the book which is JavaScript , so the examples are in JavaScript.

Let's take a look at this example taken from the book.

```js
// Shared state
const x = {
	val: 2
};

// Mutates shared state
const x1 = () => x.val += 1;

// Mutates shared state
const x2 = () => x.val *= 2;

x1();
x2();

console.log(x.val); // 6

// This example is exactly equivalent to the above, except...
const y = {
	val: 2
};

const y1 = () => y.val += 1;

const y2 = () => y.val *= 2;

// ...the order of the function calls is reversed...
y2();
y1();

// ... which changes the resulting value:
console.log(y.val); // 5
```

this code seems logical , but let's say we have 2 threads (or routines) accessing the same object x in same time.
both of them are modifying the same object , so the output depends on race condition.

so to avoid this we use (yes you guess it) a copy!

```js
const x = {
	val: 2
};

const inc = x => ({...x, val: x.val + 1});
const double = x => ({...x, val: x.val * 2});

console.log(inc(double(x)).val); // 5

const y = {
	val: 2
};

/*
Because the functions don't mutate, you can call
these functions as many times as you want, in any order,
without changing the result of other function calls.
*/

// These calls do nothing:
inc(y);
double(y);

console.log(inc(double(y)).val); // 5
```

the three dots ... are spread operator basically it will copy the propriety of the object and the function will return a new copy with modified value. Once I read this code I directly remembered GO , the idea in GO that everything is a copy was weird for me. And as we know go main feature is concurrency so everything as a copy seemed a very good and safe choice by go designers.
so the advantage of working on a copy is safety , isolation , multi threading  , but it also have disadvantage like deficiency.

That's why we like in GO to avoid as much as we can using pass as pointer.

that was my discovery today that I liked to share with community , please if you have more information that can help us , share it with us!
Is your BUSINESS really safe from HACKERS?
Published: 2021-07-16 17:46:56

Are you REALLY prepared for a CYBERSECURITY ATTACK? 🤔

From Dotnetsafer we want to make you aware with this video of the importance of keeping all your data safe. ✅

The size of your company is irrelevant to the attackers, they only have one mission: STEAL YOUR INTELLECTUAL PROPERTY, CONFIDENTIAL DATA OR DESTROY YOUR IMAGE.

I hope you dare to see it🤗
It's ONLY 3 minutes...
About DOUBLE the time it takes a HACKER to obtain any data they need from your company. 

---

From [Dotnetsafer](https://www.dotnetsafer.com/) we want to thank you for your time watching this video and don't forget that in our [.NET Blog](https://blog.dotnetsafer.com/) you can learn more.

And remember: Now you can try for free our [.NET obfuscator](https://www.dotnetsafer.com/products/shield). You can also protect your applications directly from Visual Studio with the [.NET Obfuscator Visual Studio Extension](https://marketplace.visualstudio.com/items?itemName=Dotnetsafer.Shield). Also, before that you can learn [how to protect .NET applications](https://www.youtube.com/watch?v=di07hbVD5RM).
1st Post
Tags: firstpost, happy
Published: 2021-07-16 17:33:16

Namaste everyone,
this is gonna be my first post here and I'm just so excited while writing this post. The interface is cool and easy. 
I'm yet to interact with people here and looking forward for that.
I'm open to work on any good project so you can contact me for that for sure.
I'm open for tech discussions.
Let me end this post here itself.
Thanks :)
I made new VSCode Dracula Theme with high contrast version
Tags: vscode, css
Published: 2021-07-16 17:09:10

After a long time used Dracula Official theme. I recorgnized that theme color scheme is still not stunning with me. So I decided to create a new one with my own color scheme. And It's successfully with more than 2000 installed. So I wanna share it to everyone to know about my theme. It's name is Evondev Dracula. You guys can open vscode extension and searching it.
Thanks for reading my post.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ififkxj3fi181ei1snlg.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zocefwhzaywsdmbm4idv.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iefmi9megu75bsauboxo.png)
Boost your queries in Laravel
Tags: laravel, php, sql, eloqeunt
Published: 2021-07-16 17:01:45

There are lots situations which you may think that your query is super duper optimize and your project works like a Rocket!
But when we monitor your queries which has been executed, you may be shocked and say : "Oh man, what's going on ? 31 query for just getting a bunch of articles ???? 🤐"

+"It's not possible"
-It is possible :))

## N + 1 Problem
First of all let me tell you about N + 1 problem, a big problem which you may not be noticed about.
What is N + 1 Problem?

Imagine you have about 30 articles and each article has a author and you want to show these articles with their author in a table.
```php
$articles = Article::all();

return view('articles', compact('articles'));
```
And in your Blade :
```php
@foreach($articles as $article)
    <li>{{ $article->title }}</li>
    <li>{{ $article->author->name }}</li>
@endforeach
```

But if we check the queries which has been executed, we will see that over 31 queries have been executed !

+Damn, whyyyyyyy?
-Let me tell you why.

When you are getting articles just one query will be executed but where are these other 30 queries ?

If you remove the `<li>{{ $article->author->name }}</li>` you will back to the safe zone with just 1 executed query.

This one line per each article's author run a query to get the data of author... (Oh mannnn, I got it.)

Let's check the queries : 
The first query is this:
```sql
SELECT * FROM `articles`
```
And the other 30 queries are like this: 
```sql
SELECT * FROM `authors` WHERE `id` = 1 LIMIT 1
SELECT * FROM `authors` WHERE `id` = 2 LIMIT 1
SELECT * FROM `authors` WHERE `id` = 3 LIMIT 1
--.....
SELECT * FROM `authors` WHERE `id` = 30 LIMIT 1
```
Per each article's author one query will be executed.

### With() is your saver

Now `with` method will be appears and save your project's life.

To solve the problem you can use the `with` method in your controller and write this code:

```php
$articles = Article::with('user')->get();

return view('articles', compact('articles'));
```

That's it, nothing else needs to do :)

With is solution of the N + 1 problem and it solves that with eager loading.

So what is eager loading and how does it work?

First lets check the queries, we had 31 queries on top and now if we check the queries we can see that just 2 queries has been executed!

How just 2 queries? 

When we are using `eager loading` instead of lazy load of Laravel to get authors data just one query will be executed.

```sql
SELECT * FROM `authors` WHERE `id` in (1, 2, 3, ..., 30)
```
And literally one query is super faster than 30 query :))

Also you can get a bunch of relationship with with():
```php
$articles = Article::with(['author', 'publisher'])->get();
```
And you can get a nested relation:
$articles = Article::with('author.profile')->get();

Wait, it isn't done, you can also filter the data which you want to return with QueryBuilder

```php
$articles = Article::with(['author.addresses' => function($query){
    $query->where('active', true)->latest();
}]);
```
C# Array Methods
Tags: csharp, beginners, tutorial
Published: 2021-07-16 16:47:41

In C# there is an Array class which provides methods related to array operations. In this blog we'll look into some of the common methods used with arrays.

## Basics
### Declaring an array
```csharp
// Array of integers
int[] myArray = new int[5] { 1, 2, 3, 4, 5 };

// Array of strings
string[] people = new string[3] {"John", "Smith", "Bill"};
```

### Getting the length of an array
To get the length of an array we can use the `Length` property of the Array class.
```csharp
int[] nums = {1,2,3,4,5,6};
Console.Write(nums.Length);
```

## Array.Find()

This method is used to search an element in an array. It will return the **first** element found.
```csharp
int[] arr = new int[] {1,2,3,4,5};
Console.Write(Array.Find(arr, (elem) => elem % 2 == 0)); // 2
```


## Array.FindAll()

This methods is used to find all the elements in the array that matches the given condition.

```csharp
int[] arr = new int[] {1,2,3,4,5};
var result = Array.FindAll(arr, (elem) => elem % 2 == 0);
```

The result from above code snippet will contain the array of elements returned from the function that matches the condition. We can use the foreach loop to print the elements in the result array.

```csharp
foreach(var elem in result)
{
    Console.WriteLine(elem);
}
// 2
// 4
```

## Array.Exist()

This method is used to check whether an element exists that match the specified condition in the function.

```csharp
string[] users = {"Steve", "Bob", "Shane", "Andrew"};
Console.WriteLine(Array.Exists(users, user=> user.StartsWith("S"))); // True
```

## Array.IndexOf()
This method is used to find the first occurrence of an element in an array.

```csharp
string[] users = { "Smith", "John", "Clark", "Peter", "John" };
Console.WriteLine(Array.IndexOf(users, "John")); // 1
```

## Array.Sort()
This method is used to sort the given array. This method returns `void`, that means it manipulates the same array and didn't return any result.

```csharp
string[] users = {"Zack", "Bob", "Shane", "Andrew"};
Array.Sort(users);

// users = {"Andrew", "Bob", "Shane", "Zack"}
```
This is basic method I have shown here, you can view all the overloads for this method [here](https://docs.microsoft.com/en-us/dotnet/api/system.array.sort?view=net-5.0).


## Array.Reverse()
This method reverse the order of an array. For example,
```csharp
string[] users = {"Zack", "Bob", "Shane", "Andrew"};
Array.Reverse(users);

// users = {"Andrew", "Shane", "Bob", "Zack"}
```


## Array.BinarySearch()
Using this method we can perform a binary search on the array. The array must be sorted before passing it to this method. It returns the index of the element found in the array. If the array is not sorted before using this method you may see some unexpected results.

```csharp
int[] nums = {1,6,12,18,32};
Console.WriteLine(Array.BinarySearch(nums, 12)); // 2

```
What Is Web Developer?
Tags: webdeveloper, whatiswebdeveloper, webdev, whoiswebdeveloper
Published: 2021-07-16 16:29:30

A <a href="https://www.developerguidance.com/">Web Developer</a> is a programmer who build website. Basically a web developer manage back-end role. A web developer will specialize in the programming language like HTML/CSS, PHP, C#, Python, Java, Ruby, and More. 

<b>What Types Of Web Developers Are There?</b>
Unfortunately, the question “Types Of Web Developers?” Developer Guidance gives the simple answer. There are three main types of developers are front-end, back-end, and full-stack.

In simple words, front-end developers are responsible for the web design and layout. Back-end developers are responsible for server-side web applications. Full-stack developers are those who work with both the front and back ends. of a website.

<b>How To Be A Web Developer?</b>
Above we answer the question of “What is a web developer?” it’s time to start looking at how to be a web developer.

So many people do not know or confused about which the best is programming language for web developers to learn. Developer Guidance guides you on which is the <a href="https://www.developerguidance.com/best-languages-for-web-development/">Best Languages For Web Development</a>.

<b>Duties of Web Developers</b>
•	Meet the client and discuss the needs and design of a website.
•	Write code for the website using HTML, CSS, and JavaScript.
•	Work With team members and discuss the project.
•	Complete the project and deliver it to the client.
•	Monitor Website Traffic.

<b>What Are Some Common Jobs For Web Developers?</b>

There are several jobs for "web developers”. Every Year more than 2 lakh + jobs posted every year. Web development job titles:
1.	Front-end developer
2.	Back-end developer
3.	User experience (UX) designer
4.	User interface (UI) developer
5.	Software developer

<b>What Are Some Characteristics Of A Good Web Developer?</b>
•	Understand code
•	Good communication skills
•	Leadership Quality
•	Love of learning
•	Creative Problem Solver
Eliminating Software Development Process w/ Adam Carmi, CTO of Applitools
Tags: devops, productivity, programming, leadership
Published: 2021-07-16 16:17:03

What would happen if you eliminated all of the processes that surround your software development teams today?

Adam Carmi, CTO of Applitools, joins the [Dev Interrupted podcast](https://devinterrupted.com/podcast/eliminating-software-development-process/) to discuss how his methodology works, and why you need to start eliminating processes too.

#**Listen to the full episode**
{% spotify spotify:episode:0U8s16n8iU1yLKY88q9Lch %}

#**Episode Highlights include:**
* The ins-and-outs of a process-less software [development method](https://linearb.io/blog/dev-methodology-doesnt-matter/)
* How and why Adam recruits only “A Players”
* Why he let’s the product team dictate his engineering roadmap
* How he tackles large projects without time estimates or [sprints](https://linearb.io/blog/why-agile-velocity-is-the-most-dangerous-metric-for-software-development-teams/)

#**Join the Dev Interrupted Discord Server**
With over 1300 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.gg/devinterrupted)
![Join the Dev Interrupted Discord Community!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19j3dzgz4r4kzav3w6z8.png)
Perfect Table Using HTML & CSS
Tags: html, css, webdev, beginners
Published: 2021-07-16 16:14:42

Hello Guys,

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

Today I created a Amazing Table Using HTML & CSS. this simple table with little touch of colors and border-radius so this is looks good also I added some padding in the table to its look clean. I hope you like this also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/jOmmVNW %}
How to run image Elasticsearch Container on Ubuntu 18.04
Tags: ubuntu, elasticsearch, docker
Published: 2021-07-16 15:33:44

---
title: How to run image Elasticsearch Container on Ubuntu 18.04
published: true
description: Pull image, run, start, stop remove container elasticsearch on Ubuntu 18.04
tags: #ubuntu, #elasticsearch, #docker
cover_image: https://res.cloudinary.com/dvehkdedj/image/upload/v1626449591/background_cnhwaf.jpg
---

Elasticsearch is a search engine based on the Lucene library. It provides a distributed, multitenant-capable full-text search engine with an HTTP web interface and schema-free JSON documents. To read more about at [Elasticsearch Document](https://www.elastic.co/).

In this post I will introduction setup about Elasticsearch container on Ubuntu 18.04. It is make sure you already install docker please check more content at [Install Docker](https://www.notion.so/How-to-install-Docker-on-Ubuntu-18-04-1f899e145c984b899495a5fe1f33560d).

There are have 3 steps:

**Step 1: Downloading [image Elasticsearch](https://hub.docker.com/_/elasticsearch)**

Pull Image Elasticsearch on Docker Hub by command:

> docker pull elasticsearch:tag

Tag is a specific version image. Recommended specific for version if image have any change version in the future

Verify pull image success by command:

> docker images

**Step 2: Running in Development Mode for start container**

> docker run -d --name elasticsearch -p 9200:9200 -p 9300:9300 -e "discovery.type=single-node" elasticsearch:tag

**Some describes:**

- -d: It is detach running container in background
- --name: The name of container
- -p: Port container will expose to host
- -e: It is environment for container

**Verify running container success**

The command just shows running containers

> docker ps

To see all containers, use flag -a

> docker ps -a

Open browser access localhost:9200

**Step 3: Stop running container and remove container**

You can stop container by id or by name

> docker stop container_id

> docker stop container_name

**Verify stop container by command**

> docker ps -a

> docker ps

### Conclusion

In this post I have implemented setup Elasticsearch by pull image, run, stop and remove container on Ubuntu 18.04. To learn more about [Docker Document](https://docs.docker.com/), and [Elastichsearch Document](https://www.elastic.co/).

If you have any question please comment or contact me.

Author: @NHB Khanh

📚 Recommended Books

Clean Code:[Book](https://amzn.to/2UGDPlX)

HTTP: [The Definitive Guide ](https://amzn.to/2JDVi8s)

Clean architecture: [Book](https://amzn.to/2xOBNXW)

📱 Social Media

Blog: [KhanhNHB Tech](https://hashnode.com/@KhanhHoang)

Twitter: [KhanhNHB](https://twitter.com/khanh_nhb)

Email: [khanhnhbse@gmail.com](mailto:khanhnhbse@gmail.com)
Don't Give Up, Just Yet.
Tags: html, css, codenewbie
Published: 2021-07-16 15:19:49

Hello friends, It's been a while since we last talk, well today I want to share with you something which I believe will aspire you to inspire others. 
We are living in a World affected by numerous problems, from global warming to poverty and global pandemic of Covid-19 and its effects on economies and people's lives. We all have to agree that, we are living in some really hard times!. One thing I'm really certain is, we will overcome this and any other problem that may come our way in one way or another we will prevail all of them. 
I took my time off learning computer programming through freecodecamp.org because I wanted to practice some of the basic knowledge I've already acquired through their impressive program 
I've shared some of those projects here (in dev.to) and some are in codepen.io. 
However, in some points in my learning phase I've found myself being angry for not being able to either understand the concepts or ability to complete the required projects (there are some challenges that developers in freecodecamp.org should compete before completion of certain topic or concept) it's really confusing sometimes (maybe you have found yourself in a similar situation) through these two scenarios I would feel sad, and angry at the same time and in some cases I would switch off my laptop and go out (just to rest for some time)

While I'm out there I ask myself some tough questions like, "I'm I a Quitter?, Why I started learning coding in the first place?, What's my end goals in life? 

Through those questions I found my balance again to stand up and restart the entire concept (for instance, applied visual design concepts) and by doing so I would be able to easily Understand and finish all of its challenges! 

My message to you is learning to code isn't easy, as a matter of fact nothing worthwhile is easy, so don't feel sad or angry on yourself for not being teachable or understanding the concepts or even unable to complete coding challenges, maybe you have been learning too many concepts at once or maybe it's just a burnout!, take it easy and learn at your own pace. 
Remember a certified Bachelor Degree applicant has to spend 2-4 years in University, so there's no rush for you to learn HTML + CSS + JavaScript and other languages in just 1 week to 2 months, It takes time to learn and understanding valid concepts in each language (from markup languages to programming languages) 
Don't give up! You got this and remember that you're getting better everyday because you're investing into yourself. 

May you carry on the passion to learn, and Practicing what you've learned through doing Projects! and regardless of what adversities you might find yourself into, just believe that you can overcome it, you're better than your adversities and know that each and everyone here in **Dev.to Community** are ready to assist you through shared experiences of our journeys. 

Until next time friends, be safe and let's carry on building a safer and exciting projects


P.S:
If you would like to connect or chat with me in Twitter here's my handle https://twitter.com/ngowi_inc
On Hover Animate Image Using Freezeframe.js
Tags: jquery, html, css, animate
Published: 2021-07-16 15:14:11

Freezeframe.js is a jquery library which use to show animation gif images on hover. So here made on hover effects using gif image and this awesome plugin to make these pauses animated.

In this element, we used one single .gif image which CDN of Freezeframe.js. Also, we used CSS to make this element cover full screens. This is a responsive modal for mobile and tablet views.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source code](https://w3hubs.com/on-hover-animate-image-using-freezeframe-js/)