teleren/devto huggingface dataset:
Dynamic queries with Laravel
Tags: laravel, protips, eloquent, php
Published: 2020-07-25 21:25:32

When developing a project for a client, a doubt arose: how create a dynamic query using only Eloquent?

Maybe, you can think: “It’s easy! We can use the method when”.
But that wasn’t what I intended, therefore, before continue, let me show you better the problem.

Imagine that I have a schedule, and I need create an event that start and finish with a difference of weeks and has a repetition in specific days of week. E.g.:

> I, Rafael, intent elevate my English and Spanish level, therefore, intent study English by one hour, in every Sunday, Wednesday and Friday, during a one month; and, Spanish, every Tuesday, Thursday and Saturday.

Now, imagine that you receive the dates using a numeric representation, in that 0 is equals a Monday, and 6 is a Saturday, thus we can represent the received data by the vector below:

```
{
	"frequency": "daily",
	"days": [1, 3, 5],
	"date_start": "29/05/2020",
	"date_end": "29/06/2020",
	"hour_start": "20:00",
	"hour_end": "21:00"
}
```

As every people that want to study, not like be interrupted to make another thing, therefore, we need grant this event not collide with another. So, more one time, how make this, using only Eloquent?

The response is simple. See above:

```
[...]

})->when(request()->get('frequency') === "daily", function (Builder $subquery) {
    foreach (request()->get('days') as $day) {
        $subquery->where('days', 'LIKE', "%$day%");
    }
    return $subquery;
});

[...]
```

What do you think about the tip?

Soon I back with more! :)

**PS:** Originally posted on my account on Medium.

