Skip to content

Instantly share code, notes, and snippets.

View renatorib's full-sized avatar

Renato Ribeiro renatorib

View GitHub Profile
@renatorib
renatorib / vscode.settings.json
Created November 14, 2023 16:23
Tailwind classRegex vscode
"tailwindCSS.experimental.classRegex": [
// const foo = cn("...")
// const foo = cx("...")
// const foo = classnames("...")
["cn|cx|classnames\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
// <Component classNames={{ foo: "..." }} />
["classNames=\\{([^}]*)\\}", "[\"'`]([^\"'`]*).*?[\"'`]"],
// const foo = /* tw */ "..."
["/\\* tw \\*/ ?(.*)", "[\"'`]([^\"'`]*).*?[\"'`]"],
// const foo = /* tw */ { bar: "...", baz: "..." }
@renatorib
renatorib / App.js
Created February 8, 2023 16:54
My first Sandpack snippet from Gist
import './index.css';
export default function App() {
return <h1>Hello from Gist</h1>;
};
export const formatDate = (dateOrString, opts) => {
const date = new Date(dateOrString);
return new Intl.DateTimeFormat('pt-BR', opts).format(date);
}
@renatorib
renatorib / readme.md
Last active July 22, 2019 22:47
tgit

New working branch (feature, bug, etc)

tgit new fs/xyz [-b master]

git checkout master               # ensure we are on master branch  
git pull origin master --rebase   # ensure master is up to date (fetch upstream && rebase)
git checkout -b fs/xyz            # create the new src branch  
git push -u origin @              # should we auto push new src branches to remote?

I. Should we auto push new src branches to remote? Maybe a opt-in flag?

@renatorib
renatorib / test.jstc
Last active July 13, 2019 04:36
some js type check
type ActionsBlock = {
!type: 'actions'
!elements: [
| StaticSelectElement
| UsersSelectElement
# | ConversationsSelectElement
# | ChannelsSelectElement
# | ButtonElement
# | OverflowElement
# | DatepickerElement
@renatorib
renatorib / readme.md
Last active October 13, 2023 17:17
Slack Block Kit Json Schema

Slack Block Kit Json Schema

Open schema raw file

Schema extracted from https://a.slack-edge.com/bv1-6-8cacda2/block-kit-builder.93ca53691de7cf9d4417.min.js
Probably the url/bundle will change every deploy so you might want to go https://api.slack.com/tools/block-kit-builder, open devtools and search for that file (block-kit-builder) in source tab. Pass some unminify tool and search for "JSON Schema".

PS1: Some block/element types simply does not work, idk why.
PS2: If you want to explore easily, copy the code and paste to the devtools console.

@renatorib
renatorib / .gitignore
Created August 29, 2018 01:38
extract github followers
outputs/*
config.js
@renatorib
renatorib / OnlyInClient.jsx
Last active May 31, 2018 19:02
SSR - Render Only In Client
class OnlyInClient extends Component {
static defaultProps = { fallback: null }
state = { client: false }
componentDidMount() {
this.setState({ client: true })
}
render() {
if (!this.state.client) {
@renatorib
renatorib / dan-abramov-QA.md
Last active April 11, 2018 22:02
Dan Abramov Q/A at React Brasil Slack (2018/04/11 - 18:00 GMT)

Dan, there are bigger plans to redux this year?

Not sure what you mean 🙂 But I have no plans regarding Redux personally. I'm not actively involved with maintaining it.


Andrew Clark said on his Twitter that class components will be considered as legacy APIs in the future, while function components will remain. We must take this statement in consideration in the projects that are under development/will be developed? And what is the best way to write a component?

He also said on Twitter that we have dozens of thousands of class components and they aren't going anywhere 🙂 When/if we have a more convenient and less verbose way to declare components than classes, we'll definitely announce it, but I don't see how it could affect existing projects.

@renatorib
renatorib / modal.jsx
Last active April 3, 2018 22:29
different ways to use two render props in one component
// passing object to render with two fns (opener & content, for example)
<Modal>
{{
opener: ({ open }) => <button onClick={open}>Open Modal</button>,
content: {{ close }) => <div><h2>Hi modal</h2> <button onClick={close}>Close me</button></div>
}}
</Modal>
// passing as children array
// https://stackblitz.com/edit/react-array-render-props