teleren/devto huggingface dataset:
Day 134: UX design
Published: 2022-08-21 22:02:59

Hi!
I think today was about Ux design The UX design course I'm following with Google on coursera I was actually suprised by how popular this course is the ammount of people that are learning the same time as you are are insane you can see mesages poppin in the discussion forum every seconds but the course is really good so good it made me  start the Coursera trial as I plan to advance it as far as possible

Tomorrow will be mostly work tasks as I didn't work on it today I will also consume some content on the course and continue with Jasmine article 

signing off...
Best folder structure for SCSS/SASS
Tags: scss, sass, webdev, beginners
Published: 2022-08-21 21:31:00

##Why I am using `SASS/SCSS`?
After writing code for lots of websites in `vanilla CSS`, I understood that I am doing something wrong. I was given a lot of time to debug a very simple problem.

Then after I discovered `sass/scss` way back in 2019, and for the last 3 years, I am writing styles in `scss`. Because this solved a lot of my problems. And, debugging code is also much easier in it and it saves my time. I can create re-useable components in it. Which is also a very lifesaver thing for a programmer.

**_NOTE:_ ** I hope you all know how to initialize a 
 `sass/scss` project, If you want to learn it then please do let me know in the comment.

## Folder structure which I personally use.
So basically when I start a project, I create a root directory with the name `sass/scss`. Inside it, I create 5 folders, and 1 file main.scss.



![Screenshot of the folder structure which I use with my project.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hwgujbw1tpdxt8xdg617.png)

I will talk about each folders and file one by one below.

`**main.scss**` : In `main.scss` I used to import all the `sass/scss` files.
```scss
@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';

@import 'base/reset';
@import 'base/typography';

@import 'components/card';
@import 'components/button';
@import 'components/form';
@import 'components/carousel';

@import 'layout/grid';
@import 'layout/header';
@import 'layout/navigation';
@import 'layout/sidebar';

@import 'pages/about';
@import 'pages/auth';
@import 'pages/contact';
```

**abstracts** : This folder contains all the sass helpers you can create for your project. We create variables, functions and mixins etc. in it.

**base** : This folder contains code for reset and typography. `_reset.scss` is responsible to reset `CSS` styles. eg. text decoration for `a` tag and list style for `ul` or `ol`.

**components** : This folder contains some re-useable UI components like we need buttons on almost every page and also in the header and footer.  So we create files like buttons, cards, carousels, forms and modals etc.

**layout** : This folder contains all styles necessary for the layout of the site, eg. header, footer, sidebar.

**pages** : This folder contains styles for individual pages, like the about page, contact page, auth page etc.


---



Thanks for reading this article. Feel free to contact me on <u>[Twitter](https://twitter.com/shubhamku044)</u>, <u>[Linkedin](https://www.linkedin.com/in/shubhamku044/)</u>, <u>[Github](https://github.com/shubhamku044)</u>.
Lazy Method: Just the Basics
Tags: beginners, ruby, codenewbie
Published: 2022-08-21 21:27:00

Recently I've been working with Ruby as I upskill. During this I have come across some enumerable methods such as, lazy and zip, that I think are interesting and likely highly useful in certain circumstances, but not as common as, the ones used for sorting, collecting, and selecting. In this post we'll be talking about lazy.  

What do we mean by lazy in Ruby and why would we want to use it?
Lazy is a special type of enumerator, that allows for the construction of chains of operations and evaluating them on an as-needed basis. Lazy was added to Ruby as a way to improve performance by reducing unnecessary memory consumption when dealing with huge amounts of data. Since it is designed to be chained with other enumerable methods it actually overrides some of them so that the array is only iterated over once with a lazy analogue. 

Let's look at an example:

Assume that we have 1000 user profiles from a pet lovers forum. Let's say, we would like to get 10 user profiles in which the user has a pet bird.



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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zefxx0udsgv5gi0nzvf.jpg)



