DEV Community: Rin

Removes the specified Collaborators from all repositories of the target Gituhub account.

Rin — Tue, 23 Jul 2019 07:19:47 +0000

Removes the specified Collaborators from all repositories of the target Gituhub account.

Please check this Github for details.

Overall picture


 /**
     * GLOBAL
     * gitアカウントのメールアドレス
     * ログインパスワード
     * githubのアカウント名
     * 削除したいユーザー
     * を入力してください。
     */
    $Email = '';
    $PASS = '';
    $USER = '';
    $DELTE_USER = '';


    /**
     * 下記のAPIを実行し、api.jsonを作成してください。別途アクセストークンが必要です。
     * curl  "https://api.github.com/user/repos?access_token={token}&per_page=100&page=1&sort=created" > api.json
     */

    $url = './api.json';
    $json = file_get_contents($url);
    $json = mb_convert_encoding($json, 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
    $arr = json_decode($json,true);
    echo $count = count($arr);


    for ($i = 0; $i < $count; ++$i) {
        $repoName = $arr[$i]['name'];

        $cmd = "curl -X DELETE -u $Email:$PASS 'https://api.github.com/repos/$USER/$repoName/collaborators/$DELTE_USER'";
        echo $repoName;
        echo exec($cmd);
    }

First, please get APIKey from setting of Github management screen.
In that case, please check the repo of Select scopes.

After obtaining the access token, execute the following command to create api.json.

curl  "https://api.github.com/user/repos?access_token={token}&per_page=100&page=1&sort=created" > api.json

Specify a variable of remove.php.

$Email = 'hoge@gmail.com';
$PASS = 'password';
$USER = 'MyName';
$DELTE_USER = 'user_id';

Run remove.php

php remove.php

Supplement

A maximum of 100 repositories can be acquired.
If you want to get more than 100 repositories, create additional json file separately as below,
Run PHP again specifying the file.

curl  "https://api.github.com/user/repos?access_token={token}&per_page=100&page=2&sort=created" > api_2.json

remove.php

$url = './api_2.json';

Do you Know how to { content: attr({data-attribute}); } ?

Rin — Sun, 25 Nov 2018 06:59:45 +0000

We can pass the deta　　to el::before,after{ content:'';}

    <div class="button">
        <span data-attribute="HOME">HOME</span>
    </div>

    .button{
        span::before {
            content: attr(data-attribute);
            }
        }
    }

It's bery easy!!!

I created a simple animation using this mechanism.

Thanks！！！！

See the Pen content data-attribute by Rin_T_T (@Rin_T_T) on CodePen.

Set up your own endpoint using the WP REST API.

Rin — Sat, 24 Nov 2018 08:41:13 +0000

Set up your own endpoint using the WP REST API.

Reference material

WP REST API Official Document
https://www.sofplant.com/blog/tech/wp-rest-api-tips/

From WordPress 4.7 onwards, we set up our own endpoint using [WP REST API] which became available as standard, and acquire and display data in cross domain.

Wordpress site hogehoge.jp

Assume that the site that receives and displays data is fugafuga.jp.

hogehoge.jp

Please describe it in functions.php.

<?php
//wordpressに用意されているアクションフックで独自APIを作成します。

add_action('rest_api_init', function() {
    register_rest_route( 'wp/v2', '/org_api', array(
        'methods' => 'GET',
        'callback' => 'org_api',
    ));
});
function org_api( ) {

    $contents = array();//return用の配列を準備
    $myQuery = new WP_Query();//取得したいデータを設定
    $param = array(
        'post_type' => 'blog',
        'posts_per_page' => 3,
        'order' => 'DESC'
    );
    $myQuery->query($param);
     if($myQuery->have_posts()):
         while ( $myQuery->have_posts() ) : $myQuery->the_post();
                $ID = get_the_ID();
                $title = get_the_title();
                array_push($contents, array(
                    "title" => $title,
                    "id" => $ID
                ));
         endwhile;
     endif;
     return $contents;// WP REST APIを利用するときはjsonで返ってくる様に設定されているので、json_encodeは必要ありません。
 }

Please visit http://hogehoge.jp/wp-json/wp/v2/org_api and check that json will come back.

If an error occurs at this point, there may be syntax errors on the php side.

Receive data.
When using in cross domain, specify jsonp as dataType.
fugafuga.jp

<p id="view_area"></p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
    $(function(){
            $.ajax({
            type: 'GET',
            url: 'http://hogehoge.jp/wp-json/wp/v2/org_api?_jsonp=callback',//コールバック関数名を指定する。 
            dataType: 'jsonp',
            jsonpCallback: 'callback',//コールバック関数名を指定する。
            success: function (jsonp) {
                    $(jsonp).each(function(index,el){
                    let id = (jsonp[index]['id']);
                    let title = (jsonp[index]['title']);
                        $('#view_area').append(
                        '<p>' + id + '</p>'
                         + '<p>' + title  + '</p>'
                        );
                });
            }
        });
    });
