カテゴリー
開発関連

svgによるclippathについて

紹介サイトに載っているパスを自作のd=””にかえると動かないよってとき

1px*1pxの世界でつくりなおしてねって

html – How to use SVG clipPathUnits=”objectBoundingBox” – Stack Overflow  
https://stackoverflow.com/questions/44090167/how-to-use-svg-clippathunits-objectboundingbox/53448033   CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント | コリス  
https://coliss.com/articles/build-websites/operation/css/how-to-use-css-clip-path.html  

いやぁ、べんりすわぁ〜〜

(2ヶ月前に実装で使ったばかりなのにすっかり忘れていたこのプロパティ。画像だけじゃなくdivもクリップできるよ。忘却は敵!)  
カテゴリー
開発関連

Local by FlywheelからLocalへ。使い方だいぶ変わってた

Local って名前がでっかいワード過ぎてうまくひっかからないけど

v3→v5になってる
新しいversionではvirtualBox使わなくなってる
今までのverから現行verへは自動移行はしないので自分でDL
たまーに使うときの更新でいらいらしなくてよいらしい  
wp themeのpathを別のところから読み込むアドオンはもう使えなくなっているらしい  
 
というわけでメッも。 
 
 [WordPress] ”Local by Flywheel”でシンボリックリンクを作成する方法
https://b.0218.jp/20170111005914.html
 
Local | How to use volumes with Local
https://localwp.com/help-docs/advanced/how-to-use-volumes-with-local/
 
シンボリックリンクひさびさ作ったけどこんなかんたんだったんやな〜
 
 

移植後、最初エラーばっかでどうしよ、と思ったけど

何回か再起動したらLocal側でもFIXするようのボタン出してくれたりしたので治りました。

asset類やらもgitの中身見に行くようにしたから逆に利便性上がったかも。

ありがとうLocal

カテゴリー
開発関連

固定IPくださいを回避できなかったのでサービス契約

投稿めんどいな〜

とかいっててもしょうがないのでまとめておく

いつも案件のサーバ担当者が近しい間柄のときはIP変わったよ〜って言って対応してもらったり、大きめクライアント様の場合は先方がすでにお持ちのVPNのアクセス権をちょうだいしたり、クライアントが外国母体の企業だとCISCOやなんや共通のアプリ使ってなんやかんやアクセスしたりとか。
 
いままで自分での契約は回避していたのだが、初案件のクライアント様で自社サーバのため・・・となり、いったん作業の間固定IPが使えるVPNサービス使うこととなった。

つこてるの忘れそうなのとTAB閉じるためにURLメモ

企業が固定IPアドレスを利用するメリットを具体例を交えて解説|トラムシステム
https://www.tramsystem.jp/voice/voice-3576/ VPNでリモートワークも安心!固定IPアドレスによる安全なネットワーク接続 | Notes de Design
https://notes-de-design.com/tips/vpn-static-ip-address-remote-work/#IP-2
カテゴリー
js React 開発関連

ReactSlick天地中央

css – Vertical align content slickslider – Stack Overflow
https://stackoverflow.com/questions/37455322/vertical-align-content-slickslider
.slick-track {
  display: flex;
}
.slick-track .slick-slide {
  display: flex;
  height: auto;
  align-items: center;
  justify-content: center;
}
カテゴリー
css 開発関連

わくわくは大事よ

僕がネイティブなCSS変数にわくわくする理由
https://terkel.github.io/why-im-excited-about-native-css-variables/   あ、ついでに追記 How do I apply opacity to a CSS color variable? – Stack Overflow
https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable
カテゴリー
開発関連

書いていた内容が消えた・・・Adobe XDで作業していてゾッとした瞬間

書いていた内容が消えた・・・俺の30分・・・悲しいので参考URLだけ貼っておく 基本はイラレ・フォトショでやろうね、svgとかも全部いじれると思うな、って言うはなしとかパーツの読み込み方がデザインびゅーの再現度とかもかかわるよってです。さよなら・・・(こころやられたらしい XDでも、テキストのアウトライン化を どうぞよろしく(^^)/ – マークアップ かめ壺
https://web.kame-kobo.com/blog/2398
カテゴリー
開発関連

Failed prop type: The prop `children` is marked as required in `Layout`, but its value is `undefined`って言われたんですけど

Reactです。Gatsbyです。
Layoutはページ内要素(コンテンツ)全体を包むラッパーで、グローバルスタイルが入っており、全ページで読み込むコンポーネントです。えーと、日本語あってるかな・・・ TOPページ表示のときに怒られてたんやけど、いや、すでにページに内包する要素、組んで入れてますがな。
カテゴリー
css 開発関連

2021年1月 最近の仕事でのSVG圧縮とかコンポーネント化とか

大量の一括圧縮

SVGO

中身をトランジションとかアニメーションとかさせない、imgとか背景として置く場合。
ターミナルでディレクトリに移動して一括でたったくよ。
BigSurにしたらSVGO-GUIが動かなくなたので本家SVGOに変更
svgを軽量化してくれるsvgoの使い方 – Qiita
https://qiita.com/macotok/items/ea1db2687d0979fab9d6 svg/svgo: Node.js tool for optimizing SVG files
https://github.com/svg/svgo
カテゴリー
css 開発関連

CSS Grid苦手意識を克服する

プロパティとかお作法とか なんどやっても覚えないから急いでたらflex使いがち問題を今更どうしようかなって  

ジェネレーターでええやん

Interactive CSS Grid Generator | Layoutit Grid
https://grid.layoutit.com/ 直感的にグリッド(子要素)作って、class名つけて、sassにコピペするだけ。

gridジェネレーターサイトつかえば何も覚えなくてよかった

  べんりね・・・世の中・・・ありがとう開発者
カテゴリー
開発関連

サイト作るついでにgooglemapの地点情報も変えたいっていわれた

いつもほぼMAP埋め込みしかしないからめっも

googleビジネス?から一括でできるらしい
https://www.google.com/intl/ja_jp/business/ 
依頼されたのが親戚だったので、サクッと調べてサクッとトライしてみたらサクッとできた。 
ビジネス拠点の住所とかよくマップで見る情報を登録するだけ。 
 
5分くらいで登録、画像を追加、ロゴも追加(どこでつかわれるんや)  
べんり〜