{% medium https://medium.com/@rafaelfrancam/-queries-with-laravel-fb21bf3e0b94 %}

Cover photo by [Chris Ried](https://unsplash.com/@cdr6934) on [Unsplash](https://unsplash.com).
Why does writing code for DynamoDb get my spidey senses tingling?
Tags: dynamodb, aws, productivity, discuss
Published: 2020-07-25 20:20:18

I am not the best developer, but I'm certainly not the worst. 
I've got a lot of years under my belt using a host of languages and technologies, but writing code to access DynamoDb feels wrong. Very wrong. Why?

All code is a liability, I've spent my career trying to write less of it and get more done. The only thing I like better than writing code is deleting it.

But I find myself writing reams of code and performing all sorts of mental gymnastics to do previously 'simple' things with DynamoDb. CRUD, sorting, filtering all seem to require way too much code and mental effort; something doesn't 'smell' right.

Is it just me? Doth this programmer complain too much? Have I not just found a good library to take away all the pain?
I'm live on twitch building a file sharing app!
Tags: livestream, twitch, serverless, react
Published: 2020-07-25 20:06:11

---
title: I'm live on twitch building a file sharing app!
published: true
description: Come watch me build stuff.
tags: livestream, twitch, serverless, react
//cover_image: https://direct_url_to_image.jpg
---
Hey everyone! I'm currently live over on twitch where I'm going to be building a file sharing application! [Come chat with me about all things tech while I build!](https://twitch.tv/iamflowz)
Any Adobe Software Errors...?
Tags: adobe, errors, lionde
Published: 2020-07-25 20:05:21

If you do have any adobe software problems,which means software errors,you can hangout to me directly.i'll find a solution for you guys.this is our telegram channel dm your problems to and don't forget to like us on facebook.thank you
Telegram:https://t.me/LionDeCreations
Facebook:https://www.facebook.com/LDCre002/

Chamicara Desilva
Lion__De Creations
Day 9: Set up mongoDB
Tags: 100daysofcode, javascript, mongodb
Published: 2020-07-25 19:50:47

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/163levopfbq14tfo45ko.png) 
Lets ctrl + c and ctrl + v our way out of day 9. I'll set up a database for my habit tracker by recycling and adjusting this [code](https://dev.to/mtee/working-with-mongodb-1i3l).

```javascript
const mongoose = require ('mongoose');
const db = mongoose.connect('mongodb://localhost/habittracker');
const Habit = require('./models/habitModel');
```
Created a habitModel.js file in models folder and created my model:
```javascript
const mongoose = require('mongoose');

const {Schema} = mongoose;

const habitModel = new Schema(
  {
    done: { type: Boolean, default:false },
    title: { type: String},
    description: { type: String},
  }
);

module.exports = mongoose.model('Habit', habitModel );
```


It's been an easy ride all through but today is one of those days where i like my PC better when it's off.

Finally, Day 9!
unit-testing 
Tags: python, testing, pytest
Published: 2020-07-25 19:43:00

unit testing is defined as testing a function or class or a module in a program to check for any bugs before further testing is carried by the software testing team, a lot  of start-ups and companies now expect developers to know unit testing methodologies and frameworks in the back-end language they are using to make the testing process done by software testers afterwards more efficient in terms of time and cost, so it's favourable for a developer/programmer to know unit teasing to ease the life of software tester and make sure his/her code works well to a certain extent, personally I tried unit testing in python, Golang in projects I was working on and somehow familiar with it in java but never used it, I will talk about pytest as a framework for testing and how it promotes a cleaner and more efficient use than the standard testing library in python, but first I will talk about some definition and jargons in pytest 


@pytest.fixture : to put it simply fixture is a code which is repeated many times in the code or a variable which is used by many methods/functions i.e: database connection or creating object.

@pytest.mark.module1_test : markers is used to specify which functions you're interested in testing when starting the testing process, for example every function with module1_test signature will be tested.

let's look at a function which test a function which check wether a number is even or not

@pytest.mark.even_test 
def is_even():
    number1 = 2
    assert number1 % 2 == 0

the test will run successfully if the number if the number1 is event else it will fails.

make sure as a developer to add unit testing on to learn list because it's a very powerful tool which can promote good coding habits 

Fun to Read :-
https://yeti.co/blog/using-pytest-to-write-beautiful-tests-and-a-bulletproof-django-app/

http://guru99.com/pytest-tutorial.html#3
Floating Label Experiment
Tags: css, design, codepen, dribbble
Published: 2020-07-25 19:40:42

I put together this quick floating label experiment to see if there was an opportunity to improve upon many of the floating label patterns out there.

In the experiment I wanted to see if there was a way to emphasize the input label a bit more, especially when focused. Below is what I came up with. feel free to fork/remix the [codepen](https://codepen.io/JonLehman/pen/JjYZVwO) and improve upon it as needed.

Or, if you'd like [check it out on dribbble!](https://dribbble.com/shots/11511225-Floating-Label-Experiment)

{% codepen https://codepen.io/JonLehman/pen/JjYZVwO default-tab=result %}

I figure this likely isn't an incredibly original direction but just wanted to share the experiment!

----

This experiment was originally posted on my personal site/block [here](https://jonlehman.me/notes/floating-label-experiment).
Introduce Yourself To The World! Wrong Answers Only!
Tags: watercooler, discuss, fun
Published: 2020-07-25 19:35:57

Who are you? What do you do in life? 

Introduce yourself to the community!
However, __wrong answers__ only!

![](https://media.giphy.com/media/7yxKlEZn6GfhS/source.gif)
Small React(ion): From Kanji to Hiragana!
Tags: react, javascript
Published: 2020-07-25 19:32:49

I am starting a series talking about my small React applications. To begin, we start with this small application I wrote about 7 months ago. If you just want to see the code, here you go: https://github.com/djamaile/kanji-to-hiragana/

### Background
A couple of months ago I was studying Japanese. I was about to graduate (I just did!) and I wanted to celebrate that with a trip to Japan. Unfortunately, that trip got canceled. But we still have this cool program!

I first started with learning hiragana and hiragana is the Japanese alphabet. After that, I started learning katakana which is also an alphabet but it is only used to describe western words/names. Then I started learning kanji. Kanji are characters to describe nouns, adjectives, adverbs, and verbs. In short, kanji are characters for words we could also describe in hiragana. 

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

Example: Hello world (English) -> Hello せかい (Hiragana) -> Hello 世界 (Kanji) 

Note: There are probably way better resources to explain this so, I suggest hitting up Google if you are more interested in this. 

So, I was studying Japanese with Anki. Anki is a software program where we can use flashcards. Sometimes I would get cards with kanji on them and I would have no idea how to pronounce the word. The back of the flashcard would only tell the English translation and not show the full word in hiragana.  

Furthermore, knowing the hiragana in the kanji could not only help with pronunciation but also help me better remembering the kanji. So, I wanted to translate the words with kanji in them to hiragana. Well for that I needed an API of some sort. Surprisingly I found one from https://labs.goo.ne.jp/. I can't exactly remember how I found but it did have the required API! 

### Application
So, I started writing my React application with this simple idea: I want to input kanji and get only hiragana back. 

First, I checked if the given input was Japanese and this can be done with simple regex. If the input was not Japanese then an error would show up and alarm the user. 

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

Second, the actual translation from kanji to hiragana. When I was building this I very much into hooks. So, I made a custom hook for the translation. In the hook, we would use the function above to check if the input is Japanese. After the check, I take the input and send a request to the API and store the result. 

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

Lastly, I put two text boxes on the homepage and imported the hook. The application was done and it worked! I do have the mention that they are probably caveats, because of how complicated kanji is. But for the time I used it, it worked well! 

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

### Future 
Well, I stopped using it, because I eventually found better Anki decks. But if someone has an idea or wants to contribute please let me know!
#100DaysOfCode, enfim 100 dias
Tags: 100daysofcode, codenewbie, productivity, opensource
Published: 2020-07-25 19:31:26

Hoje só estudei um pouco de nginx, e bem acabou ...

Durante esses 100 dias fiz meu site, estudei elixir, erlang tentei fazer um jogo(que inclusive não deu certo), estudei react, fiz um pequeno aplicativo de celular foram dias bastante intensos e cansativos, muitas dessas coisas pensei que não ia rolar e outras não rolaram mesmo as vezes é bom largar o osso e mudar o foco 😅, se permitir sair da zona de conforto e tropeçar foi realmente o maior aprendizado que vou levar disso.

Comecei esse desafio porque não achava que sabia o bastante para tocar os projetos que tinha vontade de fazer (e que são muitos 😂) e não estava contente com o meu rendimento no trabalho, acho que podia melhorar e isso realmente aconteceu felizmente.🙌

Esse desafio foi melhor do que pensava e mais difícil também, mas sinceramente? vou até sentir saudades, obrigado a todo mundo que deu apoio a todos que me incentivaram com certeza vocês me deram um ânimo em cada passo dessa caminhada👋.

Meu repo onde deixei todos meus códigos e projetos que fiz durante esses 100 dias está aberto nesse link https://github.com/XandeCoding/100-days-of-code
Python: Assignment Operators
Tags: python, beginners, learning
Published: 2020-07-25 19:26:26

---
title: Python: Assignment Operators
published: true
description: Assignment operators in Python
tags: python, beginners, learning
//cover_image: https://direct_url_to_image.jpg
---

In a programming language, assignment operators are typically used to assign values to variables.

In Python, the basic assignment operator works like this:

|Operator|Description|Example|
|---|---|---|
|`=`|Assign a value to a variable|`x = 2`|


Python also has seven arithmetic assignment operators, which are a sort of shorthand for performing two operations in sequence -- 1) arithmetic between a variable operand on the left of the expression and some other value on the right, and then 2) the assigning of the result back to the original variable:

|Operator|Description|Example|Equivalent To|
|---|---|---|---|
|`+=`|Add a value to a variable|`x += 2`|`x = x + 2`|
|`-=`|Subtract a value from a variable|`x -= 2`|`x = x - 2`|
|`*=`|Multiply a variable by a value|`x *= 2`|`x = x * 2`|
|`**=`|Raise a variable to the power of a value (exponentiation)|`x **= 2`|`x = x ** 2`|
|`/=`|Divide a variable by a value|`x /= 2`|`x = x / 2`|
|`//=`|Divide a variable by a value, and round down (floor division)|`x //= 2`|`x = x // 2`|
|`%=`|The remainder of dividing a variable by a value (modulo)|`x %= 2`|`x = x % 2`|

Similarly, Python also has five bitwise assignment operators. These perform bitwise operations (the subject of a future article... ) between the left operand variable and a value on the right, assigning the result back to the variable:

|Operator|Description|Example|Equivalent To|
|---|---|---|---|
|`&=`|Bitwise AND|`x &= 2`|`x = x & 2`|
|<code>&#124;=</code>|Bitwise OR|<code>x &#124;= 2</code>|<code>x = x &#124; 2</code>|
|`^=`|Bitwise XOR|`x ^= 2`|`x = x ^ 2`|
|`>>=`|Bitwise right shift|`x >>= 2`|`x = x >> 2`|
|`<<=`|Bitwise left shift|`x <<= 2`|`x = x << 2`|

---

Was this helpful? Did I save you some time?

## {% cta https://www.adamlombard.com/support-me %} 🫖 Buy Me A Tea! ☕️ {% endcta %}

---
[Tutorial Linux] Terminal: Instalando programas no Linux
Tags: linux, apt, install, braziliandevs
Published: 2020-07-25 18:56:06

Olá! o/

Vamos iniciar nossa série sobre comandos do Linux para que juntas possamos perder o receio do tão temido terminal.

Essa instrução serve para as distros Linux baseadas no Debian (Ubuntu, Mint e derivados).

## Usando o apt

```
$ sudo apt install <nome_do_programa>
```

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

- **sudo** serve para pedir permissões de administrador temporariamente.

- **apt** do inglês, *Advanced Package Tool*, em português, Ferramenta de Empacotamento Avançada; é a ferramenta que nos ajuda na instalação, atualização e desinstalação de programas, entre outras funções.

- **install** é o comando de instalar, indicando ao apt o que fazer.

- digite o nome do programa sem os sinais **< e >**.

Provavelmente, após esse comando o sistema irá pedir a **senha** que você configurou no início da instalação do sistema operacional.

![exemplo de instalação](https://dev-to-uploads.s3.amazonaws.com/i/mofjbin083b4jam7f37v.gif)

Para fazer a instalação sem a pergunta de confirmação, basta acrescentar o **-y** ao final do comando.

```
$ sudo apt install <nome_do_programa> -y
```

![exemplo de instalação -y](https://dev-to-uploads.s3.amazonaws.com/i/1ptg6jspax6o5icwtnu8.gif)

## Instalando um pacote .deb

Caso você tenha um pacote **.deb** que deseja instalar, vá até a pasta onde está o arquivo 

![ls cd](https://dev-to-uploads.s3.amazonaws.com/i/pyng8beay172zed4joal.gif)

e digite no terminal

```
$ sudo apt install ./<nome_do_pacote>.deb
```

Desse modo todas as dependências serão verificadas e instaladas.

- O **ponto-barra** juntos serve para indicar o caminho do executável;

- o **ponto** significa diretório atual;

- a **barra** serve para separar o diretório do nome do arquivo.

## Instalando um pacote .deb usando o dpkg

Vá até a pasta onde está o arquivo **.deb** e digite no terminal:

```
$ sudo dpkg -i <nome_do_pacote>.deb
```

- **dpkg** do inglês, *Debian Package*, é uma ferramenta que gerencia pacotes .deb.

- **i** é o comando de instalar, indicando ao dpkg o que fazer.

Exemplo:

![dpkg](https://dev-to-uploads.s3.amazonaws.com/i/4c1gonmbgjlw1edoiolz.gif)

Dessa maneira porém, as dependências não são instaladas, para corrigir isso, digite:

```
$ sudo apt install -f
```

- **-f** do inglês, *fix*, para corrigir o que falta.

Caso haja algo que precise de reparo, será mostrado na tela, pedindo a confirmação do usuário.
Cool Chrome Extensions For Designers 
Tags: design, html, css, webdev
Published: 2020-07-25 18:55:32

Extension making our work easier and I wanted to recommend some cool extensions that helps a lot for designers.

[Fonts Ninja](https://chrome.google.com/webstore/detail/fonts-ninja/eljapbgkmlngdpckoiiibecpemleclhh)

##### Have you ever seen a cool font and don't know its name? Fonts Ninja find all fonts on a website.

#### Cool alternative doing same thing
[CSS Peeper](https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk) 

[Site Pallete](https://chrome.google.com/webstore/detail/site-palette/pekhihjiehdafocefoimckjpbkegknoh?hl=en-GB)

##### This extension generates all color pallates and able to change it any color.

[CSS Viewer](https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce?hl=en)

##### It's just a simple css property viewer. I usually use this when I try to scale margins,paddings and other CSS code. You already scale this using Figma etc. and this might be useful on browser side.


[Toggle Pesticide](https://chrome.google.com/webstore/detail/pesticide-for-chrome/bblbgcheenepgnnajgfpiicnbbdmmooh)

##### This extension makes line around each element and makes each element visible. Especially, I use this extension responsive design.

[Colorzilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en)

##### My favorite extension. You can see every color on a website. Just click something on it and it copied your clipboard.


[Responsive Viewer](https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb?hl=en)

##### Instead of open toggle device on chrome use Responsive Viewer to see every kind of device and design your website responsive way.


Bonus: [Mercury Read](https://chrome.google.com/webstore/detail/mercury-reader/oknpjjbmpnndlpmnhmekjpocelpnlfdi)

##### It creates a blank to read everything clearly
Utility tools to boost your command line experience
Tags: utility, cli, zsh, bash
Published: 2020-07-25 18:45:15

If you are a programmer, you may spend a good amount of time on the command line. Here is a small set of utility tools which have helped me.

#### `bat` command

You may have come across the [cat](https://man7.org/linux/man-pages/man1/cat.1.html) command, which helps you in viewing the contents of a file.

![cat command preview](https://awp.thrijith.com/wp-content/uploads/2020/07/cat_command_demo.gif)<figcaption><code>cat</code> command preview</figcaption>

It certainly is very helpful, but what if we could make it better? Enter the `bat` command, or as described on its repository **A cat(1) clone with wings.**

The command really does add wings to the `cat` command, `bat` supports syntax highlighting for a large number of programming and markup languages, integration with git and automatic paging if the content doesn’t fit on your screen, here is a preview of the command.

![bat command preview](https://awp.thrijith.com/wp-content/uploads/2020/07/bat_command_demo.gif)<figcaption><code>bat</code> command preview</figcaption>

Installation instructions can be found [here](https://dev.to/scottw/bat-57pg-temp-slug-2229370), take it on a test drive! If you find this useful, you can alias the `bat` command for `cat` and make it your default way of viewing file contents.

Overriding the cat command using alias :  
  
`alias cat='bat'`

#### `fzf` fuzzy finder

If you are lazy and looking to run commands you ran earlier but don’t exactly recall the exact usage, you must have done a `Ctrl+R` to search through history, `fzf` enhances this and gives you a preview, here is the command in action.

![](https://awp.thrijith.com/wp-content/uploads/2020/07/fzf.gif)<figcaption><code>fzf</code> preview</figcaption>

Installation instructions can be found [here](https://github.com/junegunn/fzf), you can also use `fzf` to preview files in a directory by combining it with `bat`, for a quick preview.

Alias for `fzf` + `bat` preview :  
  
`alias preview="fzf --preview 'bat {}'"`

![command combination alias preview](https://awp.thrijith.com/wp-content/uploads/2020/07/preview.gif)<figcaption><code>fzf</code> + <code>bat</code> alias preview</figcaption>

That’s about it for now, I hope this helps!
CSS Media Queries you don't know
Tags: css, frontend, mediaqueries, css3
Published: 2020-07-25 18:38:28

CSS media queries were introduced as part of CSS3. They allow for you to change your CSS based upon the device or device's characteristics. You are likely already using these to adjust the look of your page based on the width of your screen. However, they have multiple other functionalities that are often overlooked.

A typical media query looks like:

```
@media screen and (min-width: 1200px){
  ...
}
```

However, you can do much more than checking if the css will be displayed on a screen of 1200px or more.

You can also see if the page is being printed

```
@media print{
  // removing background-color and images for print friendlyness
}
```

You can also check orientation of the viewport

```
@media (orientation: landscape){
  // Great for changing how your site looks on a phone
}
```

You can check if the device allows for you to hover

```
@media hover{
  // change hover features to a click feature.
}
```

You can even check whether the device has an input mechanism that can hover

```
@media (any-hover: hover){
  // Display hover CSS only to devices that have a device that can hover connected to it.
}

@media (any-hover: none){
  // The same as above but none
}
```

Another great media query for phone support would be any-pointer that lets you
tell if a device has a pointer and how fine the pointer is.

```
@media (any-pointer: fine){
  // Make the button small
}

@media (any-pointer: coarse){
  // Make the button larger, likely on a cell phone
}
```

As the web matures we've found that the web should cater to all users. Media queries are a great way to do that. Here are some additional ways you can improve your user experience.

Users who are sensitive to motion can disable it on their computer.  

```
@media(prefers-reduced-motion: reduce){
  // remove distracting animations
}
```

And finally, you can even see if JavaScript is enabled

```
@media(scripting: none){
  // display content that would otherwise be hidden behind a JavaScript show/hide.
}
```

As you can see, there are lots of great media queries you probably didn't know existed. Hopefully you'll be able to use these on your next project.