</script>

I think whether data display is possible with the above.
Processing etc. when data could not be acquired are omitted.
By using your own endpoint, data that is difficult to acquire a bit with the standard API, (custom posting etc.)
I think that it is possible to obtain flexible data by passing a favorite parameter to the request url and using it on the php side.

data : {
    'param' : 'key_word'
}


<?php
//wordpressに用意されているアクションフックで独自APIを取得します。

add_action('rest_api_init', function() {
    register_rest_route( 'wp/v2', '/org_api', array(
        'methods' => 'GET',
        'callback' => 'org_api',
    ));
});
function org_api( ) {
$param = $_GET['param'];
}

Thanks!

Roll over text CSS Animation

Rin — Sat, 24 Nov 2018 08:31:05 +0000

Hello!

I created [Roll over text ] with CSS

https://codepen.io/Rin_T_T/details/GwMWQV

I liked CSS Animation !

please tell me interesting css POST !

Thanks Good bye !!

FLOCSS CSS_design

Rin — Sun, 04 Nov 2018 06:30:45 +0000

Hellow! I have been an engineer for one year.

Overview
Since I made LP with FLOCSS, I describe my own way of making and its impressions.
(There is a sample site)

About FLOCSS
Please see the repository below for details.
https://github.com/hiloki/flocss/blob/master/README_eng.md

Advocate
https://twitter.com/hiloki

For more detailed usage etc. please refer to this article.(JP_only)
https://qiita.com/sueshin/items/dcbaf3d8a0adb6b087db

My current development environment

base
    _reset.scss
    _setting.scss
component
    I will add a component system scss file here.
fonts
    Font type file
helper
    mixin etc.
inc
    Import the part for each directory.
    _component.scss
    _layout.scss
    _page.scss
layout
    Layout system scss file is added here.
page
    Scss file in page units
style.scss
    Import whole file
vendor
    Dedicated directory such as external API

New layout created for FLOCSS

base
    No Change
fonts
    No Change
helper
    No Change
inc
    No Change
object
    layout　 l-Prefix scss file
    component　c-Prefix scss file
    project p-Prefix scss file
    utility u-Prefix scss file
page
style.scss
vendor

Introduction

It was often a problem that HTML and CSS easily collapsed.
Although it can not completely prevent the collapse, attempts to prevent even a little by bringing in design rules are CSS design rules such as BEM, SMACSS, and FLOCSS introduced this time.
I myself have a short engineering experience, but I am already aware of the importance of design rules.

I think that you can understand if you can see "current my development environment"
When increasing the basic CSS parts, add it to the [component] directory.
There is no prefix, etc., the lead engineer will describe freely.
In the current workplace, there are at most two engineers at all times, so there is no particular problem with this design method, so rather than deciding too detailed design rules, anyone can easily participate in the construction I am doing it.

Then why, when I say that I introduced FLOCSS, if you continue to increase the number of files in the above component, the file will be approximately 70 to 100 files in the component directory.
If it is this number, it is not difficult to follow the file yet. However, if you become a larger site in the future, there is concern that files will continue to increase without order,
Also, when overwriting between components occurred, it was necessary to overwrite the component file in the component file, making tracking of the class name difficult.

When you look at the advice readme, FLOCSS recognizes the availability by the development site to some extent while having basic rules.
In my case always
layout
project
component
The rule order is the order of description.

Basic pattern

<div class="l-layout">
    <div class="p-project">
        <span class="c-component"></span>
    </div>
</div>


c-component When overwriting


<div class="l-layout">
    <div class="p-project">
        <span class="p-project_component c-component"></span>
    </div>
</div>

When attaching a modifier to c-component

<div class="l-layout">
    <div class="p-project">
        <span class="c-component -is-red"></span>
    </div>
</div>

merit and demerit

merit
Layout
Project
Component
Since it protects the hierarchy of components, components such as components are not complicated.
By vigorously making it a part of the project, it became easier for the resultant fit.
Easy to find files
With light tied it makes it easier to write CSS.

Demerit
When developing with multiple people, some explanation is necessary for those who participate in development later
Because there are rules, it collapses if there is no common recognition.
Ultimately the separation of Component and Project ends up becoming individual's discretion.
(I feel that any design philosophy can not be avoided.)

Sample site

Up to this point it was an explanation of a simple self development environment, but when it was introduced for the first time,
This became project? Component ?, and it got dreaded quite a bit.
Now the introduction results are several, and although it can be made into rules to some extent in myself, I think that there are a lot of confusion at the beginning at first.
So I will publish the test site that I assumed LP to this URL.

caution !!!
Because it is diverted from actually published site, the element which originally existed is removed, unnecessary property is applied.
I think that if you can reference the granularity of the class name and the granularity of the project and the component rather than the design itself.
I think that it will be added even if even a little to FLOCSS trying.

http://rin-develop.jeez.jp/flocss/

FLOCSS base_static github
https://github.com/TakuyaTaniguchi/static_develop