teleren/devto huggingface dataset:
100 Days Of Learning - Day 4
Tags: 100daysofcode, codenewbie, sql
Published: 2022-01-06 03:46:18

---
series: 100 Days of Learning
---
Hello everyone, I'm back for Day 4. I'm happy to report I figured out how to add my posts to a series here on DEV (pro tip: you can still add jekyll front matter even if you are using the rich text editor *themoreyouknow.jpg*).

Today I tackled something different, I've been asked to level up my SQL skills at work (I'm a business analyst, and while I don't get into the DBs on our projects often, it occasionally comes up). 

Fortunately, my company provides me with a Pluralsight account, so I'm working my way through a course (link below) to get a better understanding beyond my current level of "basic queries that I copy-pasted from my devs and then made simple modifications to in order to get to the data I'm looking for". The goal is to be able to start from scratch and draft my own queries. Later I want to get a deeper understanding of how the DBs are structured in some of my main projects.

## My Learning Goals for today:
- Install SQL Server 19 on my machine
- Work through 1 hour of the 2 hour course [Querying Data with T-SQL from SQL Server](https://www.pluralsight.com/paths/querying-data-with-t-sql-from-sql-server)

## What I Completed:
- Installed SQL Server 19 and completed about 50 minutes of video material

## What I Learned:
Where to begin! I really wish I had found this course sooner. I have read online tutorials and taken an Udemy course on MySQL before, and I had the general concepts around SQL queries down, but I didn't have any true understanding of what was happening.

This course covered how to navigate SSMS, the statement execution order, and a very basic overview of joins. What was especially helpful for understanding joins is 1) how the execution order impacts what is returned and 2) actually going into set theory. Maybe I'll make another post diving deeper into what made this click for me.

