teleren/devto huggingface dataset:
【WordPress】検索結果から除外したいページを指定する方法
Tags: wordpress
Published: 2020-03-19 04:42:15

```
function search_pre_get_posts( $query ) {
if ( $query->is_search && !is_admin() ){
$query->set( 'post__not_in', array(★★,★★) );
}
return $query;
}
add_action( 'pre_get_posts', 'search_pre_get_posts' );
```
【WordPress】検索窓のデザイン（searchform.php）のデザインテンプレ（改訂版）
Tags: wordpress
Published: 2020-03-19 04:32:28

## php

```
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label>
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'サイト内検索', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
</label>
</form>
```

## style
```
.search-field{
background:#e8f3ff;
text-align:center;
border:none;
box-shadow:2px 2px 2px #e0e0e0;
height:40px;
padding:0 0 0 10px;

}

.search-form{
margin:10px 0;
}

/*****サイドバー使うなら***/
.formside{
width:165px;
margin-top: 20px;
}
```
【WordPress】サイト内検索結果ページのテンプレ
Published: 2020-03-19 04:28:13

## 検索窓の挿入
```
<?php get_search_form(); ?>
```		
## php
```
<?php get_search_form(); ?>
<div class="search-result">
			
		
<?php
    global $wp_query;
    $total_results = $wp_query->found_posts;
    $search_query = get_search_query();
?>
 
<h1><?php echo $search_query; ?>の検索結果<span>（<?php echo $total_results; ?>件）</span></h1>
 
<?php
if( $total_results >0 ):
if(have_posts()):
while(have_posts()): the_post();
?>

<a href="<?php the_permalink(); ?>">
<div class="search-result-link">
	
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?> 
	</div></a>
					
<?php endwhile; endif; else: ?>
	
 
<?php echo $search_query; ?> に一致するページは見つかりませんでした。
 
<?php endif; ?>
	<nav class="pagination-area">
    <?php
    the_posts_pagination( array (
      'prev_text' => 'PREV',
      'next_text' => 'NEXT',
      'mid_size'  => 2
    ) );
    ?>
    </nav>				
			
			</div>
<?php get_search_form(); ?>
```

## style
```
<style>
	.search-result{
		margin:36px 16px;
		
	}
.search-result p{
  margin:12px 0 18px 0; 

}

.search-result h1{
margin-bottom:16px;
}

.search-result a{

text-decoration:none;
color:#6b6b6b;

}

.search-result-link{
  border:solid 2px #ff9b64;
  border-radius:4px;
  margin:12px 0 ;
  padding:16px;
  box-shadow:2px 2px 2px #d0d0d0 ;
}	
	.nav-links {
  font-size:20px;
  text-align:center;
}
	
	</style>	
```
【WordPress】ページネーションの挿入
Tags: wordpress
Published: 2020-03-19 04:18:30

```
<nav class="pagination-area">
    <?php
    the_posts_pagination( array (
      'prev_text' => 'PREV',
      'next_text' => 'NEXT',
      'mid_size'  => 2
    ) );
    ?>
    </nav>
```
【WordPress】function.phpに入れておくといいもの
Tags: wordpress
Published: 2020-03-19 04:16:57

```
function archive_navi_template($template){
	$template = '
	<nav class="navigation %1$s" role="navigation">
		<div class="nav-links">%3$s</div>
	</nav>';
	return $template;
}
add_action( 'navigation_markup_template', 'archive_navi_template' );

function new_excerpt_more($more) {
return '・・・【続きを読む】';
}
add_filter('excerpt_more', 'new_excerpt_more');

```
Ruby Enumerable
Published: 2020-03-19 03:38:16

The Ruby Enumerable module is an amazing tool. It provides many ways (methods) to go over every element in an array and do something to the elements or grab certain elements from the array. There are many methods, but I am going to go over a few that I use often.



##select method
Array#select (# denotes a method) will go through every element in the array and pick out the elements that satisfies the condition that is inside the block, which starts and ends with a curly brace ({}) plus anything inside the curly braces. These elements are then put into a new array and the new array is returned. The elements that do not satisfy the condition are not included in the new array.

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

