GithubHelp home page GithubHelp logo

ofton's Introduction

Yuske Fukuyama | 福山裕介 | fkymy.hatenablog.com

##### Hi, I'm Yuske.
I’m a programmer from Tokyo. I solve problems using C, Rust, and Typescript.

##### こんにちは！
幼少期からインドやフィリピンに15年滞在。国際バカロレアを修了後日本に帰国し、慶應義塾大学に入学。株式会社ツクルバ、株式会社メルカリなどでのエンジニアインターンや創業期スタートアップの技術担当、42Tokyoを経てKinkaku株式会社を創業。CとRustが好きです。

ofton's People

Contributors

chillx2land avatar fkymy avatar

Stargazers

avatar

Watchers

avatar

ofton's Issues

ga

Background

required

Todo

  • todo

References

  • list

set USERHEAT tag

Background

required

Todo

  • todo

References

参考URL?
参考になるかわかりませんが
→http://www.pojihiguma.com/entry/UserHeat-Review
設置するページのHTMLファイルの「」のタグ直前に取得した解析タグを設置します。

タグ↓

<script type="text/javascript"> (function(add, cla){window['UserHeatTag']=cla;window[cla]=window[cla]||function(){(window[cla].q=window[cla].q||[]).push(arguments)},window[cla].l=1*new Date();var ul=document.createElement('script');var tag = document.getElementsByTagName('script')[0];ul.async=1;ul.src=add;tag.parentNode.insertBefore(ul,tag);})('//uh.nakanohito.jp/uhj2/uh.js', '_uhtracker');_uhtracker({id:'uhdsA9tsSy'}); </script>
  • list

初期設定

yshkdの作業を初められるようにする．

  • test
  • db connection
  • gems
  • .github issue

Database 参考

https://www.codementor.io/devops/tutorial/getting-started-postgresql-server-mac-osx
https://www.digitalocean.com/community/tutorials/how-to-setup-ruby-on-rails-with-postgres
http://qiita.com/yh2020/items/8be3087004d100fe752b
https://www.postgresql.org/docs/8.1/static/sql-createrole.html

PostgreSQLとActiveRecord
http://edgeguides.rubyonrails.org/active_record_postgresql.html

やったこと

  • install postgresql
  • set PG_DATA env var to path '/usr/local/var/postgres'
  • access psql postgres
CREATE ROLE oftonrails WITH CREATEDB LOGIN PASSWORD ‘’;
  • check .env
  • check database.yml
bin/rails runner 'puts ActiveRecord::Base.configurations’
psql postgres -U oftonrails
GRANT ALL PRIVILEGES ON DATABASE ofton_rails_development TO oftonrails;
GRANT ALL PRIVILEGES ON DATABASE ofton_rails_test TO oftonrails;
OR
ALTER ROLE rails_user WITH Superuser;

postgres=> \connect super_awesome_application
postgres=> \dt
postgres=> \q

privatize gh

Background

required

Todo

  • todo

References

  • list

welcome page

Background

required

Todo

  • todo

References

  • list

[infra] ssh

Todo

  • todo

References

http://docs.aws.amazon.com/elasticbeanstalk/latest/dg/eb3-ssh.html

eb ssh
psql --host=aaaa763vh09vcj.c4qjmubauk0a.ap-northeast-1.rds.amazonaws.com --port=5432 --username=***** --password --dbname=****

to use psequel
https://medium.com/@michalisantoniou6/connect-to-an-aws-rds-using-an-ssh-tunnel-22f3bd597924
http://qiita.com/katsukii/items/c3df0653ac07d41fe03f

ssh -N -L 5432:aaaa763vh09vcj.c4qjmubauk0a.ap-northeast-1.rds.amazonaws.com:5432 [email protected] -i /path/to/identity

memo

\dt \du \list 
select * from tablename
delete from tablename

footer links

Background

required

Todo

  • todo

References

  • list

テスト

Background

required

Todo

  • todo

References

  • list

[js] react implementation

