This site is a great reference to flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background Below I have a basic 2 column centered layout. The basics are: The body: The important part is to not set it’s height to 100% otherwise if the window is shorter … Continue reading
Author Archives: Mark
Basic Flex Layout
Featured
Vertically alligning for IE11
Featured
It doesn’t always work like the other browsers. Here is something to try out: More info: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
Continuing from our last post, this is now our component code: import React from ‘react’; import { NavLink } from ‘react-router-dom’; import “./YearsUpdates.scss”; class YearsUpdates extends React.Component { constructor(props) { super(props); this.state = { } } getLink(type) { switch (type) … Continue reading
Using JSON in React
Featured
Sample JSON data: The data is sorted by year and each update has a name and type. To import this data into a component: Import the JSON by linking to it. Set a variable to contain all the data. We … Continue reading
Link to other pages in React
Featured
First you will need react-router-dom. Install it using: Here is the code that directs you to each page: BrowserRouter is the container. Switch will find and render the first page that matches the path/url. Link to the pages using NavLinks:
Here is the code: We set up the default state in the constructor and bind the on click function that toggles the state using the previous state. The bind makes “this” work in the function. Then the navigation’s class updates … Continue reading
Using SASS with React
Featured
It sounds simple enough. Just run npm install node-sass and change your css file file to a scss. Well… it didn’t work for me. What I need to do was update my Create-React-App to Version 2. To do this, go … Continue reading
Safari on mobile will resize your fonts if it thinks it’s too small. This is probably related to accessibility but it doesn’t make sense to me and is annoying. Anyways to fix it add this Original post here.
My Sailormoon Drops adventure
Featured
Sailormoon Drops is a mobile game that’s basically a Sailormoon Candy Crush game. I initially started playing it because other family members were playing it but kept playing it even after they stopped because I found it fun. The reasons … Continue reading
Original source: https://stackoverflow.com/questions/34766636/ios-browser-iframe-jumps-to-top-when-changing-css-or-content-using-javascript I learnt today that iphones and iframes are not a good combo. Never the less it is combo you will run into if you build elearning modules for mobile. At least the fix is simple. Add this … Continue reading