greens_pages: An HTML repository from flmath

New take on my webCV, now expanded with blog post features.

https://flmath.github.io/greens_pages/

Setting up a Travis CI + React + Github Pages

https://medium.com/@bezgachev/6-simple-steps-to-automatically-test-and-deploy-your-javascript-app-to-github-pages-c4c32a34bcb1

https://github.com/flmath-dirty/react_two

install nodejs
install npm install -g create-react-app
create repo reactx
git clone (https:/ get it from page)
create-react-app reactx
cd reactx
add .travis.yml file
npm run start
npm run build
modify package.json file
git add .
git commit -m'comment'
git push
generate token in github
set token in travis
run build
check https://flmath-dirty.github.io/react_two/

Graphics Sources and inspirations:

I have tried to build the look based on bootstrap, but I have ended with quite a modifications:

The navbar:

https://pixabay.com/images/id-3880571/ heavily edited https://pixabay.com/images/id-3227459/ https://pixabay.com/images/id-677521/

Penrose triangle and octagon for the navbar button taken from wikipedia (and colorized) https://en.wikipedia.org/wiki/Penrose_triangle https://en.wikipedia.org/wiki/File:Penrose_octagon.svg https://upload.wikimedia.org/wikipedia/commons/c/c1/Penrose-dreieck.svg https://upload.wikimedia.org/wikipedia/commons/a/a3/Penrose_hexagon.svg https://upload.wikimedia.org/wikipedia/commons/2/25/Penrose_pentagon.svg https://upload.wikimedia.org/wikipedia/commons/1/1c/Penrose_square.svg

Impossible cube: https://en.wikipedia.org/wiki/Impossible_cube

A Penrose triangle boxes for postlist container: https://pixabay.com/images/id-161955/

window.history.pushState({urlPath:'/page1'},"",'/page1')

https://stackoverflow.com/questions/49022516/detecting-that-the-back-button-was-pressed-in-react-router?noredirect=1&lq=1

componentDidUpdate(){
  window.onpopstate  = (e) => {
 //your code...
 }
}

React + Markdown

react-markdown + react-syntax-highlighter prism: https://medium.com/young-developer/react-markdown-code-and-syntax-highlighting-632d2f9b4ada

React non breaking space

https://www.javascriptstuff.com/how-whitespace-works-in-jsx/

<div>&nbsp;•Hello•World</div>

CSS for wrapping in code fences in markdown.

https://stackoverflow.com/questions/41238148/how-to-line-wrap-long-lines-inside-markdown-code-blocks-in-githubgitlab

React block default behaviors connected to listeners

https://hashnode.com/post/why-do-you-write-eventpreventdefault-in-react-cjdznf1el0atom3wt831c2m9o

doMeow = e => {
 e.preventDefault();
 // do meow here
}

render() {
    return(
        <a onClick={this.doMeow} href="/">Meow</a>
    );
}```

### React synchronous states
https://medium.freecodecamp.org/understanding-setstate-in-react-ea8982168b49

```javascript
onClick = () =>
{this.setState((prevState, props) => ({value: prevState.value + 1}))
}

Javascript spread operator/ merge objects

https://flaviocopes.com/how-to-merge-objects-javascript/

const object1 = {
  name: 'Flavio'
}
const object2 = {
  age: 35
}
const object3 = {...object1, ...object2 }

React route with forwarded props

https://tylermcginnis.com/react-router-pass-props-to-components/

Separate library without component is possible

https://stackoverflow.com/questions/43262599/call-js-function-from-another-file-in-react

//slideshow.js
export const plusSlides = (n)=>{
    showSlides(slideIndex += n);
}

and import it where you need to

//Homepage.js
import {plusSlides} from './slide'

handleClick (event) {
        plusSlides(1);
    }

withRouter Router usage

https://medium.com/@AkyunaAkish/understanding-react-router-4-df73a66d96c4 https://stackoverflow.com/questions/53539314/what-is-withrouter-for-in-react-router-dom https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

withRouter Router usage onClick

https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router

import { withRouter } from 'react-router-dom'
// this also works with react-router-native

const Button = withRouter(({ history }) => (
  <button
    type='button'
    onClick={() => { history.push('/new-location') }}
  >
    Click Me!
  </button>
))

import { Route } from 'react-router-dom'

