ActiveClass

activeclass

THE WAR AGAINST WAR

Have you ever been working on a project and wanted to scroll smoothly through your app? With you'll be able to do that in less than 10 minutes! react-scroll is a component to animate your vertical scroll, and it's effortless to use. In this article, I'm going to show you how to add it to your . react-scroll React Components After finishing this article, you're going to end up with this: Live Demo Feel free to clone my if you want to code along! GitHub repository git git@github.com:bernardogarza/react-scroll-tutorial.git clone Make sure you're in the branch. react-smoothless git checkout react-smoothless Let's get into it If you are working on my cloned repository, make sure to run or (this might take a few minutes). npm install yarn If you are starting a project from scratch, you'll need to install the npm package. npm install react-scroll yarn add react-scroll // or First things first, let's start the server, this will automatically refresh your browser when you save a file. You can view it in the browser at . localhost:3000 npm start yarn start //or The Link Component The first thing we need to do to start using react-scroll is importing the component from into the component where we have our links, in this case, the component. Link react-scroll Navbar The Link component will allow us to animate our scrolling when we click on a link. React ; styled ; { Link } ; // navbar.component.jsx import from 'react' import from 'styled-components' import from 'react-scroll' As you can see, we are using styled-components but, that's a topic for a future article. Let's focus on the component for now. Link After we imported the Link component, we need to replace our tags with the Link component. <a> I recommend this extension for Visual Studio Code called , it automatically changes your closing tag while editing the opening one. It will save you a lot of time and confusion while editing tags. Auto Rename Tag { ( <div className="header">
        <Link activeClass="active" to="section1" spy={true} smooth={true} duration={1000}>
          Section 1
        </Link>
        <Link activeClass="active" to="section2" spy={true} smooth={true} duration={1000}>
          Section 2
        </Link>
        <Link activeClass="active" to="section3" spy={true} smooth={true} duration={1000}>
          Section 3
        </Link>
      </div> <div className="scrolling-buttons">
        <Wrapper>
          <OnScreenScrolling />
        </Wrapper>
      </div> );
} // navbar.component.jsx export default ( ) function Navbar return < > NavbarStyled </ > NavbarStyled You might be wondering what are all those properties inside the component, well, allow me to explain it to you: Link : class applied when the element is reached. This means that whenever you click on the Link component, that class will be applied to that Link component. activeClass : target to scroll to. Here we are going to put the id of the element we want to scroll to. to : make Link selected when the scroll is at its target position. spy : animate the scrolling. That's basically the whole point of this. smooth duration: time of the scroll animation - can be a number (milliseconds) or a function ( ), that allows more granular control at run-time. function (scrollDistanceInPx) { return duration; } Don't forget that the component that you want to link should have the same id that we used on the property that we have in the component. Here is an example: to Link React ; styled ; Wrapper ; Section1Styled = styled.div ; { ( <Wrapper>
        <h1>Section 1</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat blanditiis adipisci eaque animi repellat
          atque assumenda corporis quidem nostrum ea, nulla qui cupiditate suscipit, quisquam voluptas mollitia ex iusto
          voluptates.
        </p>
      </Wrapper> );
} // section1.component.jsx import from 'react' import from 'styled-components' import from '../wrapper/wrapper.component' const `
  background-color: darkviolet;
  .active {
    border-bottom: 1px solid white;
  }
` export default ( ) function Section1 return < = > Section1Styled id "section1" </ > Section1Styled You can see that we have on our first component. to="section1" Link This is how our file should look: React ; styled ; { Link } ; OnScreenScrolling ; Wrapper ; NavbarStyled = styled.div ; { ( <div className="header">
        <Link activeClass="active" to="section1" spy={true} smooth={true} duration={1000}>
          Section 1
        </Link>
        <Link activeClass="active" to="section2" spy={true} smooth={true} duration={1000}>
          Section 2
        </Link>
        <Link activeClass="active" to="section3" spy={true} smooth={true} duration={1000}>
          Section 3
        </Link>
      </div> <div className="scrolling-buttons">
        <Wrapper>
          <OnScreenScrolling />
        </Wrapper>
      </div> );
} //navbar.component.jsx import from 'react' import from 'styled-components' import from 'react-scroll' import from '../on-screen-scrolling/on-screen-scrolling.component' import from '../wrapper/wrapper.component' const `
  font-size: 24px;
  position: fixed;
  width: 100%;
  .header {
    background: black;
    padding: 40px;
    display: flex;
    justify-content: space-around;
    margin: 0;
    color: white;
    * {
      cursor: pointer;
    }
    .active {
      border-bottom: 1px solid white;
    }
  }
  .scrolling-buttons {
    display: flex;
    flex-direction: column;
  }
