Skip to content

Latest commit

 

History

History
483 lines (356 loc) · 20.1 KB

TODO_LOG.md

File metadata and controls

483 lines (356 loc) · 20.1 KB

TODOS

Index

👇 TODO CONTENT 👇

Find Layout

Find Theme With Material Guidance

Components

Header

Prototype

  • take away hamburger menu

  • make AppBar match the theme's color

Desktop View
  • Make it thinner.

Footer

Prototype

  • Navigation UI in Footer.

  • fix width;

  • Change icons accordingly. * add an GitHub icon/link

Add a store for Footer.state.value, with a Redux store, in order to be able to set all components to act according to the current navigation icon selected, and for screen swipes also change the navigatino icons.

  • Create a Redux Store

  • Connect Footer.js to Redux

  • Understand classes in material ui. Why it was passed as props to Footer.js

  • Handle actions>dispatch>reducer>scrolling to the right view

    • Should I use mapDispatchToProps. I read that all data from store should be dispatched by actions (flux)

    • Selected Footer tab should be determined by Redux's store

    • Objective: Make sure both happen:
      • Clicking an BottomNavigationIcon scrolls to the top of the respective view
      • Scrolling/Swiping to a view will change BottomNavigation selected tab correspondingly
        • The Projects tab will be selected if window.screen doesn't exactly match the window.screen of the views of either the Hero or Contact components
    • Implementation: So, basically, you'll be able to either:
      • click button -> changes selectValue's redux state (viewSelect action) -> goes to view (action that goes to the view onClick. So, add logic that moves to view into the viewSelect action).
      • TASK: create action/reducer
      • Going to a view by scrolling/swiping -> also changes selectValue's redux state, which -> changes BottomNavigation's value.
        • Try this on desktop view, to see if App.onScroll works. using window.addEventListener('scroll') or setIntervall() makes slideshow and the whole app laggy.
        • Use window.pageYOffset (or window.scrollY), for comparison.
          • Maybe go to /contact after checking if pageYOffset >= (method for whole app height - window.screen.availHeight)
          • Selected button matches view. Default selected button is Projects, if view not top or contact (or default is top. If !top && !contact, is project)
          • TASK: create action/reducer

Refinement

  • Change unselected navigation icons color to white, matching those on the AppBar

  • Pressing on the buttons should change view

    • Replace the contact icon for one that doesn't give the idea of multiple contacts.

Views

View "/"

Prototype

  • Choose start view's "/" image

Refinement

  • Only in this View, Switch Header and Footer component's background to '#00000090', else, back to '#2d5f72'

  • Choose Typography for Logo, and if it is gonna be only text or if there's gonna be a image for my brand.

  • Scroll down call to action should be a little further down.

  • Maybe add a redux store Desktop | Mobile, that, switches text between Scroll | Swipe

    • Insted, solve it by using Hidden tags around spans for each word scroll | swipe.

  • Change hero image, because the first one was in russian, and displays the hardware's logo, which could bring problems.

View "/portfolio"

Refinement

  • Make structure projectSteps.js show each project data
    • The way it is now, it won't show the projectIndex prop on SwipeableTextMobileStepper.js
      • maybe I could import projectSteps.js to Portfolio.js and inject it as an argument into a function that calls .map() through it to return an element with the data for each project in the projectSteps array
  • Choose which projects to display
  • take screenshots of apps and replace images in the slideshow
  • Project images for Cat Clicker mobile view who are too little to see it's details should be cut so details are more visible. Do the same thing for the Memory Game victory mobile view.
  • Anchor tags on each app on the list should send to the respective app, hosted at Heroku.

View "/contact"

Prototype

  • Draw Contact/Footer component.

  • Ready textField UI, with name, email and message fields.

  • Contact view should take 100% of view height

  • Links for Linkedin and Twitter? If there is, write it's names, icons are optional here.

Refinement

Implement functionality, so the form will send messages to my professional email.

  • See if it can be done with a 3rd party package or service.

  • Reset fields after send.

    • The reset fields after send generates and email with empty fields. Maybe setTimeout would be enough to fix it.

  • Methods:

    • Method #1: Open OS Email Client, Filled By Form Input

      <!DOCTYPE html>
<html>
<body>

<h2>Send e-mail to mail@ricardobossan.com:</h2>

<form action="mailto:mail@ricardobossan.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name"><br>
E-mail:<br>
<input type="text" name="mail"><br>
Comment:<br>
<input type="text" name="comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

</body>
</html>

  • Method #2: Actions

Navigation ( BottomNavigation / Swiping / Scrolling)

Credits