The word in between the | | (“pipe” character) represents one element. You can call it whatever you like, but I usually like to call it based on what is in the array. In the example, we had an array of numbers, so I used the word “number”. I like to keep the word singular to remind myself that it represents one element. If we had an array of names, I would use |name|.

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

There are two ways you can write the block. One using curly braces, one using do…end. If the block is going to be just one line, use curly braces. If the block is going to be multiple lines, use do…end. In the example, I used do…end for a block that usually can be done in a one line, which works, but the code looks better and more concise if you use curly braces when you can.



##map / collect method
Array#map and Array#collect have the same function. They will go through every element in the array and do “something” to every element. That “something” / action will be written inside the block. For this method, you will have an action inside rather than a condition like we did for the select method. These newly modified elements are then put into a new array and the new array is returned. 

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

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



##find method
Array#find will go through every element in the array until it *finds* the first element that satisfies the condition. That element is returned and  the looping / iterating will end.

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

If there are no elements that satisfy the condition, nil will be returned.
構造化データ：articleテンプレ
Tags: wordpress
Published: 2020-03-19 02:55:22

```
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "<?=home_url().$_SERVER["REQUEST_URI"]; ?>"
},
"headline": "<?php echo meta_set('title'); ?>",
"description": "<?php echo meta_set('description'); ?>",
"image": "★★アイキャッチ★★",  
"author": {
"@type": "Organization",
"name": "★★サイト名★★"
},  
"publisher": {
"@type": "Organization",
"name": "★★サイト名★★",
"logo": {
"@type": "ImageObject",
"url": "★★アイコン★★",
"width": 60,
"height": 60
}
},
"datePublished": "<?php echo get_the_modified_date(); ?>",
"dateModified": "<?php echo get_the_modified_date(); ?>"
}
</script>
```
Checking If An Undirected Graph Is Bipartite
Tags: computerscience, algorithms, datastructures, java
Published: 2020-03-19 02:29:35

*2021/01/05 - The previous C# code sample implemented the algorithm incorrectly. A corrected Java implementation has been added in its place.*

If you are unfamiliar with graphs, check out some of my earlier posts on them.

## Resources:

