Today you will learn how to build your own clone of the 2048 game in React. What makes this article unique is that we will focus on creating delightful animations. Aside from React, we will use TypeScript and we'll make some CSS transitions using LESS. We are only going to use modern React interfaces such as hooks and the Context API. This article contains a few external resources such as: 2048 Game (GitHub Pages) Animation Examples for 2048 (GitHub Pages) Source Code (GitHub) ...and a YouTube video. It took me more than a month to prepare this tutorial, so it would mean the world to me if you watch it, smash the like button, and subscribe to my channel. Thank you! 2048 Game Rules In this game, the player must combine tiles containing the same numbers until they reach the number 2048. The tiles can contain only integer values starting from 2, and that are a power of two, like 2, 4, 8, 16, 32, and so on. Ideally, the player should reach the 2048 tile within the smallest number of steps. The board has dimension of 4 x 4 tiles, so that it can fit up to 16 tiles. If the board is full, and there is no possible move to make like merging tiles together - the game is over. While creating this tutorial I took shortcuts to focus on the game mechanics and animations. What did I get rid of? In our example, the game always creates a new tile with the number 2. But in the proper version it should generate a random number (either 2 or 4 - to make it harder to play). Also, we will not handle wins and loses. You can play after you complete the number 2048, and nothing happens when the board is unsolvable - you need to click the reset button. I skipped the scoring. If you want you can implement those missing features on your own. Just fork my repository and implement it on your own setup. The Project Structure The application contains the following elements: Board (component) – responsible for rendering tiles. It exposes one hook called . useBoard Grid (component) – renders 4x4 grid. Tile (component) – responsible for all animations related to the tile, and rendering the tile itself. Game (component) – combines all elements above together. It includes a hook which is responsible for enforcing the game rules and constrains. useGame How to Build the Tile Component We want to invest more time in animations, so I will start the story from the Tile component. In the end, this component is responsible for all animations in the game. There are only two fairly simple animations in 2048 – tile highlighting, and sliding it across the board. We can handle those animations with CSS transitions by declaring the following styles: {
  // ... : transform; : ; : (1);
} .tile transition-property transition-duration 100ms transform scale At the current moment I defined only one transition that will highlight the tile when it is created or merged. We will leave it like that for now. Let's consider how the Tile meta data is supposed to look, so we can easily use it. I decided to call it since we don't want to have the name conflict with other entities such as the Tile component: TileMeta TileMeta = {
  id: ;
  position: [ , ];
  value: ;
  mergeWith?: ;
}; type number number number number number – the unique identifier of the tile. It is important so that the React DOM doesn't re-render all tiles from scratch on every change. Otherwise, we would see all tiles highlighted on every action of the player. id – the position of the tile on the board. It is an array with two elements, the and coordinate (the possible values are - in both cases). position x y 0 3 – the tile value. Only the power of two, starting from . value 2 – (optional) the id of the tile which is going to absorb the current tile. If it is present, the tile should be merged into another tile, and disappear. mergeWith How to Create and Merge Tiles We want to somehow highlight that the tile changed after the player's action. I think the best way would be changing the tile's scale to indicate that a new tile has been created or one has been changed. Tile = { [scale, setScale] = useState( ); prevValue = usePrevProps< >(value); isNew = prevCoords === ; hasChanged = prevValue !== value; shallAnimate = isNew || hasChanged;

  useEffect( { (shallAnimate) {
      setScale( );
      setTimeout( setScale( ), );
    }
  }, [shallAnimate, scale]); style = {
    transform: ,
  }; (
    <div className={ } style={style}>
      {value}
    < export const ( ) => { value, position }: Props const 1 const number const undefined const const => () if 1.1 => () 1 100 const `scale( )` ${scale} return `tile tile- ` ${value} /div>
  );
}; To trigger the animation, we need to consider two cases: a new tile – the previous value will be . null the tile changed the value – the previous value will be different than the current one. And the result is the following: You might've noticed that I'm using a custom hook called . It helps to track the previous values of the component properties (props). usePrevProps I could use references to retrieve the previous values but it would clutter up my component. I decided to extract it into a standalone hook, so the code is readable, and I can use this hook in other places. If you want to use it in your project, just copy this snippet: { useEffect, useRef } ; usePrevProps = <K = > { ref = useRef<K>();

  useEffect( {
    ref.current = value;
  }); ref.current;
}; import from "react" /**
 * `usePrevProps` stores the previous value of the prop.
 *
 * @param {K} value
 * @returns {K | undefined}
 */ export const any ( ) => value: K const => () return How to Slide Tiles Across the Board The game will look janky without animated sliding of tiles across the board. We can easily create this animation by using CSS transitions. The most convenient will be to use properties responsible for positioning, such as and . So we need to modify our CSS styles to look like this: left top { : absolute;
  // ... : left, top, transform; : , , ; : (1);
} .tile position transition-property transition-duration 250ms 250ms 100ms transform scale Once we've declared the styles, we can implement the logic responsible for changing a tile's position on the board. Tile = { [boardWidthInPixels, tileCount] = useBoard(); useEffect( { }, [shallAnimate, scale]); positionToPixels = { (position / tileCount) * (boardWidthInPixels );
  }; style = {
    top: positionToPixels(position[ ]),
    left: positionToPixels(position[ ]),
    transform: ,
    zIndex,
  }; }; export const ( ) => { value, position, zIndex }: Props const // ... => () // ... const ( ) => position: number return as number const 1 0 `scale( )` ${scale} // ... As you can see, the equation in the function needs to know the position of the tile, the total amount of tiles per row and column, and the total board length in pixels (width or height – same, it is a square). The calculated value is passed down to the HTML element as an inline style. positionToPixels Wait a minute... but what about the hook and property? useBoard zIndex allows us to access the properties of the board within the children components without passing them down. The Tile component needs to know the width and total count of tiles to find the right spot on the board. Thanks to React Context API we can share properties across multiple layers of components without polluting their properties (props). useBoard is a CSS property that defines the order of tile on the stack. In our case it is the id of the tile. As you can see on the gif below, the tile can be stacked on each other, so the enabled us to specify which one will be on top. zIndex zIndex How to Build the Board Another important part of the game is the Board. The component is responsible for rendering the grid and tiles. Board It seems like the Board has duplicated business logic with Tile component, but there is a small difference. The Board holds information about its size (width and height), and number of columns and rows. It's the opposite of the Tile which only knows its own position. Props = {
  tiles: TileMeta[];
  tileCountPerRow: ;
}; Board = { containerWidth = tileTotalWidth * tileCountPerRow; boardWidth = containerWidth + boardMargin; tileList = tiles.map( (
    <Tile key={ } {...restProps} zIndex={id} />
  )); (
    <div className= style={{ width: boardWidth }}>
      <BoardProvider containerWidth={containerWidth} tileCountPerRow={tileCountPerRow}>
        <div className= >{tileList}< >
      < div>
  );
}; type number const ( ) => { tiles, tileCountPerRow = 4 }: Props const const const ( ) => { id, ...restProps } `tile- ` ${id} return "board" "tile-container" /div>
        <Grid / /BoardProvider>
    </ The Board component uses the to distribute the width of the tile container and amount of tiles per row and column to all tiles and the grid component. BoardProvider BoardContext = React.createContext({
  containerWidth: ,
  tileCountPerRow: ,
}); Props = {
  containerWidth: ;
  tileCountPerRow: ;
  children: ;
}; BoardProvider = ({
  children,
  containerWidth = ,
  tileCountPerRow = ,
}: Props) => { (
    <BoardContext.Provider value={{ containerWidth, tileCountPerRow }}>
      {children}
    < const 0 4 type number number any const 0 4 return /BoardContext.Provider>
  );
}; The uses the React Context API to propagate properties down to every child. If any component needs to use any value available on the provider it can retrieve it by calling the hook. BoardProvider useBoard I am going to skip this topic since I spoke more about it in my . If you wish to learn more about them you can watch it. video on Feature Toggles in React useBoard = { { containerWidth, tileCount } = useContext(BoardContext); [containerWidth, tileCount] [ , ];
}; const => () const return as number number How to Build the Game Component Now we can specify the rules of game, and expose the interface to play the game. I am going to start with the navigation since it will help you understand why the game logic is implemented that way. { useThrottledCallback } ; Game = { [tiles, moveLeft, moveRight, moveUp, moveDown] = useGame(); handleKeyDown = { e.preventDefault(); (e.code) { :
        moveLeft(); ; :
        moveRight(); ; :
        moveUp(); ; :
        moveDown(); ;
    }
  }; throttledHandleKeyDown = useThrottledCallback(
    handleKeyDown,
    animationDuration,
    { leading: , trailing: }
  );

  useEffect( { .addEventListener( , throttledHandleKeyDown); { .removeEventListener( , throttledHandleKeyDown);
    };
  }, [throttledHandleKeyDown]); <Board tiles={tiles} tileCountPerRow={ } />;
}; import from "use-debounce" const => () const const ( ) => e: KeyboardEvent // disables page scrolling with keyboard arrows switch case "ArrowLeft" break case "ArrowRight" break case "ArrowUp" break case "ArrowDown" break // protects the reducer from being flooded with events. const true false => () window "keydown" return => () window "keydown" return 4 As you can see, the game logic will be handled by the hook that exposes the following properties and methods: useGame – an array of tiles available on the board. It uses the TileMeta type described above. tiles – a function that slides all tiles to the left side of the board. moveLeft – a function that slides all tiles to the right side of the board. moveRight – a function that slides all tiles to the top of the board. moveUp – a function that slides all tiles to the bottom of the board. moveDown We use the callback to prevent players from flooding the game with tons of moves at the same time. Basically, the player needs to wait until the animation is complete before they can trigger another move. throttledHandleKeyDown This mechanism is called throttling. I decided to use the hook from the package. useThrottledCallback use-debounce How to Use the useGame Hook I mentioned above that the Game component will be handling the rules of the game as well. We are going to extract the game logic into a hook rather than writing it directly onto the component (since we don't want to clutter the code). The hook is based on the hook which is a built-in hook within React. I will start by defining the shape of the reducer's state. useGame useReducer TileMap = { 
  [id: ]: TileMeta;
} State = {
  tiles: TileMap;
  inMotion: ;
  hasChanged: ;
  byIds: [];
}; type number type boolean boolean number The state contains the following fields: – a hash table responsible for storing tiles. The hash table makes it easy to lookup entries by their keys, so it is a perfect match for us since we want to find tiles by their ids. tiles – an array containing all ids in the expected order (that is, ascending). We must keep the right order of tiles, so React doesn't re-render the whole board every time we change the state. byIds – keeps track of tile changes. If nothing has changed the new tile will not be generated. hasChange – determines if tiles are still moving. If they are, the new tile will not be generated until the motion is completed. inMotion Actions requires to specify the actions that are supported by this reducer. useReducer Action =
  | { : ; tile: TileMeta }
  | { : ; tile: TileMeta }
  | { : ; source: TileMeta; destination: TileMeta }
  | { : }
  | { : }; type type "CREATE_TILE" type "UPDATE_TILE" type "MERGE_TILE" type "START_MOVE" type "END_MOVE" What are those actions responsible for? – creates a new tile, and appends it into the tiles hash table. It changes the flag to since this action is always triggered when a new tile is appended to the board. CREATE_TILE hasChange false – updates an existing tile. It doesn't modify the id which is important to keep the animations working. We will use it to reposition the tile and change its value (during merges). Also, it changes the flag to . UPDATE_TILE hasChange true – merges a source tile into a destination tile. After this operation, the destination tile will change its value (the value of the source tile will be added into it). And it will remove the source tile from the tiles table and array. MERGE_TILE byIds – tells the reducer it should expect multiple actions, so it must wait until all animations are complete before it will be able to generate a new tile. START_MOVE – tells the reducer all actions were completed, and it can safely create a new tile. END_MOVE If you don't understand why we defined those actions, don't worry – now we are going to implement a hook which will hopefully shed some light on it. How to Implement the Hook Let's look into the function which is responsible for a player's moves. We will focus on the move left only since the other ones are almost the same. moveLeftFactory = { retrieveTileIdsByRow = { tileMap = retrieveTileMap(); tileIdsInRow = [
        tileMap[tileIndex * tileCount + ],
        tileMap[tileIndex * tileCount + ],
        tileMap[tileIndex * tileCount + ],
        tileMap[tileIndex * tileCount + ],
      ]; nonEmptyTiles = tileIdsInRow.filter( id !== ); nonEmptyTiles;
    }; calculateFirstFreeIndex = (
      tileIndex: ,
      tileInRowIndex: ,
      mergedCount: ,
      _: ) => { tileIndex * tileCount + tileInRowIndex - mergedCount;
    }; move.bind( , retrieveTileIdsByRow, calculateFirstFreeIndex);
  }; moveLeft = moveLeftFactory(); const => () const ( ) => rowIndex: number const const 0 1 2 3 const ( ) => id 0 return const number number number number return return this const As you can see, I decided to bind two callbacks to the function. This technique is called the inversion of control – so the consumer of the function will be able to inject their own values into the executed function. move If you don't know how works you should learn about it because it is a very common question on job interviews. bind The first callback called is responsible of finding all non-empty tiles available in a row (for horizontal moves – left or right). If the player does the vertical (up or down) moves we will look for all tiles in a column. retrieveTileIdsByRow The second callback called finds the closest position to the board's border based on the given parameters such as tile index, index of the tile in row or column, number of merged tiles, and the maximum possible index. calculateFirstFreeIndex Now we are going to look into the business logic of the function. I've explained the code of this function in the comments. The algorithm might be a bit complex, and I believe It will be easier to understand it if I document the code line by line: move RetrieveTileIdsByRowOrColumnCallback = []; CalculateTileIndex = (
    tileIndex: ,
    tileInRowIndex: ,
    mergedCount: ,
    maxIndexInRow: ) => ; move = (
    retrieveTileIdsByRowOrColumn: RetrieveTileIdsByRowOrColumnCallback,
    calculateFirstFreeIndex: CalculateTileIndex
  ) => { dispatch({ : }); maxIndex = tileCount - ; ( tileIndex = ; tileIndex < tileCount; tileIndex += ) { availableTileIds = retrieveTileIdsByRowOrColumn(tileIndex); previousTile: TileMeta | ; mergedTilesCount = ; availableTileIds.forEach( { currentTile = tiles[tileId]; (
          previousTile !== &&
          previousTile.value === currentTile.value
        ) { tile = {
            ...currentTile,
            position: previousTile.position,
            mergeWith: previousTile.id,
          } TileMeta; throttledMergeTile(tile, previousTile); previousTile = ; mergedTilesCount += ; updateTile(tile);
        } tile = {
          ...currentTile,
          position: indexToPosition(
            calculateFirstFreeIndex(
              tileIndex,
              nonEmptyTileIndex,
              mergedTilesCount,
              maxIndex
            )
          ),
        } TileMeta; previousTile = tile; (didTileMove(currentTile, tile)) { updateTile(tile);
        }
      });
    } setTimeout( dispatch({ : }), animationDuration);
  }; type ( ) => tileIndex: number number type number number number number number const // new tiles cannot be created during motion. type "START_MOVE" const 1 // iterates through every row or column (depends on move kind - vertical or horizontal). for let 0 1 // retrieves tiles in the row or column. const // previousTile is used to determine if tile can be merged with the current tile. let undefined // mergeCount helps to fill gaps created by tile merges - two tiles become one. let 0 // interate through available tiles. ( ) => tileId, nonEmptyTileIndex const // if previous tile has the same value as the current one they should be merged together. if undefined const as // delays the merge by 250ms, so the sliding animation can be completed. // previous tile must be cleared as a single tile can be merged only once per move. undefined // increment the merged counter to correct position for the consecutive tiles to get rid of gaps 1 return // else - previous and current tiles are different - move the tile to the first free space. const as // previous tile becomes the current tile to check if the next tile can be merged with this one. // only if tile has changed its position will it be updated if return // wait until the end of all animations. => () type "END_MOVE" The complete code of this hook has more than 400 lines of code, so instead of pasting it here I decided to keep it on GitHub – so please . review the complete code there Summary I hope you enjoyed my tutorial. This time I decided to focus on the essence of the topic rather than building basic React and CSS, so I skipped those basic parts. I believe it makes this article easier to digest. Any feedback or questions? ! Shout at me on twitter If you found this article helpful please share it, so more developers can learn from it. Occasionally I , and it would be great if you subscribe to my channel, hit the like button, and drop a comment under your favourite video. publish videos on my YouTube channel Stay tuned! This article was first published at: https://www.freecodecamp.org/news/how-to-make-2048-game-in-react/