const Button = () => (
  <Route render={({ history}) => (
    <button
      type='button'
      onClick={() => { history.push('/new-location') }}
    >
      Click Me!
    </button>
  )} />
)

Router parameters :id

https://stackoverflow.com/questions/45468837/get-path-params-in-react-router-v4

import {withRouter} from 'react-router';

class BookDetailedView extends React.Component {
    render() {
        var id = this.props.match.params.id


    }
}
export default withRouter(BookDetailedView) ;

<Route path="/details/:id" render={({match}) => (
          <BookDetailedView
            bookStateUpdated = {this.bookStateUpdated}
            book = {this.state.books}
            id={match.params.id}
          />
)}/>

Change basename of the router, so it works on github Pages

https://medium.com/@Dragonza/react-router-problem-with-gh-pages-c93a5e243819 facebook/create-react-app#1765 (comment)

<BrowserRouter basename={process.env.PUBLIC_URL}>
  {/* routes */}
</BrowserRouter>

The SPA (Single Page Application) subpages redirecting to 404 issue on github.io pages

https://github.com/rafrex/spa-github-pages

Default value for object attributes in Javascript

https://stackoverflow.com/questions/6600868/set-default-value-of-javascript-object-attributes

var handler = {
  get: function(target, name) {
    return target.hasOwnProperty(name) ? target[name] : 42;
  }
};

var p = new Proxy({}, handler);

p.answerToTheUltimateQuestionOfLife; //=> 42

React router handling 404

https://tylermcginnis.com/react-router-handling-404-pages/

Crazy error 'Cannot read property 'toLowerCase' of undefined'

https://stackoverflow.com/questions/55212280/npm-run-build-failed-to-compile-cannot-read-property-tolowercase-of-undefi

Libraries I have used:

https://reactjs.org/ https://reactstrap.github.io https://makotot.github.io/react-scrollspy/ https://github.com/timarney/react-app-rewired -> https://jaketrent.com/post/change-webpack-config-create-react-app-without-ejecting/ https://github.com/webpack-contrib/html-loader https://github.com/ReactTraining/history https://www.npmjs.com/package/marked

For further considerations:

https://codeburst.io/the-2018-web-developer-roadmap-826b1b806e8d https://www.npmjs.com/package/react-render-html https://stackoverflow.com/questions/35028591/react-dangerouslysetinnerhtml-to-render-an-iframe-youtube-embed-from-props https://facebook.github.io/create-react-app/docs/advanced-configuration https://survivejs.com/webpack/what-is-webpack/

https://blog.cloudboost.io/learn-how-to-create-a-simple-blog-with-react-node-c05fa6889de3

https://medium.freecodecamp.org/part-1-react-app-from-scratch-using-webpack-4-562b1d231e75

###Loading External sources and Lazy loading: https://www.robinwieruch.de/react-fetching-data/#react-fetch-data-render-props https://blog.logrocket.com/lazy-loading-components-in-react-16-6-6cea535c0b52

Fetch

https://davidwalsh.name/fetch https://stackoverflow.com/questions/36631762/returning-html-with-fetch

fetch('somePage.html')
    .then(function(response) {
        // When the page is loaded convert it to text
        return response.text()
    })
    .then(function(html) {
        // Initialize the DOM parser
        var parser = new DOMParser();

        // Parse the text
        var doc = parser.parseFromString(html, "text/html");

        // You can now even select part of that html as you would in the regular DOM
        // Example:
        // var docArticle = doc.querySelector('article').innerHTML;

        console.log(doc);
    })
    .catch(function(err) {  
        console.log('Failed to fetch page: ', err);  
    });

Load/import

https://stackoverflow.com/questions/7163061/is-there-a-require-for-json-in-node-js

As of node v0.5.x yes you can require your JSON just as you would require a js file.

var someObject = require('./somefile.json')

In ES6:

import someObject from ('./somefile.json')

https://hackernoon.com/lazy-loading-and-preloading-components-in-react-16-6-804de091c82d

https://stackoverflow.com/questions/52042301/reactjs-import-a-dynamic-file-in-render-method

render() {
   let pdfFile = require('../' + this.props.termsAndCondition.pdfDocument);
   return (
      <li>
         <a href={pdfFile} target="_blank" className="link">
            <img src={pdfImage} className="phoneMain"></img>
            {this.props.termsAndCondition.language}
         </a>
      </li>
   );
}