In the above example the first approach does not use the lazy enumerator so in order to return the sample of 10 users we want the whole array is iterated even if the first 10 users just happen to have pet birds. In the second example with the lazy enumerator each user is fetched one-by-one without iterating over all 1000 users at once. The loop ends when 10 users are fetched who meet the required condition, having a bird. 

An important thing to note with the #lazy method is that it is not actually faster with smaller arrays according to post-release testing but it is is still useful for when the evaluation of the whole chain is too expensive or not possible.  

Finally, the lazy method must be called with a code block, even if it is chained to a method that does not require one.



![Calling .map on an array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7e1v9lns1aqbtxy5z0g.jpg)


![Calling .lazy.map without a block causes an error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlhzsszubqfwsdo59tva.jpg)

Use this method a bunch? Experimenting with unfamiliar techniques? Either way I'd love to hear how you like to use .lazy best. Good luck with breaking stuff, figuring it out, and savoring the satisfaction of the "Ah Ha!" momement. Happy Coding!  


references: 
Ghorpade, A. (2019, Oct 23,). Ruby lazy enumerators. Retrieved from https://blog.saeloun.com/2019/10/23/ruby-lazy-enumerators.html

Mihailov, I. (2012, -03-13T11:24:09+00:00). Ruby 2.0 enumerable::Lazy. Retrieved from https://railsware.com/blog/ruby-2-0-enumerablelazy/
Ready to learn
Tags: beginners
Published: 2022-08-21 21:18:18

I own an advertising and marketing company and I am a partner in a web development and digital marketing company, but I've never learned to programmer. So I am going to stop and get that education. I've enrolled in the UT Programming Bootcamp and I am extremely excited to understand all the languages and magic that web developers know and do. 

I'm a 7 time IRONMAN and an avid and enthusiastic endurance athlete and I'm ready for this challenge! 

Let's roll!
How Javascript TransformStream transform strings
Tags: javascript, webdev
Published: 2022-08-21 20:31:34

