今回もGyazoのテストも兼ねて、ReactのListのkeyについての投稿です。あんまやる人いないと思うのですが、keyにを正常に指定、つまり一意なkeyを指定しないと全体的にレンダリングされてしまうので注意が必要です。ja.reactjs.org上記見ていただくとわかるの…
Gyazoでもちゃんと見れるかどうかのテストも兼ねて、ライトなやつを...サブディレクトリをルートにしたい場合は、CloudFrontの「Origin path 」に該当ディレクトリを指定すればOK gyazo.com やっぱGyazoいいな...
hubarifront.hatenablog.com前回の記事の続きです。 前回はcraco自体のプラグインを使って、グローバルにmixinを定義する方法などをご紹介しましたが、今回はwebpackの設定のオーバーライドについて。cracoは「creat-react-app」の設定をいじれるライブラリ…
FLIP手法というものを使って、表題の要件を実現してみました。 See the Pen flip by nakajima masahiro (@nakajima333ta) on CodePen.参考にさせていただいたのは、下記です。 www.dkrk-blog.net手順を書くと、 1. 並べ替え前の位置を取得 2. 要素をinsertBe…
最近デザインを発注することが増えた気がしてます。で、いざ送られてきた時に「あれ？」的なことがあったので、その事例も踏まえて先に言っておくべきこと・注意したいことをまとめていきます。 デザインの単位は「px」指定で！ webデザイナーの方であれば、…
shopify最近触ってます。表題の件ですが、現在無料テーマの「Supply」をカスタマイズしていて、開発はthemeKitでやってます。で、商品詳細ページでカートに追加するボタンがデフォルトでは下記のように記載されています。 <button type="submit" name="add" id="addToCart-{{ section.id }}" class="{{ btn_class }} btn--add-to-cart"> <span id="addToCartText-{{ section.id }}">{{ 'products.product.add_to_cart</span></button>…
React Nativeに続いて、久々にバニラなReactを触りました。以前はwebpackでチコチコ環境構築していたのですが、最近そういうのだるくなってきたのでcreate-react-appでいいかなと思いまして。「create-react-app」はreactを即動かせるテンプレートプロジェク…
ただの戒めです。サイレントマナーモード切りましょう。最近ReactNativeを触っているのですが、とりあえずアプリなのでプッシュ通知試してみようということで、下記の記事など参考に実装してみたわけです。qiita.comで、デバッガーで見る限りリクエスト自体…
久々に2年前くらいの自分のコードを改修してます。フロントもバックエンドも両方、目も当てられない箇所が多々あったので、自分に対して「クソが...」と呟いてしまうこともありました。ただ、逆に成長したんだなあとも感じました。さて、タイトルの件ですが…
まず、laravel-google-cloud-storageを使う前提です。filesystemにGoogleCloudStorageのプロバイダを追加する形で実装しています。 下記の記事がとてもわかりやすかったです。 qiita.com で、タイトルの件ですが調べても公式に記載がなかったのですがissueか…
今回はAWSの中でもなんかとっつきにくいVPCの話です。私もネットワーク系弱いので、結構しんどいのですがなんだかんだ理解できたようなので備忘録として残します。VPCとかサブネットとかそもそも意味がわからん、という方は下記の記事がとてもよく理解できる…
というわけで今更ながらHeroku使ってみたわけです。いつも静的サイトのテストURLとか発行する時とかはNetlifyをメインで使っていたのですが、今回はBasic認証かけとかないと怖いなーという案件だったんですね。で、Netlifyは有料プランしかBasic認証かけられ…
GSAPの記事は以前にも出していたのですが、それはバージョン3以前の話でした。久々にアニメーション案件があったので、せっかくだからバージョン3を触ってみよう、ということで触った所感と使い方を羅列します。まず、簡単に。 import { gsap } from 'gsap';…
最近めっちゃLaravel使ってます。で、Laravelのコネクションプーリングの話です。コネクションプーリングとは、DBとの接続を永続化させること。フレームワークによっては、これがデフォルトで永続化されているものもあるようですが、Laravelの場合はデフォル…
$query = $this ->from('tbl_reservation as tr') ->join('tbl_course as tc','tr.f_course_id', '=', 'tc.f_course_id') ->join('tbl_slot_course as tsc', function ($join) { $join ->on('tsc.f_reservation_slot_id', '=', 'trs.f_reservation_slot_id')…
久しぶりに最近、ブラウザデバッグをする機会がありました。で、問題となったのは「viewport」の部分。window幅がタブレットの領域(768-1024px)の場合は、viewportのwidthを固定して、PC版を表示させる処理を書いておりました。しかし、Safariの開発者ツール…
Dockerを初めて触ったとき、よくChromeの「アクセスできません」的なエラーページ表示されますよね。もちろん「Docker apache アクセスできません」とかで検索しても出てこず、どこから調査したらいいのかわからない、という方に向けて書いていきます。webサ…
最近AWSよく使っているのですが、データベースとしてDynamoDBを使うことが多いです。全てJavaScriptで完結できるのでありがたい面もあるのですが、若干めんどくさいことも多いです。その中の一つがDynamoDBの中にMapとして保存している場合です。例としては…
Sourcetreeめっちゃ便利で使っているのですが、二段階認証の時のユーザー名の記憶制御によってちょっとハマりました。Basic認証とか二段階認証を求められるレポジトリを相手にするときにユーザー名とパスワードを求められると思います。この時大抵の方は「ユ…
普通接続先は一つだけのことが多いですよね。ただIP制限かけられてたりするとサーバーを経由してssh接続しないといけません。丁寧にやると「sshで踏み台サーバーログイン→踏み台サーバーからssh接続」となるわけですが、ローカルマシンからコマンド一発で踏…
InteliJ IDEAを普段使いしているのですが、たまにタイトルの挙動のようになってしまうことがあります。対処法は下記です。1. 「cmd + ;」で「Project Preferences」を開く2. 「Add Content Root」で開きたいプロジェクトを選択 これで再びプロジェクトツリー…
今回React案件なのですが、その中でreactstrapのModalを使う機会が多くありました。例えばエラーモーダルとかローディングモーダルとかですね。その中でローディングモーダルがなぜか表示される時とされない時があってなんでだろ...って思っていたのですが意…
最近Twitterを開設したのですが、色々勉強になることが多くもっと早めに初めておけばよかったな…と後悔しております...と、そんな訳でTwitterで見かけたある事象に対して考えてみました。 const state = [ { id: 1, deleted: false}, { id: 2, deleted: fals…
現在Reactの案件を進行中です。具体的にはCoreUIというUIフレームワークを使って管理画面を作成しています。このCoreUIはcreate-react-appで作成されているので、ビルドにはreact-scriptsを使っているのですがreact-scripts(create-react-app)でenvファイル…
最近Cognitoでユーザー認証して、各ユーザーグループに応じて叩けるAppSyncのクエリやらミューテーションやら変えたいな、という局面が出てきました。ちょっとCognitoでユーザー認証する流れが初めてだったので色々調べてたんですが、結構最近の記事でもCogi…
GraphQL使い始めてみたのですが、結構つまづいたのでメモ。GraphQLクライアントとして「Apollo」を使ってみたのですが、素直に使うとどうやらappsyncとはあまり相性がよくなさそう。 解決方法 「aws-appsync」を使わず、一からApollo Clientを作成する 詳細 …
今回も小ネタです。 あんま必要とする人いないかもしれないですが、タイトルに際した状況に出くわしたのでメモ。 概要 画像プレビュー機能を実装する際には、「input(type=file)」のイベントをハンドリングして画像情報を引き出してプレビュー用の要素に画像…
今回はちょっとした小ネタです。browserSyncってありますよね。あのローカルサーバーを簡単に立てられるやつです。その中でオプションで「proxy」というものがあるのですがその「proxyってなんだ？」というお話です。proxyと聞いてすぐに思い浮かぶのはプロ…
以前初めてGoogleMapの実装案件があったので、備忘録的にメモ。今回の流れは下記の様な流れで進んでいきます。1. GoogleMapの簡単な表示例 2. ストリートビューの簡単な表示例 3. GoogleMapにマーカーを立てる・マーカーにイベントを設置 4. カスタムパノラ…
変数宣言で見かける、という人はもしかしたら少ないかもしれませんがもっともよく目にするのはパッケージのImport文だと思います。 import {DynamoDB, S3 } from 'aws-sdk'; 的なやつですね。これ、es6の分割代入というものでして普通に変数宣言にも使えます…
