mirror of
https://github.com/jbranchaud/til
synced 2026-01-19 23:18:01 +00:00
Compare commits
5 Commits
4898f768d5
...
8730bf39cc
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8730bf39cc | ||
|
|
581aa1decb | ||
|
|
0c4795c1d2 | ||
|
|
9bbde247a5 | ||
|
|
295fe153ad |
@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
|
|||||||
|
|
||||||
For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
|
For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
|
||||||
|
|
||||||
_1501 TILs and counting..._
|
_1503 TILs and counting..._
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -157,6 +157,7 @@ _1501 TILs and counting..._
|
|||||||
### CSS
|
### CSS
|
||||||
|
|
||||||
- [Add Fab Icons To Your Site With FontAwesome 5](css/add-fab-icons-to-your-site-with-fontawesome-5.md)
|
- [Add Fab Icons To Your Site With FontAwesome 5](css/add-fab-icons-to-your-site-with-fontawesome-5.md)
|
||||||
|
- [Add Line Numbers To A Code Block With Counter](css/add-line-numbers-to-a-code-block-with-counter.md)
|
||||||
- [Animate Smoothly Between Two Background Colors](css/animate-smoothly-between-two-background-colors.md)
|
- [Animate Smoothly Between Two Background Colors](css/animate-smoothly-between-two-background-colors.md)
|
||||||
- [Apply Multiple Box Shadows To Single Element](css/apply-multiple-box-shadows-to-single-element.md)
|
- [Apply Multiple Box Shadows To Single Element](css/apply-multiple-box-shadows-to-single-element.md)
|
||||||
- [Apply Styles Based On Dark-Mode Preferences](css/apply-styles-based-on-dark-mode-preferences.md)
|
- [Apply Styles Based On Dark-Mode Preferences](css/apply-styles-based-on-dark-mode-preferences.md)
|
||||||
@@ -929,6 +930,7 @@ _1501 TILs and counting..._
|
|||||||
- [Count The Number Of Records By Attribute](rails/count-the-number-of-records-by-attribute.md)
|
- [Count The Number Of Records By Attribute](rails/count-the-number-of-records-by-attribute.md)
|
||||||
- [Create A Custom Named References Column](rails/create-a-custom-named-references-column.md)
|
- [Create A Custom Named References Column](rails/create-a-custom-named-references-column.md)
|
||||||
- [Create A Join Table With The Migration DSL](rails/create-a-join-table-with-the-migration-dsl.md)
|
- [Create A Join Table With The Migration DSL](rails/create-a-join-table-with-the-migration-dsl.md)
|
||||||
|
- [Create Table With bigint Id As Primary Key](rails/create-table-with-bigint-id-as-primary-key.md)
|
||||||
- [Creating Records of Has_One Associations](rails/creating-records-of-has-one-associations.md)
|
- [Creating Records of Has_One Associations](rails/creating-records-of-has-one-associations.md)
|
||||||
- [Custom Validation Message](rails/custom-validation-message.md)
|
- [Custom Validation Message](rails/custom-validation-message.md)
|
||||||
- [Customize Paths And Helpers For Devise Routes](rails/customize-paths-and-helpers-for-devise-routes.md)
|
- [Customize Paths And Helpers For Devise Routes](rails/customize-paths-and-helpers-for-devise-routes.md)
|
||||||
|
|||||||
51
css/add-line-numbers-to-a-code-block-with-counter.md
Normal file
51
css/add-line-numbers-to-a-code-block-with-counter.md
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
# Add Line Numbers To A Code Block With Counter
|
||||||
|
|
||||||
|
The
|
||||||
|
[`counter`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters)
|
||||||
|
feature in CSS is a stateful feature that allows you to increment and display a
|
||||||
|
number based on elements' locations in the document. This feature is useful for
|
||||||
|
adding numbers to headings and lists, but it can also be used to add line
|
||||||
|
numbers to a code block.
|
||||||
|
|
||||||
|
We need to initialize the counter to start using it. This will give it a name
|
||||||
|
and default it to the value 0. We'll tie this to a `pre` tag which wraps our
|
||||||
|
lines of code.
|
||||||
|
|
||||||
|
```css {{ title: 'globals.css' }}
|
||||||
|
pre.shiki {
|
||||||
|
counter-reset: line-number;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Then we need to increment the counter for every line of code that appears in
|
||||||
|
the code block
|
||||||
|
|
||||||
|
```css {{ title: 'globals.css' }}
|
||||||
|
pre.shiki .line {
|
||||||
|
counter-increment: line-number;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Last, we need to display these incrementing `line-number` values _before_ each
|
||||||
|
line.
|
||||||
|
|
||||||
|
```css {{ title: 'globals.css }}
|
||||||
|
pre.shiki .line:not(:last-of-type)::before {
|
||||||
|
content: counter(line-number);
|
||||||
|
/*
|
||||||
|
* plus any styling and spacing of the numbers
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
This essentially attaches an element to the front (`::before`) of the line
|
||||||
|
whose content is the current value of `line-number`. It is applied to all but
|
||||||
|
the last `.line` because [shiki](https://shiki.matsu.io/) includes an empty
|
||||||
|
`.line` at the end.
|
||||||
|
|
||||||
|
Here is [the real-world example of
|
||||||
|
this](https://github.com/pingdotgg/uploadthing/blob/4954c9956c141a25a5405991c34cc5ce8d990085/docs/src/styles/tailwind.css#L13-L37)
|
||||||
|
that I referenced for this post.
|
||||||
|
|
||||||
|
Note: the counter can be incremented, decremented, or even explicitly set to a
|
||||||
|
specific value.
|
||||||
@@ -5,6 +5,8 @@ an array-like object with all of the arguments to the function. Even if not
|
|||||||
all of the arguments are referenced in the function signature, they can
|
all of the arguments are referenced in the function signature, they can
|
||||||
still be accessed via the `arguments` object.
|
still be accessed via the `arguments` object.
|
||||||
|
|
||||||
|
> For ES6+ compatibility, the `spread` operator used via [rest parameters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters) is preferred over the `arugments` object when accessing an abritrary number of function arguments.
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
function argTest(one) {
|
function argTest(one) {
|
||||||
console.log(one);
|
console.log(one);
|
||||||
|
|||||||
30
rails/create-table-with-bigint-id-as-primary-key.md
Normal file
30
rails/create-table-with-bigint-id-as-primary-key.md
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
# Create Table With bigint ID As Primary Key
|
||||||
|
|
||||||
|
When creating a new table with an ActiveRecord migration, we specify all the
|
||||||
|
fields _except_ the `id`. The `id`, which is the primary key, is implicit. We
|
||||||
|
get it by default.
|
||||||
|
|
||||||
|
The type of that `id` defaults to `int` which is a 32-bit signed integer.
|
||||||
|
|
||||||
|
We can override the type of `id` in a variety of ways. The one I prefer in most
|
||||||
|
cases is to make the `id` of type `bigint`. This is a 64-bit signed integer. It
|
||||||
|
offers quite a bit more headroom for the number of unique identifies in our
|
||||||
|
table.
|
||||||
|
|
||||||
|
This can be specified by including `id: :bigint` as an option to the
|
||||||
|
`create_table` method.
|
||||||
|
|
||||||
|
```ruby
|
||||||
|
class CreatePosts < ActiveRecord::Migration[8.0]
|
||||||
|
def change
|
||||||
|
create_table :posts, id: :bigint do |t|
|
||||||
|
t.string :title, null: false
|
||||||
|
t.string :body, null: false
|
||||||
|
|
||||||
|
t.timestamps
|
||||||
|
end
|
||||||
|
end
|
||||||
|
end
|
||||||
|
```
|
||||||
|
|
||||||
|
[source](https://api.rubyonrails.org/v7.1/classes/ActiveRecord/ConnectionAdapters/SchemaStatements.html#method-i-create_table)
|
||||||
Reference in New Issue
Block a user