1. [Video explanation](https://www.youtube.com/watch?v=za_BGCGJzSs)
1. [Brief video overview (clip in larger video)](https://youtu.be/GhjwOiJ4SqU?t=28)
1. [Explanation](https://en.wikipedia.org/wiki/Bipartite_graph#Testing_bipartiteness)

Takeaways:
* A bipartite graph (bigraph) is a graph where the vertices can be divided into two disjoint, independent, sets `u` and `v`. Every edge will connect a vertex from one set to the other (without self referencing edges - I.E edges going from a vertex in `u` to another vertex in `u`).
* One way to visualize a bipartite graph, is to colour all the vertices in a set the same colour. Set `u` could be red vertices, whereas `v` could be black. This would mean an edge would always consist of a red and black pair of vertices.
* This type of two-colouring is impossible in non-bipartite graphs. Think of a graph with three vertices arranged in a triangle. We cannot represent this graph as two independent sets, and we cannot two-colour it in such a way that will allow each edge to have different coloured endpoints.
* One way in which we can check if a graph is bipartite, is to run a depth-first search (DFS) over the vertices. Applying two colouring to the graph.
   * Start at a random vertex `v` and colour it colour1 (red, for example).
   * Colour all adjacent vertices `u` the opposite colour of `v`. For each adjacent `u`, also recursively call our DFS routine.
   * If a graph is bipartite, we can complete this two-colouring without a contradiction.
   * If the graph is not bipartite, then at some point a vertex will get both colours - and this contradiction means we cannot achieve a two-colouring of the graph.
* Time complexity is `O(v + e)` for an adjacency list. Space complexity is `O(v)`. For an adjacency matrix, the time & space complexity would be `O(v^2)`.

Undirected graph that can be two-coloured:
![Bipartite](https://dev-to-uploads.s3.amazonaws.com/i/m5kgo8y9kkjcg8zcv1cq.jpeg)

Undirected graph that cannot be two-coloured:
![Not Bipartite](https://dev-to-uploads.s3.amazonaws.com/i/b24uq3w61dabt8p7rejl.jpeg)

Below are implementations for checking if undirected graphs are bipartite. There is solutions for both undirected adjacency list & adjacency matrix representations of graphs:

{% gist https://gist.github.com/jbolton209/9e6406b58469f8277dd87c4d1538bae9 %}

As always, if you found any errors in this post please let me know!
My First Post
Published: 2020-07-09 18:13:05

---
title: My First Post
published: true
date: 2020-03-19 02:15:39 UTC
tags: 
canonical_url: https://blog.kentonvizdos.com
---

 ![My First Post](https://blog.kentonvizdos.com/content/images/2020/03/wide.png)

Hello all! As you may have noticed, my portfolio site has been completely redesigned. If you have not seen it yet, I encourage you to check it out [here](https://kentonvizdos.com). Also, a preview of the site is below:

![My First Post](https://blog.kentonvizdos.com/content/images/2020/03/kentonvizdos.com_-Laptop-with-HiDPI-screen-.png)<figcaption>a sneak peak at my portfolio website</figcaption>

Now, you may be wondering, "What's this blog site for?" With that, I say, I plan to start blogging! I've always wanted to get into blogging, so after finally creating a theme I'm happy with, I've decided to start. Better late than never.

As for the design of this site, expect it to change- a lot. It is a brand new design that I made and I've never blogged before, so I'm guessing I'll find new things to add. If you would like to see the code for either this site or my main portfolio site, check it out on my GitHub (@kvizdos).

[https://github.com/kvizdos/Portfolio](https://github.com/kvizdos/Portfolio)

## What will be on this blog?

I'm hoping to blog my experiences while learning and sharing cool tips and tricks I learn. Also, I plan to blog the creation of my quarter-long school project, Yoga Your Way (version 2). This project is a huge project that has many people working on it, however I am the lead developer for the main app and there has already been so much valuable information that I've learned, so I'm excited to spread my knowledge in a form other than tweets (and if you aren't following me on Twitter, I'm @kvizdos).

## What will the schedule be like?

I'm hoping to create at least one detailed and longer blog post a week that, as of now, will most likely include progress updates for Yoga Your Way. Along with that, I want to write a few smaller TIL-type blog posts.
How to make a post editor in React
Tags: react
Published: 2020-03-19 01:26:16

Hello. I'm building a simple react web app like hashnode. But I have no idea how to make a post editor. As we already use at hashnode, the editor can highlight any code regarding relevant syntax.
> 
import React from "react"

```js
import React from "react"
``` 
Could you suggest some libraries or articles?
Introducing Rex State 🦖
Tags: react, reactnative, discuss, showdev
Published: 2020-03-19 00:55:27

*The simplest way to manage your React States! Check out [the demo app](https://codesandbox.io/s/state-management-with-rex-state-4ivcd)*

I have been using Redux and Mobx for managing states in my react projects. Ever since React Hooks were introduced I had been playing around with the Context API experimenting different ways to manage states.

I finally came up with **Rex State**, a tool that I have been using in my personal projects for creating re-usable hooks as well as state management.

The idea behind Rex State is making your states more declarative and providing an easy to use API to connect with the React Components. A classic example ﹣

```jsx
import React from "react";
import useRex from "rex-state";

const useInput = () => {
  const [state, setState] = useRex({ value: "" });

  return {
    get value() {
      return state.value;
    },
    updateValue(value) {
      setState({ value });
    }
  };
};

const InputField = () => {
  const { value, updateValue } = useInput();

  return (
    <input
      type="text"
      value={value}
      placeholder="Add Text here..."
      onChange={event => updateValue(event.target.value)}
    />
  );
};

export default InputField;
```

Rex State can also be used as a state management tool. A 400 bytes replacement to redux or mobx ✨ 

Follow this [tutorial](https://github.com/DaniAkash/rex-state#tutorial) to see how to manage states with Rex State.

Feedbacks & PRs welcome! 😁

[Github](https://github.com/DaniAkash/rex-state)
React Promise get returned data inside of JSX code from .then()?
Published: 2020-03-19 00:09:31

Hi! I simply have a Comment component and I can get the data that I am looking for using a Promise inside of .then() but if I want to display the data in an JSX element down at the render/return things, I do not know how to do.

I tried putting the return statement inside of the .then() but I guess that is a very incorrect approach. I just simply want to display the data of the comment in a div element so that the user can see that.

So instead of: text={this.props.text} it shold be possible to do: text={this.comment} or something

https://pastebin.com/nS0XhLsY

**[SOLVED]:** 

Make sure to use async/await. When calling the function apparently the console.log that I used for debugging is called before even setting a value on a variable. So now I actually wait until the value has been set and then write it to the console.

Solution is simple: 

1. Declare a varaiable (maybe in this.state) outerValue
2. Use a method with async/await
3. Use a Promise with the .then((value) => {}) call
4. Set outerValue = value inside of .then((value) => {}) call

See example here
https://pastebin.com/wVsz7NKc
How to manage multiple Node.js versions on macOS X
Tags: node, webdev
Published: 2020-03-19 20:39:16

---
title: How to manage multiple Node.js versions on macOS X
published: true
date: 2020/03/19
tags: 
- node
- webdev
canonical_url: https://notiz.dev/blog/how-to-manage-multiple-node-versions-on-mac
---

Here is a quick tip on how to install multiple [Node.js](https://nodejs.org/en/) versions (10, 12, 13 etc.) on macOS X and how to switch between them for your applications.

## Installing Node via Homebrew

Install multiple Node versions using [Homebrew](https://brew.sh/). To install Homebrew run:

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
```

Now install the Node versions you need using `brew`:

```bash
brew install node@<version>

# latest version
brew install node

# LTS 12
brew install node@12

# 10
brew install node@10
```

To check the default node version and installation path:

```bash
node -v # v13.11.0
which node # /usr/local/bin/node => /usr/local/opt/node@<version>/bin/node
```

## Switch Node via alias

Add an alias to your `.zshrc` or `.bash_profile` for each installed Node version. Node is installed at `/usr/local/opt/node@<version>/bin`

```bash
alias node13='export PATH="/usr/local/opt/node@13/bin:$PATH"'
alias node12='export PATH="/usr/local/opt/node@12/bin:$PATH"'
alias node10='export PATH="/usr/local/opt/node@10/bin:$PATH"'
```

Now, to switch between the node versions, enter an alias `node10` in your terminal. Execute `node -v` to verify that you are now using the correct node version.

> Note: Alias **only** changes the Node version in the used terminal instance
Adianti Framework
Tags: php
Published: 2020-03-18 23:58:09

No inicio de 2017 durante algumas pesquisas de Frameworks PHP me deparei com o [Adianti Framework](https://www.adianti.com.br/framework). Fiquei surpreso principalmente pelo fato de ser brasileiro. 

### O que é de fato Adianti Framework?

É uma arquitetura open-source para criação de sistemas em PHP, focado no desenvolvimento de aplicações de negócio. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rwoxfdvmoy9dp7nonya4.png)
Para acelerar a criação de sistemas, ele oferece uma série de componentes para a construção de formulários e datagrids, e recursos para relatórios, gráficos, etiquetas, calendários, e outros. 

Possui templates prontos e funcionais com controle de permissões, logs, interação entre usuários, etc. Dessa forma, nós programadores podemos focar na lógica e na regra de negócios, não em detalhes da implementação.

### Características

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/od14w7m1mav8l9domgl5.PNG)
Sua estrutura impressiona, o Código-fonte é baseado em mais de 30 Design Patterns clássicos, ele é totalmente orientada a objetos, sem gambiarras, testado e homologado com as versões mais recentes do PHP, já esta preparado com Métodos de proteção contra SQL injection, session fixation, e outros, e o melhor ainda é que ele suporta nativamente vários tipos de bancos de dados, sem mudar a programação.

Link do projeto: https://www.adianti.com.br/framework
Working From Home Panel Discussion
Tags: webdev, watercooler, mentalhealth
Published: 2020-03-18 23:53:07

Last Friday on the [Zeal Twitch stream](https://twitch.tv/codingzeal). I had the privilege to have an awesome collection of people to talk about Remote Working. Enjoy the video and I hope you find something useful from it.

{% youtube WRGBS0g6MwA %}

## Panel Members
[Caroline Kerns](https://twitter.com/CaptCalli)
[Nina Zakharenko](https://twitter.com/nnja)
[Jason Harrison](https://twitter.com/DoctorArgus)
{% user mbcrump %}

## Topics
- Challenges faced in the short, mid-term, and long-term
- What strategies did they use to stay productive
- Suggestions for anyone being forced to be working remotely
- What should your company be doing to set everyone up for success when you have to work remote
Publicando Appbundle gerado com Flutter na Play Store
Published: 2020-03-18 23:44:41

Antes de começar devo falar que o intuito deste post não é mostrar a fundo o conteúdo, por exemplo sobre como gerar as chaves de assinatura, item o qual é necessário para publicar seu app na loja. Vamos ao tutorial:

Adicione a seguinte linha no arquivo build.gradle dentro da pasta Android>App

```
ndk.abiFilters 'armeabi-v7a','arm64-v8a','x86','x86_64'
```

O Google exige que seu app possua a versão de 32 e 64 bits, então vamos primeiro gerar uma versão de 32 da seguinte forma no terminal dentro da pasta do projeto:

```
flutter build appbundle --release
```

Ao finalizar adicione no Play Console esta versão e agora vamos gerar a versão 64, porém fique atento pois agora teremos que mudar a versão no arquivo pubspec.yaml. Vai estar no topo do arquivo da seguinte forma caso você ainda não publicado nenhuma outra versão na loja:
* version: 1.0.0+1

Mude para:
* version: 2.0.0+2

Agora repita o comando no terminal, porém passaremos algumas informações a mais no terminal:
```
flutter build appbundle --release --target-platform=android-arm64
```
Pronto agora é só adicionar no Play Console junto ao outro.
Deliberate Note-Taking
Tags: writing, reading, learninpublic, notetaking
Published: 2020-03-18 23:36:14

I recently read this book called ["How to Take Smart Notes"](https://www.amazon.com/gp/product/1542866502/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1542866502&linkCode=as2&tag=jbranchaud-20&linkId=ab088fb715a4ac23cab470d6118f9f57). As the title suggests, the book is largely about taking notes. I came to find that it is about more than that. The note-taking is just a means to an end. The note-taking technique that the author discusses is a way to make you a more effective reader and writer.

I knew I was prone to reading the words in a book without necessarily understanding what I was reading. I thought I had already figured this out though. As I would read, I would write down page numbers and quotes that stuck out to me. Certainly that meant I was no longer passively reading. I had convinced myself that I was reading effectively. I wasn't.

What I learned in this book is that to really be reading effectively, you have to be taking deliberate notes. Underlining, scribbling in the margins, and copying down quotes do not provide the same benefits as taking deliberate notes.

So, what does it mean to take deliberate notes?

What's behind deliberate note-taking is that you are synthesizing what you are reading into your own context.

Your context is made up of your interests, the big and small questions you are thinking about, and the other things that you are reading. Rather than taking down a quote, you should identify what interested you about the quote and write in your own words what it means. Make note of the questions it raises for you and how it ties to the questions you already have in mind. Does it seem relevant to other things that you've read? Find those references and notes and link them together. Find how they confirm and conflict with one another and synthesize that into more notes.

The [deliberate practice](https://jamesclear.com/deliberate-practice-strategy) of note-taking is to consider your unique context as you read and put what you've learned in your own words.

As you read with a pen in hand and an intention to take deliberate notes, you start to read differently. You become more attentive to what you're reading. You are actively trying to draw connections with what you are reading and other ideas. You become a more ruthless reader, skipping over what doesn't seem relevant or pique your interest. In short, you become a more effective reader.

Equipped with all of these notes -- notes that go beyond the surface, integrate your own thinking, and make connections -- you will also become a more effective reader. Though that is a topic for another post. Or just read the [book](https://www.amazon.com/gp/product/1542866502/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1542866502&linkCode=as2&tag=jbranchaud-20&linkId=ab088fb715a4ac23cab470d6118f9f57).

Consider engaging in deliberate note-taking for a while; see how it transforms the way you read and write.