Need help with twizzle-landing?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

kitze
641 Stars 63 Forks 94 Commits 14 Opened issues

Description

The landing page for Twizzle

Services available

!
?

Need anything else?

Contributors list

# 22,289
React
GraphQL
Scala
dao
51 commits
# 43,769
CSS
React
Storybo...
HTML
6 commits
# 168
JavaScr...
GraphQL
Redux
redux-s...
3 commits
# 537,777
JavaScr...
HTML
Shell
2 commits
# 8,678
React
scaffol...
GraphQL
OCaml
2 commits
# 195,120
faceboo...
Electro...
macos-a...
messeng...
2 commits
# 34,368
React N...
React
CSS
Shell
1 commit
# 10,030
JavaScr...
preact
Storybo...
Svelte
1 commit
# 774
GitHub
rust-la...
wechat-...
query-l...
1 commit
# 412,858
HTML
Google
Google ...
oauth2-...
1 commit

🙋‍♂️ Made by @thekitze

Other projects:

  • 💻 Sizzy - A browser for designers and developers, focused on responsive design
  • 🏫 React Academy - Interactive React and GraphQL workshops
  • 🤖 JSUI - A powerful UI toolkit for managing JavaScript apps
  • 📹 YouTube Vlog - Follow my journey

Twizzle

✉️️ Landing page for Twizzle, a desktop app for Twitter DM & composing tweets

🛠️ Setup

It's

CRA 2
with
customize-cra
and
react-app-rewired
.
The config file is adding/changing the following:
  • Add
    babel-plugin-styled-components
  • Add
    inline-react-svg
    to inline svg files (I know CRA has this functionality but you import every file in a specific way)
  • Disable ESlint 🤷‍♂️️

✅️ Main file

The magic happens in components/App/index.js

🐟️ Custom hooks

All of the hooks are in utils/hooks.js

  • useCanHover
    - detect if the device supports hover, if it doesn't, use
    onClick
    for the "tweeting" button
  • useToggleBodyClass
    - toggle a body class based on a boolean. Used to trigger
    dark/light
    and
    scroll/no-scroll
    classes on the
    body
    tag.
  • useGoogleAnalytics
    - inserts a google analytics script, but only when the app is ready
  • useMousePosition
    - track the mouse position. It's used to detect if the user is over the menu bar, otherwise the tweet composer gets glitchy.
  • useLoadScript
    - appends a script tag to the head of the page (used to load the Paddle script after the page is loaded)

I'll move these hooks to react-hanger soon.

🏝️ Desert background

  • I extracted all the logic for the background in a Background component
  • For the background I'm using 2 different svg images of a desert, a light one and a dark one.
  • I tried using them as background images, but they get all weird for some reason
  • They are switched using the DayNightToggle.
  • I'm using a
    desertLoaded
    boolean to detect when the dark image is completely loaded, and fade it in (otherwise it would look ugly on slow connections)
  • I'm waiting until the app is ready to start loading the light image, otherwise it's just slowing down the other requests for no reason

🍬️ Intro animation

  • All the animation logic is extracted in this custom hook
  • It's using react-pose for the animations
  • It's using sequence which is a function that I wrote for scheduling state changes. I also used it for the intro animation of ok-google.io. It goes through the arguments and if it finds a function it calls it, and if it finds a number it's gonna wait with
    setTimeout
    for the amount of ms. There is more info in this article.
  • It's always enabled in production, but it can be turned off in development using a boolean

🌓️ Day/night switch

It's really nothing fancy, just couple of styled divs. I feel a bit guilty because it's completely inaccessible by keyboard users.

z-index

So, z-index has been driving me crazy for a long time, so I decided to simplify the logic by ordering all elements in an

order
array and then using
...zIndexFor(ELEMENTS.COMPOSE)
in the styles for the component that needs z-index. Smooth.

🖌️ Theming

  • The app has a dark and a light mode, and all the logic for them is in styles/themes.js.
  • Other components can use the themes either by destructuring the

    theme
    prop, or with the following mixins:
  • whenTheme
    - It applies style only when the certain theme name is active. Example:
    whenTheme('dark', {backgroundColor: 'black})
  • applyTheme
    - It applies certain theme styles to the element. Example:
    applyTheme('windowBar')
    will get the
    theme.windowBar
    styles from the current theme
  • getThemeColor
    - It reads a certain color from the current theme. Example:
    getThemeColor('icon')
    will return the icon color for the current theme.

⁉️ AMA

Just open an issue if you're interested about anything else in the app, and I'll add it in the readme.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.