Twitter

YouTube

2022 - HackerNoon Contributor of the Year - Game Development

2022 - HackerNoon Contributor of the Year - Games

2022 - HackerNoon Contributor of the Year - Typescript

Subscribe to my weekly newsletter on growing software engineer career

Nominated for 2022 - HackerNoon Contributor of the Year - Games

Nominated for 2022 - HackerNoon Contributor of the Year - Game Development

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

How I Remade 2048 Using React

Video games have been amusing both children and adults for decades. They've come a long way since the early days of computer games and the original Nintendo and Atari consoles. Video games have gotten more lifelike than ever before, with pixelated graphics and limited acoustics becoming a distant past. Video games improve in tandem with technological advancements. The expense of developing a game for one of the major consoles has risen in tandem with the increasing complexity of video game development. It was once inconceivable to spend millions on game production, but today's games can cost tens of millions, if not hundreds of millions of dollars. In terms of production and marketing costs, this has pushed game development into Hollywood movie territory. The Arrival of 5G By 2021, it is almost expected that 5G mobile services will be available worldwide. This is a huge step that will very certainly enhance mobile upload and download speeds significantly. It's especially important because most online games rely on fast internet rates to run smoothly. Furthermore, it would expand the gaming community because more consumers will be able to use 5G to stream and play games on their smartphones and tablets with relative ease. Cloud Gaming As a result of the success of Software-as-a-Service (SaaS) and Platform-as-a-Service (PaaS), the model has been applied in the gaming industry as Gaming as Services (GaaS). This model could revolutionize the game business. Many video game firms are likely to migrate to this business model soon. This type of service would allow gamers to play online games regardless of their PC or mobile device configuration. To put it another way, an end-user would be able to play online games on a typical device without seeing any performance degradation. Furthermore, because all of the games are online, such a system would eliminate the need for software upgrades. A Great New Experience through Augmented & Virtual Reality (AR & VR) AR & VR have the upper hand when it comes to creating an immersive gaming experience. Both AR and VR have come a long way from their conception to become what they are now. By 2021, both AR and VR technologies will have progressed to provide a more realistic visual experience. Without the requirement for a display monitor, video game makers might employ this technology to improve the whole gaming experience. According to the stats, both of these technologies will generate close to $20 billion in income by 2021. Until recently, gaming was a mainly centralized activity, with all data, assets, and in-game currency typically restricted to the game from which they came and the developers maintaining complete ownership of such materials. With the integration of blockchain, a decentralized gaming future might emerge, where objects won or purchased in one game could be transferred and utilized in another, giving digital in-game assets real-world worth. Because of the present centralized nature of video gaming, users don't own the in-game things they've won; if they stop playing a game, or if the game's servers are hacked or shut down by the producers, anything they've accumulated would be lost forever. Blockchain Gaming Blockchain gaming is a type of game that uses the same technology that underpins cryptocurrencies like Bitcoin and Ethereum to provide actual item ownership. It's a game-changing invention for players who had previously accepted that their things would be stuck in games indefinitely. In most games, players are used to wall gardens that prevent them from freely moving things in and out. To gamers who have been staring up at these Attack On Titan-sized barriers hoping for something to shake up their environment, blockchain acts more like a battering ram or the kool-aid guy. People are flocking to blockchain/NFT gaming because it allows them to accomplish something that gamers have wanted to do for decades: move and sell stuff. They aren't doing it to make a fast profit; they are doing it because they enjoy their activity and don't want it to seem like a harmful codependent relationship with these games. It can be aggravating to invest a lot of money, time, and energy into a game only to find that there isn't enough to do, the server goes down, the game is no longer available, and so on. Some gamers also find themselves in a bind, competing against others who spend more money in-game than they do, ensuring that they will never be able to beat them. Conclusion We're talking about fantasy sports, which have been able to capitalize on cricket's popularity in India. It is no longer limited to cricket, as many other genres are making their mark. The rapid growth of this market has drawn the attention of several stakeholders, who have urged for the establishment of a self-regulatory body dedicated solely to online fantasy sports in India. Such advancements point to the potential for these types of video games to expand in popularity. Above all, many countries have the potential to develop into future video gaming hubs. This article is part of The hosted by HackerNoon in partnership with Gaming Metaverse Writing Contest . The Sandbox Submit your today for your chance to win up to $2000. #gaming-metaverse story

The Sandbox

Nintendo

Read My Stories

The Gaming Industry is Going Through a Revolution in 2021