現状

app server: puma
web server: nginx (ebで用意)
db: RDS

assets: sprockets => precompiled and manifested in public

react implementation

admin以外のフロントエンドをreact+reduxアプリにしたい

RailsとReactの関係性パターン
http://qiita.com/jwako/items/195e2e85793716fb1d53

react_on_rails

<%= react_component('compName', props: { name: 'eyy' }) %> 的な

Rails5API + ActiveAdmin + CRA under client/

dev: foreman + webpack-dev-server
prod: static deployment to S3 + API server on EC2
root url to static js app, and react-router to take care of rest
*cra is designed for static deployment, and its the easiest way

疑問：

  • can cra scale (customization, build/bundle output target, SSR, BFF)
  • active admin
references

create-react-app, npm run build, static files in build directory, contents hosted by aws S3 or CloudFront deployed statically (what CRA is designed for, thus no SSR)
https://medium.com/@omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af

https://www.fullstackreact.com/articles/how-to-get-create-react-app-to-work-with-your-rails-api/

https://www.fullstackreact.com/articles/deploying-a-react-app-to-s3/

https://www.fullstackreact.com/articles/deploying-a-react-app-with-a-server/

charlie's way

疑問:

  • really have to use active admin??
  • procfile only for heroku?
  • what does cra do on start

dev: procfile.dev + foreman to start dev-server :3000 and api :3001
prod: app root has another package.json, postinstall => heroku + procfile web: rails s

references

https://blog.mismithportfolio.com/web/20170106rails-react#c

https://medium.com/superhighfives/a-top-shelf-web-stack-rails-5-api-activeadmin-create-react-app-de5481b7ec0b
foreman start rake task Procfile

current Rails5 + /frontend (rails側にwebpack built js を埋め込み) + helper + manifest(wp plugin)

Railsで構える．Railsにsrcディレクトリを作り、webpackでpublic/distにコンパイル．rootでjavascript_include_tag asset_path(‘bundle.js’) する
基本的にクライアントレンダーされ、そこからアクションに応じてrails apiにリクエストするイメージ．SSRする場合はrails側施策、hypernovaなどを利用することに？

rails標準はsprocketだけど、ES6使えないしnpmなし．その対応として：
browerify-rails（jsヘビーだとビルド遅い）
ビルドしたものをsprocketsのパスに突っ込む（Hot Module Replacement使えない）
sprocketsは使わず、ビルドは全部node npmの世界でやる．それをpublicに出力しrailsから読み込む
Sprocketsをwebpackで代替するためには：

digest付きのassetsを生成する
productionではJSを圧縮して生成する
webpackでCSSも生成する
Railsからwebpackの作成したJS / CSSを読み込む

digestのためにwebpack-manifest-pluginを使う
webpack が生成したファイルへのパスを返すヘルパーを定義しviewで使う

webpackでビルドしたものは：
直接ビルドしたものを public/ に置く
ビルドしたものを app/assets/javascripts に置いて、Sprocketsを通す
browserify-rails を使ってSprocketsで依存を解決する
の選択肢の中、1を採用し、manifest.jsonでrails側のjsファイル読み込みに対応．

references

JSやCSSのrails側読み込み
sprocket無しのwebpack, assets_path helper
ビルドは全てnodeの世界．
http://engineer.crowdworks.jp/entry/2016/05/24/174511

記事
easiest, 上参考
root /src
root webpack.config
bundle.js with manifest to public/dist/
http://qiita.com/UFO/items/3c4e6a323e86c0c64e04

ソースコード
https://github.com/ufotsuboi/rails-webpack-sample

similar to above
assets precompileのときにwebpackコンパイルをフックするtask書いてもよし
renderingとapi両方railsの場合react-rails gemいれとけというアドバイスが分からない
http://qiita.com/chimame/items/136d3a35b79e553a7f97

big example
https://github.com/shakacode/react-webpack-rails-tutorial#basic-demo-setup