Handling scroll events in React - @kempsterrrr

Navigate between component's views upon user input.

Prototype

  • HashRouter not working as intended. It only uses a # in the address bar. Edit: Managed to get it working with this tip, from Seth Kroger
  • Instead, add ids in the components, for navigation.
  • Create <Link>s on the Footer component, for navigating to the respective views

Refinement

Scrolling methodsMethods
Method 1: -window.scrollTo(x,y)
/* pq cada componente tem 100vh, e portfolio é o segundo componente. O primeiro  não muda /*
/* Top */
window.scrollTo(0,0)
/* Portfolio */
window.scrollTo(0, (window.screen.availHeight) )
/* Contact */
window.scrollTo(0, (window.screen.availHeight*10) )

Tablet (width>=1024px && width <1366px) breakpoint

  • social should be closer to each other.
  • Slideshows should wrap.

Desktop Breakpoint

  • Decide design. Between:
    • Using css breakpoints and material ui theme breakpoints
    • Creating a redux store for switching between Desktop and Mobile (or also between tablet and phone) view, when App Component onResize is triggered, to displaying, hiding or modifying accordingly things that show on the screen.
    • 👉 Both approaches (CSS Breakpoints in material UI && redux state for phone, tablet and desktop, for eventual features)👈
  • Hide bottom navigation
    • Switch it's functionality to a 👉 left aside or top the center of the Top App Bar, without icons.
  • Scrolling to a view should call .focus() on it, so it will be selected.
    • This can be achieved using React refs
      • solved by removing the property button from Mui class ListItem

Prototype

  • Hide componet Footer / NavigationBottom.
  • And replace it by mounting a left <aside>, or material ui equivalent component. 
  '&:focus': {
      backgroundColor: theme.palette.primary.main,
      '& $primary, & $icon': {
        color: theme.palette.common.white,
      },
    },
  • <aside> should have the same functionality as the Footer

Refinement

  • Do some styling to diferentiate the current view, so it won't be boring and so it is good looking.

General Refinement

Social Icons Send User to My Social Profiles

  • Header mail icon goes to the right view, but doesn't change BottomNavigation selected tab, like it's not connected to Redux. On Redux DevTools, no action is dispatched, when clicked on the icon
    • Got to either fix lack of connection between Header and Redux, or simply get rid of the mail icon.
      • Had forgotten to destructure action in component.

Finalize 👈

  • Add events for checkingif the view is correct in either BottomNavigation or Aside.

    • Programmatically Managing Focus: Starting focus doesn't allow keyboard events to be fired. Right now, i have to hit tab so the linkedin icon in the header will be focused. Only then keyboard events will fire, and the aside selected tab will follow accordingly.

      • I think I'll solve this by using useRef, tabIndex and .focus()

        • Solution: simply wrap an dom event listener on document.body, wrapped around an useEffect() React method.

          • In order to prevent memory leaks, I had to wrap the event handler inside another function, who would first call removeEventListener on this new function, who is now the event handler:

            Avoiding Memory Leaks

              const handleKey = e =>
    e.key === 'ArrowUp' ||
    e.key === 'ArrowDown' ||
    e.key === 'PageUp' ||
    e.key === 'PageDown' ||
    e.key === 'Home' ||
    e.key === 'End'
      ? handleScroll()
      : null;

  const handleKeyWrapper = e => {
    document.body.removeEventListener('keyup', handleKeyWrapper, false);
    handleKey(e);
  };

  useEffect(() => {
    document.body.addEventListener('keyup', handleKeyWrapper);
  });

  • Git rid of desktop view horizontal scrollbar

  • slideshow buttons shouldn't be encapsulated by anchor tags

  • Build a production enviroment

  • host portfolio's production enviroment.

  • desktop: selected property on ListItem, if selected.

  • Change hero image's text shadow to a barelly noticiable color.

  • remove scrollbar

  • Set this portfolio to my portfolio domain.

  • Clean commented out code.

  • Create a full sketch of react-redux (specifically) functionality

Future Improvements

  • Type (light /dark theme) You can make the theme dark by setting type to dark. While it's only a single property value change, internally it modifies the value of the following keys:
palette.text
palette.divider
palette.background
palette.action
const theme = createMuiTheme({
  palette: {
    type: 'dark',
  },
});
  • If swipe is long, it may hit Top or Bottom view without activating the action for selecting the respective view in the BottomNavigation bar. May be solved by adding a check at scrollY === 0 and scrolly >= window.scrollHeight - window.screen.availHeight -1. Add a setTimeout for 1000ms, so it won't call too many times.

Copyright & Trademark