Now that NFTs are back on the rise, many investors are trying to find a way in, but it can be hard to identify value in the enigmatic world of collectibles. Between April 12th and August 13th, the total number of sales involving NFTs in the art industry . The huge increase in sales represents this year's second period of intense NFT hype. Nowhere is the euphoria surrounding NFTs seen more clearly than in the $400,000 made by 12-year old for minting a series of pixelated pictures of whales wearing cowboy hats or smoking pipes. more than doubled London-based Benyamin Ahmed The majority of people purchasing NFTs see them as an investment and, despite the mania surrounding NFTs, this makes sense. Purchasing physical art has long been a great way to store value so it makes sense that the same could be true of digital art. The blockchain provides proof of ownership and sales history to digital art which adds a layer of authenticity over physical art which can be counterfeited. With that in mind, creating a good NFT collection is something a lot of people are investigating. What NFTs Are Right for Me? How does someone choose the correct NFTs to collect? There are thousands of different collections and the success or failure of each one can seem almost random at times. Of course, there are no guarantees when it comes to crypto, specifically NFTs. However, there are a few things that you might want to watch out for when looking into the space. The first factor to consider is uniqueness. It may seem obvious but if you're creating something to be sold as a piece of art you should try to make a collection where everything is unique. Perhaps the most famous early example of NFT usage is the collection known as and they are a perfect example of how uniqueness is maintained even across large collections. Each CryptoPunk is a combination of different characteristics generated automatically to ensure that no two punks are identical. The 10,000 of these minted in 2017 were given away for free but can now be sold for a minimum of a quarter of a million dollars each. CryptoPunks The uniqueness of a piece of art gives it its own individual personality and of course, increases its rarity. But there are different levels of uniqueness. Lucky Maneki is an NFT collection of 14,150 feline characters modeled after Japanese lucky cats. Similar to CryptoPunks, each one is a unique combination of 410 potential “lucky” properties. These properties include backgrounds, faces, bodies, items, and hidden messages. Each of these properties has its own level of rarity. A combination of some of the rarer properties will result in your Maneki being classed as rare, and having much greater value. The tiered rareness system used by Lucky Maneki and many others encourages much broader participation. It creates an ecosystem that contains massively valuable NFT items while also holding NFTs more accessible to average investors.  Whether or not your collection should have varying degrees of rareness and what status a particular NFT has is certainly something you should be aware of before getting started. Another factor to consider is how active the community that surrounds the NFT collection is. This can be difficult to define and is influenced by a number of different factors. One way to tell if an NFT has an active community is if the NFTs can be used as part of an active blockchain game. is another game to keep your eye on. Players collect NFT “Axies” which are roughly similar to Pokémon. Each Axie can then be battled across a network of different games. Battling an Axie against another player’s monster will increase its experience and its value. Axie Infinity With more than a quarter of a million daily active players all competing to earn money from the ecosystem, Axie is proof that the competitive nature of blockchain gaming enables community involvement. It also ensures that the NFTs, which have in-game use cases, maintain their value. An online community will also prosper around regular giveaways that encourage users to actively engage in the ecosystem. is one of the largest peer-to-peer marketplaces for NFTs. Every month they hold a lottery where holders of the NFT tickets are able to participate in a lottery to win funds collected from sales. These kinds of events encourage greater community involvement and they are seen across many different NFT collections. Lucky Maneki also hosts raffles along with quests and even a community bank, all of which can be accessed just by holding a Maneki in your wallet. Open Sea The final factor you might want to look out for when starting an NFT is how ties to other media can contribute to its success. NFTs have become a technology that Hollywood uses to advertise their films. It began in March, when launched NFT collections to promote their film, Godzilla vs Kong. Legendary Entertainment The NFTs contained images and GIFs of the two Monsters fighting. Since then, many other Hollywood Studios have joined in the craze including Marvel, who is now creating NFTs of popular Marvel characters. NFTs from sets such as these could well prove to be valuable amongst the massive fan bases that these franchises already have. While these kinds of tie-ins are impossible to those creating their first NFT collection, it's not just massive Hollywood franchises that are tying to film and TV. gives creators the means to finance their own independent entertainment projects by minting what they call “Snippetz”. NFTs TokenSociety These are short clips of each episode sold to fans of the project as NFTs. Each Snippetz can carry real-world experiences and physical assets. TokenSociety launched this project by funding a TV production called “Men of the House” with Snippetz sales to a private group of collectors. The show will appear on streaming services, cable, and network TV, and revolves around the life-inspired challenges of a father and his three sons. Entering The Market NFTs create a lot of buzz and hype and it can be difficult at times to not get caught up by it. Just like with a crypto portfolio holding a few different types of NFTs is the key to a diversified and healthy collection. Investors should look to hold both low-value and high-value NFTs in the same way they might hold both majors and alt-coins. NFT drops are some of the best ways to get your hands on newly minted NFTs so following NFT project Twitter accounts and getting involved in NFT Discord chats are a great route for investors into the space. As Telegram is to Crypto, Discord is to NFTs. This is by no means a comprehensive list of what goes into the creation of a successful NFT collection. But hopefully, this list gives you an idea of some of the factors that go into creating something that’s diverse and has long-term potential. This article is part of The hosted by HackerNoon in partnership with Gaming Metaverse Writing Contest The Sandbox . Submit your today for your chance to win up to $2000. #gaming-metaverse story

Axie Infinity

Community Is

Funding

Getting Started in the World of NFT Collectibles

HackerNoon Reporter: Please tell us briefly about your  background. 25+ years experience in Technology, with a particular focus on Telecoms, FinTech, and digital innovation. I have worked for large corporates, such as Vodafone and the Bharti Enterprises, and also for small ventures and startups, like Triple Payments and Beema Insurance Solutions. I think I am one of those guys who started technical, then moved into general management, and eventually became a founder. What's your startup called? And in a sentence or two, what does it do? The name is MyValet, and what it does is very simple: updates car parking and car services to the 21st Century. What is the origin story? Very simple, I am afraid. As users, I and my partner and co-founder Keba SOW, realized that most parking and car services are still operated in the “traditional” way: paper, pen, stamp, cash. So, we wondered: can we do something to change this and offer them and their customers an amazing end-to-end experience? We have been so lucky and blessed to find a VC who shared this view (Fil Rouge Capital), and here we are. What do you love about your team, and why are you the ones to solve this problem? The team is still very small as of now. I love that we are always in touch, we share all risks and decisions and we don’t spend too much time on thinking, but rather on acting. We are the ones who solve the problems simply because we are the ones who do almost everything. If you weren’t building your startup, what would you be doing? Oh! I am not sure. I would probably be somewhere running someone else’s startup, or working as a business advisor or executive director. It goes without saying that running your own startup is a different level of fun (and pain). At the moment, how do you measure success? What are your core metrics? Downloads, traction, and revenue. What’s most exciting about your traction to date? That we managed to sign an exclusive contract with Fasttrack UAE, and we are launching the service while we speak! This is a unique opportunity to work with a large business entity in the Gulf countries and deliver our best to support their digitalization process. What technologies are you currently most excited about, and most worried about? And why? I am not worried about technology; I am worried about the people who use them in the wrong way. But when it comes to getting excited, I think AI gets most of my attention these days. It’s incredible to see how many different applications and use cases this tech can cover, and while it keeps covering, it keeps growing and getting better and better. One of the most logical evolutions for us would be the adoption of AI tech specialized in parking management and car services. What drew you to get published on HackerNoon? What do you like most about our platform? It’s very user-friendly and smart. It allows people like me to build and share content in minutes. What advice would you give to the 21-year-old version of yourself? Keep your mouth connected to your brain more often. What is something surprising you've learned this year that your contemporaries would benefit from knowing? Well, I guess the pandemic has changed our lives forever. What have I learned? To tend to think more out of the box, to look for solutions even where it seems there are no solutions. And also that people who think in the “traditional” and static way and are unmovable from their positions are not good for me. Vote for MyValet for Startup of the Year, Zagreb

Different

Keep

How Do You Measure Success? Downloads, Traction, and Revenue

HackerNoon Reporter: Please tell us briefly about your background. I'm Charley, cofounder/CTO of Remotion.  I'm currently located in Chicago, Illinois, but I used to work in SF at Google. What's your startup called? And in a sentence or two, what does it do? is a virtual office that puts your hybrid team right on your desktop. It helps you connect with your team like everyone's together. Remotion What is the origin story? Back in 2019, I was in the process of moving to Chicago for my partner's career. At the time, I was working on a different startup idea with my cofounder, Alexander. We were used to working in person in SF, and we immediately noticed how much harder it was to work creatively and collaboratively when not colocated. We looked through a variety of tools, and realized that no one had made the right product to solve our problems yet - so we built it ourselves! What do you love about your team, and why are you the ones to solve this problem? Our team is highly distributed and motivated to solve the problems of Remote work. Everyone on the team is constantly thinking about how we can improve our product to help ourselves become even more collaborative. If you weren’t building your startup, what would you be doing? Probably building some other kind of software tool! At the moment, how do you measure success? What are your core metrics? Call minutes, number of calls, average call lengths. We get excited to see lots of short <5 min calls where people are getting answers to quick questions, and lots of long >1 hr calls where people are hanging out and coworking. What’s most exciting about your traction to date? Our recent launch on Product Hunt ( ) - most importantly, it was incredible seeing all the reviews by our passionate users! https://www.producthunt.com/posts/remotion-2-0 What technologies are you currently most excited about, and most worried about? And why? Hybrid work tools are really exciting - I'm looking forward to being able to go back into office, but it won't look the same. I want to be able to have meetings while in person without feeling like the remote teammates are left out. There are a lot of technologies being developed to help create that kind of inclusive meeting right now, like hybrid audio echo cancellation, or VR meeting tools, etc. an What drew you to get published on HackerNoon? What do you like most about our platform? The focus on small, early-stage startup engineering - I love reading about how other startups approach solving the same technical problems we do, especially compared to larger tech company building - the way we approach solving problems is very different, and HackerNoon is a consistently great resource for this. What advice would you give to the 21-year-old version of yourself? Keep building, and as long as what you make is useful everything else will be okay. What is something surprising you've learned this year that your contemporaries would benefit from knowing? Meetings aren't the answer to creating collaboration - they're too transactional. is currently available for free for macOS. Remotion Vote for Remotion for Startup of the Year, San Francisco, California

Google

Is this New macOS Dock the Answer to Virtual Collaboration?

Heyo 👋  It is I, your friendly half-bot-half-human Hacker Noon Helper! You can find everything that I have to offer at , but I will also be posting some of my most helpful tips here. Hope you enjoy this series, and please tune in every week for more 😊 help.hackernoon.com Question: Is Hacker Noon Free to Read? Short answer: Always and Forever. You don't even have to create a Hacker Noon account to read Hacker Noon.  The internet is society's greatest invention for mass education, and we don't want to be another business that simply walls off knowledge. We're committed to no paywalls, popups, or forced account creation. If you don't want to create a reader account: you can browse stories via our , (especially th e tag), top navigation curation on every page, or enter specific keywords in our search bar  🔍 in the upper right corner. You can even give emoji reactions to your favorite stories or favorite parts of the stories, without an account. homepage tag pages Hacker Noon Top Stories Of course, creating an account comes with some benefits: Subscribe to your favorite and get a customized daily topi cs Tech Brief Bookmark your favorite privately or publicly stories Write, submit your draft(s) and receive constructive, professional editorial support Install a web-monetization tag to receive micropayments via our partnership with Coil And more! The good news: we will never put a paywall on our content, or unnecessarily distract you with popups or a sidebar. Our objective has always been to optimize your reading experience, whether or not you have an account. Related Paywalls are stupid Product Development at Hacker Noon Tech Brief Email us at ✌️ Something We Didn't Cover? yes-reply@hackernoon.com

Coil

Visit Help.HackerNoon.Com to get all your questions answered! 

Hacking Hacker Noon: Is Hacker Noon (Really) Free to Read?