Recently, All of the three browsers engine (Chrome, Safari, Firefox) started supporting the [TransformStream API](https://developer.mozilla.org/en-US/docs/Web/API/TransformStream).

TransformStream allows to break down a resource that you want to receive, send, or transform into small chunks, and then process these chunks bit by bit. Recently, Firefox 102 started to support [TransformStream](https://developer.mozilla.org/docs/Mozilla/Firefox/Releases/102#apis), which means TransformStream is now finally usable across browsers. Transform streams allow you to pipe from a [ReadableStream](https://developer.mozilla.org/docs/Web/API/ReadableStream) to a [WritableStream](https://developer.mozilla.org/docs/Web/API/WritableStream), executing a transformation on the chunks, or consume the transformed result directly.

Following the example below, we demonstrate how to convert a text file content into Uppercase form.

{% codepen https://codepen.io/mahmoudjbor/pen/rNdQJrq  %}

First, we’ve declared UpperCaseTransformStream class, which does return a new TransformStream instance that takes the responsibility of converting the string chunks to uppercase.

```javascript
class UpperCaseTransformStream {
    constructor() {
        return new TransformStream({
            transform(chunk, controller) {
                controller.enqueue(chunk.toUpperCase());
            },
        });
    }
}
```

Then, adding a listener to the Convert button, to read the file content and pass it through the UpperCaseTransformStream

```javascript
button.addEventListener('click', async () => {
    var file = document.getElementById('fileForUpload').files[0];
    if (file) {
        var fileReader = new FileReader();
        fileReader.readAsText(file, 'UTF-8');
        window.selectedFile = file;

        fileReader.onload = async function (evt) {
            const res = new Response(evt.target.result);

            const readableStream = res.body
                .pipeThrough(new TextDecoderStream())
                .pipeThrough(new UpperCaseTransformStream());

            const reader = readableStream.getReader();
            let results = '';
            while (true) {
                const { done, value } = await reader.read();
                if (done) {
                    break;
                }
                results += value;
            }
            document.querySelector('pre').innerHTML = results;
            window.contentToDownload = results;
        };
        fileReader.onerror = function (evt) {
            document.querySelector('pre').innerHTML = 'Error reading the file';
        };
    }
});

```

Once this process is done, you will see the content transformed to Uppercase printed on the screen.

[Original article link.](https://www.js-howto.com/how-javascript-transformstream-transform-strings/)
Securing Internet of Things using a Blockchain
Tags: blockchain, iot, internetofthing, beginners
Published: 2022-08-21 20:19:09

IoT frameworks store, make, and cycle information and send this data over the Internet, making a lot of information to be utilized by different suppliers. Notwithstanding the central focus, basic issues identified with security could emerge. The blockchain would expect an essential occupation in the course of action of decentralized applications that will run into billions of contraptions. Seeing how and when this headway can be utilized to give security and protection is a test, and a few scholars feature these issues. The creators examined, unequivocally to the accompanying issues, the appropriateness of connecting blockchain, and IoT.

A few of the features for IoT devices using Cloud-based applications are:

- There are negligible abilities for commonplace IoT gadgets.
- Transaction expenses can restrain connections.
- Sleepy IoT endpoints are likewise accessible.
- IoT-delivered data should be kept classified.

Hence, it is important to examine whether all developments can be applied appropriately. 

In such a manner, the writing/storing tends to the accompanying:
(i) A financially smart blockchain reasonable for low-limit gadgets
(ii) Micropayments between information installment sensors
(iii) Computing and extricating data from delicate information
(iv) Integration into brilliant homes, shrewd urban areas, or shared economies.

In the current world, IoT has been streaming around more than five billion interconnected nodes and devices across the globe with every device generating large amounts of data that leave behind their footprints on the Internet. 

In fact, the most challenging task of IoT is the distributed framework that is required to ensure resilience against attacks like DDoS, malware attacks, and so on. Similarly, one of the other major challenges often exposed in the field of IoT is with respect to efficient integration of data because the flow of data is essentially from numerous devices, sensors, and gadgets that have been interconnected in a particular network. This is exactly where a blockchain can come to the rescue and prove its worth because the main objective of this technology is to ensure trust and reliable services which are safe and secure.

Hope this was helpful.
DATA ENGINEERING101: INTRODUCTION TO DATA ENGINEERING.
Published: 2022-08-21 20:02:45

Data is found everywhere in our lives. As data engineers, our main job is to clean up data and present it as clear and understandable to the day-to-day user. As someone new to this field, I would ask myself what is data engineering. What does data engineering entail? Is a new career in technology is it worthwhile? As a newbie in this field, I would try to explain to you what data engineering is and what it entails generally.
Data engineering is the building of systems used to collect and use data. To use data, it has to be processed and cleaned. the data is later analysed. A data engineer cleans up data using systems to be later used by other users of data. To be efficient in data engineering, one has to master some techniques such as data structures and algorithms and coding.
Why should one join data engineering either as a career switch or as your first career, one would ask? Personally, as a newbie in this career path, I am not in a position to recommend but to convince you as to why you should take data engineering as a career. As an emerging career, it is not crowded and in demand, one would almost land a job almost immediately. Next, it would give you favourable working conditions and compensation (As I did my research on the internet). Data engineering will give you skills that would help you as you move around in this life.
As someone who is starting this journey, I would tell you data engineering is a course that would open your mind to a whole new world of technology. Would I advise you to take data engineering, why not? You got nothing to lose if you learn something new. Will it be easy? Not. As nothing worthwhile comes easy. Let us discover the world of data engineering, shall we?
Dealing with CORS in ReactJS
Tags: javascript, react, cors
Published: 2022-08-21 00:09:59

In this post we will discuss 2 methods to resolve the issue '_Access to fetch at 'Client' from origin 'Server' has been blocked by CORS policy, NO 'Access-Control-Allow-Origin' header is present on the requested resource...'_

For security reasons, The Same-Origin Policy is implemented on your web browser to block malicious attempts to access data, because of this, when we build a client on localhost:3000 and server on localhost:8000 for example we face this CORS issue.

In ReactJs we can use the proxy property on package.json file to resolve this as shown below (125.0.0.1:500 being the server URL)

`"proxy":"http://127.0.0.1:5000"`

However if we are to resolve this from the server side then, go to the particular endpoint we need cors allowed, then add 'res.set('Access-Control-Allow-Origin','/ClientURL)'

`app.get('/cors', (req, res) => {
res.set('Access-Control-Allow-Origin', 'http://localhost:5000');
 
})`
Vim 基礎 Part 02 -- .vimrc のみで表示、入力を最適化する
Tags: vim, vim9, vimrc
Published: 2022-08-13 13:27:00


# 表示系

https://www.freecodecamp.org/news/vimrc-configuration-guide-customize-your-vim-editor/

freecodecamp を参考に、一行一行何をしているのか咀嚼しながら追加する。

プラグインは入れないことにする。

コメントは ` " `

---

## syntax on で vim で開いたファイルに色をつける🌈

### syntax 記述なし

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

通常は vim で開いたテキストは真っ白。

### syntax on

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

だが、この設定を入れるとコードに応じて色がつく。
かなり見やすくなる。
 
vim 9 では最初から入っている

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

shell script にも対応している 

---

## set number

デフォルトは OFF

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/codnq6gu9lo6hofv7duv.png)
 
set nonumber で通常どうり、内部のテキストだけが表示され

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7sgpni1c7kwndol5s95u.png)
                     
set number で行の左に数字が表示されるようになる

VSCode と違って、選択してコピーする際に入ってしまうのが難点。

`:set nonumber` を編集中に打つことでも一時的に解除できる

---

## set cursorline

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

何行目を編集しているかわかりやすくなる

---

## set incsearch

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

検索フォームに入力中に、エディタ内部のその文字列がハイライトされるようになる。

---

## set hlsearch

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsfdyh1nwgstlwp7a9n7.png)
 
