teleren/devto huggingface dataset:
Implicit CSS Grid, 301 & 305
Tags: css, grid, youtube, tutorial
Published: 2020-03-01 13:28:04

Skipped last week's post because I changed job, and adaptation is still in full force. You might have seen it in the videos, which are now one take without prep, and are about 50% longer. Sometimes, shipped is better than perfect!

Here we are, at the end of this series on CSS grid, exploring the concept of implicit grids. 
So far, all of our layouts have been strictly defined using grid-template and grid-area, which is great for static layouts, but it's only half of the equation. Dynamic ones needs a little bit more flexibility, guiding the browser to place items rather than placing them ourselves.

The first 5 videos are about constructing a dummy login/register modal, with the columns defined and rows handled implicitly by the browser.

The last 5 are about building a gallery, with 3/2 horizontal images, 2/3 vertical ones, 2/2 squares and 1/1 fillers, without having to calculate optimum layouts' placement. Oh! and did I mention it's fully responsive, without media queries?

In the next few weeks, I'll be answering questions that I received during this series about CSS Grid, you can expect maybe 1 or 2 videos per week at this point, depending on schedule. Feel free to ask more here or tweeter, I'll try to answer as many as possible!

After that It will be time to move on to another subject, if you have any suggestion, I would like to know from you if there's a subject you feel should have a bit more exposure! So far, I'm planning a series on State machines, images handling, HTML node performance costs & HTML performance in general.