The zkEVM project is both great and huge, which cannot be actualized correctly by any single team. It requires the collaboration and hard work of multiple great teams in this industry. Since there is no mature design for reference, all are exploring ways to realize it. The related articles published by Sin7Y Labs only represent our understanding of the zkEVM design, which is not guaranteed to be completely correct. We sincerely hope and desire to communicate with those professionals, learn from each other and get improvement to move forward together. In the article , we have a preliminary analysis and comparison of the frameworks of zkEVM designs by Hermez, MatterLabs, AppliedZKP, and Sin7Y. One thing they have in common is to deal with the execution process of EVM separately, including logic calculation, state reading, etc. The following figure shows the general procedure of zkEVM: Exploring Popular zkEVM Solutions As shown in Figure 1, when an overall process is separated and processed separately, it is necessary to ensure: The data between each part is consistent. For example, the data involved in the logic calculation is the same as the data in the state read/write; The order of the executed op is completely consistent with the logic of the contract to ensure the correctness of the program executed; The logic calculation is correct, including Add, Mul, Sub, etc. Because in the current Rollups scheme (which has specific circuits and is not compatible with EVM), the logic of the contract is written in the circuit, there is no need for PROVER to prove the correctness of the executed contract logic; while in zkEVM, the circuit contains only one op, and the logic of the contract often has multiple ops, which are executed in a certain order. We need to confirm that the order of this execution is consistent with the contract. For better understanding, we call the functions described in 1) and 2) state proof and in 3) EVM proof: State Proof proves that the implementation procedure is correct; State Proof proves that the operations of stack, memory, and storage are correct; EVM Proof proves that the input, output, and operational logic are correct. All of the above three requirements can be achieved by using Plookup technology (as shown in Figure 1). For the introduction of the principle of Plookup technology, please refer to the previous article . Simply put, it is to prove that the set f € t, and the element in f appears at least once in t. Plookup: An Algorithm Widely Used in zkEVM State Proof - 1: Ensure Execution of Right Procedures When a contract is deployed in the layer 2 EVM, the bytecode will be stored in the Storage (for simplicity, we first consider the scenario of one contract, and multiple contracts can be distinguished according to the contract address); then the user initiates a transaction and calls a method in the contract (as shown in 1 and 2 in Figure 1), and the EVM will match the method when the contract is deployed according to the method signature. Once matched, the EVM will execute the corresponding logic according to the method matched and the parameters passed in by the user, and form the final execution trace (The entire execution traces). However, there may be a problem. As mentioned earlier in the article, the specific circuit corresponds to a specific function in the rollup scheme of a specific circuit, so the correctness of the function has been guaranteed by the circuit and has been audited and disclosed by security companies. Therefore, Verifier only needs to hold the corresponding input and output to verify whether the data meets the circuit function; however, in the zkEVM design, the circuit only restricts the correct execution of the single-layer base opcode, but the order among opcodes cannot be guaranteed. For example, zkEVM's circuit can only guarantee the correctness of Add Op and Mul Op, but "from Add Op to Mul Op" and "from Mul Op to Add Op" can lead to completely different results. We need to ensure that their order is consistent with the contract itself. Therefore, we should use Plookup technology to ensure that the op sequence executed by the prover is consistent with that in the contract. This part refers to the principles and ideas of . Importantly, if the calculation logic of the contract is very complicated, then the Table may take up a lot of memory space. Thus some means should be used to optimize the number of these instructions, such as replacing the Stack operation with Register, but this will increase modifications to the compiler. Hermez Another way to achieve this is to use the Merkel Tree to prove it. As shown in Figure 2 below (Please note that extra fees may incur if you choose this scheme.): A ZK-friendly hash is needed to implement this process to minimize the scale of this part of the circuit. (It can also be verified by . Compared with the Merkel tree, it can judge the existence of elements faster, and it can also realize batch verification.) Accumulator based on Class group State Proof - 2: Ensure Usage of Right Data As described previously, when the EVM matches the corresponding function based on the function signature, a real execute trace is formed according to the parameters input by the user. As shown in the middle part of Figure 1, the complete Trace includes stack operations, memory operations, storage operations, and some Arithmetic calculation operations. If one circuit is used to prove, then this circuit needs to prove: The validity of the Stack operation, the scope limitations of the sp (stack pointer) value, the operation type limit (write/read), etc. The validity of the Memory operation, the pc value limit of the same address (monotonically increasing), the operation type limit (write/read), etc. The validity of the Storage operation. The accuracy of the Arithmetic operation. … This will be a complex and huge circuit. Therefore, we need to make a functional segmentation. The function of one circuit is to ensure the validity of data read/write operations. State circuits can be divided into stack circuits, memory circuits, and storage circuits based on the type of Memory operation. The other circuit guarantees that these read/write values are correctly calculated (Add, Mul, Sub…), and ensures that the value involved in the mathematical calculation is consistent with the first circuit, as shown in Figure 1. Therefore, a cache is needed, namely Busmapping, where valid stack data, memory data, and storage data are stored. When performing mathematical calculations, we need to verify that the value involved in the calculation is stored in Busmapping. For example, when performing the Add operation (a + b = c), we need to verify that a, b, and c are all stored in bus mapping (the plookup technology is still used here) and then verify whether they satisfy the addition relationship (we can use addition circuit + Lookup table, or we can also use Lookup table alone. The lookup table of the first method is used to verify the validity of the data, and the lookup table of the second method is used to verify the validity of the data and the correctness of the calculation. Two options can be selected according to the actual calculation type.) It should be noted that after the transaction is executed, the storage value of the corresponding location has been updated, but the new state root has not. We need to write this value into bus mapping after calculating the new state root and generate the corresponding circuit to prove the correctness of the new state root update. EVM Proof: Ensure Execution of Correct Calculations In the process of State proof, the data needed for the EVM circuit has been stored in the shared bus mapping cache. As mentioned above, the EVM proof needs to ensure the validity of the inputs, i.e., the data for its operation comes from bus mapping; the correctness of the calculation of the arithmetic op, i.e., the input data satisfies the operational logic of Add, Mul, Sub, etc. Take Add as an example. The pseudo-code is shown below, where va, vb, and vc refer to the addend, the augend, and the sum. Before checking whether va, vb, and vc satisfy the operational logic of addition, we need to make sure that they are from bus mapping and satisfy the 8-bit rang proof to ensure the data is valid. Summary As shown in Figure 1, we have designed several circuits. If the proof of each circuit is placed in L1 for verification, the cost of verification will be very high. However, we can use Aggregative proof to aggregate multiple Proofs together. Only one pairing is required on the chain to verify the validity of all proofs. This article describes how zkEVM works. Meanwhile, there are still details that are not involved, which require further research. As our design of zkEVM is in an early stage, we sincerely hope to receive suggestions/opinions from industry professionals to accomplish this task.

Chain

fees

Trace

2022 - HackerNoon Contributor of the Year - Algorithms

2022 - HackerNoon Contributor of the Year - Architecture

2022 - HackerNoon Contributor of the Year - Blockchain

2022 - HackerNoon Contributor of the Year - Optimization

2022 - HackerNoon Contributor of the Year - Privacy

Nominated for 2022 - HackerNoon Contributor of the Year - Optimization

Nominated for 2022 - HackerNoon Contributor of the Year - Algorithms

Nominated for 2022 - HackerNoon Contributor of the Year - Privacy

Nominated for 2022 - HackerNoon Contributor of the Year - Architecture

Nominated for 2022 - HackerNoon Contributor of the Year - Blockchain

Plookup with zkEVM: A Brief Introduction to How zkEVM Works

2021 has seen the next-level digitization of art & entertainment on the blockchain. The non-fungible asset class (NFTs) started its journey in 2017. Back then, the 1st  wave adopters were a handful of people, invested in projects like cryptopunks & cryptokitties. Today NFTs have become an internet phenomena among investors of all age groups. Especially the younger generations are taking a deep interest into learning about trending, upcoming, and upgradable digital asset projects. There’s a good chance that you already own an NFT or know someone who does. Images, videos, digital art, music - anything that can be rendered in a digital form - has been minted into unique NFTs on the blockchain. The NFT trend has brought over in sales this year. A historical moment was made when a as an NFT through an auction hosted by Christie’s. $2.5 billion digital artwork was sold for $69 million The new wave of adoption currently has major backing from celebrities across various industries. We saw: Twitter CEO, . Jack Dorsey selling one of his tweets as an NFT Rapper Eminem joined the league introducing his NFT collection drop in April. “Shady Con” Serial entrepreneur Gary Vee was one of the early birds among his peers to realize the potential and launched his first collection . VeeFriends NBA top shots, LaLiga cards - the sports fraternity has also become an active part of the market. Right now, the market for NFTs is as speculative as any other new digital asset. Here, the motivation is to obtain something unique from the crypto world and have the conviction of getting it appraised to a higher value in the future. NFTs are limited to an experience of ownership and being tradable, while proper use cases beyond that are being researched by communities. What’s Next for NFTs ? NFTs are powered by smart contracts on the blockchain. A good number of developers are busy solving gas reduction, network throttle problems to have an affordable and better experience with NFT smart contracts, while many are figuring out ways to make NFTs a form of utility asset. One of the considerable approaches for that is to draw gamification ideas with reward- based incentive systems. Traditional NFTs have a media associated with them which doesn’t alter under any circumstances. What if these media had a connection to real-world events? What if they had updates based on what the holder is doing in real-world events? With suitable alterations to the traditional ERC-721 contracts, it’s possible to build such fun engagements and use-cases for holders. Hello Upgradable NFTs ! An upgradable NFT is a non-static digital asset, that responds to certain events or triggers, either on-chain or off-chain, leading to a secure update of asset media records. This encapsulates the central idea behind Upgradable NFTs. In the real world, there’re several mainstream scenarios where NFTs can be leveraged for daily use-cases; this will bring a mature audience and acceptance of NFTs as a pivotal technology across industries. The core trigger for upgrades on such NFTs can be external data sources provided via oracles or initiated by contract administrators or some random on-contract data payload. Based on the required outcome, NFT contracts transition their metadata & associated media content, properties to reflect a new state. But here I won’t go into much detail on the technical aspect for today. Some genuine use cases where upgradable NFTs can shine are: 🎟️ Event Tickets Collectors have filled their scrapbooks with concerts, conference physical tickets for years. They’re valuable memorabilias of life events. NFT-based concert tickets can not only become a memento but also a Proof of Attendance through upgradable NFTs. When someone attends and verifies attendance at the event location, their ticket media can reflect a memorable autograph from the artists/performer. Providing incentive to people for actually being a part of the event. The event organizers can also issue tier based upgrades based on engagement rate. 🥘 Food Safety Certification Restaurants can be issued clearance certificates as NFTs. The NFT will be dedicated to a particular location & branch from the relevant food safety authorities. These NFTs will not only manage data on an immutable blockchain, but will also track upgrades and changes made to a certification tier in future inspections and reviews. Mitigating any internal corruption as well. So if your local dinner went from a “C” to a “B”, that might be flashed on the digital screen in the restaurant as a cool NFT. 🏆 Marathon Records I have friends who love to run marathons. Whenever they’re in new cities, they try to find a marathon event through some event listing platform. Such platforms usually list events across cities and regions. A dedicated participant can be a proud owner of an NFT issued by the platforms, which will reflect his participation and performance records in real-time with updates. For example, if you just completed your 50th marathon, your NFT gets a special tier upgrade, which builds your community reputation. Participants can proudly share their achievements through a dazzling marathon NFT, a testament to their athletic spirit. 📄 Intellectual Property Intellectual Properties(IP) being registered & documented on-chain helps resolve future disputes on authorization rights. NFTs have an opportunity to build a market here for being easy to maintain and quickly transferable. Also when we add the upgradable nature, it can have extensible benefits to make a token that can represent complex ownership relations. IP issuance bodies can provide alterations needed to the doctrine linked with the NFT. Final Thoughts on Upgradable NFTs Your own unique ideas and terms of execution can create a different utility scenario, the possibilities are endless. Sports, entertainment, education, research, governance - across domains, NFTs have the potential to become something substantial and beneficial for broader societal needs. But for that, we have to weigh in and identify pain points to solve and improve the current structure of institutions around. Driving engagements and involving holders in the process through upgradable NFTs will definitely open doors towards decentralization. The idea of making NFTs upgradable is experimental. There are no standard contracts or EIPs in the process. But as a developer, we always find ways to improve the existing resources. In the coming days, I’ll write a tutorial on how a basic Upgradable NFT contract can be created and you can use it for your dApp. This article is part of The hosted by HackerNoon in partnership with Gaming Metaverse Writing Contest The Sandbox . Submit your today for your chance to win up to $2000. #gaming-metaverse story

Dapp