` export default ( ) function Navbar return < > NavbarStyled </ > NavbarStyled And that's it, just like that you have working on your Navbar links. Pretty easy, don't you think? react-scroll There's one more thing that I want to cover in this article, it's going to be super easy too! and I promise it will be useful. The animateScroll You might have noticed some random buttons in our app, well, let's make those buttons functional. The will allow us to perform more specific types of scrolling. We are not going to be limited to just scrolling straight to with . Using this we are going to be able to scroll from top to bottom and vice versa and scroll a specific amount of pixels per click. animateScroll divs ids Let's start by importing the into our file. animateScroll on-screen-scrolling React ; styled ; { animateScroll scroll } ; // on-screen-scrolling.component.jsx import from 'react' import from 'styled-components' import as from 'react-scroll' You can see that we are importing , which is for replacing the name of the component to make it easier to write. You can give it the name you want. It would work the same way if we added this into our function: animateScroll as scroll OnScreenScrolling scroll = animateScroll; let Now that we have imported let's start working with the functions. animateScroll To assign custom scrolling to our buttons, we will need to create functions that will be called using an . The allows you to call a function and perform an action when an element is clicked. onClick handler onClick handler First, we need to create our functions, these need to be inside of the function. These functions are pretty straight forward. OnScreenScrolling Let's start with the functions that are going to . scroll up The first one is going to be for scrolling to the top of our page. {
  scroll.scrollToTop();
} // on-screen-scrolling.component.jsx ( ) function scrollToTop The scroll to top and scroll to bottom functions are pretty self-explanatory, there is not much to say about them. Now we are going to add a function to scroll 300 pixels up. {
  scroll.scrollMore( );
} // on-screen-scrolling.component.jsx ( ) function scrollMoreUp300 -300 As you can see, the function is taking an argument of -300, that argument is the pixels that we want to scroll. In this case, we want to scroll up, so we need to have a negative amount of pixels for that to happen. This last one is the same as the one that we just talked about but for scrolling 100px instead of 300px. {
  scroll.scrollMore( );
} // on-screen-scrolling.component.jsx ( ) function scrollMoreUp100 -100 Remember that the values of the arguments in these functions are negative because we want to scroll up. Now, let's do the same but for . down scrolling Let's start with the function to scroll to the bottom of the page. I bet you can guess how it is going to look like. {
  scroll.scrollToBottom();
} // on-screen-scrolling.component.jsx ( ) function scrollToBottom Really intuitive, don't you think? Let's move on to the pixel specific scrolling functions. These are also pretty intuitive, these are going to be exactly as the ones we used before but with positive values instead. {
  scroll.scrollMore( );
} // on-screen-scrolling.component.jsx ( ) function scrollMoreDown300 300 {
  scroll.scrollMore( );
} // on-screen-scrolling.component.jsx ( ) function scrollMoreDown100 100 It makes sense, doesn't it? Now let put these functions to work. We will add them to our tags using an handler, as I mentioned earlier. <button> onClick As you might already know, we need to use curly brackets to pass the functions inside our tag's properties, basic JSX syntax. <OnScreenScrollingStyled> <div>
      <button onClick={scrollMoreUp100}>Scroll Up 100px</button>
    </div> <div>
      <button onClick={scrollToTop}>Scroll to Top</button>
    </div> <div>
      <button onClick={scrollMoreUp300}>Scroll Up 300px</button>
    </div> <div className= > <button onClick={scrollMoreDown100}>Scroll Down 100px</button> <div> < button> < OnScreenScrollingStyled> // on-screen-scrolling.component.jsx < = > div className "top button-row" </ > div "bottom button-row" < > div </ > div Scroll to Bottom < = > button onClick {scrollToBottom} </ > button /div>
    <div>
      <button onClick={scrollMoreDown300}>Scroll Down 300px</ </ > div /div>
</ There is not a lot to explain here, we just added the handler inside each button and passed the function that we want them to call. onClick This is how your file should look by now: React ; styled ; { animateScroll scroll } ; OnScreenScrollingStyled = styled.div ; { {
    scroll.scrollToTop();
  } {
    scroll.scrollMore( );
  } {
    scroll.scrollMore( );
  } {
    scroll.scrollToBottom();
  } {
    scroll.scrollMore( );
  } {
    scroll.scrollMore( );
  } ( <div className="top button-row">
        <div>
          <button onClick={scrollMoreUp100}>Scroll Up 100px</button>
        </div>
        <div>
          <button onClick={scrollToTop}>Scroll to Top</button>
        </div>
        <div>
          <button onClick={scrollMoreUp300}>Scroll Up 300px</button>
        </div>
      </div> <div className="bottom button-row">
        <div>
          <button onClick={scrollMoreDown100}>Scroll Down 100px</button>
        </div>
        <div>
          <button onClick={scrollToBottom}>Scroll to Bottom</button>
        </div>
        <div>
          <button onClick={scrollMoreDown300}>Scroll Down 300px</button>
        </div>
      </div> );
} import from 'react' import from 'styled-components' import as from 'react-scroll' const `
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .button-row {
    width: 100vw;
    display: flex;
    justify-content: space-between;
    div {
      margin: 0 10px;
    }
    button {
      padding: 3px;
      font-weight: bold;
      cursor: pointer;
    }
  }
  .bottom {
    margin-bottom: 115px;
  }