[As per usual, you can check the code on GitHub, one branch for every video](https://github.com/MakeItHappenDev/N2P-CSS-Grid)

[link to the full playlist here](https://www.youtube.com/playlist?list=PLBHbfZu_dhOca_FpdUccB2KfjPfW1zklZ)


-1 track line trick
{% youtube o95WkhpzXrk %}

Centering with Grids, place-content, place-items & place-self
{% youtube 49kdZZVBps8 %}

Introduction to the implicit Grid
{% youtube c-F5MlJtq08 %}

Filling out the login form
{% youtube KJnbcrMRVEU %}

Set default height of the Implicitly created rows
{% youtube vyR1uDDb8ak %}



Creating our Gallery
{% youtube tIoV4-1L030 %}

Using auto-fit & auto-fill for responsiveness
{% youtube fkhEJJzm5iE %}

Ordering items
{% youtube Ctm439jflTI %}

creating our vertical/horizontal/square items
{% youtube -FuaTjT3w6E %}

Densely pack our gallery in one property
{% youtube y65MmtoFMJc %}
brilliant illustrations for relationships over time
Published: 2020-03-01 13:22:29

---
title: brilliant illustrations for relationships over time
published: true
description: 
tags: 
---

https://designyoutrust.com/2019/02/artist-olivia-de-recat-perfectly-illustrates-how-our-relationships-change-over-time/

The drawings remind of of sparklines https://en.wikipedia.org/wiki/Sparkline

The one the with dog is just two lines but is very impactful.
OverTheWire Bandit Level 3 Level 4 walk-through
Tags: security, infosec, ctf, beginners
Published: 2020-03-01 13:15:20

Challenge page => https://overthewire.org/wargames/bandit/bandit4.html

This challenge also involves reading the password from a hidden file, which is present in the `inhere` directory.

When we navigate to the directory and list the files, there's nothing

![inhere dir contents](https://dev-to-uploads.s3.amazonaws.com/i/uoa2i1eb3dzjy5u78lsi.png)

But we know the file is there.

___
Hint 1: Once again, look at the list of the commands. Which one is likely to show us the hidden files in a directory? 
___

Didn't get it? Its ok!

___
Hint 2: Maybe [ask the Duck](https://duckduckgo.com/?t=ffab&q=show+hidden+files+in+Linux) about "show hidden files in Linux" ?
___

Yep, it was the `ls` command all along, which has an additional option to show you hidden files aka files whose names start with a dot.

![inhere dir contents](https://dev-to-uploads.s3.amazonaws.com/i/aozapsgamjofj4aixug7.png)

Congrats! Yet another flag conquered!
Daily Developer Jokes - Sunday, Mar 1, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-03-01 13:00:21

---
title: "Daily Developer Jokes - Sunday, Mar 1, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Mar%201%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258a87ad7e.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___!false___

It's funny 'cause it's true.
 -->
C++ Interview Questions
Tags: cpp
Published: 2020-03-01 12:52:56

Q What is C++?

Ans. It is an object-oriented programming language developed in 1985. Bjarne Stroustrup created it.

C++ language is the updated version of C language with having classes and objects.

It was called “C language with class”. After sometimes, it was known as C++ language.

You can use [Turbo C++](https://errorsea.com/download-and-install-turbo-c-for-windows-11/) to run C and C++ programs.
Be alerted if your account is compromised
Tags: security, beginners
Published: 2020-03-01 11:45:58

Have you ever heard about the [https://haveibeenpwned.com/](https://haveibeenpwned.com/) website? Or https://monitor.firefox.com/?

You just have to enter your email address and check if you have an account that has been compromised in a data breach. 

If one account has been compromised, it means people know that your email address: **john.dohn@mail.com** was using this password **08october94!** on a website. You need to change your password on this website quickly obviously, but it also means that anyone can try the combination on a different website.

> What if you use the same email address and the same password on another website?

Let's say I am registering to a bad and small website https://i-love-eating-apples.com I don't care. Ok, quick registering:  **john.dohn@mail.com** and **08october94**. Easy password to remember as it is my birthdate :-)

But that's also my password to my Facebook account as it is easy to remember :-) 

And my password to my email account :-) 

Ok, now imagine someone breaks into  https://i-love-eating-apples.com because it was badly secure and get every user information (email/passwords). *Why would someone spend time to secure such a website? It is only for fun...*

Well, someone has your password and can try it on different websites. Emails providers, social media, messenger apps, etc.

Lessons taught?

Use one password per website (*use a password manager*). Even if a website is compromised and your account as well, it doesn't impact your other accounts.

That's where [https://haveibeenpwned.com/](https://haveibeenpwned.com/) and https://monitor.firefox.com/ are useful: to have a look at compromised accounts.

Super cool tools, but you will probably only use it once in your lifetime.

They have a less-known functionality: **Be alerted if your account is compromised.** 

https://haveibeenpwned.com/notifyme or https://monitor.firefox.com/. Enter your email address and from now on they will alert you!

If you want to dive a little further, this resource is really great as well, have a look! https://monitor.firefox.com/security-tips


*Original blog post [here.](https://blog.lepape.me/be-alerted-if-your-account-is-compromised)*
Programming first principles - 7. Premise - Complexity increases exponentially with scale
Tags: programming, webdev, learning, development
Published: 2020-03-01 11:20:51

This post ([Programming first principles - 7. Premise - Complexity increases exponentially with scale](https://www.sargalias.com/blog/programming-first-principles-premise-complexity-increases-exponentially-with-scale/)) was originally published on [Sargalias](https://www.sargalias.com).

This premise reminds us that complexity increases exponentially with scale. See [Programming complexity](https://en.wikipedia.org/wiki/Programming_complexity).

As the number of entities in our code increases, the possible number of interactions between them increases exponentially.

In other words, **any insufficient or imperfect processes during development will have an exponentially negative effect later**.

Our solution to that must be that we always keep complexity as low as possible, to minimize the effects of its exponential increase as the system scales.
Building Minimal Responsive Signup Page with TailwindCSS
Tags: codepen, tailwindcss, signuppage
Published: 2020-03-01 11:18:03

Recently, I have been working in front-end web development that eluded me a lot during my early days of development and shifted to mostly backend API development.

Then I came along with the **[@TailwindCSS](https://twitter.com/tailwindcss?s=20 "TailwindCSS Twitter Handle")** Frontend Framework.
The framework website states that:

> A utility-first CSS framework for rapidly building custom designs.

## TailwindCSS:

So what [tailwindCSS](https://tailwindcss.com/ "tailwindcss website") does is that don’t go to CSS file to make changes but to use classes in HTML for styling. Also, it is much easier to learn even compared to simple CSS.

You can learn more about how to use tailwindCSS is with screencasts made by tailwindCSS own creator [@adamwathan](https://twitter.com/adamwathan?s=20 "Adam Wathan Twitter handle") [here](https://tailwindcss.com/course/setting-up-tailwind-and-postcss/ "Screencasts by Adam Wathan on TailwindCSS").

## BootstrapCSS VS TailwindCSS
BootstrapCSS is a component-based framework in which we have to override the existing classes which cause the uses to be freakishly complex and also the component integration with VueJS (which I use mostly) is almost impossible and the size of CSS also increase vastly.

While, TailwindCSS is a low size cost with the usage of PostCSS, and if the developer knows the basics of CSS then it is as easy as pie.

## My designed SignUp Page
Below is the pen, where I created a responsive minimalistic signup form using the tailwindCSS CDN version which can be heavy as postcss could not be used while in the project we can use postcss and with VueJS animations, the final project becomes low-size, great and responsive.

{% codepen https://codepen.io/sulmanweb/pen/zYGzZQg %}
One night without WIFI. Any explanation?
Published: 2020-03-01 10:54:48

---
title: One night without WIFI. Any explanation?
published: true
description: 
tags:
cover_image: false
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4diavnd0feegwtort6y6.jpeg)

Hello peeps. 

I'm using my printer once a week since I do not have a big desk. I keep the paper tray closed and every time I need the printer I would move my Mac-mini a little on top of the monitor stand to be able to use the printer then put everything back to normal once I'm done.

Last night I moved my Mac-mini to do the same thing. While I was trying to print from my computer I noticed the wifi is not connected. I thought It's the router then I checked my phone and it was connected to the Wifi and everything is fine. Then I switched to my Macbook because I was in a hurry.

Long story short, Today in the morning I did put my Mac-mini to the flat position on the desk and the Wifi started to work again. I was like WTH. Then I could not believe bending my Mac-mini on the monitor's stand a little bit would prevent the Wifi from working. Then I repeated it and I can confirm the Wifi will not work if the Mac-mini is not in a flat position on my desk.

Any idea what might be the problem?? Or an explanation?
Making Your Rails Console Interesting..
Published: 2020-03-01 09:58:29

https://blog.joshsoftware.com/2020/01/20/making-your-rails-console-interesting/

As a Rails developer, every time we work on a Rails project we heavily use rails console for development. I love the rails console as much as any Rails developer. It is the best place to experiment or validate your logic but…!
cookiecutter for container images
Tags: docker, cookiecutter, devops, template
Published: 2020-03-01 08:28:45

## What is cookiecutter?!

Cookiecutter is a command-line utility that creates projects from **cookiecutters** (project templates), e.g. creating a Python package project from a Python package project template.

* Documentation: [https://cookiecutter.readthedocs.io](https://cookiecutter.readthedocs.io)
* GitHub: [https://github.com/cookiecutter/cookiecutter](https://github.com/cookiecutter/cookiecutter)
* PyPI: [https://pypi.python.org/pypi/cookiecutter](https://pypi.python.org/pypi/cookiecutter)
* Free and open source software: [BSD license](https://github.com/cookiecutter/cookiecutter/blob/master/LICENSE)

### Sidenote 

I maintain a containerized version of all cookiecutter releases starting with `1.7.0` at [dockerhub](https://hub.docker.com/r/ckaserer/cookiecutter).
If you want to know more check out the associated repository at [github.com/ckaserer/cookiecutter](https://github.com/ckaserer/cookiecutter) or my blog post [containerized cookiecutter](https://ckaserer.dev/docker/2020/02/15/cookiecutter.html).

---

## Cookiecutter for container images

The goal of today is to standardize and automate your container image build process. From folder structure, to CICD, to publishing to a container registry, to build notifications via slack with cookiecutter templates.

### Requirements

* cookiecutter or its [containerized cookiecutter](https://ckaserer.dev/docker/2020/02/15/cookiecutter.html) version
* travis
* container registry
* slack

### Getting stared

To process the `docker-cookiecutter` template execute  

```
cookiecutter https://github.com/ckaserer/docker-cookiecutter
```

Here a quick look at the resulting target folder structure

```
docker-{{cookiecutter.image_name}}
├── .ci
│   └── test.sh                     <- put your tests here
├── .dockerignore                   <- ignore files when building
├── .github                         <- github issue templates
│   └── ISSUE_TEMPLATE
│       ├── bug_report.md
│       └── feature_request.md
├── .gitignore
├── .travis.yml                     <- slack notifications for our tests
├── CODE_OF_CONDUCT.md
├── Dockerfile                      <- what we actually want
├── LICENSE
├── README.md                       <- badges and quickstart info
└── bashrc                          <- bash functions for easy of use
```

Next, we need to add our registry credentials to be able to push our images to a container registry and our slack integration for build notifications.
You can find a how-to for those steps in the README.md of your processed docker-cookiecutter template or directly via this [link](https://github.com/ckaserer/docker-travis-cli).

---

### Source 
* [cookiecutter.readthedocs.io/en/latest/README.html](https://cookiecutter.readthedocs.io/en/latest/README.html)
* [github.com/ckaserer/cookiecutter](https://github.com/ckaserer/cookiecutter)
* [github.com/ckaserer/docker-cookiecutter](https://github.com/ckaserer/docker-cookiecutter)
* [hub.docker.com/r/ckaserer/cookiecutter](https://hub.docker.com/r/ckaserer/cookiecutter)
چگونه DNS را تنظیم کنیم؟

Published: 2020-03-01 07:22:05


چگونه DNS را تنظیم کنیم؟

پس از اینکه با مسئله اینکه [DNS چیست](https://blog.iranserver.com/dns/) آشنا شدید و متوجه شدید که DNS چه کاری انجام می دهد، می توانید DNS ها را روی هاست تنظیم کنید تا زمانی دامنه یا آدرس اینترنتی وب سایتتان را وارد وب سایت شما اجرا شود. در واقع به جای اینکه شما مستقیما آی پی سروری که وب سایت شما روی آن میزبانی می شود را بزنید، آدرس دامنه را اجرا میکنید و وب سایتتان اجرا می شود.
چرا نیاز به DNS داریم
Published: 2020-03-01 07:21:18


چرا نیاز به DNS داریم

یکی از مواردی که شما هنگام ثبت دامنه با آن آشنا می شوید، DNS است، اما [DNS چیست](https://blog.iranserver.com/dns/) و چطور می توان از آن استفاده کرد؟ زمانی که شما دامنه ثبت می کنید یکی از تنظیماتی که در دسترس شما است همین مسئله تنظیم DNS ها می باشد که می توانید برای اتصال هاست یا همان فضای IP وب سایتتان به دامنه آن را متصل کنید. مثلا Ns.Example.com یک DNS می باشد که در تنظیمات دامنه قابل اجرا می باشد.
Dns چیست؟
Published: 2020-03-01 07:20:46


Dns چیست؟

یکی از مواردی که شما هنگام ثبت دامنه با آن آشنا می شوید، مسئله DNS است، شاید برای شما هم این سوال به وجود آمده باشد که [DNS چیست؟](https://blog.iranserver.com/dns/) و چطور می شود از آن استفاده کرد؟ در واقع DNS یک نوع مبدل IP و نام دامنه می باشد که این دو را به یکدیگر متصل می کند.
I’m Looking for My Next Job
Tags: job, employment, hireable
Published: 2020-03-01 05:55:56

---
title: I’m Looking for My Next Job
published: true
description: Looking for my next job. Python, Ruby, JavaScript.  
tags: job, employment, hireable
---

Hi! My name is Ryan, and I’m looking for my next job. 

For the past five years, I’ve worked as a mechanical engineer, building tooling for medical devices and analyzing cutting edge turbomachinery designs, and filling my spare time with programming, writing to teach others how to program, and getting my Master’s in Computer Science. 

Now, I’m ready to move on and take on my first software job!

I’m good at Python and Ruby, I'm comfortable in HTML, CSS, and JavaScript, and I’ve worked in C, C++, Java, Rust, Go, Julia, Crystal, Elixir, Haskell, Lua, and even a little Assembly. I *love* to learn new things, and I pick up on new concepts really fast, especially in a hands-on environment. My full resume is [here](https://assertnotmagic.com/resume/).

I’m moving to the Sacramento area, so I’m open to anything around there or remote.  I'd prefer full time, but part-time is OK too. If you or someone you know is hiring, I would really appreciate a heads up. Or, if you know of a great company to work for that I should get in touch with, that’s also much appreciated. 

Thank you!
GraphQL: Schema first or Code first
Tags: graphql, prisma, typescript, nestjs
Published: 2020-03-01 05:24:13

Schema first is more meaningful because you describe business logic in GraphQl (which is human readable and could be the shared document between developers and Scrum product owner) and then resolve queries and mutations in typescript.
But Implementing in code first is faster for developers. you define resolvers and Apollo generates the schema based on them.

Prisma is a type-safe GraphQL based alternative for mongoose or any other js ORM which I think is awesome progress. It works just with a GraphQl data model file. `prisma-bindings` helps to connect NestJS to Prisma in a schema first approach:

https://www.prisma.io/features/bindings

NestJS tutorial for `prisma-binding`:

https://docs.nestjs.com/recipes/prisma

but if you want to connect to Prisma using The code first approach, you can use:

https://www.prisma.io/docs/prisma-client/

Still, there is something about Prisma, The current version will deprecate soon, and the next version Prisma2 is totally different, in a nutshell:

* Prisma 1: A stand-alone server: Type-Safe ORM (`prisma-bindings` or `prisma-client`)+ GraphQL API + Admin panel

* Prisma 2: A npm package: Type-Safe ORM (only `prisma-client`) + Admin panel + Migration tool

In Prisma 2 there is nothing related to GraphQL and they suggest the code first approach using:

https://github.com/prisma-labs/nexus-prisma
Clang vs GCC
Tags: cpp, clang, gcc, compiler
Published: 2020-03-01 04:51:55

Clang is relatively new in cpp world. Clang came out of apple’s stable and became open sourced in 2007. Apple uses LLVM extensively. For some unknown reason they choose to drop gcc’s front end , and create a new compiler front end from scratch. Thus Clang is born .
GCC’s main popularity lies in the fact that it is the only option to compile Linux kernel. So if you are working in *nix world GCC is surely your daily driver. Also GCC supports more legacy languages ( like Fortran, ADA). But on the other hand Clang+LLVM reduces compilation time for  single threaded applications by 5-10% . For a more comprehensive benchmark comparison check [here](https://www.alibabacloud.com/blog/gcc-vs--clangllvm-an-in-depth-comparison-of-cc%2B%2B-compilers_595309) .
Custom Domains for GitHub Pages
Published: 2020-03-01 03:43:54

Having finished a bootcamp, you get the chance to create a space for all your projects to shine. That's all done through a portfolio. One thing you may not realize is that GitHub gives you own single-page site. Cool huh? But one downside is that you have to use the ending of github.io. This is all fine and dandy, but what if you want to use a custom domain? Well, you can do that too! 

To do this, just follow these easy steps:

1. Go to your repository you're wanting to use for your site. Maybe this is done through a portfolio repo, a custom built site, etc. 

2. When the repo page loads, click on the setting tab. This will load all the different setting options you have for your chosen repo. 

3. Scroll down until you see *GitHub Pages* option. Inside this section you'll see a box for **Custom Domain**. This is where you can enter the custom domain option you have purchased. 

Click save and you're all set! 

It can take up to 24 hours for everything to show up, but in my case it came up pretty quickly. 

Hope this helped!
Difference between Depth First Search and Breadth First Search
Tags: datastructures
Published: 2020-03-01 03:00:48

Most likely, if you are traversing a tree you will be using either of these two methods: **Breadth First Search or Depth First Search**. Both of these methods will visit all edges and vertices of a graph but will traverse it differently. 

Depth First Search **will follow a path from the starting node to an ending node, then another path from start to end until all the nodes are visited. DFS starts the traversal from the root node and visits nodes as far as possible from the root node. This method is implemented using a stack data structure and generally requires less memory than BFS**.

Breadth First Search **proceeds level by level visiting all nodes on one level before moving on to the next. BFS starts traversal from the root node and visits nodes in a level by level manner. It is usually implemented using a queue structure and generally requires more memory than DFS**.

##When to use BFS vs DFS

BFS is optimal for finding the **shortest distance**, and is more suitable for searching vertices which are closer to the given source.

DFS is more suitable when there are solutions **away from source**. DFS is more suitable for game or puzzle problems. We make a decision, then explore all paths through this decision. And if this decision leads to win situation, we stop.