Drop a Message for Blockchain Consultation

2022 - HackerNoon Contributor of the Year - Containers

2022 - HackerNoon Contributor of the Year - Dapps

2022 - HackerNoon Contributor of the Year - Design

2022 - HackerNoon Contributor of the Year - Docker

2022 - HackerNoon Contributor of the Year - Innovation

2022 - HackerNoon Contributor of the Year - Smart Contracts

2022 - HackerNoon Contributor of the Year - Solidity

2022 - Software Developer of the Year

Drop a Message for Smart Contract Development & Security Audit

Nominated for 2022 - Software Developer of the Year

Nominated for 2022 - HackerNoon Contributor of the Year - Design

Nominated for 2022 - HackerNoon Contributor of the Year - Docker

Nominated for 2022 - HackerNoon Contributor of the Year - Smart Contracts

Nominated for 2022 - HackerNoon Contributor of the Year - Containers

Nominated for 2022 - HackerNoon Contributor of the Year - Innovation

Nominated for 2022 - HackerNoon Contributor of the Year - Dapps

Nominated for 2022 - HackerNoon Contributor of the Year - Solidity

How Upgradable NFTs Will Change Collector Engagement

Meet the platforms enabling the world to monetize their content, data and time with the power of blockchain technology across the blockchain and crypto landscape; games such as and Alien Worlds have introduced a new means of monetization for gamers around the globe, enabling them to earn cryptocurrency by battling, breeding mythical creatures solving puzzles and more. Often, players are rewarded for their efforts with that they can trade for other items or sell. Play-to-earn gaming is exploding in popularity Axie Infinity NFTs (non-fungible tokens) But gaming is by far not the only way that both users and business can monetize with the help of blockchain technology; innovative and multi-layered business models that were not previously possible are today enabling monetization across various verticals that include that of user data, content such as video and viewing time of online ads. The decentralized nature of blockchain technology means that businesses and users can fight back against overly monopolized industries such as social media platforms and streaming services, all whilst retaining the strong security guarantees that accompany blockchain’s distributed infrastructure. Below are 4 platforms with varying approaches to monetization in different areas of the blockchain industry. Brave Browser A found that 91% of people believe ads are more intrusive today than they were two or three years ago, with 79% thinking that they are being tracked by retargeted ads. In an increasingly saturated digital world, it often feels like we cannot escape annoying and used by major advertisers. survey led by HubSpot Research strangely accurate ad targeting methods In an attempt to give people back their privacy and choice online, positions itself as an alternative to Google Chrome, Firefox and other major browsers. Created by Brian Bondy and Brendan Eich, the creator of JavaScript and co-founder of Mozilla, Brave Browser is open source by nature and totally free to use; with a mission to block unwanted ads and trackers that are prevalent across most popular websites, Brave Browser also introduces a mechanism that rewards web users for their attention, in-turn giving them the opportunity to support their favourite content creators and sites by gifting them the platform’s native Basic Attention Token (BAT). Brave Browser The Browser That Rethinks The Web The attention that users pay comes in the form of consuming ad content on websites they visit via the Brave Browser. But these ads do not just pop-up and fill the screen like the generic ads we’ve come to know and hate; instead they appear as pop-up notifications that prompt the user to accept the ad before viewing it and, if the user accepts the ad request, Brave Browser sends a notification to the company's servers, but omits identifying and personal information of the user. Basic Attention Tokens (BAT) form the foundation of the Brave economy and are These tokens can either be credited by users to their favourite publishers or content creators in support of their sites or users can fund their virtual debit card with BAT rewards and make purchases online or even use a plastic debit card for purchases wherever Visa is accepted. paid out regularly to users of the Brave Browser. Brave Browser also recently announced an , meaning that users can connect the wallet with their browser and use BAT tokens across both platforms. integration with the Gemini User Wallet Gather Network As the way people view digital advertising changes, it is becoming harder for publishers to monetize their websites effectively; it is no longer a viable solution to simply fill a website with ad banners and wait for the revenue to flow into your business bank account. Today’s web users want their privacy and browsing experiences respected and as it once did for publishers and advertisers. programmatic advertising just does not work as effectively breathes new life into the world of website and app monetization with a multi-tiered platform that benefits web users, advertisers, publishers and enterprise cloud service clients all in one place. With the power of blockchain technology, without intrusive and annoying ads, whilst rewarding web users for donating their spare processing power when browsing websites or using applications. This processing power is then redistributed to businesses and developers in need of . Gather Network Gather enables anyone to monetize their content affordable cloud computing power and storage A New Approach To Monetization Gather Network has harnessed the power of blockchain technology to offer a service that is reliable, decentralized and secure for all parties; use cases of the platform are plentiful and various types of business can benefit from joining the Gather ecosystem including content publishing websites and blogs, streaming platforms, mobile applications and charitable websites. UNICEF famously ; Gather Network improves on the model used tenfold with the help of blockchain’s decentralized infrastructure. enabled users to donate their computing power via their website back in 2018 After a web user has agreed to donate their excess processing power via a simple opt-in process, the website publisher earns rewards in the platform’s native Gather Token (GTH). of the code necessary for users to opt-in to power sharing and the longer the session length of the user, the higher the revenue the publishers will generate; this revenue stream offers more profitability than traditional ad methods and a 30 minute session can generate revenue for for publishers that is as much as 20 times more than programmatic advertising models. Gather offers simple integration Run by a team of highly experienced individuals with deep experience in technology, finance and marketing, Gather Network is partnered with several other pioneering blockchain platforms and protocols including ANKR Network, Boson Protocol, Decentr and PAID Network. Theta Network highlighted that by 2022, online videos will make up more than 82% of all consumer internet traffic and by 2026, the video streaming industry will be worth a reported $149.34 billion. These numbers represent an increasing demand for online streaming services as the world spends more time online than ever before. A recent study by CISCO But there are . Not only is the general quality of video used in live streaming relatively poor (even with global accessibility of high-speed internet), but content delivery networks (CDNs) do not cover all corners of the globe yet which results in slow loading times and constant re-buffering for many thousands of viewers. Lastly, today’s centralized live streaming platforms act as middlemen services, eating into the profits of the very content creators that make them so popular. issues within this rapidly growing sector , a platform founded back in 2017, aims to tackle these three issues head on; the platform introduces a multi-layered solution that cuts out middlemen services, improves video streaming quality, reduces the costs of streaming by up to 80% and that also rewards it’s users with a native cryptocurrency, Theta Fuel (TFUEL). Theta A Next Generation Video and Entertainment Blockchain, Powered By Its Users With a run on blockchain technology, Theta looks to replace centralized content delivery models that are run and controlled by big names in the industry such as YouTube and Twitch. Theta enables users to watch high definition video streaming content and earn token rewards while they do so; by sharing their excess bandwidth and resources and participating in the overall Theta Network they are rewarded with TFUEL tokens that can be traded on various popular exchanges, staked or stored on the platform’s Theta Wallet, which also has a Chrome extension. decentralized peer-to-peer (P2P) video delivery model Content creators can bypass middlemen services and earn TFUEL for their content streamed on Theta.TV, the platform’s main streaming service which is part of a wider open-source streaming network. Theta is supported by some major names in technology and blockchain including Samsung and Binance; Google are enterprise partners of the company and their advisory board includes Steve Chen, Co-Founder of YouTube and Kyle Okamoto who is Chief Network Officer at Verizon Digital Media. Theta raised $17 million with the participation of names like Samsung, Sony and Atari. Decentr Data privacy is a global issue that has taken centre stage in recent years, especially as the world spends more time than ever online in the wake of COVID-19. Various high-profile hacks and data breaches have occurred this year, with the U.S. the worst affected - U.S. computers connected to the internet are , with a whopping 45% of American citizens’ personal information compromised by data breaches in the last five years. attacked on average every 39 seconds With both a web browser and a browser extension available to users, enables users to take back control of and, even better, monetize their personal data. When a user surfs online, their data forms a part of their personal ID known as their DecID; the monetary expression of a user’s data comes in the form of their Personal Data Value (PDV) which essentially acts as a ratio that increases or decreases in-line with a user’s online engagement and turns every user into their own personal exchange rate between fiat, crypto and data currencies. Decentr Data-As-Value Decentr’s exciting means that all users of the platform have their own personal data value (PDV) and can derive tangible value from their data. Offering users a suite of features and tools that include payment solutions, a DEX (decentralised exchange) and a secure decentralised ID and wallet. Merchants using Decentr can accept the platform’s native DEC token as payment for goods and services from users, utilising dPay for online transactions. approach to an internet of value Moving a step further and looking to become part of the DeFi (decentralised finance) revolution, Decentr also enables users to loan or borrow DEC tokens using their dWallet and in some cases  through external DeFi dApps like Aave and Compound, with the variable APR they receive being based on the platform’s ADV, combined with the user’s PDV. Anyone can also buy or sell fiat, tokens and/or data through the platform’s internal DEX. The Decentr team combines many years of expertise in software engineering, dev ops, mobile application and enterprise web development with senior developers having worked on exchanges, data storage, distributed computing and more in the past. As detailed in their 2021 roadmap, Decentr plans to complete and and have recently , making their ERC-20 datatokens accessible and tradable via the Decentr dEX and accelerating the move into a new data economy. multiple blockchain integrations with projects such as Chain Link Tomochain partnered with open data marketplace Ocean Conclusion As blockchain and the promise of a decentralized web begins to mature, the opportunities for both web users and businesses to monetize more effectively will continue to expand. The days of heavily monopolized tech sectors may well be up and some of the world’s brightest minds are working around the clock to give back the over nearly 5 billion web users around the world control of their data, time and content, resetting the scales and bringing fair value back to the internet. Which projects or platforms do you think will play a part in the future of online monetization? Let me know on Twitter!

Theta Network

Aave

Flow

Binance

Cisco

Mozilla

Samsung

Sony

Visa

2022 - HackerNoon Contributor of the Year - Ethereum

Nominated for 2022 - HackerNoon Contributor of the Year - Ethereum

4 Blockchain Projects Leading the Charge Into the Future of Online Monetization

