Tailwind CSS https://tailwindcss.com 作ったもの Simple Collage Maker ブラウザ上でローカルの画像ファイルを読み込み、連結して一枚の画像にするツール。 webpack + Vue.js + Tailwind CSS。CSSのファイルサイズ約8KB。(普通にMinifyしただけだと600KBくらいになります。) ソースコードのファイル構成はこんな感じです。 インストール webpackはインストール済みとして、CSSローダー類とTailwind CSSをインストールします。

<div class="p-4 text-left m-4 shadow"> <div class="text-shadow mb-2">この文字は、</div> <div class="text-shadow-md mb-2">だんだん、、</div> <div class="text-shadow-lg mb-2">浮いてきます。。</div> <div class="text-shadow-xl mb-2">お。。。</div> <div class="text-shadow-2xl mb-2">おおお！？</div> </div> .text-shadowとかがカスタムのクラスです。 Tailwindcssで作る こんな感じで、５段階つくるとします。 .text-shadow .text-shadow-md .text-shadow-lg .text-shadow-xl .text

IntelliCode を使ってみて戦慄した Buildで発表されていたIntelliCodeを試してみたら思ったよりスゴかったので書いてみた。 インストール MarketPlace から .vsix をダウンロードしてインストールする方法と、VisualStudio の「拡張機能と更新プログラム」からインストールする方法の二通りがあります。 特にこだわりが無い限り「拡張機能と更新プログラム」から入れるで良いと思います。 拡張機能と更新プログラムで Visual Studio Marketplace を選択し、"IntelliCode" で検索すると出てきます。VisualStudioが最新版でない場合は出てこないので、VisualStudioのバージョンが古い場合は先にアップデートを掛けましょう。 使ってみる 現在はC#のみ対応です。 よく使うであろうメソッドが★付きで上位に出てきます。

こんにちは、Qiita初投稿です。 色々あって昨年末に4年間勤めていた外資系のゲーム会社でのプロデューサー業を辞めてエンジニアに戻りました。 前職ではエンジニアではなく、翻訳やアカウントマネージメント系の仕事などをやっていました。 エンジニアブログを書く前に、今回は元エンジニアが4年間経ってエンジニアに戻って世界が一変していた、浦島太郎のような話をしたいと思います。 経歴: 2011年: 大手企業に新卒でエンジニア就職 秋入社というのもありまさかの新卒唯一の日本人、まわりは中国人とインド人ばっかり。入社一日目でエンジニア職人気なさすぎオワタと思う。まわりのエンジニアが毎月行われれていた深夜作業に駆り出されていくのを怯える毎日（結局一度もその作業をすることはなかったが） 2013年: ベンチャー企業へ転職 前職ではテスト業務しか触れず、いつの間にかポジションもQAエンジニアになってしまったの