## My Goals for Next Time:
- Finish this course
- Get back to my Survey Form project from yesterday (this might turn into a weekend project instead, we'll see)

Thanks for joining me on this journey. If you're doing your own #100daysofcode or if there are any other SQL resources you recommend, please share below! I'd love to hear about what you're learning.

------
Photo by <a href="https://unsplash.com/@jankolar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jan Antonin Kolar</a> on <a href="https://unsplash.com/collections/xj3Y8-lHOXo/dev-blogs?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Design principles that matter in 2022
Tags: designsystems
Published: 2022-01-06 03:12:46

---
title: Design principles that matter in 2022
published: true
description: Getting design right and five resources to get design right in 2022
tags: DesignSystems
//cover_image: https://direct_url_to_image.jpg
---

## Getting design right
I should do a poll to figure out how many folks start a design file to simulate the web page before coding it. I have to visualize a product before getting technical with it.

Since I'm a newer designer and developer, I spend some time verifying standard specs for what I'm building. For example, according to standards, a navigation bar and how many px X px it should be. Another example is font sizing, for instance, the size ratios between the heading, subheading, and body. These are all principles that matter. When you layout your design file implementing common design standards, it will require less time to "get it right" when coding out the page.

## Five resources for breaking into design
1. When starting your design, it's best to start with a **design system** to design your web page with consistency. This ["...Where to start?"](https://uxdesign.cc/building-a-design-system-where-to-start-part-1-first-things-first-57577153ae2d) article is a solid intro to design systems by Shane P Williams.

2. It's also good to design with **screen size responsiveness** in mind. In Shaun Anderson's [post](https://uxdesign.cc/building-a-design-system-where-to-start-part-1-first-things-first-57577153ae2d), he uncovers the top ten screen sizes to optimize for in 2022.

3. **Fonts** can be tricky sometimes, especially when they need to be responsive. Erik Kennedy's [approach](https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html) to font guidelines fills you in on everything you need to know about fonts.

4. One of my favorite parts of a website is the **navigation bar**, as it's a visual most folks see when they first land on a page. It is an excellent way to demonstrate branding while guiding folks around the site. Pieter Heyman does a hell of a job laying out [nav-bar guidelines](https://blog.prototypr.io/a-quest-for-the-ideal-navbar-height-4d3898a41f2); I keep his post in my arsenal.

5. Let's not forget about the **hero** (pun intended, ha!), which makes up a large part of the main page. It has to be visually appealing and flow with the rest of the design. Katrina Kirsch's [Hubspot blogpost](https://blog.hubspot.com/marketing/hero-image) explains how to implement the previous four topics into your page's hero.

These are some of my favorite resources that I've bookmarked for quick reference whenever I'm laying out a new design. It's also okay to copy great designers as you learn. As [Austin Kleon](https://austinkleon.com/about/) says, ["Steal like an artist."](https://austinkleon.com/steal/)
Build a small TA-Lib container image
Tags: docker, python, tutorial, bigdata
Published: 2022-01-06 01:35:38

To make a small enough container image is a complicated job, especially Python.

We can use **multi-stage** build process and *virtualenv* to reduce the overhead from the build and pip install. However, some Python libraries use the runtime C library, we have to overcome this issue; otherwise the package won’t work.

I will take ***TA-Lib*** as an example to show how to get everything done correctly.

```Dockerfile
FROM python:3.7-slim AS compile-image
RUN apt-get update
RUN apt-get install -y --no-install-recommends build-essential gcc wget

# Make sure we use the virtualenv:
RUN python -m venv /opt/venv
ENV PATH="/opt/venv/bin:$PATH"

RUN pip install numpy

# TA-Lib
RUN wget http://prdownloads.sourceforge.net/ta-lib/ta-lib-0.4.0-src.tar.gz && \
  tar -xvzf ta-lib-0.4.0-src.tar.gz && \
  cd ta-lib/ && \
  ./configure --prefix=/opt/venv && \
  make && \
  make install

RUN pip install --global-option=build_ext --global-option="-L/opt/venv/lib" TA-Lib==0.4.16
RUN rm -R ta-lib ta-lib-0.4.0-src.tar.gz

COPY requirements.txt .
RUN pip install -r requirements.txt

FROM python:3.7-slim AS build-image
COPY --from=compile-image /opt/venv /opt/venv

# Make sure we use the virtualenv:
ENV PATH="/opt/venv/bin:$PATH"
ENV LD_LIBRARY_PATH="/opt/venv/lib"
```

Here is an example, and there are 5 points should be aware:

1. Choose a small enough base image; nevertheless, avoid using ***alpine***. The reason is explained by this article: [https://pythonspeed.com/articles/alpine-docker-python/](https://pythonspeed.com/articles/alpine-docker-python/)
2. Multi-stage is a good idea to reduce the overhead of building processes. In addition, applying *virtualenv* makes things much more easily. Therefore, install all Python packages into `/opt/venv`.
3. Now, we can try to build TA-Lib from the source. You have to specify the installation path to `/opt/venv` as well while *configure*.
4. Because we moved the default library path to `/opt/venv`, we need assign the global option or the build option to pip to let it know the library path.
5. Finally, remember to provide the `LD_LIRARY_PATH` to let python know where are the shared libraries.

Following the above procedure, the image size will be around 250MB. This is pretty small.
Hello World
Tags: html, css, javascript
Published: 2022-01-06 03:03:44

---
title: Hello World 
published: true
description: Hello there 👋! I am new to DEV! 
tags: #html #css #javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vu3fmonsfcd3j881hv9g.png
 
---
Resep Sayur Asem Jawa
Published: 2022-01-06 03:01:31

[Resep Sayur asem](https://gudang-resepmasakan.blogspot.com/2022/01/resep-sayur-asem-jawa-sederhana-enak.html) ataupun sayur asem banyak versinya. Terdapat yang bening dengan paduan oncom khas Jakarta. Ataupun tanpa oncom, berkuah bening ala Sunda. Terdapat pula sayur asem Jawa yang pedas serta agak keruh kuahnya.

Isian sayur- mayur dapat diseleksi cocok selera. Dapat dipadukan dengan nangka muda, jengkol muda, kacang merah fresh, serta kol. Sebab sayur asem umumnya terbuat dari sayur- mayur yang terdapat di kebun ataupun gampang didapat.

Umumnya, sayur asem disajikan bersama ikan goreng buat makan siang biar kian lezat. Nah, jika belum sempat cobain buat sayur asem jawa, ayo ikuti metode membuat serta resepnya berikut ini!
My journey through Scrimba 
 JS course!
Tags: javascript, programming
Published: 2022-01-06 02:49:06

hello my name is Moh and I am 13 years old!
I was really interested in coding, but the fact that I had to learn for years to become a web dev was painful...that was, until I found Scrimba! A 7 hour JS course and its free!, so i quickly logged on and started my journey!

What i liked about Scrimba?
the best part about Scrimba is that they explain every piece of code very well, they also make YOU write the code first before showing you the solution, thats what scrimba is all about!
they explain every concept and then give you a few mini challenge to build your muscle memory. The challenges get harder as time goes by. They even teach you some HTML and CSS!

you create 3 apps on your journey, can you imagine that all this is done in 7 hours!?

i HIGHLY suggest you do this course if your looking to become a web dev! https://scrimba.com/learn/learnjavascript
🤔 What Would You Change About this Website?
Tags: discuss, javascript, webdev, css
Published: 2022-01-06 02:16:58

Hey- I'm working on this website, and I was wondering what you would change about it. I know it's not perfect at this point, and that's why I want your opinion on it. 

[You can check it out here.](https://fairfieldprogramming.org/)

If I build the entire website on a bad foundation, it will just end up being a bad website. So, I would rather get feedback now (no matter how harsh it will be) than building a ugly mess and not knowing until afterwards.

[You can also check out our discord server here!](https://discord.com/invite/r2JnDXvrWt)
How to Run External Commands Within Vim
Tags: vim, neovim
Published: 2022-01-26 16:38:17

---
title: How to Run External Commands Within Vim
published: true
date: 2022-01-06 00:00:00 UTC
tags: vim, neovim
canonical_url: https://tech.serhatteker.com/post/2022-01/run-external-commands-within-vim/
---

## Use Case I - Execute Mode

You create a script file then you want make it executable and you don't want to leave your comfy editor to shell to execute that. How can we make it inside vim?

Typical shell command for that will be like:

```bash
$ chmod +x some_script_file.py
```

Within Vim it will be:

```vim
:!chmod +x %
```

When you want to execute external command, you add `!` (bang) in the beginning of shell function/command following by filename. As you probably already know I used `%` for current file/buffer.

## Use Case II - Write Output To File/Buffer

I have some command; I want to execute it and write the output to the current file.

Let's assume my desired command is basic `tree`. In terminal it will be:

```bash
$ tree -L 2 .
```

In vim it will be:

```vim
:read !tree -L 2 .
```

The `read` command inserts the output of the external command on a new line below the current line in the file. If you want, you can also specify a particular line number - the output will be added after this particular line

```vim
:73read !tree -L 2 .
```

## Use Case III - Running Directly From A Line

I have some command in my file and I want to execute a command directly from this line; I don't want to copy+paste this long command to Vim' command mode.

This is some kind of advanced method that we need to combine two things. First of all in order to execute a command from the buffer line you're currently working on, run:

```vim
:execute getline(".")
```

However this violates our purpose: "running directly from line". Therefore we need a `mapping`:

```vim
nnoremap <F10> :execute getline(".")<CR>
```

And if you want to visually select and execute add below mapping in your `.vimrc|init.vim`:

```vim
" Execute the line in VISUAL MODE
vnoremap <F10> :<c-u>exe join(getline("'<","'>"),'<bar>')<CR>
```

And the last thing you need to add `:read !` to beginning of your command:

```vim
# file.sh
...

# the command you want to execute
tree -L 2 .

# add `:read !` before your command`
:read !tree -L 2 /tmp
...
```

After you press `<F10>` you will get the output under your command line:

```vim
# file.sh
...

# the command you want to execute
tree -L 2 .

# add `:read !` before your command`
:read !tree -L 2 /tmp
/tmp
├── Session.vim
├── com.apple.launchd.6UpVQs5arG
│   └── Listeners
├── com.google.Keystone
├── powerlog
└── tmux-501
    └── default

4 directories, 4 files

...
```


All done!
100 Days of Code - Day 5
Tags: 100daysofcode, css
Published: 2022-01-06 01:23:12

Finished up section 3 of [Modern HTML & CSS From the Beginning](https://www.udemy.com/share/1013eA3@vWdDAwIbTNKVDgdoKRg7QR2jUvRHDQ3ZaF3Dd-HzUhJUlzvcDZZUUPGMPdldaX2q/), Basic CSS and I have to say I am quite proud of myself. After covering the display property and positioning was given a challenge in which was given a html file that contained a form and an image of what it should look like and had to style the page to look like the image, and I got pretty probably 98% close to the exact image, was only pixels off with some padding and some margin settings. CSS has always been a struggle for me so it is pretty confidence boosting to have been able to have done it without much frustration. Looks like section 4 of the course brings the first "project", so gives me hope I might do ok at it.
Year 2022
Tags: programming, productivity, developer, webdev
Published: 2022-01-06 00:00:08

**Hello** 👋, 

**I welcome you to the year 2022, Happy New Year** ✨.


> 
The year has started out and we hope to see this year more productive than the concluded year, but how can this be achieved 🤔 ?

*That's what we would be addressing in this blog, if you are interested 😀,  join me in this journey 🚀.*

## Tips For a More Productive Year
Here are the tips to making your year more productive than the last year.

### - Evaluate your journey in the just concluded year. 

- What were your plans last year? 
- What were you able to achieve and what did you not? 
- What acted as a stoppage and how did you go about it? and many more.

Then, use this as a major factor to influence your plans for the year.


### - Set weekly goals(milestones) and timeline.

We do have yearly resolutions and plans but to make it achievable, it is advisable to also set weekly goals as a subset of yearly resolutions because this makes one more conscious and intentional. So, also adding timelines convert your goals to targets. This makes you focused based on the time frame for achieving more in the course of the year.


### - Commitment, Dedication and Consistency.

These three words aforementioned are somehow similar and related in a way. These are keys to achieving goals in life. Having these as a soft skill tends to make one easily meet up with the goals intended. No one can have a 100% of these skills but it has to be proposed and measured proportional to the targets intended. 


### - Keep track of your goals.

As the year 2022 starts and runs out, keep evaluating and tracking your progress in contrast to your goals. This spurs you into action and the consciousness of what you are to do according to the timeline.

Thanks for reading through this blog, you can connect with me on;
- [Twitter ](https://twitter.com/chryz_code) 
- [GitHub](https://github.com/chryz-code)
- [Linkedin](https://www.linkedin.com/in/olanrewaju-alaba/)

Bye 👋
Cómo devolver un HttpStatusCode y un Json a la vez en una API con .net framework
Tags: csharp, api, netframework, webapi
Published: 2022-01-06 00:18:14

Sí estás intentando devolver un resultado Json y un HttpStatusCode a mismo tiempo y no sabes cómo, aquí te diremos.

para algunos código HTTP ya existen unos métodos predeterminado para devolver el código y una respuesta Json. por ejemplo 

Ok() =>      HttpStatusCode.OK    => 200
BadRequest() =>     HttpStatusCode.BadRequest => 400

algunos métodos solo retornan un estado HTTP sin objecto JSON pero si quieres retorna cualquier estado HTTP sin una respuesta JSON intenta esto.

```            

StatusCode(System.Net.HttpStatusCode.Unauthorized);
StatusCode(System.Net.HttpStatusCode.OK);
StatusCode(System.Net.HttpStatusCode.NotFound);
StatusCode(System.Net.HttpStatusCode.Forbidden);
```
Pero si lo que quieres es devolver cualquier Estado HTTP con una respuesta JSON debe hacer lo siguiente

```
Content<T>(System.Net.HttpStatusCode.Unauthorized,new T() { });
Content<LoginRequest>(System.Net.HttpStatusCode.Unauthorized,new LoginRequest() { });
```

Donde T es el tipo de objecto que se devolver en el JSON, puedes poner la clase del objecto que vayas a devolver en la respuesta JSON.

Espero haberte ayudado, te agradecería  que me sigas en mis redes sociales.

[YouTube](https://www.youtube.com/channel/UCBruvsN18FvqNHSHe7E6WWg)
Day 71 of 100 Days of Code & Scrum: Coding Something I Won't Use
Tags: 100daysofcode, beginners, javascript, productivity
Published: 2022-01-06 00:05:03

Greetings, everyone!

Just like every Tuesday, I had to go out for my physical therapy session, so I couldn't work as much today. However, I still managed to get a decent amount of work done on my [company webpage](https://www.rammina.com) such as adding alternative contact methods in case the message form doesn't work and adding a hover overlay on the portfolio project images that says "View Project."

![Rammina Contact Alternatives](https://cdn.hashnode.com/res/hashnode/image/upload/v1641293734859/AtD9-4GIQ.png)

![Rammina Project Hover Overlay](https://cdn.hashnode.com/res/hashnode/image/upload/v1641294067719/Ggb99q9Gj.png)

Anyway, let's move on to my daily report!

## Yesterday

I passed my Professional Scrum Master I (PSM I) certification exam and got certified. Also, I planned out the work I'll be doing for this week, mostly regarding the business page.

## Today

### Company Website

- I added call-to-action for alternative contact methods, specifically email and phone number, if ever the contact form doesn't work.
- I placed a hover overlay on top of the portfolio project images.

### Scrum

- read some articles about Scrum, particularly about the role expectations in an organization, as well as other people's experiences of being a Developer and Scrum Master at the same time.

Thank you for reading! Have a good day!

![Rammina Thank You Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9ayfxxxaz2g2hfcqbsk.png)

## Resources/Recommended Readings

- [How do you manage being a Scrum Master and Developer at the same time?](https://www.reddit.com/r/agile/comments/bh9n5r/how_do_you_manage_being_a_scrum_master_and_a_dev/)
- [What can I expect my Scrum Master to do?](https://www.reddit.com/r/agile/comments/rawhza/what_can_i_reasonably_expect_my_scrum_master_to_do/)

## DISCLAIMER

**This is not a guide**, it is just me sharing my experiences and learnings. This post only expresses my thoughts and opinions (based on my limited knowledge) and is in no way a substitute for actual references. If I ever make a mistake or if you disagree, I would appreciate corrections in the comments!

<hr />

## Other Media

Feel free to reach out to me in other media!

<span><a target="_blank" href="https://www.rammina.com"><img src="https://res.cloudinary.com/rammina/image/upload/v1638444046/rammina-button-128_x9ginu.png" alt="Rammina Logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://twitter.com/RamminaR"><img src="https://res.cloudinary.com/rammina/image/upload/v1636792959/twitter-logo_laoyfu_pdbagm.png" alt="Twitter logo" width="128" height="50"/></a></span>

<span><a target="_blank" href="https://github.com/Rammina"><img src="https://res.cloudinary.com/rammina/image/upload/v1636795051/GitHub-Emblem2_epcp8r.png" alt="Github logo" width="128" height="50"/></a></span>
How to make an array immutable or read-only in TypeScript?
Tags: typescript
Published: 2022-01-06 00:00:00

---
  title: How to make an array immutable or read-only in TypeScript?
  published: true
  tags: TypeScript
  date: Thu Jan 06 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/make-array-immutable-readonly-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-47f2fbbc936977b66b652aebe6949ef8.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/make-array-immutable-readonly-typescript)
  
To make an array immutable or read-only, one of the straightforward ways to achieve is to use the `as const` syntax after the array itself in TypeScript.

### TL;DR

```ts
// array of numbers
// the array is now immutable or readonly
const numsArr = [1, 2, 3, 4, 5] as const;

// try assigning a value to the 0th index
numsArr[0] = 6; // ❌ Error. Cannot assign to '0' because it is a read-only property.
```

For example, let's say we have an array of numbers like this,

```ts
// array of numbers
const numsArr = [1, 2, 3, 4, 5];
```

Now let's make the above `numsArr` array immutable or read-only using the `as const` syntax after array itself.

It can be done like this,

```ts
// array of numbers
// the array is now immutable or readonly
const numsArr = [1, 2, 3, 4, 5] as const;
```

The array is now immutable.

Now let's try to assign a new value to the `0th` index of the array like this,

```ts
// array of numbers
// the array is now immutable or read-only
const numsArr = [1, 2, 3, 4, 5] as const;

// try assigning a value to the 0th index
numsArr[0] = 6; // ❌ Error. Cannot assign to '0' because it is a read-only property.
```

As you can see the TypeScript compiler doesn't allow assigning a new value and shows an error saying `Cannot assign to '0' because it is a read-only property` which is what we need to happen.

We have successfully made the array immutable or read-only. Yay 🥳!

See the above code live in [codesandbox](https://codesandbox.io/s/make-array-immutable-readonly-typescript-inloj?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---