Introducing the newest innovation from HarperDB: . With the release of HarperDB 3.1, users are able to define their own API endpoints within HarperDB. What does that mean for you? . We’re collapsing the stack! HarperDB Custom Functions HarperDB grows from a distributed database to a distributed application development platform with integrated persistence - one that can serve as a single solution for all of your backend needs Alright, alright, what’s the big deal? Up until 3.1, in order to power an application, you would need to deploy and host your backend API code on additional servers, then have them call out to HarperDB for database needs. This is a pretty typical software stack, but at HarperDB, we’re far from typical. We’re constantly innovating and changing the game. Oh yeah, and it’s faster, significantly faster! Traditional architectures naturally introduce latency as data moves across multiple servers through a local network or potentially even the Internet. HarperDB is collapsing the stack onto a single server, which eliminates any and all network latency. Custom Functions enable developers to build their entire application backend in one place. This frees up headroom for achieving higher throughput from a single server. Capitalizing on HarperDB’s already powerful horizontal scalability means you can now distribute your APIs and your database to the edge. both For those familiar with modern cloud architectures, Custom Functions are just like AWS Lambda functions. For those familiar with relational databases, they’re like Stored Procedures. You define your logic and choose when to execute it. At a high level, it’s as simple as that! They’re low maintenance and easy to develop. You can develop HarperDB Custom Functions in the Studio or in your own IDE and Version Management System. HarperDB Custom Functions can be maintained like any other development project; in fact, the sample Custom Functions provided in the Studio are generated from our public GitHub repository. That means you can develop, maintain, and deploy your HarperDB Custom Functions code just like any other development project, so you don’t have to deviate from your existing development practices. That’s great news! HarperDB Studio Functions Editor What makes Custom Functions so powerful? They leverage the full power of and . HarperDB Custom Functions projects are effectively just Node.js projects, which means you can leverage the npm ecosystem, opening the doors to fast and efficient development. Node.js Fastify Fastify serves as the basis for the webserver, which means you can define and build a fully functional REST API with all the bells and whistles you’d expect. The key differentiator is that these Fastify routes have direct access to HarperDB core methods, bypassing the HarperDB API and, instead, interacting directly with HarperDB on the same machine. WebStorm IDE with HarperDB Functions Project By collapsing the stack, we deliver unparalleled performance and efficiency out of the box. Let’s take a look at some different ways Custom Functions can be used. I’m not going to cover everything here; in fact, I’m sure there are plenty of options that I haven’t even thought of. : Seamlessly connect third-party/external data with data stored in HarperDB within a single function. Integrate with third-party apps and APIs : Tightly integrate with third-party application providers to validate user requests within your API. Utilize third-party authentication : HarperDB is always adding features, but let’s say there’s a feature you need that’s missing. Build a HarperDB Custom Function to solve the problem. For example, if you need to enforce row-level security based on a user account, write a function! Define your own database functionality : Custom Functions can serve static content and serve as backend APIs, which means you can fully power a website or web app all with HarperDB. Serve a website These are just some of the ideas we’re kicking around with HarperDB Custom Functions. Since this will be the initial release of HarperDB Custom Functions, please let us know what else you’d like to see in future releases. You can submit your ideas to our feedback board here: . feedback.harperdb.io Also Published On: https://lzomedia.com/blog/harperdb-is-collapsing-the-stack-introducing-custom-functions/

HarperDB

HarperDB Documentation

HarperDB: Build Your Application Backend in One Place with Custom Functions

Summary: Why is burnout so common? Burnout symptoms are often a result of suboptimal procedures and working conditions. They are signs of a serious and protracted illness. Especially, burnout of software developers is more widespread than one might suspect. It hits companies via increased employee turnover, reduced team productivity, and above-average sick leave just as hard as the affected employees. Amongst many other reasons, “meaningless” work, frequently changing priorities, unrealistic goals, deadlines, and overwork are disproportionately often named as causes. Early indicators for these most important burnout causes can be identified from the work on the software code with the DETANGLE Analysis Suite. With these analysis results, project leaders/-management have information at hand to identify health-threatening working conditions of their developers at an early stage and can initiate countermeasures timely. By regularly applying these analyses, additional information regarding the trend of the relevant key metrics will become available. Over time it becomes increasingly easy to narrow down the causes of a developer’s burnout and to avoid it before the individual and as a consequence, the organisation is seriously impacted. Why are software developers so often exposed to burnout symptoms? Burnout is a serious and protracted illness.  There is still no clear definition and diagnosis for it. Often, it is confused with depression. A helpful description can be found, for example, at Burnout Prevention for Software Developers [1]: Burnout is one of those things you don’t notice until you already have it. But people with symptoms of burnout are people who are – generally always working, always on they feel like they can never take a break or have downtime. – Abby Kearns, Cloud Foundry The . The following list of some symptoms are consistently cited in How Not to Burnout: Guide for Software Developers [2]: consequences of burnout are severe for the individual developer, the team, and the company “Becoming cynical or overly critical at work” “Lack of energy and concentration with no evident cause” “Constant fatigue” “Procrastinating on tasks that you used to do enthusiastically” “Feelings of dread, apathy, and being out of control” “Lowered productivity” “Minor to major anxiety” “Outbursts of anger” One could argue that burnout happens in every profession. But software engineering is particularly predestined for it. And there is a reason for that. Software engineering has no limits. Work is not defined by a set number of hours per day, but by optimistic and sometimes arbitrary management deadlines. As one senior tech CEO told me, “I knew there was no chance of meeting my deadline, but I just wanted to get the engineering team to work faster.” In addition, understaffing of project teams is  common because recruiting developers is difficult – and expensive. [3] The publication Beware Burnout [3] lists the following software development-specific reasons for an increased probability to get burnout: “Unclear or rapidly changing direction” (A), “Bus factor is low” (B), “Programming is isolating” (D), “Draining work of maintenance” (C), “Impatient or ungrateful users” (in the case of open source development) “Coding for others” Other publications such as 7 Reasons why programmers burn out [4] and Only You Can Prevent Tech Burnout [5] list quite similar and further reasons. The various reasons the different authors find causal for increased susceptibility for burnout can be consolidated into four clusters: Category Example Lack of focus (A) Too many varying tasks. The developer e.g. works on the development of many new features but just a few will be completed. Or the developer constantly switches between maintenance/bug fixing and feature development often without finishing previous tasks. High workload and/or unbalanced distribution of tasks (B) High workload for some top developers, as only they have the skill to handle complex parts of the software. A single developer has to coordinate the work of many (new) developers. Unrealistic deadlines coupled with notorious understaffing. Significant share of “non-value” work (C) A high share of maintenance work and a low share of the development of new features/innovations becomes frustrating in the long run. Bad collaboration within and between development teams (D) Lack of onboarding/training of new colleagues. Experienced developers who do not delegate or share their knowledge. Lack of communication about work progress and best practices within the team or between teams. Table 1: Work condition categories and their influence on burnout of software developers Of course, it also depends on very individual circumstances whether the employee suffers from burnout. But since it is a very serious and long-lasting disease, it is even more important to measure the known causes and their impact on the individual developer as early as possible and to implement prevention concepts. In the following sections, we show that many causes of burnout can be extracted by investigating the work on the software code. Early indicators of burnout are measurable The first step in burnout prevention is to identify indicators that are known or reasonably suspected to be associated with an increased susceptibility for burnout as shown in table 1. For the category clusters A, B, and C, we record the following parameters per developer over time with DETANGLE®: What is the developer’s share of the workload of system maintenance vs. feature development? How many features/user stories does a developer work on simultaneously and what is their effort distribution? How many different source code directories is the developer working on simultaneously? How many different programming languages is the developer working with? Does a developer pose a project risk over a longer period of time due to his relevant and special knowledge, and is she/he aware of it (bus factor)? The analysis of these data gives clear insights about working circumstances that are known to cause an over-proportional amount of employees burdened with burnout syndrome. For example, the higher the individual’s maintenance effort, the lower the proportion of real value-adding work that usually is seen as a satisfying activity (C). The higher the number of features/user stories and the higher the number of source code directories or programming languages, the lower the developer’s focus (A), whereas the Bus Factor also indirectly reflects his workload (B). Figure 1 shows the Bus Factor, i.e. the number of key developers for the Django open-source project. It can be seen that their number has increased from 4 to 7 developers from 2019 to 2020, and about 12% of the developers are considered mission-critical and contribute to the Bus Factor. The loss of one of these developers is always a project risk. Since these key developers also usually have the highest workload and responsibility, they are particularly at risk for burnout. Thus, the Bus Factor is also an early indicator of the number of employees at risk for burnout. If a developer is recorded as a Bus Factor for a longer time, project management should try to rebalance his load and reduce his/her high level of continuous high importance for the project(s). We have already addressed the causes of category D from the previous section (problem of poor cooperation) in several blogs. Under [6] and [7] we have explained that it is not the star soloists, but the team players that matter in order to limit the stress level in the team while still improving productivity and quality. Software Due Diligence – Developers and their Cooperation in Focus The Diffusion of Responsibility Phenomenon Analyzed: Unravel the Truth Conclusion: Developing software is challenging and the risk of burnout is real Developing software is an intellectually challenging process for many brilliant minds. given the challenges and pressure in software development projects. We strongly recommend identifying burnout indicators early on or even better continuously to minimize the risk of employees dropping out for months due to overwork or dissatisfaction. Software companies are, therefore, “people” companies. The risk of burnout is real and present Cape of Good Code has developed an analytical, software-based approach to identify indicators that describe the risk of burnout of an individual caused by working circumstances in software engineering. By using DETANGLE® regularly, . Each indicator gives specific hints of where the stress could come from. This allows project managers to . By speaking with the employee one can definitively clarify how stressful he/she perceives the work circumstances and whether he/she can further handle that stress level. project leaders can gain insight about the work-induced stress level within their team reach out to that employee and discuss individual countermeasures Links [0] Photo by Nataliya Vaitkevich from Pexels [1] Burnout Prevention for Software Developers [2] How Not to Burnout: Guide for Software Developers [3] Beware Burnout [4] 7 Reasons why programmers burn out [5] Only You Can Prevent Tech Burnout [6] Software Due Diligence – Developers and their Cooperation in Focus [7] The Diffusion of Responsibility Phenomenon Analyzed: Unravel the Truth Also published at: https://capeofgoodcode.com/2021/09/10/burnout-syndrome-why-it-hits-software-developers-so-often/

Timely

2022 - HackerNoon Contributor of the Year - Analytics

2022 - HackerNoon Contributor of the Year - Psychology

2022 - Remote Work Warrior

Try out DETANGLE®

Nominated for 2022 - Remote Work Warrior

Nominated for 2022 - HackerNoon Contributor of the Year - Psychology

Nominated for 2022 - HackerNoon Contributor of the Year - Analytics

Why Burnout Syndrome Is More Common Among Software Developers

A is a sort of API that allows developers to create applications and services for cloud hardware, software, and platforms deployment. A cloud API is a portal or interface that connects users to cloud infrastructure and software applications, both directly and indirectly. A cloud API engages with a cloud infrastructure to distribute processing, storing, and system resources for web software and services that have been demanded. API integration tools can help you prevent data clutter by pulling information from relevant database systems. Cloud Application Programming Interface (Cloud API) Cloud data storage opens up a world of possibilities, and cloud integration services are expanding to meet those needs, including cloud storage providers with as-a-service capabilities that supply solutions tailored to specific hybrid API integration issues. System administrators are searching for new methods to interact with their cloud model as cloud services consolidate. Companies and developers have the largest hurdle in integrating their system infrastructure with these cloud storage providers or cloud-based services, which are frequently provided by third-party suppliers and enhancing the overall experience that results from that strategic shift. API integration is the actual deal in all of this. Data management on the cloud is one of the most significant technological breakthroughs in recent years. Not only for huge amounts of data but also for platforms or services for end-users, such as customers or employees of a corporation. Hundreds of tools and capabilities for managing information in the cloud, ranging from office automation to data storage through applications, are the outcome of this work. Any public cloud operation depends on a cloud API, which is often built on the and approaches, along with cross-platform and vendor-specific APIs. REST SOAP To simplify the API integration for cloud data storage extension and your application’s functionality improvement, we defined a step-by-step description of how to implement the most known and used Cloud APIs: , , and . Google Drive API Dropbox API OneDrive API Integration with Google Drive enables you to develop apps that use Google's cloud data storage. Using the Google Drive API, you can design apps that interact with Google Drive as a cloud storage provider that offers extensive functionality, such as: transferring your data model to the VDR once and then trace the VDR to numerous target systems, managing every element of the user interface and user experience,  and extendible CE's Elements that require less maintenance. Google Drive API Getting client keys for Google Drive API The first thing we should do for API integration is to create client keys. Navigate to the APIs & Services → Credentials page in the Cloud Console. Then select OAuth client ID in "Create credentials." If you haven’t configured the consent screen go on with configuring. Configuring the Consent Screen On the first step fill in all the required fields and optional if needed. In the second step, we should specify the scopes we want. Click “Add or remove scopes”. For using Google Drive API we need to have scope. Use the ‘Manually add scopes’ section. ‘ https://www.googleapis.com/auth/drive’ Go to the last step and save the data. Creating Client Keys Select the app type and specify the name of it. In our case, the type is a Web application. Specify the app and redirect URIs.  Usually, app URI is our client web application URI, and redirect URI is the server-side route that is going to handle Shopify requests after the OAuth process is completed. After you get your client id and secret, copy and save them to your project configuration file. OAuth To work with google API a good choice is to use the . library ‘GoogleAPIs’ Let us create a service to work with Google Drive API and in it the client with secret keys. import { google } from 'googleapis';
import { OAuth2Client } from 'google-auth-library';