検索した後の単語がハイライトされる

しかし検索を終えてもハイライトは消えなくて邪魔なので

:noh と打って消すことになる。

https://stackoverflow.com/q/3691247

```vim
nnoremap <ESC> :nohlsearch<CR> 
```

なお、これで esc 二連打で noh を簡単に打てる。

---

## 白いステータスラインバーの左からファイルのステータスを表示する

```vim
set laststatus=2
set statusline+=\ %F\ %M\ %Y\ %R 
```

ステータスラインを出すために `:wq` を書くところを下に固定
下部の白いステータスラインに F, M, Y, R のものを
左側から追加していく

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4lrz4dgubl2hqqpjwu9k.png)
 
F がファイルのフルパス
M が Modifled Flag なので、変更されて保存されてない時は + が出る。
Y がなんの拡張子で読み込まれているか
R が Read Only Flag なので、書けないファイルでは表示される。

---

## 白いステータスラインバーの右からファイルのステータスを表示する

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

```vim
set statusline+=%=
set statusline+=\ line:\ %l\ from_the_left:\ %c\ percent:\ %p%%
```

ステータスバーを右寄せにして
L の行数、C の左からの文字数、P のあと何行残っているか
これらを表示する

---
---

# 入力系

## jj で insert から escape する

https://medium.com/diegodev/vim-tip-remapping-jj-to-escape-8efc4ad8a6bf

```vim
imap jj <Esc>
```

imap で簡単にキーマップを変えることができる。
これで作業が格段に早くなる。

---

## set showcmd

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

打っている途中のコマンドが下に表示される
vimmer のイベントで これを 

https://atmarkit.itmedia.co.jp/ait/articles/1902/12/news024.html

この Windows のあ/A の切り替えのときのように
画面中央に大きく表示させている人がいた

なのでいつかやってみたい。