開発環境を渡されたのですが、いろいろ動いなくて 、そのときに試行錯誤したときのメモです。 Eclipse + Mavenおじさんが、IntelliJ idea + Gradle 大好きおじさんに変わっていったときのメモ [Gradle］Gradleって事前にインストールする必要ないの? 必要ない Windowsの場合は、gradew.bat を用いてインターネットから取得するため不要 つまり、職場の場合は、プロキシを記載しないと、ライブラリが取得されずビルドされない 大人数で開発すると、どうしてもMavenのインストールや環境変数でつまる人が出て、 問い合わせが殺到するが、そういったもの一切がなくなる。ほんとGradle素晴らしい [Gradle］プロキシの設定はどこにすればよい? gradlewとgradlew.batファイルを修正する 環境変数(set/export)ではなく、JVM_

node でさっくりと TypeScript を実行したいときに、babel なり webpack なりで transpile して実行するのは不便です。しかも型が考慮されなくなってしまいますね。 そういうときは ts-node を使うことで、バベってファイルを生成してから食わせずとも、そのまま実行できるので手軽です。型も考慮されます。 使い方 さっくりと依存を追加します:

この記事はAkatsuki Advent Calendar 2016の7日目の記事です。 こんにちは、 @shimpeiws です。 アカツキのライブエクスペリエンス事業部で、Webエンジニアをしています。 今日は最近開発しているプロダクト、Wowful(現在β公開中)のアーキテクチャについて書きます。 ※ 今回の記事は以前発表した 2つのスライドの増補改訂版のポジションです。 サーバサイドレンダリング、してますか? BFFにかける期待 Wowfulのサービス面の特徴と技術的な要求 Wowfulはサービスとして以下のような特徴を持っており、 これらの要求を解決できる技術・アーキテクチャの選定を行う必要がありました。 まずはWeb主導で展開する BtoCのサービス 利用ユーザはスマートフォンが多数になる予想 検索からの流入を主な導線として想定 トラフィックが多いページのユーザインタラクション

Linux系OSやcygwinに、自分でソフトウェアのソースコードを入手してきてをビルド・イ ンストールするときに、/usrや/usr/localへインストールしないようにしている。 apt-get/apt-cache 等のパッケージ管理用のが使っている領域に自分で手を入れ て問題が起きたとき、原因の切り分けが面倒になる 自分ひとり、ユーザアカウントひとつの端末にソフトを導入するために、root所有 の領域を使う不自然さ などの理由から。 ./configure && make && make install でインストールする、といった手順がよく紹 介されているが、ほとんどの場合は make install でroot権限を要求され、 /usr や /usr/local 配下にコンパイルされたソフトやファイルがコピーされることになる が、この行き先をホームディレクトリ配下にする。 前提

前 v6.6.0 | 次 v6.8.0 ESLint v6.7.0 has been released:https://t.co/GB8fHji3dq — ESLint (@geteslint) November 22, 2019 ESLint 6.7.0 がリリースされました。 小さな機能追加とバグ修正が行われています。 質問やバグ報告等ありましたら、お気軽にこちらまでお寄せください。 🏢 日本語 Issue 管理リポジトリ 👫 日本語サポート チャット 🏢 本家リポジトリ 👫 本家サポート チャット 🚀 本体への機能追加 設定ファイルのignorePatternsプロパティ 🔖 RFC022, #12274 共有設定を含む設定ファイルで、ignorePatternsプロパティが利用できるようになりました。このプロパティは.eslintignoreと同様に ESLint が無

# alias ## SSH alias sshk='ssh-keygen -t rsa' alias vsc='vi ~/.ssh/config' ## Node alias n='node index.js' ### npm alias ni='npm install' alias nu='npm uninstall' alias nr='npm run' ### yarn alias ya='yarn add' alias yr='yarn remove' alias yi='yarn install' ## git alias gs='git status' alias gaa='git add' alias gc-b='git checkout -b' alias gc-m='git commit -m' alias gp='git push' ## zsh alias sz='

2019/11/25 内容を更新 この記事を読み終わったら →　”LaravelDB.com” の使用方法の記事も書きました https://qiita.com/daisu_yamazaki/items/1cb5987cc6d1008def82 『LaravelDB.com』 『Laravelを使う人を幸せにしたいという思いから作った』 【 URL 】 https://laraveldb.com ER図を作成し、Migrationファイルを生成したり、 逆にMigrationファイル → ER図を生成したり出来ます。 新規作成、設計の見直しからの再作成、を目的にした仕様なので「カラム・型」変更のMigrationには対応していません。DB作り直すイメージで使用するとベストですね。 主機能 ER図作成 （対応している”型”はページ下部に表記） ER図作成　→　Migrationファイルを生成

こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフロントエンド開発者になるために効果的な方法の１つは、単純にできるだけ多くの課題に取り組み、解決することです。 フロントエンド開発の達人になるために、今日から解き始めることができる6つの課題を紹介します。 ではさっそく、実装すべき６つの課題はこちら。 1. ク

はじめに この記事は、AI AcademyのPython文法速習編とPython プログラミング入門編の内容をベースに一部修正を加えたものです。 この記事を読み進めることで、Pythonの基本文法の基礎を学ぶことが出来ます。 Pythonを学び終わった方は、無料（一部のコンテンツのみ有料だが基礎コンテンツはほぼ全て無料）でAI・機械学習が学べるAI Academyも活用ください。 オンライン機械学習スクールはこちら なぜPythonなのか？ AI Academyでは人工知能（AI）分野を中心とした学習コンテンツを扱っており、その人工知能分野においてPythonは機械学習・ディープラーニングを容易に扱うことができるからです。 また、The 2018 Top Programming Languagesの記事でも、プログラマーの年収は1位でした。 The 2018 Top Programming

Spring Security は割となんとなくで動作してくれるイメージだけど、カスタマイズしようとするとハマったりするので、アーキテクチャを知れば何とか分かるようになるのではないかという発想から調べてまとめてみた。 以下のようなフォーム認証を行うシナリオに沿って、どのようなクラスがどのような役割を担っているのかを調べる。 未認証の状態で認証が必要なページへアクセスする ログイン画面にリダイレクトされる 情報を入力しログイン処理を実行する ログインが完了し 1でアクセスしていた画面にリダイレクトされる なお、バージョンは 5.2.1.RELEASE で確認している。 ログイン画面へリダイレクトされるまで 認証が必要なページに対してまだ認証されていないユーザがアクセスした場合、ログイン画面へ飛ばされる仕組みについて。 ざっくりとしたフローは以下の通り。なお、今回はアクセスした際のチェック処理

この資料は 11/16(土)開催の勉強会 いまからはじめるReact の資料になります。 React未経験者/初学者向けに チュートリアルを通してReact(およびHooks)について学ぶためのものです。 そのため、サンプルコードには例外処理などが不十分な箇所があります。ご注意ください。 Reactとは？ Reactとは Facebookが中心となってオープンソースで開発されている ユーザーインターフェースを構築するためのJavaScriptライブラリです。 (2019/10/30現在、v16.10.2 が公開されています) React – ユーザインターフェース構築のための JavaScript ライブラリ https://ja.reactjs.org/ コンポーネント(部品)を作成し、これらを組み合わせることでSingle Page Applicationのような複雑なユーザーインター

Oracle Cloudで常時無料サービスが開始されたので使ってみた。 構成は、Django+nginx+uWSGI+Oracle Database+Oracle Linux 以下の3つの環境を作ってみたので、その時の備忘録。 ローカルの開発環境 ローカルでDockerを使った開発環境 コンピュート・インスタンスでの本番環境 とりあえず、Djangoの雛形アプリにアクセスできるまでの簡易なので、 SSL対応などは省いてます。 Oracle Cloudの常時無料サービス(無料ティア)について 新しく常時無料で利用できるようになったサービスたち。 ・Oracle Cloud無償ティア | オラクル | Oracle 日本 利用できるのは、以下のようなもの。 データベース ... 20GBを2つまで コンピュート ... 仮想マシン。1/8 OCPU・1GBを2つまで ストレージ ... 合計1

Dockerにあまり触れる機会が少なく、たまに使うとコマンドとか仕組みをすぐに忘れてしまう。そんな自分へのナレッジ 公式ドキュメント Docker Documentation 上部のメニューで、Guides, Product manuals, Glossary, Reference, Samples に分かれていて、選択すると左側にコンテンツがツリーで表示される。 特によく使うであろうリファレンスはこちら Docker CLI コマンド Dockerfile reference Dockerコンテナを起動・実行する コンテナを生成して起動する Dockerイメージからコンテナを作成して、指定したプロセスを起動する。 Dockerイメージは、ホスト内にあればそれを使い、なければ設定されているReposityからPullする。 docker create -> docker start をまと

Union Types 2.0というRFCが投票中です。 提案者はまたまたのNikita。 2019/10/25開始、2019/11/08終了で、受理には2/3+1の賛成が必要です。 2019/11/04時点で賛成55反対5であり、ほぼ導入確定です。 PHPのunion型って何かというと、TypeScriptのunion型とだいたい同じです。 int|string $aと書いたら$aはint型もしくはstring型ですよ、ということです。 ちなみに別途RFCをGitHubで管理しようという実験が進行中で、このRFCの詳細はGitHub上に存在します。 このRFCはまだNikitaの個人GitHub上にしかないのですが、本決まりになったらPHP公式に移動になると思います。 まあGitHubのほうが管理とか更新とか楽ですからね。 ただGitHubはURLがすぐ404になるのだけはどうにかしてほ

JSフレームワーク「Vue.js」を習得するためにやったことをここにまとめます。2019年現在、最優先で取り組んでいるテーマです。随時更新中！！ ※2020/01/07追記：vuex-persistedstateでローカルストレージにデータを保存 Vue.js基本 三大フレームワーク比較とHello world そもそもJSフレームとは何か？どんなことができるのか？三大フレームワークと言われるReact、Angularなどと比較した結果、Vue.jsを最初にやってみることにした。 ※参考：三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた！ イベント（v-on）、分岐（v-show、v-if）、ループ（v-for） イベント設定の「v-on」、条件分岐の「v-show」と「v-if」、ループの「v-for」でどんなことができるのか実際にやっ

こんにちはあんどう(@t_andou)です。 今回はKubernetesを使って並列処理させた記録です。 まだ「とりあえずそれっぽく動くまで試してみた」という段階で、kubernetesを理解できてはいないので自分用のメモを公開しているという認識でご覧ください。 間違っている部分や、よりスマートなやり方がありましたらご指摘いただけると幸いです。 この記事の概要 機械学習に使う特徴量の作成で1週間かかりそうな処理を10分くらいで終わらせられないかと考え、GKE(=GoogleのKubernetes環境)を使い試行錯誤した記録です。 今回は一部失敗して完了時間が1.5時間になったものの、設定を上手く出来れば15分程度で終わる見込みです。 対象読者 ・Kubernetesの概要は知っているくらいのレベルの人 ・KubernetesのJobを使った並列処理をしたい人 目次 この記事の概要 対象読者