const { clientId, clientSecret, redirectURL } = cfg.googleDriveAPI;

class GoogleDriveService {
  private gdriveClient: OAuth2Client;

  constructor() {
    this.gdriveClient = new google.auth.OAuth2(
      clientId,
      clientSecret,
      redirectURL,
    );

    google.options({
      auth: this.gdriveClient,
    });
  }
} To generate an OAuth URL for the web client we can create a special method, specifying access type and scope for Google Drive cloud storage provider. public getAuthUrl() {
    const authUrl = this.gdriveClient.generateAuthUrl({
      access_type: 'online',
      scope: 'https://www.googleapis.com/auth/drive',
    });

    return authUrl;
  } Our client application is going to redirect to this URL, and the Google auth form will be presented. After the user logs in successfully, the user will be redirected to the URL you specified. As we specified our back-end endpoint, let's create one. Firstly we need to add a method to our service public async getToken(code: string, redirectUri: string) {
    const { tokens } = await this.gdriveClient.getToken({ code, redirect_uri: redirectUri });

    this.gdriveClient.setCredentials(tokens);
    return tokens;
  } The endpoint should be similar to the implementation below. router.get('/googledrive-auth', async (req: Request, res: Response) => {
  const { code } = req.query;
  const token = await googleDriveService.getToken(code, cfg.googleDriveAPI.redirectURL);

  // save token to e.g. redis
  // redirect to the FE page
}); Our query params payload will include code, which can be used only once to receive an access token. A good way to save a token to some cache storage and send a redirect as the response. After you get the token you can use the endpoints of Google drive API. For example, let’s add a method to get a file by its id: public getFile(
    accessToken,
    fileId,
  ) {
    this.gdriveClient.setCredentials({ access_token: accessToken })

    return drive.files.get(
      { auth: this.gdriveClient, fileId })
  } Integration with Dropbox Developers may use the to interact with Dropbox files, including sophisticated features like full-text search, thumbnails, and sharing. Dropbox API also includes regular authentication procedures to eliminate endpoint subtlety, as well as standardized methods and calls among all APIs, webhooks, and monitoring. Dropbox API Getting Client Keys for the Dropbox API Firstly we should create an application using your Dropbox console. After you created the application we need to add the OAuth redirect URI in the app settings. Your app key and secret information are available in settings. Now when we have keys we can start creating a service to work with Dropbox API. We are using . library Dropbox SDK import { Dropbox } from 'dropbox';

export class DropboxService {
  protected dbxOauth: Dropbox

  constructor(config: Record<'clientId' | 'clientSecret', string> = cfg.dropboxAPI) {
    const { clientId, clientSecret } = config;

    this.dbxOauth = new Dropbox({ clientId });
    this.dbxOauth.setClientSecret(clientSecret);
  }
} OAuth To start the OAuth process we should form the URL which should be opened in the browser(usually by the client-side of the application). It should include the and query parameters, including client ID(from settings of the app), redirect URI (one of configured in settings), and response type(we are using code-based OAuth flow. base URL of the Dropbox OAuth page This will open . the Dropbox OAuth window After you log in and allow your app to access the data on your account you will be redirected to the URI you specified with code in the query params. Let’s create a handler for it. Firstly we need to add a method to our service to exchange codes and get access tokens. public async getToken(code: string, redirectUri: string) {
    const token = await this.dbxOauth.getAccessTokenFromCode(redirectUri, code);

    return token;
  } The endpoint should be similar to the implementation below. router.get('/dropbox-auth, async (req: Request, res: Response) => {
  const { code } = req.query;
  const token = await dropboxService.getToken(code, cfg.dropboxAPI.redirectURL);

  // save token to e.g. redis
  // redirect to the FE page
}); Using API Now when we have a token, let’s create a helper to get an authorized client for the Dropbox API. protected async getClient(accessToken: string) {
    const dbxClient = new Dropbox({ accessToken });

    return await dbxClient;
  } Now we can use the API. For example, getting current users should look like below. public async getCurrentUser(accessToken: string) {
    const dropboxClient = await this.getClient(accessToken);
    const user = await dropboxClient.usersGetCurrentAccount();

    return user;
  } Integration with One Drive With the , it is possible to work with files in a number of settings, including Microsoft Teams, Groups, SharePoint, and more. Users may view these files from anywhere, exchange links to files, and copy or transfer data to team drives using OneDrive. Customers can trust the sophisticated encryption, compliance, and security capabilities in OneDrive API to keep their data safe. OneDrive API Getting Client Keys for the OneDrive API Create an application within your . We are using to redirect URI. Microsoft Azure platform SPA type After you create your client ID, it is available on the overview page. After that, we have to create the client secret on the Certificates & Secrets page After you have created it you can save the value of it to configuration files. Now we should update our API permissions. Go to the OneDrive API permissions tab and add (for accessing Onedrive files) and (for authorization). Files.ReadWrite User.Read OAuth The OAuth URI should contain clientID, scopes, and response type, which in our case represents . this URL After you log in to the OneDrive API, cloud data storage and allow your app to access the data on your account you will be redirected to the URI you specified with code in the query params. Let’s create a service and auth handler for it. We are using : simple-oauth2 library import * as simpleOauth2 from 'simple-oauth2';

const { clientId, clientSecret } = cfg.oneDriveAPI;

class OneDriveService {
  private oneDriveOauth = simpleOauth2.create({
    client: {
      id: clientId,
      secret: clientSecret,
    },
    auth: {
      tokenHost: 'https://login.microsoftonline.com/common',
      authorizePath: '/oauth2/v2.0/authorize',
      tokenPath: '/oauth2/v2.0/token',
    },
  })

  public async getToken(code: string, redirectUri: string) {
    const rawTokenData = await this.oneDriveOauth.authorizationCode.getToken({
      code,
      redirect_uri: redirectUri,
    });

    return this.oneDriveOauth.accessToken.create(rawTokenData);
  }
} The endpoint should be similar to the implementation below. router.get('/onedrive, async (req: Request, res: Response) => {
  const { code } = req.query;
  const token = await onedriveService.getToken(code, cfg.oneDriveAPI.redirectURL);

  // save token to e.g. redis
  // redirect to the FE page
}); Using the API Now when we have a token, let’s create a helper to get an authorized client for the API integration. private getClient(token: string) {
    return MicrosoftGraph.Client.init({
      authProvider: (done) => {
        done(null, token); //first parameter takes an error if you can't get an access token
      }
    });
  } Now we can use the OneDrive API. For example, getting current users should look like below. public async getCurrentUser(accessToken: string) {
    const client = this.getClient(accessToken);

    return client.api('/me')
      .select(['id', 'displayName', 'userPrincipalName'])
      .get();
  } Last comments Cloud API is a set of automation tools that assist link software applications and API integration tools independent of their deployment environment. Furthermore, API integration of cloud data storage provides a single dashboard for managing, governing, and integrating cloud-based applications, utilizing tools that link cloud applications and services and regulate integration flow. The integration of cloud storage providers breaks down the process, improves visibility, and simplifies corporate operations by bringing diverse information solutions together. It's critical to thoroughly comprehend what cloud data storage does and can accomplish before learning how to take advantage of the potential it offers. Since there are a variety of Cloud API Integration tools available, you should ensure that the one you implement - fulfills all of your demanded functionalities. Also posted on: https://incorainc.com/cloud-api-use-cases-for-google-drive-dropbox-onedrive-api/

Dropbox

Microsoft

ReadWrite

Target

2022 - HackerNoon Contributor of the Year - Aws

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Microservices

2022 - HackerNoon Contributor of the Year - Mobile

2022 - HackerNoon Contributor of the Year - React

Subscribe to my Linkedin Tech Newsletter

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Microservices

Nominated for 2022 - HackerNoon Contributor of the Year - Mobile

Nominated for 2022 - HackerNoon Contributor of the Year - React

Nominated for 2022 - HackerNoon Contributor of the Year - Aws

How to Implement Cloud APIs: Google Drive API, Dropbox API, and OneDrive API

Configurator is an open-source project that version controls and keeps Kubernetes ConfigMaps and Secrets in sync with the deployments. Configurator uses CRDs to create and that in turn creates ConfigMaps and Secrets with a postfix. As and when a change is detected in a or a , Configurator automatically generates a new ConfigMap with a new postfix. This acts as a version controlling system for ConfigMaps.  A change in a ConfigMap not only creates a new ConfigMap version but also rolls out a new deployment version across all the deployments using the ConfigMap. This enables both rolling update and rollback of ConfigMaps in sync with the deployment versions. CustomConfigMaps CustomSecrets CustomConfigMap CustomSecret This blog will focus on the following motives: Installing Configurator using the helm chart. Customizing Configurator helm chart based on requirements. Contributing back to the Configurator project. System Requirements Make sure that you have installed helm in your machine and you are connected to a Kubernetes cluster. The chart is qualified for helm version > v3 & Kube version v1.20.8. Follow the documentation from the link to install helm: https://helm.sh/docs/helm/helm_version/ helm version
version.BuildInfo{Version:"v3.0.2", GitCommit:"19e47ee3283ae98139d98460de796c1be1e3975f", GitTreeState:"clean", GoVersion:"go1.13.5"} Installing Configurator using helm chart Follow the below steps to directly deploy the Configurator helm package. Make sure that a namespace 'configurator' already exists in your cluster. If not, create a namespace with the following command. kubectl create namespace configurator Add the configurator helm repository, by executing the following command : helm repo add gopaddle_configurator https://gopaddle-io.github.io/configurator/helm/ Once the command is executed, verify the repository by running the command below. You must see the configurator_helm repo in the list. helm repo list The output must be similar to this: NAME             	      URL                                           
hashicorp        	      https://helm.releases.hashicorp.com              
gopaddle_configurator	  https://gopaddle-io.github.io/configurator/helm/ Once you've verified the repo, install the helm chart with the following command: helm install <release_name> <repo_name/chart_name> helm install release1.0.0 gopaddle_configurator/configurator This installs the Configurator CRDs and the controller in the 'configurator' namespace. After you install the helm chart, verify by listing the resources in the corresponding namespace using the following commands. kubectl get pods -n configurator
kubectl get crds -n configurator
kubectl get serviceaccounts -n configurator
kubectl get clusterrolebindings -n configurator Configurator is now ready for use. Here is a reference blog on how to use configurator with the deployments: https://blog.gopaddle.io/2021/04/01/strange-things-you-never-knew-about-kubernetes-configmaps-on-day-one/ Customizing Configurator helm chart based on requirements Sometimes, you may wish to change the Configurator image name, Docker repository, image tag or even include other service charts along with Configurator. Modifying the Configurator helm is pretty straightforward. Make sure you've cloned the Configurator GitHub project before proceeding with the next steps. To clone the project, run the following command: git clone https://github.com/gopaddle-io/configurator.git The helm package needs to be unpacked to modify the helm chart. The zip file will be present at the path configurator/helm in the Configurator project. Choose this option when you want to modify the helm chart configuration. Unzip the file with the following command. tar -zxvf <path to .tgz file> This will extract the contents of the chart in a folder. Once you extract, the helm chart's file system tree will look like this: configurator
├── charts
├── Chart.yaml
├── crds
│   ├── crd-customConfigMap.yaml
│   └── crd-customSecret.yaml
├── templates
│   ├── configurator-clusterrolebinding.yaml
│   ├── configurator-clusterrole.yaml
│   ├── configurator-deployment.yaml
│   ├── configurator-serviceaccount.yaml
│   └── tests
└── values.yaml The crds directory contains the custom resource definition files - & . The templates directory contains the resource's yaml files, in our case, it contains the roles and role bindings and the configurator service definitions. The charts directory is empty by default. This folder can be used to add your application charts that use Configurator Custom Resource. The file contains information about the helm, like the chart's name, description, type etc. crd-customConfigMap.yaml crd-customSecret.yaml Chart.yaml # Default values for my_chart.
# This is a YAML-formatted file.
# Declare variables to be passed into your templates.

