10 |
11 | 🚧 = incomplete
12 |
13 | This guide covers how best to start a new project and implement certain features with Ruby on Rails. It's far from complete, so hit me up if you'd like to contribute! Owing to other commitments, I'm unlikely to maintain it beyond April 2023.
14 |
15 | ## Ruby on Rails
16 | - [Setup](/setup.md)
17 | - [Devise](/rails/devise.md)
18 | - [Models](/rails/models.md) 🚧
19 | - [Migrations](/rails/migrations.md)
20 | - [Rails as a backend API](/rails/react.md)
21 | - [Resources](/rails/resources.md) 🚧
22 | - [Routes](/rails/routes.md)
23 | - [Seed](/rails/seed.md) 🚧
24 | - [Search - with and without AJAX](/rails/search.md) 🚧
25 | - [Simple Form](/rails/simple.md) 🚧
26 | - [Testing](/rails/testing.md) 🚧
27 | - [Websocket](/rails/websocket.md) 🚧
28 | - [AJAX](/rails/ajax.md) 🚧
29 |
35 |
36 | ## Ruby
37 | - [Methods](/ruby/methods.md) 🚧
38 | - [OOP](/ruby/oop.md) 🚧
39 | - [Operators](/ruby/operators.md) 🚧
40 |
41 | ## Other
42 |
43 | #### Figma
44 | - [basics](/other/figma.md)
45 |
46 | #### Terminal
47 | - [terminal commands](/other/terminal.md)
48 |
49 | #### Git
50 | - [git commands](/other/git.md)
51 | - [git concepts](/other/concepts.md)
52 | - [gitconfig](/other/gitconfig.md)
53 |
54 | #### HTML & CSS
55 | - [CSS cheatsheet](/other/css.md)
56 | - [HTML cheatsheet](/other/html.md)
57 |
58 | #### VSCode
59 | - [VSCode shortcuts](/other/vscode.md)
60 |
61 |
76 |
--------------------------------------------------------------------------------
/bugs.md:
--------------------------------------------------------------------------------
1 | #### rbenv global
2 | - if using an M1 chip: https://github.com/rbenv/ruby-build/issues/1691)
3 | - more M1: https://stackoverflow.com/questions/65487249/getting-a-warning-when-installing-homebrew-on-macos-big-sur-m1-chip
4 | - check your path: https://stackoverflow.com/questions/10940736/rbenv-not-changing-ruby-version
5 |
6 | #### cannot read/write
7 | `ls -alrth /Users/myusername/`
8 | `ls -alrth /Users/myusername/.config` check if user has permission, or just root
9 | `sudo chown -R username /path-to-folder`
10 | -R here means recursively.
11 |
--------------------------------------------------------------------------------
/other/concepts.md:
--------------------------------------------------------------------------------
1 | #### Pull Requests
2 | ##### Commit your branch
3 | 1. (my-feature) `git add .`
4 | 2. (my-feature) `git commit -m 'add this feature'`
5 | 3. (my-feature) `git status`
6 |
7 | ##### Check out master and pull the latest version
8 | 4. (my-feature) `git checkout master`
9 | 5. (master) `git pull origin master`
10 |
11 | ##### Check out your branch again and merge
12 | 6. (master) `git checkout my-feature`
13 | 7. (my-feature) `git merge master`
14 | ##### If there's a conflict
15 | 8. open editor and resolve conflicts
16 | 9. `git add .`
17 | 10. `git commit --no-edit` # commit using the default commit message
18 |
19 |
20 |
21 | #### Git Workflow
22 | - 💜 [Typical Workflow](https://www.doabledanny.com/git-workflows)
23 | - [good habits when working in a team](https://betterprogramming.pub/six-rules-for-good-git-hygiene-5006cf9e9e2)
24 |
25 | #### Rebase
26 |
27 | - [Illustration: Git Rebase vs Merge](https://www.gitkraken.com/learn/git/problems/git-rebase-vs-merge)
28 | - 💜 [What's the difference between 'git merge' and 'git rebase'?](https://stackoverflow.com/questions/16666089/whats-the-difference-between-git-merge-and-git-rebase/16666418#16666418)
29 | - [What's the difference between git pull and git pull --rebase](https://stackoverflow.com/questions/18930527/difference-between-git-pull-and-git-pull-rebase)
30 | - [Stop using git pull, use git fetch and git merge instead](https://longair.net/blog/2009/04/16/git-fetch-and-merge/)
31 | - [git pull --rebase vs --merge](https://sdq.kastel.kit.edu/wiki/Git_pull_--rebase_vs._--merge)
32 |
33 | #### Squash
34 |
35 | - 💜 [What is the difference between merge --squash and rebase?](https://stackoverflow.com/questions/2427238/what-is-the-difference-between-merge-squash-and-rebase)
36 | - [How to squash your commits](https://www.git-tower.com/learn/git/faq/git-squash)
37 |
--------------------------------------------------------------------------------
/other/css.md:
--------------------------------------------------------------------------------
1 | ### [Naming conventions](https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/)
2 | ##### section
3 | > .stick-man
4 | ##### components
5 | > .stick-man__head, .stick-man__arms
6 | ##### variants
7 | > .stick-man--blue, stick-man--red
8 | ##### variants of components
9 | > .stick-man__head--small, .stick-man__head--big
10 |
11 |
12 | ### Class selectors
13 |
14 | ##### has one class
15 | > .class-name {
16 | }
17 |
18 | ##### must have multiple classes
19 | > .first-class.second-class {
20 | }
21 |
22 | ##### is in the child element of the parent class
23 | > .parent-class .child-class {
24 | }
25 |
--------------------------------------------------------------------------------
/other/figma.md:
--------------------------------------------------------------------------------
1 | # Figma-tips
2 |
3 | ## Common shortcuts
4 |
5 | - Frame `F` or `A`
6 | - Rectangle `R`
7 | - Circle `O`
8 | - Text `T`
9 | - Move tool `V`
10 | - Type tool `T`
11 | - Zoom in `⌘ +`
12 | - Zoom out `⌘ -`
13 | - Shrink `K`
14 | - Zoom 100% `⌘ + 0`
15 | - Toggle grid `⇧ + G`
16 | - Group Selection `⌘ + G`
17 | - Big Nudge `⇧ + direction`
18 | - Duplicate `Option + drag`
19 | - Show/hide tool panel `⌘ + .`
20 | - Show outlines only `⇧ + O`
21 |
22 | ### Additional Shortcuts
23 | - [Figma shortcuts](https://shortcuts.design/toolspage-figma.html)
24 |
25 | ### Padding and Spacing
26 |
27 |
28 |
29 | ## Learn about layout and the 8pt grid system
30 |
31 | Designers love grids, they help create rhythm and structure to your layouts.
32 |
33 | A good place to start is with the 8pt grid system. The 8pt grid is a spacing system which uses multiples of 8. 8, 16, 32, 64, 128 and so on.
34 |
35 | Using a system for sizing and spacing elements creates constraints, prevents the use of arbitrary values and improves the consistency in your designs.
36 |
37 | How does this work in Figma?
38 |
39 | ### Setting up Layout Grids
40 |
41 | First click the hamburger icon in the top left corner of the Figma app. Scroll down to _preferences_ > _nudge amount_ and make sure the value for _small nudge_ is set to 1 and the value for _big nudge_ is set to 8.
42 |
43 | Now create a new frame by pressing `f` on your keyboard, and selecting _Desktop_ > _MacBook Pro_ from the properties panel on the right side of the app.
44 |
45 | With the frame selected, you will see the Layout Grid option, greyed out in the same properties panel on the right. Clicking on the `+` icon or the name will create a new 8pt grid.
46 |
47 | Now when you draw out shapes they will snap to the grid.
48 |
49 | ### Layering grids to create columns and rows
50 |
51 | With the frame selected click the `+` button next to Layout grid once more to create another grid on top. This time hit the icon to the left of ‘Grid (8px)’ and switch grid to columns.
52 |
53 | To keep things simple set _Count_ to 4, _Margin_ to 64 and _Gutter_ to 32. Notice these values all work with the 8pt grid.
54 |
55 | Your columns should be nicely aligned with your 8pt grid below.
56 |
57 | ### Nesting your frames to create interesting layouts
58 |
59 | Unlike with other software, which use fixed artboards, in Figma you can nest frames within frames to create interesting layouts. This is useful designing components with different layout or grids.
60 |
61 | ### Grid and layout resources
62 | - [Intro to The 8-Point Grid System](https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632)
63 | - [Frames within frames](https://www.figma.com/blog/grid-systems-for-screen-design/#frames-within-frames)
64 |
65 | ## Create a type system
66 |
67 | Oliver Reichenstein once said; “Web design is 95% typography, so it’s only logical to say that a web designer should get good training in the main discipline of shaping written information.“
68 |
69 | I tend start with a free typeface designed for UI, such as Inter or San Fransisco UI, which are both ideal for prototyping and have a range of weights.
70 |
71 | Approach type exactly how you would in code. Before you start designing, first create a scale of type sizes and line heights, starting with the body text, as this is what there will be most of. Sizes don’t have to be spot on at this stage, you can always change them later.
72 |
73 | For example if my body copy is 20px, I might multiple the text size by 1.6 to get a line-height of 32px. You can actually do this maths directly in the _Line height_ field: `20*1.6` + `Enter`. This is a good line-height for body copy.
74 |
75 | Next tackle the scale for your headings. I tend to set headings in a bolder weight to provide enough contrast between the regular weight of the body text. A line height of 1.2 is usually a good bet for larger heading sizes.
76 |
77 | Creating a system like this creates constraints in your work and helps to keep your designs feeling consistent.
78 |
79 |
80 | ### Type system resources
81 | - [Typography systems in Figma](https://www.figma.com/best-practices/typography-systems-in-figma/)
82 | - [Web Design is 95% Typography](https://ia.net/topics/the-web-is-all-about-typography-period)
83 |
84 |
85 | ## Use the dimensions palette to size things
86 |
87 | You can do maths in the dimensions palette too. This is ideal for sizing elements on your page to your 8pt or 4pt system.
88 |
89 |
90 | ## Understand colour and color styles
91 |
92 | Create a primary palette including brand colour and tints.
93 |
94 | Create greyscale palettes - one for surface colours (light greys or very dark greys for a dark theme) and one for text (dark greys or very light/white for dark themes).
95 |
96 | If the darkest grey you use is say 90% black and your lightest grey is 5% black, then avoid middle greys (40%, 50%, 60%). These are an accessibility nightmare.
97 |
98 | Make sure you use a contrast checker plugin like Able or Stark to check the contrast between your text and the background layer are accessible.
99 |
100 | Create a secondary palette for UI feedback colours (success, error, warning, info alerts).
101 |
102 | If you’re not confident with colour, keep colours to a minimum
103 |
104 |
105 | ### Colour resources
106 | - [Color in Design Systems](https://medium.com/eightshapes-llc/color-in-design-systems-a1c80f65fa3)
107 | - [Color in UI design a practical framework](https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e)
108 | - [A guide to color accessibility in product design](https://medium.com/inside-design/a-guide-to-color-accessibility-in-product-design-516e734c160c)
109 |
110 | ## Use Auto Layout
111 |
112 | Auto layout is a powerful feature that can help you improve your workflow for anything from simple UI elements like buttons to complex responsive UI patterns list navigation and cards.
113 |
114 | Figma has a great demo of how this work. I recommend you have a look and play around. It’s the only way to learn! 😎
115 |
116 | ### Auto layout resources
117 | - [Create dynamic designs with Auto Layout](https://help.figma.com/hc/en-us/articles/360040451373-Create-dynamic-designs-with-Auto-Layout)
118 | - [Quick tips for Auto Layout in Figma](https://uxdesign.cc/quick-tips-for-auto-layout-in-figma-411c639a51b0)
119 |
120 |
121 | ## Use plugins
122 |
123 | Figma has a great developer community who have built some awesome tools that you can use for free.
124 |
125 | So before you start designing flows you might want to check out the Autoflow plugin, which makes it easy to draw flows automatically. Or uses the Unsplash plugin to insert licence free images straight into your designs.
126 |
127 | Another great plugin is
128 |
129 | Plugins can be installed from the project overview in the top left sidebar. Use them, they will save you time and make you more efficient.
130 |
131 |
132 | ### Plugin resources
133 | - [The 15 best Figma plugins for designers](https://uxdesign.cc/the-15-best-figma-plugins-for-designers-so-far-84332ab1a61)
134 | - [Design for everyone with these accessibility-focused plugins](https://www.figma.com/blog/design-for-everyone-with-these-accessibility-focused-plugins/)
135 | - [Behind the Plugins: Matt DesLauriers, Generative Artist & Creative Coder](https://www.figma.com/blog/behind-the-plugins-matt-deslauriers/)
136 |
137 |
138 | ## Join the Figma community
139 |
140 | [On Spectrum](https://spectrum.chat/figma/)
141 |
142 |
143 |
--------------------------------------------------------------------------------
/other/git.md:
--------------------------------------------------------------------------------
1 | #### git workflow
2 |
3 |
9 |
10 | #### master > main
11 | * `git config --global init.defaultBranch main` set main as the default branch name for all new Git repositories that you create in the future.
12 | * `git branch -m master main` renames the existing master branch to main
13 |
14 |
15 | #### forking
16 |
17 | 1. fork a branch
18 | 2. `git remote add upstream git@github.com:adrianHards/rails-guide.git` add the remote, call it "upstream"
19 | 3. `git fetch upstream`
20 | 4. `git checkout main`
21 | 5. `git rebase upstream/main` modify your main branch such that any commits you've made that are not already present in upstream/main will be applied on top of it. This effectively rewrites the history of your branch, making it look as though your changes were made directly on top of the latest version of upstream/main.
22 |
23 | #### git remote
24 | 1. create a repo on gitHub
25 | 2. `git init` in folder on local machine
26 | 3. `git remote -v` to check if there are any remotes (a remote is simply a record in a local repository that it's linked to another one)
27 | 4. `git remote rm origin` remove origin from your remotes if necessary
28 | 5. `git remote add origin ` modifying .git/config file in your local repository to link to your GitHub repo
29 | 6. `git push -u origin main` transfer the code from the local repository to the one on GitHub
30 | * the `-u` switch means that these parameters should be saved as default, so next time you won't have to type "origin main", we can simply type 'git push'
31 |
32 | #### git init
33 | `git init` git creates a hidden directory called `.git` that it uses to track all changes to the files in the directory
34 | `rm -rf .git` to remove this file
35 |
36 | #### git add -p
37 | `git add -p` to stage parts of a changed file;
38 | > `y` stage the chunk
39 | > `n` ignore the chunk
40 | > `s` split it into smaller chunks
41 | > `e` manually edit the chunk
42 | > `q` to exit.
43 |
44 | #### git stash
45 | Accidentally been working in your master branch?
46 | * `git stash`
47 | * `git checkout -b new-branch`
48 | * `git stash pop` to bring over all of the changes you made in the master branch into the new branch
49 |
50 | #### git commit
51 |
52 | ##### editor
53 | if you accidentally type `git commit` without `-m`:
54 | * `i` to open editor
55 | * `:wq` to get out
56 | * `nano text.txt` to create a txt file and open the nano editor, `^` means ctrl
57 | * `cat text.txt` will show contents of file
58 |
59 | ##### [git revert or git reset](https://www.freecodecamp.org/news/git-revert-commit-how-to-undo-the-last-commit/)
60 | `git reset --soft HEAD~1` if commit exists only on local; will re-write commit history!
61 | `git revert ` if commit exists remotely; use `git lg` to find commit you want to revert to
62 |
63 | #### git merge
64 | if the terminal asks you to enter a message:
65 | 1. press `i` for insert
66 | 2. write your merge message
67 | 3. `esc` to escape
68 | 4. type `:wq` to write & quit
69 | 5. hit `enter`
70 |
71 |
72 | If you have made a PR and there are conflicts, it is better to resolve them locally.
73 | 1. `git pull origin main`
74 | 2. `git checkout pr-branch`
75 | 3. `git merge main`
76 |
77 |
78 | If there are changes on main you don't want to bring over, then do the following instead:
79 | 1. `git pull origin main`
80 | 2. `git checkout -b resolve-conflict`
81 | 3. `git merge pr-branch`
82 | 4. resolve conflicts, `git add` and `git commit --no-edit` (commit using the default commit message)
83 | 5. `git checkout pr-branch`
84 | 6. `git merge resolve-conflict`
85 |
86 | #### git branch
87 | `git checkout branch-name` to switch to a local branch
88 | `git checkout -b name-of-branch` create new branch and immediately check into it
89 | `git branch -m new-branch-name` change name of current branch
90 | `git branch` to see all local branches
91 | `git branch -r` to see all remote branches
92 | `git branch -a` to see both local and remote branches
93 | `git branch -d branch-name` to delete a local branch
94 |
95 | ##### switch to a remote branch
96 | 1. `git pull`
97 | 2. `git checkout --track origin/branch-name`
98 |
99 | ##### setup remote connections
100 | `git remote -v`
101 | `git remote add origin https://github.com/....git`
102 |
103 | #### git checkout
104 | `git checkout --patch main` checkout specific hunks or lines from a file in the "main" branch from branch you're in
105 |
106 | #### git reset
107 | resetting your local main to remote
108 | 1. create a branch and backup your work before `git checkout main`
109 | 2. `git fetch origin`
110 | 3. `git reset --hard origin/main` to reset the local main branch to the remote repository
111 | 4. `git clean -n` to see which files will be deleted
112 | 5. `git clean -xdf` `-x` removes ignored files, `-d` removes untracked folders, `-f` removes untracked files
113 |
114 | #### git diff
115 | `git diff branch1..branch2` see all differences between two branches
116 | `git difftool` to see differences in VSCode (assuming you have it set up in `code ~/.gitconfig`)
117 |
118 | #### git status
119 |
120 | #### git log
121 | `git cherry -v main` to see logs of branch you're in
122 | `git lg` to see single
123 |
124 | #### RSpec
125 | `bundle exec rspec spec/models/filename_spec.rb` to run a specific file
126 | note, `bundle exec` will run specific versions of Ruby and gems that are specified in your application's Gemfile
127 |
--------------------------------------------------------------------------------
/other/gitconfig.md:
--------------------------------------------------------------------------------
1 | #### Le Wagon config
2 | `code ~ /.gitconfig` and [modify](https://github.com/lewagon/dotfiles/blob/master/gitconfig) for custom terminal commands, such as `git lg` and `git sweep`
3 |
35 |
36 | ---
37 |
38 | ### Optional
39 |
40 | 1. Add any gems you want to include in your Gemfile. For example, I like to add `gem "responders"` for [respond_with](https://github.com/heartcombo/responders) which allows you to do [this](/tasks_controller.rb).
41 | 2. Run `bundle install` to install any additional gems now included in your Gemfile. For responders, you also need to run:
42 | ```
43 | bundle install
44 | bin/rails g responders:install
45 | ```
46 | 3. `touch .rubocop.yml` to the root of your project and [disable](https://docs.rubocop.org/rubocop/configuration.html) checks here.
47 |
48 |
62 |
68 | Additional options include: [--no-helper](https://www.rubyguides.com/2020/01/rails-helpers/) and `--no-test-framework`
69 |
70 |
71 | Undo:
72 | * `bin/rails d controller name `
73 | * `bin/rails d model name`
74 |
75 | #### Resource
76 | `bin/rails g resource movie title:string description:text`
77 | * generates a migration file, a model, a controller, views and the routes for the given class, but does not populate these files with anything else (unlike `scaffold`)
78 |
79 |
80 | #### Migrations
81 | ```
82 | bin/rails g migration add_name_to_doctors name:string
83 | bin/rails g migration remove_name_from_doctors name:string
84 | bin/rails g migration add_doctor_to_patients doctor:references
85 | ```
86 |
87 | The first command will create a migration file e.g. `20200928055457_add_name_to_doctors.rb` that contains:
88 |
89 | ```
90 | class AddNameToDoctors < ActiveRecord::Migration[7.0]
91 | def change
92 | add_column :doctors, :name, :string
93 | end
94 | end
95 | ```
96 |
97 | * create an empty database for you:
98 | `bin/rails db:create`
99 | * update the schema:
100 | `bin/rails db:migrate`
101 | * drop the database, create it again and re-seed:
102 | `bin/rails db:reset`
103 | `bin/rails db:drop` to drop the db only
104 | * load data from the file: db/seeds.rb into the database
105 | `bin/rails db:seed`
106 | * undoes the last migration, you can then edit the file, and run rails db:migrate again
107 | `bin/rails db:rollback`
108 | * delete a migration file, for example, if you make a typo and haven't migrated yet
109 | `bin/rails d migration SameMigrationNameAsUsedToGenerate`
110 | * if you've truly messed things up (e.g. deleted a migration file by accident), simply delete **schema.db** and re-run `rails db:migrate`
111 |
112 | #### Models
113 | `bin/rails g model Doctor first_name last_name speciality:text patient:has_many`
114 | * a database migration that will add a table and add the columns first_name, last_name, and speciality.
115 | * a model file that will inherit from ApplicationRecord
116 | * if the data type is a string, you don’t need to specify their type.
117 | * patient:has_many will result in models and migration files being generated for both Doctor and Patient, with has_many and belongs_to
118 |
119 | #### Controllers
120 |
121 | `bin/rails g controller Doctors index save`
122 | * provide a controller file and corresponding views folder
123 | * populate controller file with e.g. `def index end` and `index.html.erb` files inside of corresponding views folder
124 |
125 |
[What's the difference between 'git merge' and 'git rebase'?](https://stackoverflow.com/questions/16666089/whats-the-difference-between-git-merge-and-git-rebase/16666418#16666418) 
5 |