hypernova
http://qiita.com/chimame/items/136d3a35b79e553a7f97

http://qiita.com/necojackarc/items/afa674ab10aafa9784eb
http://qiita.com/izumin5210/items/c642ae75f916d301456a

http://qiita.com/joker1007/items/9068e223744b3ac8c6dd#digest%E3%81%AE%E6%89%B1%E3%81%84
digestとかについて

https://github.com/kogoto/rails5-react-redux-todo

Rails5 api-server + client-server + docker

client/

  • app.jsx = entrypoint
  • build into dist
  • express server through docker compose in ec2 to serve file
  • fetch api url through proxy

https://github.com/georgediaz88/githopper/tree/master/frontend

https://github.com/Angelmmiguel/docker-rails5-react-redux-boilerplate

rails開発環境セットアップ
http://docs.aws.amazon.com/ja_jp/elasticbeanstalk/latest/dg/create_deploy_Ruby_rails.html

SEOについて
http://searchengineland.com/tested-googlebot-crawls-javascript-heres-learned-220157

リソース設計

  • data model 定義
  • controllerとかmodelのすとらくちゃ・規約考える
  • seed

TODO:
pseudo user > user
self join comments
implement schema information to models

References

examples
https://github.com/discourse/discourse
https://github.com/diaspora/diaspora

enterprise structuring
https://dan.chak.org/enterprise-rails/chapter-1-the-big-picture/

controllers
http://postd.cc/how-dhh-organizes-his-rails-controllers/

structuring
https://karolgalanciak.com/blog/2013/10/06/structuring-rails-applications/
https://www.slideshare.net/masuda220/ss-59756718

others
http://trailblazer.to/
http://post.simplie.jp/posts/32

best practices
http://blog.carbonfive.com/2016/11/16/rails-database-best-practices/

service and form
http://a-suenami.hatenablog.com/entry/2013/12/06/092146

layer architecture
http://qiita.com/yuku_t/items/961194a5443b618a4cac

postgres
http://postgres-data-types.pvh.ca/#1
https://vimeo.com/61044807

user icon

Background

required

Todo

  • todo

References

  • list

logo

Background

required

Todo

  • todo

References

  • list

View初期設定

Todo

  • foundation
  • layout
  • component
  • media obj
  • table-list for comments
  • validations
  • static pages

References

BEMIT MindBEMing bembembem hungarian naming
https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/
https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
Media Object
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
OOCSS
https://github.com/stubbornella/oocss/wiki

mailer

Background

required

Todo

  • todo

References

  • list

post deletion

Background

論理削除

Todo

  • todo

References

  • list

[bug] post body layout

backgorund

styleには変化なし、d2484ffコミットまで．

原因の投稿:
"
離婚して、家族を無くしました。
もう１０年以上になります。
休日に家族連れやカップルや友達同士で遊びに行ってる人達を見ると、私には何もないって思います。自分がこんな風な40代を向かえてる事を受け入れられず、なんでこんな風になってしまったんだろう私の人生って、悲しい気持ちでいっぱいです。
子供の頃からずっと孤独との闘いです。こんな人生が早く終わりますように。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
"
下にスペース連打されてる．
テストで連打してみてもエスケープされるから再現しようとしてもできない．
多分全角かな
投稿周りのエスケープ・改行・フォーム見直そ

Todo

  • anon
  • 改行
  • 全角

References

https://ja.stackoverflow.com/questions/12894/%E5%85%A8%E8%A7%92%E8%8B%B1%E6%95%B0%E5%AD%97%E5%8F%8A%E3%81%B3%E7%A9%BA%E7%99%BD%E6%96%87%E5%AD%97%E3%82%92%E5%8D%8A%E8%A7%92%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95
http://qiita.com/y-ken/items/d08eb7f66c8fb2fa7d21
http://qiita.com/y-ken/items/17181f322d0413edd3dc#comment-0e29423fc28020a63133

simple_format adds p already, 改行
http://d.hatena.ne.jp/nain/20100811/p16

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.