` export default ( ) function OnScreenScrolling // Scroll up ( ) function scrollToTop ( ) function scrollMoreUp300 -300 ( ) function scrollMoreUp100 -100 // Scroll down ( ) function scrollToBottom ( ) function scrollMoreDown300 300 ( ) function scrollMoreDown100 100 return < > OnScreenScrollingStyled </ > OnScreenScrollingStyled And that's it! We have fully functional scrolling buttons and links. The is a little bit harder than , but it's still straightforward and worth it. animateScroll Link There are more things that we can do with react-scroll. You can find more examples and more complex things that this package is capable of doing In the . I encourage you to experiment with it and find out what it's capable of. BE CREATIVE! GitHub repository Thank you for reading my article. I hope you found it useful, please follow me on and give the repo a star if you enjoyed building it. GitHub “I guess I’ve been working so hard, I forgot what it’s like to be hardly working.” - Michael Scott Catch me on - Twitter | LinkedIn | GitHub

How to Make a Silky Smooth Scroll in React

As a recent Bootcamp grad I wanted to put my new React skills to work and tie in my older skills with AWS. I built out my new site, using React, and I thought to myself, “can I host this in an S3 bucket?” The first task is deploying to S3, which was pretty straightforward and there are many good resources that you can find with a little googling, like this , stepping through how to do that. portfolio one I was replacing an existing site with my new improved react site, so I already had the bucket set up and Route 53 configured etc. I pushed up my project and pulled it up in my browser and everything seemed to be working great. Success! But there was one big problem, if you hit the refresh button on the browser, you got a 404 error. Why was this? I had noticed this on a school project deployed to Heroku earlier but hadn’t had time to investigate then, now I wanted to get to the bottom of it. With some googling I found some explanations and some approaches to a fix but not the entire answer. There is a great explanation of the problem on stack overflow, I’ll try a quick explanation myself. here Basically, since React-router is “client-sided” navigation when you send a refresh command, the browser is stepping in and it looks for the index file at the end of the address path but there isn’t one. So, in my portfolio example, if you’re looking at the ‘/About’ page, in a traditional static website, there would be an index file in the ‘/About’ folder that the browser would go read and display on the page. But in React, ‘About’ is a component that React is instantiating on the page but there is no resource at the end of that path for the browser to look at. The browser is really always looking at the index file at the root of the site and react-router is reading the address bar and switching between components. After more googling around I got a big chunk of a solution in this by Mike Biek. The big insight here is that you can do some “server side” routing in AWS S3 using Redirection rules and conditional redirects. Conditional redirects allow you to react to error conditions so, when refresh is clicked and the page fails to load it would return a 404 error. post Using the Redirection rules we can prepend a ‘#!’ in front of the address, the browser won’t read anything after the ‘#’ ’ and will therefore go to your home '/' route page but we’ll still have the address available in the address bar to work with. Here is the file, copied right out of Mike Biek’s post… 404 myhostname.com #!/ 403 myhostname.com #!/ < > RoutingRules < > RoutingRule < > Condition < > HttpErrorCodeReturnedEquals </ > HttpErrorCodeReturnedEquals </ > Condition < > Redirect < > HostName </ > HostName < > ReplaceKeyPrefixWith </ > ReplaceKeyPrefixWith </ > Redirect </ > RoutingRule < > RoutingRule < > Condition < > HttpErrorCodeReturnedEquals </ > HttpErrorCodeReturnedEquals </ > Condition < > Redirect < > HostName </ > HostName < > ReplaceKeyPrefixWith </ > ReplaceKeyPrefixWith </ > Redirect </ > RoutingRule </ > RoutingRules To find where these rules go, open the S3 service on your AWS account. Click on the bucket you are using to host your project, then click on properties, then click on the square that says “Static website hosting. You’ll see a text box labeled “Redirection rules (optional)”. Copy and paste the code in here and make sure you edit the “myhostname.com” with what your domain actually is. After this rule is added, when you refresh, you won’t get a 404 error anymore. Instead you’ll be routed back to your home route, whichever component you have linked from your ‘/’ route. This is an improvement, but things could be better. Ideally we want to route back to the same component and my Nav isn’t reflecting which page I’m on properly, which is a different problem. Back to Mike Biek’s , he says to use ‘createBrowserHistory’ to work with the path directly. I tried to get this to work, but I could not, and after some further googling and reading found that createBrowserHistory had been abandoned and that devs should work with the location prop directly. I couldn’t find any examples of someone using it for this purpose but, I had some thoughts of my own. post I had to do some experimenting with the location object to figure it out. Basically the location object is created and passed into props anytime you follow a Route and it will be available in the component when it is instantiated. Inside the location object there is a 'pathname' key and a 'hash' key, the path from the address bar will be the 'pathname' value but if there is a ‘#’ in the address then everything from the ‘#’ on will be the 'hash' value. The layout of my portfolio site is simple, there are only two items in my Nav, one is 'Projects', which displays by default, the other is an 'About' page. My first iteration of a solution was to put a function in my default component that would read the location object and if there was a hash variable and it contained ‘#!/About’, using a Redirect from react-router switch back to the About component, otherwise it could stay on Projects. It looked like this… path = props.history.location checkPath = { (path.hash) { (path.hash.includes( )) { }
        }
    } const const => () if if '#!/About' return < = > Redirect push to '/About' </ > Redirect Now, things would not crash when a refresh button was clicked. If you were on About then you would get back to About and if you were on Projects, you would end up back on Projects. The transition would happen quick enough that it was basically invisible to the user. But my Nav was not reflecting which component was active properly. So, the other thing I needed to do at this stage was hoist control over displaying which Nav element was ‘active’ to the top level ‘App’ component. I created a state named ‘active’ which could hold which Nav element would be active, then created a function to set the active element and I passed down the function to the Nav and Project components. Like so… { (props) { (props) .state = { : }
  }
 setActive = { .setState({ : str })
  } class App extends Component constructor super this active 'Projects' ( ) => str this active This didn’t exactly work yet, things no longer broke when the refresh button was clicked, good, but the forward and back buttons would still screw up the active Nav item and it was not a very flexible system. The redirect worked fine with just two pages but, if I added more, I would need a series of ifs or a switch statement and that felt clunky. I decided to rework it again. First, I made a helper.js file and put my checkPath function in there. That way I could link to it from every component. I set it up so it would work from any page. If there is a 'hash' value in the location, the function grabs the hash path as a variable and strips out the extra characters, then redirects to that item. Also, the same function will set the active Nav item in a similar fashion. Looks like this… React { Redirect } { path = props.state.history.location (path.hash) { active = path.hash.replace( , )
       active = + active } (path.pathname) { active = path.pathname.replace( , )
       props.setActive(active)
   }

} import from 'react' import from 'react-router-dom' export ( ) function checkPath props const if let /\/|!|#/g '' '/' return < = > Redirect push to {active} </ > Redirect if let /\//g '' Next, I pass the setActive function down to each component in its Route declaration and, inside the component, import the setPath helper function, then call it inside the return statement of the component. You have to make sure you pass the props into the checkPath function so that it can use the setActive function. Also, my setActive function needed a little more work to make sure that the right Nav item was set active on the ‘/’ route and to keep the setState call from starting an endless loop. You’ll see in my code below. One more issue to resolve, now that I have no '404' error page displaying server-side, I need to set up a default or catch-all route that will display a message on a bad link or manually typed path that doesn’t match. This just requires adding a final Route which will display a component, I'm calling 'NoMatch', if none of the other Routes match. One more note on my code, I'm sending props down through the Route as 'state', you could call them whatever you want but if you don't implicitly pass them down then they will not be accessible in the component. I learned this the hard way, with much frustration, on a different project. Putting all this together looks like… In App.js… { (props) { (props) .state = { : }
  }

  setActive = { (!str) {
      str = } ( .state.active !== str) { .setState({ : str })
    }
  }

  render() { ( <div className="container flex-container-column">
          <Header></Header>
          <Nav active={this.state.active}></Nav>
          <Switch>
            <Route path="/" exact render={props => <Projects setActive={this.setActive} state={props} />} />
            <Route path="/About/" render={props => <Home setActive={this.setActive} state={props} />} />
            <Route path="/Projects/" render={props => <Projects setActive={this.setActive} state={props} />} />
            <Route path="/" render={props => <NoMatch setActive={this.setActive} state={props} />} />
          </Switch>
        </div>
        <Footer></Footer>
      </div>
    );
  }
} class App extends Component constructor super this active 'Projects' ( ) => str if 'Projects' if this this active return < = > div className "App flex-container-column" In your Components, it will look like this... { checkPath } { ( <div className="flex-container-column centered">
                {checkPath(props)}
                <div className='short'>
                    <p>Hmm, There doesn't seem to be anything here... Go back <Link to="/">Home?</Link></p>
                </div>
            </div> )
} import from '../helpers' ( ) function NoMatch props return < > div </ > div This solution works pretty well but its not perfect. If a user clicks refresh, the back button will not be able to get past that point because it will endlessly go to the hashed route and then redirect to the non-hashed route. Also, SEO won't find anything past the first page unless you set up some kind of server-side routing. But, this is a pretty good solution for little single page apps, portfolios and other simple projects. James C Rodgers is an AWS Certified Cloud Practitioner and a recent graduate of General Assemb.ly Full Stack Software Engineering Immersive Remote program Photo by Yuliya Kosolapova on Unsplash , edited by JCR

Handling Client Side Routing When Hosting Your React.js Project on AWS S3

Move over Next.js and Webpack 🤯

Web Application implementation based on React.js, Complete Example

The React Blog Series: Part One This article is part one in a weekly series on building a blog with React and is the foundation to the rest of this series. The React Blog Series Building a website with React and Bulma ( ) Replacing Redux Thunks with Redux Sagas Part One: Building a Blog with React and Contentful Part Two: Import your Medium Feed into React Part Three: Adding a Redux to a React Blog Part Four: Part Five: In Progress Setup So lets install React npm install -g create-react-app aaronklaser
cd aaronklaser
npm start Next, lets install some of the stuff we know we will need: React HelmetBulmaBulma ExtensionsMomentStyled Components npm install bulma bulma-extensions moment react-helmet styled-components --save Setup React to use Sass This might not be completely necessary because we will mainly be using Styled Components, but this will make import Bulma much easier. Now for the tricky part, we need to setup Sass but I don’t want to have to eject from create-react-app. I followed this . tutorial npm install --save node-sass-chokidar This will create .css files of our .scss files, which I’m not super crazy about but for now lets roll with it. We will want to ignore our css files in git, so add src/**/*.css to our .gitignore file. Install npm-run-all so we can include our scss build in npm start npm install --save npm-run-all In the package.json in the npm scripts, add build-css and watch-css, build-js and watch-js, and modify build and start to use all our new scss stuff. "scripts": {
  "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
  "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
  "start-js": "react-scripts start",
  "start": "npm-run-all -p watch-css start-js",
  "build-js": "react-scripts build",
  "build": "npm-run-all build-css build-js",  
  "test": "react-scripts test --env=jsdom",
  "eject": "react-scripts eject"
} NOTE: It is important to include the --include-path ./src --include-path ./node-modules on both build-css and watch-css. This allows our code find libraries like Bulma in our node-modules folder. Adding Bulma and Bulma Extensions We are going to include Bulma and any Bulma config in the index component. Start by rename index.css to index.scss then restart your app using npm start If nothing blow up, and your project now includes index.scss index.css then it means everything is working correctly. and Next, in your index.scss import bulma. @import 'bulma/bulma';
@import 'bulma-extensions/extensions'; But, I’m going to do some additions steps to include an additional color because Bulma doesn’t include purple in its default colors and I kind of want purple. // 1. Import the initial variables
@import "bulma/sass/utilities/initial-variables";
@import "bulma/sass/utilities/functions";

// 2. Setup your Custom Colors
$purple: hsl(275,87%,45%);
$purple-invert: findColorInvert($purple);

// 3. Add new color variables to the color map.
@import "bulma/sass/utilities/derived-variables.sass";

$addColors: (
  "purple":($purple, $purple-invert),
);

$colors: map-merge($colors, $addColors);

@import 'bulma/bulma';
@import 'bulma-extensions/extensions'; Everything should start up and your fonts on your standard create-react-app home page should look different. Now, that we have all our setup done lets get some basic layout items in place using Bulma. Basic Layout and Header Let me take a quick minutes to talk about my file structure because its a little different then what you might be use to seeing. Fractal File Structure I first found the idea of . The idea wasn’t very clear the first time I read the article but one thing popped out at me and it think I understand it. I could be completely wrong, but never the less, my method has worked VERY well from me other the last few months. It a kind of extension to the ReDucks pattern, except you create a kind of key value or parent child object structure with your files. fractal file structures on an article on Hackernoon src
|- index.js
|- App.js
|- app
   |- Layout.js
   |- layout
      |- Header.js
      |- Content.js
      |- Footer.js
|- User.js
|- user
   |- Profile.js
   |- PasswordReset.js
   |- Address.js
|- components
   |- SharedCompOne.js
   |- SharedCompTwo.js So you can see we are starting to group our code by module or feature, but we don’t create a billion folders for each component. Instead, we are keeping our components in their parent folder, using for each component name, and for that components children folder. The only real exception here is App.js is technically a child of index, but I’m not sure that counts 🤔. PascalCasing camelCasing The benefit of this is that we can clearly see that Header, Content, and Footer are all components used in the Layout component which is used in the App component. If the filed structure was flatter like this: /* This is NOT fractal */

src
|- index.js
|- App.js
|- layout
   |- Layout.js
   |- Header.js
   |- Content.js
   |- Footer.js Then we don’t have any real indication to the hierarchy of components or which components Layout.js is even used on, where as the fractal pattern shows you exactly who uses what components and where. Its a clear parent child structure, and layouts can even include a shared folder for components only shared within layout children. Remember how I mentioned key value structure earlier. This was the idea that made this all click in my head. So if you take my first example you think of it like this: src: {
  Index.js,
  App.js: {
    Layout.js: {
      Header.js
      Content.js
      Footer.js
    }
  }
  User.js: {
    Profile.js
    PasswordReset.js
    Address.js
  }
  components: {
    SharedCompOne.js
    SharedCompTwo.js
  }
} Our site starts to look like JSON data… kinda, but you get the point. A “key” is always a component .js file. The “value” is as always folder with its key’s name and it contains all of the children components. Where this really starts to shine is in your store, which I keep separate from my presentation layer (app). We can now start structuring our store like our data structure. This works REALLY well with NoSQL. We will get more into this later. Lets start with the App In the root Create a folder named app and create file in it named Layout.js In the app folder, create folder named layout In the layout folder, create 4 files: Site.js, Header.js, Content.js, and Footer.js will call the Layout component and later include our Redux Store. App.js will contain and , which are just a wrapper for the site and content so we can get flexbox set up correctly, and and components. Layout.js Site.js Content.js Styled Component Header.js Footer.js Heres the set up of those 5 files places into a single Gist for both our convenience. <a href="https://medium.com/media/bdc0571966cd548f7757fd0bad898af4/href">https://medium.com/media/bdc0571966cd548f7757fd0bad898af4/href</a> Setup Routing to Some Pages npm install react-router-dom We are building a simple website/blog so we are going to use BrowserRouter. There are other option you can explore but this is not the thread for that ;) At the root of our application in the src/index.js we are going wrap the app with the router. import ReactDOM from 'react-dom'
import registerServiceWorker from './registerServiceWorker'
import { BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import './index.css'

ReactDOM.render((
  <Router>
    <App />
  </Router>
), document.getElementById('root'))

registerServiceWorker() Then in the app folder, lets create two simple pages Home.js and Blog.js import React from 'react'

const Home = () => (
  <p>This is the Home Page</p>
)
export default Home and import React from 'react'

const Blog = () => (
  <p>This is the Blog Page</p>
)
export default Blog Now that we have some pages to route too, lets set up a Router component. For now, we are not going to try and do anything thing fancy with it, just the simple, straight forward Switch and Route. In our layout folder add a new file call Router.js . This router will live inside the on our Layout.js file. This wills house our basic top level pages. Content <Content>
  <Router />
</Content> Additional Routers components can be created in pages to add deeper nested routing. Our naming conventions for those in the future will be their parent component name and Router. Example, BlogRouter.js or HomeRoute.js. , they will live in a folder called blog. Remember In our router component, we need at the Switch component and inside it, a list or our routes using the Route component. import React from 'react'
import { Switch, Route } from 'react-router-dom'
import Home from './../Home'
import Blog from './../Blog'

const Router = () => (
  <Switch>
    <Route exact path='/' component={Home}/>
    <Route path='/blog' component={Blog}/>
  </Switch>
)

export default Router And Finally, lets go set up our Header to call these routes. For now, lets just make the changes for two pages we have routes for. We are going to modify our <a> on Blog and Logo Title nav items. <NavLink
  className="navbar-item"
  to="/"
  activeClassName="is-active"
>
  <img 
    style={{
      borderTopLeftRadius: '50%',
      borderTopRightRadius: '50%',
      borderBottomLeftRadius: '50%',
      borderBottomRightRadius: '50%',
      marginRight: 15
    }}
    src="https://media-exp2.licdn.com/mpr/mpr/shrinknp_400_400/AAEAAQAAAAAAAAU3AAAAJGE1MzYxNzYzLTE1NTUtNDEyYi04MzRjLTgzZjNkOGU0MGIzNg.jpg"
    width="30px" 
    alt="" 
  />
  <span>AaronKlaser.com</span>
</NavLink> and <NavLink
  className="navbar-item"
  to="/blog"
  activeClassName="is-active"
>
  <span className="icon has-text-primary" style={{ marginRight: 5 }}
    <i className="fas fa-code"></i>
  </span>
  Code Blog
</NavLink> Notice that we added activeClassName=”is-active” This is because that is the Bulma nav active class. The cool thing about NavLink is its always checking for what page your on, and if your route matches that NavLink to it will automagically add If you don’t want to add an active class, just simple us the Link component instead. is-active. Conclusion So this is the basic frame of the application. Review Set up a React site with create-react-app Set up React to build SassI Installed Bulma We learned about Fractal File Structures Created the site layout Set up Routing Added some pages to route to — Next Building a Blog with React and Contentful More to come! I will update this post accordingly.

Building a website with React and Bulma

What we will be building. In this tutorial, I am going to show you how to create a portfolio site using and . Vue Cosmic JS TL;DR View the demo View the codebase The portfolio site we are going to build will have 4 pages there are home, technologies, projects, and open sources. This site also will have 3 object types there are profiles, technologies, and projects. **Setup bucket**To create the bucket, login to and click add new bucket Cosmic JS Select start from scratch **Setup profiles object type**Click add object type menu and put Profile on singular name textbox Add the metafields below: 1. Introduction (plain text input) 2. Image (image/file) 3. About (HTML text area) 4. Facebook (plain text input) 5. Twitter (plain text input) 6. Github (plain text input) 7. Footer (plain text input) **Setup technologies object type**Click add object type menu and put Technology on singular name textbox Add the image metafield (image/file) **Setup projects object type**Click Add object type menu and put Projects on singular textbox Add the metafields below: 1. Short description (plain text input) 2. Image (image/file) 3. Technologies (multiple object relationship), select Technologies object type 4. URL (plain text input) 5. Open source (radio buttons), add two options there are Yes and No Dependencies This site use to create single page application. For the router it use . It also use ES6 so it need and for the module bundler. For template engine it use and as CSS preprocessor. Vue Vue Router Babel Webpack Jade Stylus Setup index.html In this file we include , , configuration and the core Javascript. Line 12 is where the app is mounted. Twitter Bootstrap Font Awesome Cosmic JS Vue Setup script.js This site use for the routing, you can see the routes on line 12–17. On line 6–10 to import the required component. Vue Router Setup App.vue This file contains router view component, footer, and global style. The template is on line 1–19. The components required by App.vue is imported on line 22–23. Line 42–49 to call API when the component is mounted and the style is on line 54–77. Cosmic JS Setup MainMenu.vue This file is for the main menu of the site. The template is on line 1–11 and in this template it use router link component from to create the anchor so the active class will be include automatically. The style is on line 13–30. Vue Router Setup Home.vue This file contains image and about text. The template is on line 1–15. Line 18 to include . Line 33–42 to call API when the component is mounted. And the style is on line 46–55. Cosmic JS Cosmic JS Setup Technologies.vue This file shows the contents from technology object type. The template is on line 1–15. Line 18 to include . Line 33–42 to call API when the component is mounted. And the style is on line 46–55. Cosmic JS Cosmic JS Setup Projects.vue and OpenSources.vue These two files show data from project object type, the different is Project.vue shows data from project object type when the metafield_value of open_source metafield_key is Yes and for OpenSources.vue is No. The template is on line 1–16. Line 18 to include . Line 28–34 to render the technologies array and on line 38–48 to call API with metafield_key is open_source and metafield_value is No for projects page and metafield_value is Yes for open source page. The style is on line 53–69. Cosmic JS Cosmic JS **Conclusion**This is the portfolio site built using and . I hope you like the tutorial and hopefully will help you. Vue Cosmic JS This article was on . Cosmic JS offers tools that help development teams build and manage apps faster. originally published Cosmic JS

How to Build a Portfolio Site Using Vue and Cosmic JS

Donating Compute to Fight COVID-19 At PEAK6 Capital Management, we have some beefy boxes for processing intraday data as you’ve probably already read about in . While we’re all fighting the spread of COVID-19 by working remotely and isolating, Kevin Newman of fame had a great idea on how we might do more. He shared out some work he’d done getting Folding@Home up and running in our #general chat: A Parable of Pricing, Processors, and Memory Simplifying Disaster Recovery with Pure ActiveCluster and VMWare MetroCluster @knewman: I've been struggling to think about how I can help in all of this given that I know about as much about medicine or biology as I do about power tools (embarrassingly little). It's also hard to be "socially distant" and do something useful at the same time 😄. My mom, for instance, knows how to sew, so she's joining a community group sewing emergency facemasks. I know compute, so I was excited to hear that I can redirect my many home computers and servers at something useful: Folding@Home. Kevin’s heads up in #general quickly got us thinking about how we might do even better putting PEAK6 machines to work too. What is Folding@Home? First, some quick background. is a Stanford Medicine project that uses donated compute to discover new protein folding patterns. Protein folding requires a lot of computation, so the Folding@Home project distributes the work across many different computers worldwide. Folding@Home Dividing the work allows each computer to do a bit of the computation. After the computation is done, the resulting protein folding patterns give insight to scientists and doctors so they can better treat the virus. If you want to read more about the platform and how they’re helping with COVID-19, Greg Bowman of the Folding@Home project has a great write-up . here Downloading Viruses for Good If you want to follow along and offer up some of your own compute, you can check out the Folding@Home installers site or guides . Whether you’re on a mac, windows, or linux machine, there are great installation instructions to get you up and running quickly. Once you’ve got things installed, you can open up both FAHControl and FAHViewer as pictured below. here here And that’s pretty much it. You can configure how much load and when to run, but otherwise, the FAHClient runs in the background picking up new work as it’s assigned. Also, you might notice the client idling a bit before getting assigned work. There were over 400,000 new downloads of the Folding@Home software last week, so a lot more scheduling is going on and they’re working on making sure all this compute gets put to use. Better with a Pinch of SALT Now, installing the Folding@Home client on a few machines is pretty easy, but what if you have to install it on a lot of machines? At PEAK6 we’re all about automation and repeatable builds, deploys, patching, etc. It allows us to quickly deliver our software as well as easily maintain all the parts and pieces that make up the various systems supporting our trading platform. It’s also really cool. We use , or Salt, for our systems’ automation. It’s similar to other distributed automation platforms like and . SaltStack Ansible Puppet In Salt, configuration is expressed in a Salt State module or YAML file that describes how the system should be configured. Here’s a quick example of folding-at-home.sls: {# Folding At Home Defaults #} {%- set fah_client_version = ‘7.4.4_amd64’ %} {%- set fah_control_version = ‘7.4.4-1_all’ %} fah: pkg.installed: - pkgs: - fahclient: {{ fah_client_version }} - fahcontrol: {{ fah_control_version }} service.running: - name: FAHClient file.managed: - name: /etc/fahclient/config.xml - user: fah_user - group: fah_group - mode: 644 - source: - salt: //ubuntu-common/files/etc/fahclient/config.xml The first three lines call out variables for the versions of the client and control software. The next defines a state call `fah` with three specifics: 1) the packages to install, 2) the services that should be running after the install, and 3) a managed file, which in this case is a Folding@Home configuration. Once we have this state defined, we can apply it throughout our environments as needed, pretty cool huh? Works in Docker / K8s Too If you’re more of a container / Kubernetes stack engineer, check out . This has both a Dockerfile with configuration for Folding@Home and several Kubernetes configuration files for deploying. https://github.com/richstokes/fah-k8s It's 10PM, Do You Know What Your Computers Are Doing? We do! After automating out the Folding@Home deployment on March 22, we had a pretty good showing even though it was our first run of it. The stats show us in the top 10% of donors for the day with a rank of 198,009 out of 2,294,579! Finance by Day, Folding by Night , CEO PEAK6 Capital Management, recently sent out a note to the firm reminding us of the importance of the work we’re doing in the markets. Given you might wonder what all these servers are doing during the day, I’d like to share Tom’s thoughts with you. Tom Simpson PEAK6 Capital Management is a market liquidity provider. That means we commit our energy, time, talent, and capital, to provide orderly and transparent stock and option markets. These markets create the liquidity customers and the overall market desperately need especially now with all the volatility and disruption caused by COVID-19. Put another way, PEAK6 Capital Management ensures financial institutions have a way to hedge their risk. When businesses big and small need to raise cash, or companies need to finance investment or current spending, our efforts ensure these financial institutions can confidently give and greatly reducing the impact of economic disruption. And, this is why, “financial markets, trading, and futures exchanges,” are near the top of the list of essential businesses and also why we work so hard to make sure our systems are online during this crisis. access to loans credit So, after our servers finish their day job in the markets, we’re now putting them to work fighting COVID-19 through protein folding. There are lots of other ways to get involved and help too, just like Kevin mentioned when he first put this idea out there. You can donate to charities and food banks, you can hack on COVID-19 AI challenges on , or even much needed supplies. Most importantly though, the best thing you can do is take care of yourself and make sure you’re fighting the spread by staying at home! Kaggle 3d print A Quick Note on Security As a quick note, we set up the Folding@Home project using the same restrictions and heavily audited profile we apply to our end-user desktop group. This is neat because other than installing the software, there are no extra firewall, proxy, or security configurations you’ll need to tweak in most cases. Folding@Home is pull-based with the client configured to direct communications to trusted servers at Stanford and digital signatures to verify the validity of all folding input and output. There is a remote access feature for expert users to enable across many clients, but out of the box, this is disabled and locks down communication to localhost. Although nothing is foolproof and you should always evaluate how new software impacts the security footprint of your ecosystem, we were impressed by both the ease and thoughtfulness of the solution. Kudos to the engineers! If you want more details, the Folding@Home project has security info . here Quick Update on 4/5/2020 We’ve been running the above Folding@Home setup during off hours for a little over 12 days. In that time we’ve been able to complete 858 work units for a total score of . Our rank after 12 days is 24,408 of 2,518,264 overall donors on Folding@Home in 2020. Awesome! 🚀 11,256,125 References Article on Covid-19 and GPUs, https://www.sdxcentral.com/articles/news/white-hat-hackers-fight-covid-19-donate-gpus-for-a-cure/2020/03/ Folding@Home Blog Post on Covid-19 Project, https://foldingathome.org/2020/03/15/coronavirus-what-were-doing-and-how-you-can-help-in-simple-terms/ Folding@Home Covid-19 Project, https://apps.foldingathome.org/project?p=14328 Folding@Home Kubernetes, https://github.com/richstokes/k8s-fah

Download This Virus

One engineer’s trials and tribulations attempting to comprehend one of the least known but most powerful services. security Windows Before reading this post, please be sure to read ‘s excellent post on Windows Event Forwarding: @jepayneMSFT Monitoring what matters — Windows Event Forwarding for everyone Additionally, also check out Microsoft’s Use Windows Event Forwarding to help with intrusion detection Introduction to Windows Event Forwarding If you’re new to the concept of Windows Event Forwarding (WEF), the long story short is that a service exists in Windows where you can specify one or more servers to operate as Windows Event Log collectors. These collectors server as subscription managers and allow you to cherry pick which event logs you would like to collect from endpoints and the forwarded logs are then stored in buckets on the collectors. When using the Windows Event Forwarding service, the event logs are transferred natively over WinRM, which means you don’t have to worry about installing any sort of log forwarder software (Splunk/WinLogBeat/etc) on all of your endpoints to send logs to a centralized location. Aside from the obvious benefit of not having to deploy any additional software, there are some great benefits to using WEF: • Events are encrypted via Kerberos by default• Subscriptions can be created as XML files and backed by versioning software like git (just be sure to validate the XML!)• New machines are automatically enrolled into the logging infrastructure after joining the domain• WEF can be configured in either push or pull mode• The forwarding interval can be modified Although there’s no shortage of documentation highlighting the benefits of using WEF, the primary focus of this writeup is to explain all of the components that need to exist for WEF to operate correctly and to document strategies for troubleshooting when things aren’t working as expected. Core Components of a WEF Installation There are countless guides on how to configure WEF available online of varying quality. The core components of the installation are: One or more servers to operate as the subscription manager and log collectors with the service running. Windows Event Log Collector All endpoints and subscription managers must have WinRM enabled. A GPO specifying the URL of the subscription manager(s). A tip I recently learned from Jessica’s post is that you can specify the check-in interval in this GPO by setting the refresh interval as shown in the screenshot below. Setting a short interval makes troubleshooting much easier in the long run but may be too noisy for production. 4. One or more event log subscriptions. A subscription is a collection of events based on Event ID’s or other criteria that tell the endpoints which event logs to forward. NSA’s Information Assurance group has an excellent set of subscriptions to use as a baseline: https://github.com/iadgov/Event-Forwarding-Guidance/tree/master/Subscriptions/samples 5. A GPO to add the account to the group. NETWORK SERVICE Event Log Readers https://docs.microsoft.com/en-us/windows/threat-protection/use-windows-event-forwarding-to-assist-in-instrusion-detection 6. A GPO to set ACLs on all relevant event log channels to allow read access by the Event Log Readers group. Many channels include that ACL by default, but the Security and other custom logs under the Microsoft/Windows service logs do not. More on creating that GPO here: https://support.microsoft.com/en-us/help/323076/how-to-set-event-log-security-locally-or-by-using-group-policy 7. Any organization who takes security seriously should have a GPO to enable enhanced auditing on windows enabled across their fleet: https://technet.microsoft.com/en-us/library/dn319056(v=ws.11).aspx These seven items may sound relatively straightforward, but there are a surprising number of areas where it’s easy to make a mistake. Additionally, many aspects of WEF are unintuitive and make working with it less than user-friendly. In the next section, we’ll cover the tools that are available to gain better insights into your WEF configuration. Gaining Insight Into Your WEF Infrastructure Once you’ve completed setup on your WEF infrastructure, you may find that hosts are not checking in, or certain events are not being forwarded. It can be confusing to understand why things are happening, but this section aims to give you the tools you need to effectively troubleshoot an installation. The Event Log Console On your WEF subscription manager you can see realtime statistics about your subscriptions via the Event Viewer console by selecting a subscription and clicking “Runtime status”: Subscriptions can also be edited by choosing “Properties > Select Events”. It’s possible to accidentally load subscriptions with broken XML via the wecutil command (ask me how I know). NOTE: wecutil and wevtutil wecutil (Windows Event Collector Utility) and wevtutil (Windows Event Utility) can also help you gain valuable insight into the current state of your subscriptions. You can see the last time a host checked in to a specific subscription by running from a subscription manager: wecutil PS C:\Windows> wecutil gr DNSSubscription: DNSRunTimeStatus: ActiveLastError: 0EventSources:dc.windomain.localRunTimeStatus: ActiveLastError: 0LastHeartbeatTime: 2017–07–22T07:54:27.296 To force a check in from a host, run . TIP: gpupdate /force is equally useful from the endpoint side to view things like event log channel ACLs: wevtutil PS C:\Windows> wevtutil get-log securityname: securityenabled: truetype: AdminowningPublisher:isolation: CustomchannelAccess: O:BAG:SYD:(A;;0xf0005;;;SY)(A;;0x5;;;BA)(A;;0x1;;;S-1–5–32–573)(A;;0x1;;;S-1–5–20)logging:logFileName: %SystemRoot%\System32\Winevt\Logs\security.evtxretention: falseautoBackup: falsemaxSize: 20971520publishing:fileMax: 1 If a channel you are attempting to pull events from does not contain the SID for Event Log Viewers (A;;0x1;;;S-1–5–32–573), it will not be able to be read and an error message will be generated in the log channel documented below. NOTE: Microsoft-Windows-Eventlog-ForwardingPlugin Event Log Channel This channel is a great place to look when trying to determine why events from specific subscriptions aren’t coming in. Microsoft-Windows-Eventlog-ForwardingPlugin/Operational This log exists deep within the event viewer on each enrolled endpoint that logs windows event forwarding runtime status information. Unfortunately for us, the error codes displayed in these messages don’t seem to be documented anywhere. Fortunately for you, I’ve anecdotally determined what some of them mean. Here are the following errors I’ve come across in this logfile: The subscription $name can not be created. The error code is 15008. : The subscription XML is malformed or the subscription is somehow invalid : Update the XML to be valid. Error Message: Issue Solution The subscription $name is created, but one or more channels in the query could not be read at this time. Event Log Reader group does not have read access to a channel specified in that subscription : Use wevtutil to view the current ACL on the relevant channels and create/update a GPO to allow read access to that log channel Error Message: Issue: Solution The subscription $name can not be created. The error code is 5004. A channel specified in the description does not exist on the host This is not necessarily a problem. If you have a subscription meant for DNS servers and only your Domain Controllers run DNS, you might see this error message on any server that doesn’t have the corresponding DNS server log channel. Error Message: Issue: Solution: Wrapping It Up Properly administering WEF infrastructure requires a wide range of skills. The user should have a solid understanding of Group Policy, Event Log ACLs, Advanced Auditing, Powershell, and Active Directory. It’s tricky to properly configure WEF initially, but in my experience it has been rock solid and extremely performant. I highly recommend configuring WEF if you have a Windows domain in your environment and I hope this guide helps you work through any problems you may encounter along the way!

Stories, News & Mentions about ACTIVECLASS

Activeclass’s Stories on HackerNoon