replicaCount: 1
replicas: 1
namespace: configurator
image: gopaddle/configurator:latest You can edit the file to your requirements like changing the namespace, replica_count or the image name, docker repository or the image tag. Make sure that the namespace used in the exists in the cluster before you do a helm install. values.yaml values.yaml Once the necessary configuration is done, execute the following command to install the charts into your cluster : helm install <release_name> <chart_name> helm install release1.0.0 configurator This will install the helm chart inside the cluster with the new configurations. Contributing back to the configurator project To contribute the helm changes back to the Configurator project, you need to package the helm chart with the following command : helm package <path to helm chart> This command will package the charts to a .tgz file. After packaging the helm, you need to give a pull request for code review & merge. You can take a look at this open-source project @ . https://github.com/gopaddle-io/configurator.git For any queries on how to use or how to contribute to the project, you can reach us on our discord server - https://discord.gg/dr24Z4BmP8 Image courtesy - https://www.freepik.com/vectors/technology Technology vector created by stories - www.freepik.com This article was . also published here

Installing Configurator Using Helm Charts: Version Controls for Kubernetes ConfigMaps

Although Github provides a summary of repositories I have personally seen many project/product managers using Google sheets to keep track of issues and other repository related summary details. It’s a tiresome task to manually copy-paste these details into a google sheet. Choreo makes this integration between Github and Google Sheets super easy! Let’s see how we can do this integration in a few minutes. Login to the Choreo developer portal through https://console.choreo.dev/login/ Click on Get Started in the Integrations card and click on Create. Insert your integration service name under the card and click on Create with Choreo Create. Select the webhook trigger and select and provide authorization for Choreo to access your Github account. Github Connect to GitHub Provide the following details for the Github Trigger. Select a which lists all your available repositories. GitHub Repository Select the you want to add to your sheets. It can be issues, labels, pull requests or anything else listed in the dropdown. event Select the related to the event you selected. I selected issues and i’m going to extract the opened issues. action After adding all the details, click on . Save Select under API calls and provide Choreo authorization to connect to Google Sheets and click on . Google Sheets Save Select the necessary operation related to Google Sheets that satisfies your requirement and provide the following details. I selected the Append Row operation. i. Create a Google sheet and provide the . Google Sheet ID ii. Provide the . Worksheet name You can add the row values required to be shown in the sheet. I want the following details and the corresponding Row value is shown below. item iii. Click on after inserting each Item value. Add Item a. Issue url : b. Issue title : c. Issue created time: event.issue.html_url event.issue.title event.issue.created_at You can refer to the Github issues API for more properties: https://docs.github.com/en/rest/reference/issues After adding all the details, click on . Save Click on the button at the bottom of the page to test your integration. Run & Test You can create a new issue in. your Github repository and check whether the issue is recorded in the Google sheet. In a few minutes, you have integrated Github with Google sheets to record the newly created issues in your repository. Choreo just made every manager’s life so much easier!

Super

How to Integrate Github with Google Sheets Using Choreo

Table of Contents: What is the Pegasus Spyware? How the Pegasus Spyware Works What Information is Collected? Why Does Pegasus Target iPhones? How to Tell if the Pegasus Spyware is on Your Phone How to Protect Against the Pegasus Spyware Pegasus Spyware Examples Final Thoughts: Pegasus Spyware What is the Pegasus Spyware? Pegasus is a spyware developed by an Israeli group called NSO however it has been recently revealed that the German Federal Criminal Police Office (BKA) has owned it since 2019. This spyware is licensed and marketed to government agencies all around the world. The spyware is like a keylogger, once it has been installed onto the target’s phone it has access to everything on the device and can send the data on the phone back to the government. The spyware is designed to invade devices that run Android, iOS, Blackberry, and Symbian operating systems and turn them into monitoring devices. NSO stated that Pegasus was created only for the government for the purpose of tracking terrorists and criminals. The developers have also pointed out that the spyware cannot be traced back to the government that used it. How the Pegasus Spyware Works In earlier versions of Pegasus, the spyware was installed on smartphones through vulnerabilities found in commonly used apps or via spear-phishing. Phishing attacks involved tricking targeted users into clicking a link or downloading a file that contains malware which would, in turn, install the spyware. Pegasus, just like any other spyware, has evolved. In 2019, Pegasus was installed on smartphones through a missed WhatsApp call or through sending a message to the targeted user’s phone without notification. The latest version of Pegasus does not require the smartphone to perform any action. An attacker just needs to find a vulnerable application on the device or the operating system of the device where a patch is not yet available (also known as a zero-click attack). What Information is Collected? Once installed on a smartphone, the spyware can steal videos, photos, messages, passwords, location, login credentials, notes, and more on your phone and send it back to the attacker. The spyware has the ability to activate the camera and microphone on your smartphone for real-time surveillance without the user knowing. Why Does Pegasus Target iPhones? iPhones have been the main target for the Pegasus spyware due to the fact that most of the Apple devices run on an identical environment. This means that there is a higher success rate for the Pegasus spyware to infect iPhones. Android devices can also be infected with the Pegasus spyware, however, the success rate is much lower due to the diversity of hardware and software. This makes it difficult to use one tool across all Android devices. How to Tell if the Pegasus Spyware is on Your Phone It is highly unlikely that a non-political person or a well-known public figure would be monitored by the Pegasus spyware but you will never know if you are infected. Therefore, the best way to determine if you have been infected is by using the . Amnesty International Mobile Verification Toolkit This tool can be used on Linux or MacOS and has the capability to examine the configuration and files on the mobile device and detect whether or not your phone has the Pegasus spyware installed on it. Raydacted posted on Twitter the detailed explanation and process of the tool. How to Protect Against the Pegasus Spyware Well, as mentioned in the previous section, there are steps that you can take to prevent the Pegasus spyware from being infiltrated onto your device. But you cannot completely avoid it. What you can do is protect yourself from the Pegasus spyware. The following is a list of items that you should do to limit the potential exposure to Pegasus and any other potential malware attacks. Make sure that your applications are up-to-date Ensure that the operating system on your device is up to date Users should not click on any links and download any attachments sent in email messages or text messages from unknown senders Avoid the use of public WiFi Make sure to encrypt the data on your device and to enable remote-wipe features if possible so that if for some reason your device is lost or stolen you know that your data is safe Pegasus Spyware Examples In July 2021, roughly 40 smartphones belonging to activists and journalists were successfully infected with the Pegasus spyware. In , attackers used the Pegasus Spyware to hack iPhones then blackmailed users into paying a ransom of 0.035 bitcoin or roughly $1,600. Pegasus tracked the victim’s “actions and captured recordings of them at of their lives”. So, if the ransom is not paid then they have threatened to release these recordings to the victim’s friends, family members, and business partners. The screenshot below shows what the attacker sent to the Pegasus spyware victim. August 2021 the most private moments Final Thoughts: Pegasus Spyware I hope after reading this article you have a better understanding of what the Pegasus spyware is and how it works. This spyware can infiltrate a smartphone without the user knowing, therefore, gaining access to everything on the user’s mobile device. Just like with any other cyber-attack, the Pegasus Spyware is not going away anytime soon.

Apple

Interested in security? Follow along for content within Cybersecurity

2021 - Top Security Expert

2022 - HackerNoon Contributor of the Year - Cyber Security Awareness

2022 - HackerNoon Contributor of the Year - Facebook

2022 - HackerNoon Contributor of the Year - Instagram

2022 - HackerNoon Contributor of the Year - Security

2022 - HackerNoon Contributor of the Year - Social Media

Nominated for 2022 - HackerNoon Contributor of the Year - Instagram

Nominated for 2022 - HackerNoon Contributor of the Year - Social Media

Nominated for 2022 - HackerNoon Contributor of the Year - Security

Nominated for 2022 - HackerNoon Contributor of the Year - Cyber Security Awareness

Nominated for 2022 - HackerNoon Contributor of the Year - Facebook

Pegasus Spyware: Here’s What You Need to Know

HackerNoon Tech Stories Archive September 14th, 2021

How I Remade 2048 Using React

@msokola
Matéu.sh

The Gaming Industry is Going Through a Revolution in 2021

@grozycrypto
Dave D

Getting Started in the World of NFT Collectibles

@alexa.eth
Alexa Karp

How Do You Measure Success? Downloads, Traction, and Revenue

@myvalet
myvalet

Is this New macOS Dock the Answer to Virtual Collaboration?

@kayanne
kayanne

Hacking Hacker Noon: Is Hacker Noon (Really) Free to Read?

@support
Hacker Noon Help and Support

Plookup with zkEVM: A Brief Introduction to How zkEVM Works

@sin7y
Sin7Y

How Upgradable NFTs Will Change Collector Engagement

@tirtha
Tirtha Sarker

4 Blockchain Projects Leading the Charge Into the Future of Online Monetization

@gedalexander
GB0514

HarperDB: Build Your Application Backend in One Place with Custom Functions

@jacobbcohen
Jacob Cohen

Why Burnout Syndrome Is More Common Among Software Developers

@capeofgoodcode
Cape of Good Code

How to Implement Cloud APIs: Google Drive API, Dropbox API, and OneDrive API

@tetianastoyko
Tetiana Stoyko

Installing Configurator Using Helm Charts: Version Controls for Kubernetes ConfigMaps

@ashvinkumar
ashvin

How to Integrate Github with Google Sheets Using Choreo

@kavishkafernando
Kavishka Fernando

Pegasus Spyware: Here’s What You Need to Know

@jtruong
Jessica Truong

HackerNoon Tech Stories Archive September 14th, 2021

@msokolaMatéu.sh

@grozycryptoDave D

@alexa.ethAlexa Karp

@myvaletmyvalet

@kayannekayanne

@supportHacker Noon Help and Support

@sin7ySin7Y

@tirthaTirtha Sarker

@gedalexanderGB0514

@jacobbcohenJacob Cohen

@capeofgoodcodeCape of Good Code

@tetianastoykoTetiana Stoyko

@ashvinkumarashvin

@kavishkafernandoKavishka Fernando

@jtruongJessica Truong