æ¥èšã§ãã
ãŸãšã
- 1æ Clock
- 2æ Quick Note
- 4æ ginpei/stop-sns: Chrome, Edge, Firefox extension that helps you to spend less time on SNS.
- 6æ ginpei/omae-wo-kesu-houhou-for-github
- 6æ ãã©ãŠã¶ãŒæ¡åŒµïŒã¢ããªã³ããšã¯ã¹ãã³ã·ã§ã³ïŒã®äœãæ¹
- 6æ DevToolsã§z-indexäžèЧã§ãããã€äœã£ããã | Ginpen.com
- 7æ Pretty Letters
- 8æ Potoshop
- 8æ ginpei/rails-resize-image-uploader-demo: Rails demo app that resizes image files smaller before uploading.
- 8æ Ruby on RailsãDockerã§å§ãããµã³ãã«ãšãã¥ãŒããªã¢ã«ãæžãããã | Ginpen.com
- 11æ CSS transformã®matrix()ãäžç¬ã§ å® å š ç è§£ ã§ãããã€äœã£ããã | Ginpen.com
- 12æ é åãšãããããAdvent Calendar2018ãããŸããã²ãšãã§ã | Ginpen.com
ãŒã¡ãŒã¡äœã£ããªãŒã
GitHub
èªåã®GitHubãããã£ãŒã«ããŒãžã§2018幎ãéããŠãããããã
(() => { const year = 2018; const days = [...document.querySelectorAll('rect.day')] .filter(e=>e.getAttribute('data-date').startsWith(year)); const counts = days.map(e=>e.getAttribute('data-count')|0); const sum = counts.reduce((s,c)=>s+c); console.log(`${year}幎${days.length}æ¥äžæŽ»åããã®ã${counts.filter(v=>v!=0).length}æ¥ãåèš${sum}åãå¹³å${(sum/days.length).toFixed(2)}忝æ¥ã`); })();
2018幎365æ¥äžæŽ»åããã®ã196æ¥ãåèš1466åãå¹³å4.02忝æ¥ã
äœã£ããã®
Clock
æèšãPWAåããŠãã©ãŠã¶ãšã¯å¥æ ã§åãããã«ã§ãããã§ããªãŒãŸã ãªãŒããããããªããã ãªãŒãç¹ã«ãã£ãã·ã¥å¶åŸ¡ãhttps://t.co/dWLNNAwa5N
— 髿¢šã®ã³ã〠(@ginpei_jp) February 12, 2018
1æãã¢ããã°æèš + ãã¢ããŒãã¿ã€ããŒã
æé ã«äœ¿ããã¢ããã°æèšã欲ãããªãšæã£ãŠãPCã®èã«ã¹ãããç«ãŠãŠãã£ã¡ã«æ ãçšã«ã
ã©ãããªããã©ãŠã¶ãŒãããªããŠãåãããã«ãããããªãšæã£ãŠãåŸè¿°ã®Quick Noteã§PWAã詊ããŠããã®åŸå°å ¥ãããçµæçã«Nuxt.jsããããªã«ãã£ãŠãããã®ã§ããŸãæ°ã«ããå¿ èŠã¯ãªãã£ããã©ã
ãããNuxt.js䜿ã£ããã©ãããŸãäŸ¿å©æ©èœäœ¿ã£ãŠãªãã£ããHistory APIã䜿ãSPAãGitHub Pagesã ãšäœ¿ããªããã
Quick Note
æåå ¥åããŠèšæ¶ã§ããã ãã®PWAåããïŒhttps://t.co/GKpknaCOs4 pic.twitter.com/iD3Z4SXtjN
— 髿¢šã®ã³ã〠(@ginpei_jp) February 11, 2018
2æããªãã©ã€ã³ã§ãåãç°¡åããŒããå ¥åå 容ã¯LocalStoragã«ä¿åãããã
PWAãäœã£ãŠã¿ããïŒãšæã£ãŠäœã£ããã€ã§ããäŸåããã±ãŒãžãäžåãªããïŒ devDependencies
ã¯ãããŸããESLintãšããïŒ
ãªããªãããã¡ãã£ãšããããŒãã«ã¿ã€ãã«ãä»ããŠä¿åãšãããããã«ããŠãè¯ãã£ããããããªããã§ããŸãããããç®çã§ã¯ãªãããäœã£ãŠã䜿ããªãã ããããããã
Stop SNS
- ginpei/stop-sns: Chrome, Edge, Firefox extension that helps you to spend less time on SNS.
- Stop SNS – Chrome Web Store
- Stop SNS â Get this Extension for Firefox (en-US)
4æãTwitterãšãã®é²èЧãé»å®³ããChromeæ¡åŒµãFirefoxã¢ããªã³ã
ã¡ãã£ãšæããšãããã£ãŠãã©ãŠã¶ãŒæ¡åŒµäœã£ãŠã¿ããããšæã£ãŠãç°¡åã«äœããŠè¯ãããèªåã§äœ¿ã£ãŠãŸããã
æ¬ç·šãšã¯é¢ä¿ãªããã ãã©ãSVGã®å³åœ¢ã«åœ±ãä»ããã£ãŠã®ãåŠãã ãããããããããªã
SVGã§å¹ãåºãhttps://t.co/EEVXg3VlYA pic.twitter.com/NQrKHlrCmr
— 髿¢šã®ã³ã〠(@ginpei_jp) May 7, 2018
ãåãæ¶ãæ¹æ³ for GitHub
- ginpei/omae-wo-kesu-houhou-for-github
- ãåãæ¶ãæ¹æ³ for GitHub – Chrome Web Store
- ãåãæ¶ãæ¹æ³ for GitHub â Get this Extension for Firefox (en-US)
6æãã©ããæããããã¹ã³ããã衚瀺ããChromeæ¡åŒµãFirefoxã¢ããªã³ããžã§ãŒã¯ã¢ããªã
MicrosoftãGitHubãè²·åãšããå ±éãåããŠã
ãŸããã®çªã®æãããããŸã®æã«æ²èŒã
ãã£ãã / Microsoftã«è²·åãããâGitHubâã¯ããå€ããïŒãããåŸãªãæªæ¥ãèŠããŠããããã¿æ¡åŒµ – ããããŸã®æ – çªã®æ https://t.co/NkLLYzegsN
— 髿¢šã®ã³ã〠(@ginpei_jp) June 9, 2018
æè¿â1è©äŸ¡ä»ããããŠãã®ã«æ°ä»ãããäœãæ±ããŠãã£ãŠãã âŠâŠã
DevTools z-index
- DevToolsã§z-indexäžèЧã§ãããã€äœã£ããã | Ginpen.com
- ginpei/devtools-z-index: Stop
z-index: 999999
!! - DevTools z-index – Chrome Web Store
- DevTools z-index â Get this Extension for Firefox (en-US)
ãäœã£ãŠæžãããããªãã ã®ãæ¡åŒµã«ããŸããã / DevToolsã§z-indexäžèЧã§ãããã€äœã£ããã https://t.co/scZAopNK3O pic.twitter.com/HsouwGXyew
— 髿¢šã®ã³ã〠(@ginpei_jp) June 21, 2018
6æã z-index
ãå©çšããŠããèŠçŽ ãšãã®å€ãéçºè
ããŒã«ããäžèЧã§ããChromeæ¡åŒµãFirefoxã¢ããªã³ã
ä»äºäžã®æ¯æãã§æžããã³ãŒãã¹ãããããããã¡ãã£ãšãããŠãã©ãŠã¶ãŒæ¡åŒµãžè»¢çšãããã®ãæ°è»œã«äœã£ããã ãã©ãã䟿å©ã ããšå²ãšãŠã±ãè¯ããå¬ããã£ãããã å®ã¯èªåã§äœ¿ã£ãŠãªãã®ã§ãäœããããªã«äŸ¿å©ãªã®ãããããã£ãŠãªãâŠâŠã
Pretty Letters
áµÊ°áµáµ . ' ! (I'm waiting for your design update as PR.)https://t.co/KySMTIsa56 pic.twitter.com/JlwertLBe6
— Ginpei (@ginpei_en) July 21, 2018
7æã ãUnicodeã§å®çŸ©ãããŠããç¹æ®ãªèŠãç®ã®æåã衚瀺ããã
å€ãã£ãèŠãç®ã®æåã䜿ã£ãŠã人ãããŸã«Twitterã§èŠãããŠãããã調ã¹ãŠãã®ãå§ãŸããããŒéãæåãšãããããããªã
ãã¶ã€ã³ãã²ã©ãã
Potoshop (v0-1)
ç ããªãã®ã§äœã£ããç»åããªãµã€ãºããŠæ ä»ãããã€ãWindowsã§Win+Sã§ç»é¢æ®åœ±ããã®ãTwitterã«è²Œãä»ããã®ã«äŸ¿å©ãhttps://t.co/SAOfZktczc pic.twitter.com/U7TCRfNqzv
— 髿¢šã®ã³ã〠(@ginpei_jp) August 7, 2018
8æãã¯ãªããããŒãããç»åã貌ãä»ãããµã€ãºå€æŽãæ ã®ä»å ãè¡ãã ããPhotoshopã§ã¯ãªãã
ããæ©ç ããã«ããŠã諊ããŠèµ·ããŠãœã¡ãœã¡ããŠããã¡ã«ã§ãããã£ããã®ããããããã®ç·šéãã§ãããã€ã欲ããã£ãã
ãã®åŸãã£ãšããããããããªãšæã£ãŠäžããäœãçŽããŠããŠãåœæã®é¢åœ±ã¯æ®ã£ãŠããªããä»ã§ãã ãã ãããã£ãŠãâŠâŠãäžåºŠçµããããæ¹ãè¯ããã ããªã
ç»åã¢ããããŒãåã«å°ããããŠè»¢ééãæžããRailsã¢ããªã®äŸ
8æãCanvasã䜿ã£ãŠç»åãå°ãããã転ééã²ããŠã¯è»¢éæéãæžããäŸãRailsã®äœã ãäž»ãšãªãã®ã¯ãã¡ããJavaScriptã
ç¥äººããçžè«ãããŠãã¢ããããŒããæ©ããããã³ãŒããæžããã€ãã§ã«ãŸãšãããã®ã
ãã®åŸExifã®orientationæ å ±ïŒå転ãå転ïŒã«å¯Ÿå¿ããŠãªãããšã«æ°ä»ãããä»ã®ãšããã§å¯Ÿå¿ãããã©ãããã€ã«åæ ããŠãªããã
RailsãDockerã§åããäŸ
- Ruby on RailsãDockerã§å§ãããµã³ãã«ãšãã¥ãŒããªã¢ã«ãæžãããã | Ginpen.com
- ginpei/docker-rails-example
8æãDockerã䜿ããéçºç°å¢èªäœã«Rubyãã€ã³ã¹ããŒã«ããªãã§å§ããããæ¹ã
åè¿°ã®äŸãäœã£ããããã«ãã®ã€ãã§ã
æžããŠã¿ãã¯è¯ããã©ã©ããªãã ããã
Understanding transform:matrix()
- CSS transformã®matrix()ãäžç¬ã§ å® å š ç è§£ ã§ãããã€äœã£ããã | Ginpen.com
- Understanding transform:matrix()
- ginpei/understanding-transform-matrix
ãäœã£ããCSSã® `transform: matrix()` ãäžç¬ã§çè§£ã§ããããŒã€ãã¹ããã§ãåãããhttps://t.co/iebDKtrRdV
— 髿¢šã®ã³ã〠(@ginpei_jp) November 13, 2018
11æãCSSã® transform
ã§äœ¿ãã颿° matrix()
ã®åããèŠèŠçã«è©Šãããã®ã
è¡ååŒãåããããã解説ããèšäºãèªãã§æåããã®ããã£ãããèªã¿ãªãããããŒããã matrix()
ã®ãã€ã¯ããããããšã ã£ãã®ãïŒããšãªã£ãŠããããããã ã£ãïŒãåãããŠã¿ãããŒãã¿ãããªæµãããã
Code Chat Cat
æªå®æããªã¢ã«ã¿ã€ã ã«Markdownææžãå ±æãããã¯ãŒã¯ã·ã§ããã§ã®å©çšãæ³å®ã
é»å黿¿ã¿ãããªæãã§ãè¬åž«ãæžããŠçåŸããããèŠãã£ãŠã®ã欲ããã£ããHTMLãšããŠåºåãããçµæãçåŸã®æå ã«ãããããªç¶æ ã«ãªãããã¯ãçãªãã€ãšæ¯ã¹ãå©ç¹ã¯ãèŠåãšãã«äŸããªãç¹ãä»»æã«ïŒ5ååãšãïŒéå»ã®ãã®ãèŠãããç¹ããµã³ãã«ã³ãŒããã³ããã§ããç¹ããªã³ã¯ã掻ããç¹ããããŠçåŸã®åå¿ïŒè³ªåïŒãããåæ ããŠå šå¡ã«å±ããæ®ããç¹ã
ä»ã«ãç»åä»ã®ãã¡ã€ã«æ·»ä»ã æ§ãããªã³ãã¥ãã±ãŒã·ã§ã³ã äœã ãšããã ãšèããŠããããUIã©ãããããšæ©ãã§æãæ¢ãŸã£ãŠããŸã£ããæ¬²ããæ©èœãåºããŠåèšèšããŠåºçŽããã
ååãæ°ã«å ¥ã£ãŠãããªãç¬æŽŸã
ãã£ãããš
JavaScriptå匷ã€ãã§ã«ãã©ãŠã¶ãŒæ¡åŒµïŒã¢ããªã³ïŒãäœã£ãŠã¿ãããäŒ
- JavaScriptå匷ã€ãã§ã«ãã©ãŠã¶ãŒæ¡åŒµïŒã¢ããªã³ïŒãäœã£ãŠã¿ãããäŒ
- ginpei/webextension-pomodoro: Example extension (add-on) of Pomodoro Timer
- ãã©ãŠã¶ãŒæ¡åŒµïŒã¢ããªã³ããšã¯ã¹ãã³ã·ã§ã³ïŒã®äœãæ¹
6æãJavaScriptèªäœã®åçŽè åãã®ã¯ãŒã¯ã·ã§ããã
ããæ¹ããã£ãŠããã®ã§è¿ãã®äººã«ã裟åããããã€ãã¡ãããšåçŽè ã®äººãæ¥ãŠãããŠããã£ãç²æããã£ããã¡ãã»ãŒãžãšãã§éä¿¡ããŠãå¢çããŸããããšããã®ã¯ããã£ã±ãé£ããæŠå¿µãªã®ã ãšå確èªãã©ããã£ããããŸãäŒããããã ãããã
è³æäœæã¯ããã£ãããªã®ã§VuePressã«ææŠã
é åãšãããããAdvent Calendar2018
ãæžããããã¡ãã®æ¥ä»ãå€ãã£ãã®ã§å ¬éãä»å¹Žããããã / é åã®ã³ã³ã¹ãã©ã¯ã¿ãŒãæ¹ããŠèŠãŠã¿ãïŒé åãšãããããAdvent Calendar2018 â 01æ¥ç®ïŒ https://t.co/1v6uqjmxf4
— 髿¢šã®ã³ã〠(@ginpei_jp) December 1, 2018
12æãJavaScriptã®é åãšç¹°ãè¿ãã«ãŸã€ããèšäºã1æ¥ãã24æ¥ãŸã§æ¯æ¥æçš¿ã
æ¯å¹ŽæäŸã®ã²ãšãã¢ããã³ãã«ã¬ã³ããŒãä»å¹Žã¯å§ãŸãåã«å®æåçš¿ã15æ¥åçšçšæã§ããã®ã§ãæ¯æ¥ç· ãåãã«è¿œãããããšã¯ãªãã£ãâŠâŠãšèšãããã£ããã ãã©ãçµå±æ¯æ¥èŠçŽããŠå€§å¹ ã«å çä¿®æ£ããŠããã®ã§ãå¿ããã£ããæ°èŠã«æžããããªã£ãŠããŸã£ããã®ããããå®ã¯ããã€ãèšäºãäœã£ãã
æåã¯æ¯æ¥ã¡ãœãããã²ãšã€ãã€ç޹ä»ããçšåºŠã®ã€ããã ã£ããã ãã©ãæ°ãä»ããã仿§æžãèªã¿æŒã£ãŠããâŠâŠã楜ããã£ããããããã©ã
èªè ã®æ³å®ã¬ãã«ãè¬ãªæãã«ãªã£ãŠããŸã£ããããããã¯æ¥œããã£ããããããã©ïŒ
æ¥å¹Žã¯12æã«å ¥ãåã«å®æåçš¿ã24æ¥åçšæãããã
Lightning Talks
ããããªäººã®è©±ãèããããªãšæã£ãŠãããæ°å¹Žå人çã«LTäŒãäž»å¬ããŠããã
æ°ãåãããšãã«ããæããªãã ãã©ã2018幎ã¯5åéå¬ã§ãããæ1ããããç®æããããåå 人æ°ãå šç¶èªããªããã ããªãŒã3人ã ã£ãã13人ã ã£ããâŠâŠã
ä»äº
æ¹åããŠãã
ãããŸã
å šäœçã«æ°æã¡ãåäžããŠããäžå¹Žã ã£ãããã£ã±ãäœãäœãã®ã¯è¯ããªãã
Vue.jsãšReactã®ã¢ããªãããã€ãäœã£ãŠã¿ãŠãããããããã£ãŠããæ°ããããããšTypeScriptã«ãããããæãåºããŠãããã€ã¯ãªããªãã®game changerããããããšã
æ¬åœã¯ãæ¯æã²ãšã€äœãäœã£ãŠåºãããç®æšã ã£ããã ãã©ããããŸãéæã§ããªãã£ããçµæçã«ãããããã®æ°ã¯ããããããšã·ãšãããã
2019幎
äœãããã®ãã®ã¯å®æããããããä»ã«ãäœããããã®ã¯ãŸã ãŸã ããã®ã§ãã©ãã©ãäœã£ãŠããæåã
ããšãã£ãšã¯ãŒã¯ã·ã§ããããããã§ãããã