---
Data Engineering 101: Introduction to Data Engineering
Tags: dataengineering, beginners, programming, tutorial
Published: 2022-08-21 19:24:01

A data engineer designs and builds systems that collect, store, manage and analyze data. Companies collect a lot of information about their business from various resources, and they need data engineers to make this information accessible, structured and usable. A data engineer can build data pipelines, optimize queries, create automated systems, manage data warehouses, and develop data workflows.

**Roles of a Data Engineer**
•	Build data pipelines – this involves collecting data and building data warehouses or data lakes.
•	Make data accessible – involves remodeling the data in a way that is easy for all stakeholders to access interpret and manipulate. Excel, Power BI, and Tableau are some of the tools mostly used.
•	Optimize queries – involves updating the current queries to meet current business needs.
•	Data maintenance – involves testing and maintenance to ensure the system is running smoothly.

**Skills needed**

- Distributed systems: Hadoop
- Databases: MySQL
- Data processing: Spark
- Real-time data ecosystem: Kafka
- Data orchestration: Airflow
- Data science: pandas (Python library)

**Software and Technology Requirements**

1. Cloud account - Google GCP, AWS or Azure.
2. Python 3, Python IDE and a text editor - VSCode, Anaconda.
3. SQL server and MYSQL Workbench or DBeaver and DBVisualizer.
4. Git and version control system
Observables in Angular
Published: 2022-08-21 19:17:00

**Observable in Angular is a feature that provides support for delivering messages between different parts of your single-page application. This feature is frequently used in Angular because it is responsible for handling multiple values, asynchronous programming in Javascript, and also event handling processes.**

In this simple example we'll call an api recieve an Observable and just console.log it out.

Just before that let us brush up two concepts

1. What is Observable? 

Observable is a function that converts the ordinary stream of data into an observable stream of data. You can think of Observable as a wrapper around the ordinary stream of data.

Observable stream or simple Observable emits the value from the stream asynchronously. It emits the complete signals when the stream completes or an error signal if the stream errors out.

Observables are declarative. You define an observable function just like any other variable. The observable starts to emit values only when someone subscribes to it.


2. What are observers/subscribers?

The observers are the ones which consumes the value emitted by the observable, these are called observers or subscribers.

The observer must subscribe with the observable to receive the value from the observable. While subscribing it optionally passes the three callbacks. next(), error() & complete()

**Creating an Observables**


```
 obs = new Observable((observer) => {
    console.log("Observable starts")
      observer.next("1")
      observer.next("2")
      observer.next("3")
      observer.next("4")
      observer.next("5")
  })
```


**Subscribing to it**


this.obs.subscribe({
      next: (v) => console.log(v),
      error: (e) => console.error(e),
      complete: () => console.info('complete') 
    })


**Returning an observable and subscribing it during an API call
 **

```
catAPI() {
    return this.http.get<Observable<any>>('https://catfact.ninja/fact')
  }

  callingCatAPI(){
    return this.catAPI().subscribe( val => {
      console.warn(val);
    })
  }
```
Data Engineering BootCamp
Published: 2022-08-21 18:46:40

#Preview
Welcome to my blog on data engineering!

I will be participating in a 12-week data engineering mentoring program run by Data Science East Africa and Lux Academy, and I will be blogging about my learning progress here.

## <u>Week 1: Introduction to Data Engineering.</u>
**Data Engineering** is the design and development of systems for collecting, storing and analyzing data at scale.

Week 1 was all about familiriazing ourselves with DE concepts and setting up the environments.
###Technologies used and software requirements.

- Google Cloud Platform (GCP) a cloud-based auto-scaling platform by Google or AWS.

- Python language for coding, a python IDE and a text editor. I prefered anaconda.

- SQL server, MYSQL Workbench, DBeaver AND DBVisualizer.

- Git and version control system.

Week 1 was all about basic introduction and getting started.

Can't wait to document what I learn in week 2 and hopefully get a project to work on.