Make The Dotis in the Fashion Tech Industry

Make The Dot

This tutorial is the fifth part of our React Native Travel Article App UI clone series. In the , we successfully implemented the Recommendation Section on our List Screen. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous parts in order to get the knowledge and insight into the overall project. previous part The motivation for this tutorial series came from the React Native App Templates that consists of a wide variety of beautiful templates written in React Native and powered by universal features and design. The templates enable us to implement our own apps and even help us get started with our own startups. And, this fifth part is also the continuation of the same coding implementations and designs from the Youtube video tutorial by for the Travel Article App UI clone. The video tutorial delivers the overall tutorial using fast coding which may be difficult to grasp for any developer especially the beginners. Hence, this article tutorial provides a step by step implementation which will be easier to understand and implement. So, the learners can relax and take their time to implement the UI. React UI Kit Overview In this fifth part of this tutorial series, we are going to implement the Animated Delimeter dots of the Destinations section. The idea is to make the delimiter dots active in the animated fashion while scrolling the Destination section cards.  After we complete this, we are going to store our color and size style properties in a different file. Then, we are going to use the style properties from that file to style the components in our List Screen. This will make our code clean and organized for better understanding. So, let us begin!! Making Some Configuration in FlatList of Destinations section Here, we are going to add an additional prop to the FlatList component of the Destinations section. The prop we are going to add is decelerationRate. This decelerationRate prop is a floating-point number that determines how quickly the scroll view decelerates after the user lifts their finger. Now, we are going to add this prop to our FlatList component as shown in the code snippet below: <View style={[ styles.flex, styles.column, styles.destinations]}> `${item.id}`}
                renderItem = {({item}) => this.renderDestination(item)}
              />
              {this.renderDots()} < = = = = // = ' ' }} // = = )=> FlatList horizontal pagingEnabled scrollEnabled showsHorizontalScrollIndicator {false} scrollEventThrottle {16} snapToAlignment "center" decelerationRate {0} style {{ overflow : visible In IOS platform data {destinations} keyExtractor {(item, index </ > View Adding Animation to Delimiter Dots In this step, we are going to add the Animation to our Delimiter Dots in our Destinations section. For that, we need to import the Animated component from the react-native package as shown in the code snippet below: { 
  StyleSheet, 
  Platform, 
  Text, 
  View, 
  ScrollView,
  Dimensions, 
  ImageBackground, 
  Image, 
  FlatList, 
  TouchableOpacity, 
  Animated
} ; import from 'react-native' Now, we need to define a variable called that is initialized to Animated value. This variable will store our animation value for horizontal animation. In order to do this, we need to use the code from the following code snippet: scrollX {

    scrollX = Animated.Value( ); export default . class List extends React Component new 0 Here, the Animated.Value configuration enables us to bind to style properties or other props and can be interpolated as well. Now, we need to configure this value into the event of the component of function as shown in the code snippet below: scrollX onScroll FlatList renderDestinations() <FlatList 
                horizontal
                pagingEnabled
                scrollEnabled
                showsHorizontalScrollIndicator = { }
                scrollEventThrottle = { }
                snapToAlignment = decelerationRate={ } onScroll={Animated.event([{ : { : { : .scrollX }} }])}
                data = {destinations}
                keyExtractor = {(item, index)=> }
                renderItem = {({item}) => .renderDestination(item)}
              /> false 16 "center" 0 // style={{ overflow : 'visible' }} //In IOS platform nativeEvent contentOffset x this ` ` ${item.id} this Here, we have used the event function of the Animated component which takes the as a parameter. Then, we have defined the value according to the variable inside the nativeEvent config. nativeEvent contentOffset scrollX Configuring Animation in Delimiter dots in accordance with the scrolling FlatList Here, we are going to add animation to the Delimiter dots which will depend on the event of the . For that, we need to first initialize the dot position using the divide function of the component. The divide function creates a new Animated value composed by dividing the first Animated value by the second Animated value. And, its use is shown in the code snippet below: onScroll FlatList Animated dotPosition = Animated.divide( .scrollX, width); const this Now, we are going to make some configuration in the function in order to animation properties to the dots. For that, we need to use the code from the code snippet below: renderDots() Delimiter renderDots() { dotPosition = Animated.divide( .scrollX, width); ( <Animated.View
              key={`step-${item.id}`}
              style={[styles.dots, styles.activeDot, { borderWidth: borderWidth } ]}
            />
          )
        })}

      </View> const this return {destinations.map((item, index) => {
          const borderWidth = dotPosition.interpolate({
            inputRange: [index -1, index, index + 1],
            outputRange: [0, 2.5, 0],
            extrapolate: 'clamp'
          });
          return ( < = , ,
        { ' ', ' ', }
      ]}> View style {[ styles.flex styles.row justifyContent: center alignItems: center marginTop: 10 )
  } Here, we have defined a constant called which is initialized to the function of the constant initlized to Animated.divide. The function takes , and extrapolate as parameter values. borderWidth interpolate() dotPosition interpolate() inputRange outputRange The function permits input ranges to map to different output ranges. Then, we have also added component to our component with style property. interpolate() Animated View borderWidth Hence, we will get the following result in our emulator screen: As we can see, we have successfully added beautiful animation to the Delimiter dots as we scroll the Destination section card in the Destination section. The animation is very smooth and works well with the scrolling transition. Configuring Style properties Here, we are going to configure the style properties from a separate file. Then, we will style our List Screen components according to the style properties in that file. Storing Style Properties in Different File In this step, we are going to store our size and color properties used very commonly on the List screen to a different file called . This will make things easier for us to assign styles to different components. Now, we need to create a file called in our main project folder as shown in the code snippet below: ‘theme.js’ ‘theme.js’ As we can see, we have got the file. Now, in the theme.js file we need to define our colors and sizes properties as shown in the code snippet below: ‘theme.js’ colors = { : , : , : , : , : ,
  }; sizes = { : , : , : , : , : , : ,
  }; {
    colors,
    sizes,
  }; const black '#000' white '#FFF' gray '#DCE0E9' caption '#BCCCD4' active '#007BFA' const base 16 font 14 padding 36 margin 36 title 24 radius 12 export Here, we have defined the color and size style properties in the colors and sizes constant variables that are then exported. Integrating Color and Size style properties based on theme.js file Since we have defined some common style properties in the theme.js file, here we are going to import the styles from file and integrate them into our component inline styles as well as the styles in the component. But first, we need to import the file into our file as shown in the code snippet below: theme.js StyleSheet theme.js List.js * theme ; import as from '../theme' Now, we are going to change the color and size style properties in accordance with the pre-defined styles from the theme.js file. Changing color style properties in accordance with theme.js Here, we are going to change the color style properties in the file with the colors variable from the theme.js file. All the changes made to the style properties in the component is provided in the code snippet below: List.js StyleSheet header: { : theme.colors.white, : , : , : , : , : ,
    }, : { : , : , : , : , : , left : , : , : theme.colors.white,
    }, : { : (width - ( * )) / , : , : theme.colors.white, : , : , : * ,
    }, : { : * , : theme.colors.white
    }, : { : , : theme.colors.white, : }, : { : theme.colors.black, : { : , : ,
      }, : , : , : ,
    }, : { : , : , : , : , : , : theme.colors.gray, : ,
    }, : { : , : , : , : theme.colors.active,
    } backgroundColor paddingHorizontal 36 paddingTop 48 paddingBottom 24 justifyContent 'space-between' alignItems 'center' destinationInfo position 'absolute' borderRadius 12 paddingHorizontal 36 paddingVertical 16 bottom 20 //In iOS platform, bottom : -36 36 right 36 backgroundColor recommendation width 36 2 2 marginHorizontal 8 backgroundColor overflow 'hidden' borderRadius 12 marginVertical 36 0.5 recommendationTemp fontSize 14 1.25 color rating fontSize 28 color fontWeight 'bold' shadow shadowColor shadowOffset width 0 height 6 shadowOpacity 0.05 shadowRadius 10 elevation 5 dots width 10 height 10 borderWidth 2.5 borderRadius 5 marginHorizontal 6 backgroundColor borderColor 'transparent' activeDot width 12.5 height 12.5 borderRadius 6.25 borderColor Now, we have some inline styles as well bound to the components in the different templating methods. We need to change them in accordance with colors variable as well. All overall code with changes is provided in the code snippets below: In the header config of the object: navigationOptions <Text style={{ : theme.colors.caption}}>Search place< color for /Text> For the function: renderDestination() renderDestination(item){ ( <View style={[styles.row, {justifyContent: 'space-between'}]}>
            <View style={{flex : 0}}>
              <Image source={{uri: item.user.avatar}} style={styles.avatar}/>
            </View>
            <View style={[styles.column, {flex : 2, paddingHorizontal : 18}]}>
              <Text style={{color : theme.colors.white, fontWeight : 'bold'}}>{item.user.name}</Text>
              <Text style={{color : theme.colors.white}}>{item.location}</Text>
            </View>
            <View style={{flex : 0, justifyContent : 'center', alignItems : 'flex-end'}}>
              <Text style={styles.rating}>{item.rating}</Text>
            </View>
          </View>
          <View style={[styles.column, styles.destinationInfo, styles.shadow]}>
            <Text style={{ fontSize: 24, fontWeight: '500', paddingBottom: 8, }}>
              {item.title}
            </Text>
            <View style={[ styles.row, { justifyContent: 'space-between', alignItems: 'flex-end'}]}>
              <Text style={{ color : theme.colors.caption}}>
                {item.description.split('').slice(0, 50)}...
              </Text>
            </View>
          </View>

        </ImageBackground> return < = , ]} = }} = }}
        > ImageBackground style {[styles.flex, styles.destination styles.shadow imageStyle {{borderRadius : 12 source {{uri : item.preview )
    } In the function renderRecommended() <TouchableOpacity activeOpacity={ }> < 0.5 More < = }}> Text style {{ color: theme.colors.caption </ > Text /TouchableOpacity> For the function: renderRecommendations() <View style={[styles.flex, styles.column, styles.shadow, { : , : / }]}> <Text style={{ : theme.colors.caption}}>{item.location}< Text> < justifyContent 'space-evenly' padding 36 2 {item.title} < = * , ' ', / , }}> Text style {{ fontSize: 16 1.25 fontWeight: 500 paddingBottom: 36 4.5 </ > Text color /Text>
              <View style={[
                styles.row,
                { alignItems: 'center', justifyContent: 'space-between', marginTop: 36 }
              ]}>
                <Text style={{ color: theme.colors.active }}>{item.rating}</ </ > View /View> Changing size properties in accordance with theme.js Here, we are going to change the size style properties in the file with the sizes variable from the theme.js file. All the changes made to the style properties in the component is provided in the code snippet below: List.js StyleSheet header: { : theme.colors.white, : theme.sizes.padding, : theme.sizes.padding * , : theme.sizes.padding * , : , : ,
    }, : { : , : , : ,
    }, : { : width - (theme.sizes.padding * ), : width * , : theme.sizes.margin, : theme.sizes.padding, : , : theme.sizes.radius
    }, : { : , : theme.sizes.radius, : theme.sizes.padding, : , : , left : theme.sizes.padding, : theme.sizes.padding, : theme.colors.white,
    }, : { : , : , : theme.sizes.padding,
    }, : { : (width - (theme.sizes.padding * )) / , : , : theme.colors.white, : , : theme.sizes.radius, : theme.sizes.margin * ,
    }, : { : , : theme.sizes.radius, : theme.sizes.radius,
    }, : { : , : , : theme.sizes.padding / , : , : , : , : ,
    }, : { : * , : theme.colors.white
    }, : { : (width - (theme.sizes.padding* )) / , : (width - (theme.sizes.padding * )) / ,
    }, :{ : theme.sizes.padding, : theme.sizes.padding, : theme.sizes.padding / }, : { : theme.sizes.font * , : theme.colors.white, : }, backgroundColor paddingHorizontal paddingTop 1.33 paddingBottom 0.66 justifyContent 'space-between' alignItems 'center' destinations flex 2 justifyContent 'space-between' paddingBottom 30 destination width 2 height 0.66 marginHorizontal paddingHorizontal paddingVertical 20 borderRadius destinationInfo position 'absolute' borderRadius paddingHorizontal paddingVertical 16 bottom 20 //In iOS platform, bottom : -36 right backgroundColor recommendedHeader justifyContent 'space-between' alignItems 'flex-end' paddingHorizontal recommendation width 2 2 marginHorizontal 8 backgroundColor overflow 'hidden' borderRadius marginVertical 0.5 recommendationHeader overflow 'hidden' borderTopRightRadius borderTopLeftRadius recommendationOptions alignItems 'center' justifyContent 'space-between' padding 2 position 'absolute' top 0 left 0 right 0 recommendationTemp fontSize 14 1.25 color recommendationImage width 2 2 height 2 2 avatar width height borderRadius 2 rating fontSize 2 color fontWeight 'bold' Now, we have some inline styles as well bound to the components in the different templating methods. We need to change them in accordance with sizes variable as well. All overall code with changes is provided in the code snippets below: In the header config of the object: navigationOptions <Text style={{ : theme.sizes.font * }}>Destination< fontSize 2 /Text> For the function: renderDots() <View 
          style={[ 
                  styles.flex, 
                  styles.row, 
                  { : , : , : Platform.OS === ? theme.sizes.padding * : }
                ]}
         > 
          ................. justifyContent 'center' alignItems 'center' marginTop 'ios' 2 48 In the function: renderDestinations() <ImageBackground
          style={[styles.flex, styles.destination, styles.shadow]}
          imageStyle = {{ : theme.sizes.radius}}
          source= {{ : item.preview}}
        > <View style={{flex : 0}}>
              <Image source={{uri: item.user.avatar}} style={styles.avatar}/>
            </View>
            <View style={[styles.column, {flex : 2, paddingHorizontal : theme.sizes.padding / 2}]}>
              <Text style={{color : theme.colors.white, fontWeight : 'bold'}}>{item.user.name}</Text>
              <Text style={{color : theme.colors.white}}>{item.location}</Text>
            </View>
            <View style={{flex : 0, justifyContent : 'center', alignItems : 'flex-end'}}>
              <Text style={styles.rating}>{item.rating}</Text>
            </View>
          </View> <View style={[styles.column, styles.destinationInfo, styles.shadow]}>
            <Text style={{ fontSize: theme.sizes.title, fontWeight: '500', paddingBottom: 8, }}>
              {item.title}
            </Text>
            <View style={[ styles.row, { justifyContent: 'space-between', alignItems: 'flex-end'}]}>
              <Text style={{ color : theme.colors.caption}}>
                {item.description.split('').slice(0, 50)}...
              </Text>
            </View>
          </View> borderRadius uri < = { ' '}]}> View style {[styles.row, justifyContent: space-between </ > ImageBackground For function: renderRecommended() <Text style={{ : theme.sizes.font * }}>Recommended< fontSize 1.4 /Text> In function renderRecommendation() <View 
            style={[styles.flex, styles.column, styles.recommendation, styles.shadow,
                    index === ? { : theme.sizes.margin } : ,
                    isLastItem ? { : theme.sizes.margin / } : ,
                   ]}
           > <Image style={[styles.recommendationImage]} source={{ uri: item.preview }} />
              <View style={[ styles.flex, styles.row, styles.recommendationOptions ]}>
                <Text style={styles.recommendationTemp}>
                  {item.temperature}℃
                </Text>
              </View>
            </View> <View style={[styles.flex, styles.column, styles.shadow, { justifyContent: 'space-evenly', padding: theme.sizes.padding / 2 }]}>
              <Text style={{ fontSize: theme.sizes.font * 1.25, fontWeight: '500', paddingBottom: theme.sizes.padding / 4.5, }}>{item.title}</Text>
              <Text style={{ color: theme.colors.caption}}>{item.location}</Text>
              <View style={[
                styles.row,
                { alignItems: 'center', justifyContent: 'space-between', marginTop: theme.sizes.margin }
              ]}>
                <Text style={{ color: theme.colors.active }}>{item.rating}</Text>
              </View>
            </View> 0 marginLeft null marginRight 2 null < = ]}> View style {[styles.flex, styles.recommendationHeader </ > View Hence, after everything is organized, we will get the same result as before which is shown in the following emulator simulation: As we can see, the result is the same as before with all the codes organized. Now, we will be able to configure style properties easily in the upcoming parts of this tutorial series. With this, we have come to the end of this part of the tutorial series. Finally, we have successfully implemented the Animated Delimiter dots in the section of our screen. Destinations List Conclusion This tutorial is the fifth part of the React Native Travel Article App UI clone tutorial series. In this part, we continued from where we left off in the fourth part of this tutorial series. In this part of the tutorial, we got stepwise guidance on how to add beautiful active style animation to the of the section. Hence, we made the active animation of in accordance with the scrolling of the section cards. Then, we also organized our inline styles and styles in the component to make code standard and clear. Hence, we can now style our components more easily in the upcoming parts of this tutorial series. Delimiter dots Destinations Delimeter dots Destination StyleSheet In the next part of this tutorial series, we are going to add the icons to our List screen as well as the rating stars to our Recommendation Info cards.

React Native Travel Article App UI Clone #5 : Animated Delimiter Dots

Steve Jobs once famously talked about “Connecting the dots”. We need dots to make the connections. Dots can be anything from knowledge, wisdom, Secrets, Experience, Gut feeling, skills, talents, capital etc. The goal of this article is to explain a few dots, mostly through human evolution and try to connect them with the crypto point of view. Contextual meaning of crypto in this article is any distributed ledger technology. Dot 1: Humans biggest breakthrough over time Discovery of fire enabled humans to hunt the animals in bulk and store the food for future use. This gave humans a lot of free time to think, communicate and coordinate. Language enabled humans to communicate and share ideas among the group in a defined way. Passing the experience and knowledge to the next generation. Language enabled humans to compound his knowledge at a breathtaking pace. Along with wheel, other transports systems including the domestication of horse enabled humans to move beyond his tribe. Humans started to look opportunity outside his tribe. Money helped us to trade time with others, it helped us to leverage other people time and effort. Chasing the money brings a lot more discoveries and inventions. More lands occupied for money, more people getting the education in hope of earning making money. The by-product was more widespread knowledge, skills, and coordination. Printing press and other medias enabled us mass education, within a few hundred years, humans gathered more knowledge than previous millions of year. Electricity and other energy source enabled us to move, build, manufacture and connect quicker than ever. If someone woke up from the coma after 20 years, sure he would think they woke up in an alien land. We have seen more changes in the last 20 years than entire history. The degree of separation reduced from 6 in 1990 to 3.5 in 2016, thanks to the internet, We might end up connecting everyone with everyone. We have seen each breakthrough helped another breakthrough and each latest breakthrough was multiple times bigger than previous breakthroughs. We will see how crypto going to disrupt everything and make the internet revolution will look tiny. AND REMEMBER, EACH BREAKTHROUGH LEFT THE UNADOPTED BEYOND. Fire: Language: Wheel: Money: Printing Press: Electricity: Internet: Crypto: Dot 2: Evolution of trust. Humans never trusted another human throughout evolution. We always depended on third-party trust provider to settle the disputes and to trust others. As networked spices, trust is the fundamental force for networking, coordination, and relationship. A simple example is, in a wealthy society, people have more trust among themselves while poor society struggle with the trust issues. We used to depend on the priests, gods, church, kings, holy books, Gang leaders etc to keep the trust. If two people have a dispute, these trust-providers will take some money and settle the dispute. Over time, these trust providers become costly, slow, biased and corrupt. They become rulers of masses. Each stage of our evolution created a new trust provider. Recently democratically elected governments, bureaucrats, judges, courts, polices, banks, bankers, militaries etc are modern trust-providers and rulers. Lately, the Internet created 1000s of new trust providers like Amazon, Uber, Airbnb, Facebook, Paypal gave trust to users. They sit between people who never trusted each other. Uber comes in when driver and passenger cannot trust each other. Amazon comes in when seller and buyer trust each other. They become internet powerhouses. Like ancient age trust providers, these internet trust providers started to abuse the users. Users don’t have options either. Bitcoin is the first system, which removed the need of trust between parties. Crypto is a major breakthrough in human history, that two or more anonymous individuals can exchange the value without any need of trust providers. We call it “Trustless By design”. And the first “ ” system. What if every human trusts each other instantly and anonymously and form a huge network. Will leave it to your imagination. Socially Scalable Bonus: are 36 tweets by @naval about Blockchain. This article largely inspired from his tweets. Here Dot 3: Evolution of Power distribution The social structure of homo sapiens (and most of the animals) is hierarchical and top post is mostly occupied by an alpha male. The power structure evolved along with the technology advancements. Over time the kings started to delegate some of his power to his family members and friends. Over the time when kingdom become bigger, he delegates more power to more people, He started to appoint ministers, dukes, governors, army generals etc. Later these rulers added bureaucrats and gave them power. Later democracy was accepted all over the world. People directly elect their ruler for a specific duration. Though people elect them, still most of the power was with rulers. Over time, the government become structural and shared more powers to private sectors. Today most of the countries are virtually run by private sectors, like distributing electricity, internet, water, manufacturing, health, education etc. If we look at the historical pattern of power distribution, the people started to grab the power from their rulers and rulers happily give up some of their power to stay in power. Clearly, the next evolution of power distribution will be, more people in the bottom of the pyramid wants to grab some power from rulers. Crypto will enable people to create their own network without the need for rulers. From print own money to producing and distributing power to anything. It’s because of empowering private companies, humans made so much breakthrough in the last 50 years. What will happen if we empower billions of people?. Will leave it your imagination. Dot 4: How technology replaces people over time. We keep replacing humans / domestic animals with machines during our evolution. Like oxen, cows with agricultural tools. Horses with cars. Later we started to replace the humans from the bottom of the social pyramid. Now, most of the manufacturing units and agricultural fields are filled with robots. If we observe the pattern, we mostly started to replace people from the bottom-up. Google driverless car is one of the major tech breakthrough in our lifetime, Kind of science fiction reality, but still, it going to replace the drivers, who are middle-bottom of the social pyramid. If we assume drivers are 1% of society, and if their average salary is $400 per month (in India). If we replace every driver with google car, if google charge 10% of what drivers charge, then the market of google car will be 80Mn drivers X $400 = $32bn per month. I know the math is stupid, but the point here is, what if we have a technology, which might replace the humans and institutes in the top of the social pyramid. Entities like financial institutes, politicians, bureaucrats, rent-seeking middlemen, lawyers, trust providing agencies are in danger of replaced by Crypto. The market for automating the government, politicians, financial institutes, rent-seeking middlemen and 10,000s of corporates must be multi-trillion dollars, Truth is, we have enough infra, talents, money and proven tech to automate/disrupt/ replace them in form of crypto. I am writing a separate detail post on this, will publish in future about it. It’s coming faster than we think. Dot 5: Belief systems and an army of believers Time and again the human history changed by a small army of believers. Belief systems like Religion, Kingdom, Nation, Brand, Money, Capitalism are still thriving for years from commencement because a group of people believed strongly and passed to the next generation. They sacrifice everything to guard their belief. Christians believed in Jesus, converted one-third of the population. Nothing can stop something that few believed and committed to it. Bitcoin is the strongest belief system we had seen in our lifetime. Especially in the post-internet hyper-connected era, Crypto is the biggest utopian idea ever and the first belief system backed by science and math. A few years ago, there was some group of people believed in it. Now we have belief, money, energy, and talent. We will see 1000s of believers will start work full time on it in the next 2 years. Don’t mess with this new borderless, permissionless belief system who want to disrupt everything. Dot 6: What we traded over time Another evolution perspective is, as networked species, how and what we traded over time. Earlier, we had the barter system, we just exchanged the available goods with nearby humans. Later with the invention of money, we start to trade many things, including time, trust, land, services, goods and etc. We started to leverage other peoples money, time and effort. Currently, we are trading the stocks, shares, bonds, currencies, commodities etc. Each improvement in trade bought more breakthroughs in human evolution. With the advent of crypto, We going to trade many things that we can’t imagine now. All without any political, geographical, financial barrier. An example, people will start to produce electricity, distribute and consume in peer to peer network. We might trade personal brands, honesty, attention, attraction, and reputations. We might trade the health index of the community. We might start trade anything that has value. There will be millions of tokens available for trading, Anyone can buy and sell anything instantly and anonymously from anywhere for 24x7. Already there are some projects to trade data, time, influencing score etc. The global GDP will be multiple times bigger than current GDP when we start trading millions of tokens. Dot 7: How different people make money, overview Most people earn money by doing day jobs. You renting your time and earn rent. Entrepreneurs own business(es), use the above people and leverage their time and effort. Here both risk and return increase. Here people work for you. Investors invest in Entrepreneurs / Businesses, here again, both risk and return increases. Here more people work for you. Investing in stocks, Here 1000s of big Businesses work for you. You can grow (and loss) your money every minute. Here again, risk and reward will be even higher. Investing in Forex, commodities, CFDs, Futures, and Bonds. Here entire country’s population works for you. More make sure you take responsibility for the huge population, Here both the risk and reward is very high. Above points provides the reason that very few people controls the large portion of wealth and the large portion of the population owns the tiny portion of wealth. With crypto, we basically invest in a borderless protocol. In other words, Crypto investors might sit on the top of above 5 people. You will literally make money by trading the protocols that power the new world. Bonus: This portion is taking from here https://qr.ae/TUGLVN Crypto is a single deep field which packed technological, science, philosophy, politics, economics and religion into a single piece. In the early 1990s, most people imagined that internet going to replace mail service. That’s how their imagination limited to. But today the top 5 companies are internet companies. The same is to happen with Crypto. We are not sure what it will bring. But people who grow with crypto will build the whole new world. And i will leave you to connect the crypto dots. Connections: P.S: If you are into crypto, Checkout 2ools, my upcoming product in Producthunt: https://www.producthunt.com/upcoming/2ools

Connecting the crypto dots.

Spoiler: Use to render DAGs written in the DOT language Vizdom.dev As a software dev, I’ve occasionally worked with DAGs — most of which involve visualizing them. In many cases, I found it difficult to get a quick rendering and found myself looking for tooling. Fortunately, there’s the trusty tool that can render graphs written in the DOT language — Perfect! Graphviz Except… It doesn’t work well on the web* I need to install it It doesn’t manage DOT/GV files online Considerations *Okay, Graphviz can be compiled to WebAssembly, and a few talented folks managed to build a few neat projects such as dreampuf’s , nikeee’s , and magjac’s — each with its own twist. I still struggle to embed these renderings without exporting them to an SVG (or other medium). technically editor edotor.net editor For example, I want to store my graph in by simply pasting a link that automatically renders the graph. Notion.so I could use which renders graphs pretty cleanly and works surprisingly well — it’s one of the many reasons why it has . I can also embed graphs in Notion/GitHub by using markdown, sweet! MermaidJS GitHub 64k+ starts on Unfortunately, I have to translate DOT into the flavor of markdown that Mermaid requires. For smaller textual representations, I can use ChatGPT to convert them for me, but it frequently makes grammatical mistakes, and the graph will refuse to render — making it unreliable as a source of automation. Then there is which is amazing for managing diagrams, but like my Mermaid woes, I cannot convert DOT to D2 reliably. I suppose if you’re going to be building diagrams by hand this is an acceptable, one-time cost. In general, it is a fantastic tool. Kudos! Terrastruct.com hand-built The Problem I want to render generated DOT outputs — none of the tooling seems to help me achieve that goal. programmatically I want to embed links that render graphs. I want to store the rendering online for updates or to visually compare it with other graphs. The Solution Yup — I built an for that 🎉 app …And it’s built entirely in Rust 🦀 with many thanks to Leptos tl;dr — a simple, purpose-built app to render DAGs online, fast Minimizing edge crossings in graph generation, a recognized NP-hard challenge is key to creating visually appealing graphs. The team at Terrastruct has published an outstanding delving into this topic. Inspired significantly by the DagreJS layout algorithm(s) and the insightful paper “ ¹”, I developed a variant in Rust. blog post A Technique for Drawing Directed Graphs This version is particularly effective for rendering hierarchical graphs, leveraging the intricate complexities of this problem. Rendering large DAGs (500+ nodes/edges) tends to be somewhat sluggish with Graphviz. Dagre + D3 ( and derivatives) end up quite a bit faster and offer great animations/styling customizations. Yet, I felt that they miss out on the features that DOT language provides — namely, the styling attributes are often only honored if you’re rending with Graphviz. d3-graphviz will produce results very similar to Dagre but aligned more toward the DOT specification and style behaviors of Graphviz. However, it does not have feature parity with Graphviz, and statements/attributes that aren’t supported are simply ignored. Vizdom I believe it is a good compromise for the kinds of attributes programmatically generated DOT will consume. Vizdom Features 🚀 Blazing fast rendering 💾 Store graphs in links 0️⃣ Zero dependencies and no installation required Rendering Speed Well, it’s an apples-to-oranges comparison. Graphviz still produces visualizations and supports more , so I am subjectively comparing against Graphviz’s DOT engine, scoping it down to just DAGs, and even scoping it down to a list of narrow features of the DOT language. great layout engines Vizdom further Yes, I know it’s terrible to compare years of experience and tooling around the 30+ year streak that is Graphviz, but for my narrow use-case, it is crazy fast. Here are some wall times on my M1 Macbook Pro for rendering with ~400 nodes: a fairly large graph Native Graphviz: ~30 seconds Chrome (WASM) Graphviz: crashes* Chrome (Javascript) DagreJS: ~10 seconds Chrome (WASM) : Vizdom ~1 second** * It crashes because the emscripten flag, ALLOW_MEMORY_GROWTH=1 , is not set, therefore limiting the total memory to 16MB. This can be fixed, but I have not found an online project that can handle the graph in question. ** The example graph is rendered by selecting Example 14 in the editor view. Refreshing the page will result in you refreshing the page and getting a 414 because the URI that persists in the graph is too large. I am working on a better solution to store larger graphs. Store Graphs in Links You’ll notice when you make any changes to the DOT file, the URL immediately updates a few query parameters to store the graph and layout options, allowing you to always reference a copy of your data just by storing the link! There is a catch — large-ish graphs tend to make the URI too large for AWS (where is currently hosted) and other load balancers. Vizdom I’m currently working on a solution to handle larger graphs, but in the meantime, I’ve included a few ways to persist and store graphs: Copy an embeddable link that automatically renders a view that maximizes the graph. Copy an iframe snippet to embed in any application that supports rendering them. Or simply download the rendered SVG. Here’s an example of what the editor view looks like of the : pprof trace for deflate Go to the , and load Editor View Example 42 Diff View Occasionally, I found myself trying to compare two graphs that I’ve generated, so while I was at it, I added a to visually see changes between two different graphs. diff viewer Color Legend: Red: Deleted Orange: Modified Green: Added Here’s a few snaps: Click me: changing a node ID from “e” to “f” Click me: adding “cluster=true” Future Direction is still a work in progress, and as it continues to evolve, I am aware that the journey of perfecting this tool is as dynamic as the field of graph visualization itself. While I am proud of what has achieved so far, I am even more excited about its potential. That’s where you, the reader and potential user, come in. Vizdom Vizdom If you have any feedback, please feel free to message me over on or . Gitter Discord Thanks for reading — If you enjoyed this article, please ! follow [1]: E. R. Gansner, E. Koutsofios, S. C. North and K. . -P. Vo, “A technique for drawing directed graphs,” in IEEE Transactions on Software Engineering, vol. 19, no. 3, pp. 214–230, March 1993, doi: 10.1109/32.221135. Also published here

Here's Why You Shouldn't Use Graphviz for DAGs: What You Should Use Instead

এখানে আপনি কেন DAG-এর জন্য গ্রাফভিজ ব্যবহার করবেন না: পরিবর্তে আপনার কী ব্যবহার করা উচিত

Hier erfahren Sie, warum Sie Graphviz nicht für DAGs verwenden sollten: Was Sie stattdessen verwenden sollten

He aquí por qué no debería utilizar Graphviz para DAG: qué debería utilizar en su lugar

Voici pourquoi vous ne devriez pas utiliser Graphviz pour les DAG : ce que vous devriez utiliser à la place

यहां बताया गया है कि आपको डीएजी के लिए ग्राफ़विज़ का उपयोग क्यों नहीं करना चाहिए: इसके बजाय आपको क्या उपयोग करना चाहिए

DAG に Graphviz を使用すべきではない理由: 代わりに何を使用すべきか

DAG에 Graphviz를 사용하면 안되는 이유: 대신 사용해야 할 사항

Veja por que você não deve usar Graphviz para DAGs: o que você deve usar em vez disso

Вот почему вам не следует использовать Graphviz для DAG: что вам следует использовать вместо этого

İşte DAG'ler için Graphviz'i Neden Kullanmamalısınız: Bunun Yerine Ne Kullanmalısınız?

Đây là lý do tại sao bạn không nên sử dụng Graphviz cho DAG: Thay vào đó bạn nên sử dụng gì

这就是为什么你不应该将 Graphviz 用于 DAG：你应该使用什么

A Force to Be Reckoned With As tech companies get older (Apple just hit 42), bigger (Amazon >500k employees), and more diverse, who they hire, why, and for what are changing fast. Tech companies are great places to work — and despite the attention that coding, engineering and app development get, there are plenty of great career opportunities for non-tech women in tech. Women with non-engineering backgrounds — the new majority minority Women make up about of the U.S. tech sector. We usually hear about a lower number — only 12% of engineers are women. While tech companies need more women engineers, this isn’t the only road to a rewarding career. Tech has so many different layers — strategy, business processes, customers, marketing, sales. In fact, tech touches everything and everything has become tech. 34% Forget the idea that tech only hire techies. A quick look at all the open positions at tech companies on shows 43% or 53,000 of their positions are roles that do not require engineering background. At Workday, 72% of the open roles are non-technical; at Salesforce that number is 59%, according to Glassdoor’s Glassdoor data. Kickin’ it in tech; no coding required Tech companies need product and program managers, UX designers, tech writers; operations, compliance, marketing, sales, training — the spectrum is so broad. In fact, the 10 most common (project manager, account exec, and sales rep are the top three) only account for about 18% of all open non-tech jobs. non-tech jobs All companies — and tech is absolutely no exception — need people who can think critically, make good decisions, and communicate well. These are career-making skills. Even more, they are transferable across companies and industries. If you aren’t already in tech, your experiences in other industries may be a good fit for tech. For people who aren’t engineers or computer scientists, but who can think logically, connect the dots, and make things happen outside of the code, there are opportunities in tech. The flexibility of non-engineering roles creates opportunities for women who like a challenge.There are exceptions, of course, but generally, with tech companies growing and changing fast, new types of non-engineering roles are opening up all the time. In tech, roles often take unexpected turns. Here’s an example from my experience. I was the program manager on a team working on a major product launch. The launch date was closing in fast when when our product manager left the team. In a perfect world, we would have hired a new PM, but since there was no time, I jumped in to fill the slot. It was a chance to take a position that had me working with external clients for the first time — a great career experience. No engineering background; not a deficit For too long we’ve looked at the in non-engineering background in tech as a deficit, a sign that something is lacking. But that’s just wrong. Women with non-engineering educations are a good fit for tech opportunities, bringing a needed skill set and perspective. We know that diverse teams are Why? Working with people who don’t think like you do challenges your brain to sharpen its performance. So, if you are — or would be — the only woman or non-engineer on your team, think of it as a strength and an opportunity to learn. non smarter. Women in technology are powerful. Companies, teams, and women in tech are recognizing that non-tech women are an important part of driving change. Technology is a great place to be, and as a woman — with or without an engineering background — you are or can be part of it — a force to be reckoned with. Malgorzata Pack Engineering Program Manager at Google

Non-technical women in Tech

The Best Advisors Understand the Power of a “Good Story” Rembrandt’s masterpiece “The Night Watch” I visited the “Night Watch” last week. It’s a true masterpiece. I particularly love the stories behind it: Its history and what it currently means for the city of Amsterdam. We all enjoy a “good story”. From novels to movies and manga to opera, the universal appeal of stories is obvious. And yet, whenever I talk to business advisors or other professionals about the importance of “mastering the art of storytelling”, I am often met with scepticism. And when I suggest that storytelling might be the most important skill to master in a digital age, the reaction is usually laughter. “Today, if you want to succeed as an entrepreneur, you also have to be a good storyteller” — Richard Branson The fact that many self-made billionaires emphasize the importance of storytelling in their success is dismissed. “Storytelling had nothing to do with why they were successful. It was talent, ambition or just dumb luck. . . . I am not here to be the next J.K. Rowling.” Storytelling is often associated with an earlier “analogue” age: an era of paintings, paper books or tales around the campfire. But I genuinely believe that the current digital age — with the dominance of social media — provides a perfect environment for a renewed emphasis on storytelling. I will come back to why I believe storytelling matters in a moment, but this reaction intrigues me. Why do so many people laugh at the suggestion that storytelling matters in digital age? Part of the reason is that storytelling just seems so old-fashioned. A skill-set from a different age. But there is also a lot of scepticism about storytelling today. It is regarded as just another “marketing tool” or a way to create “fake news”. Stories are increasingly associated with manipulation and exploitation. In this context, the suggestion that storytelling might be at the center of what business and business advisors need to do in order to add value can seem a little “left field”. Hence the laughter. But this reaction is short-sighted and need to be revisited. I predict that “storytelling” will become a necessary skill for advisors across the board, such as lawyers, accountants and all business consultants. Here is why. The Power of Stories In general, there are three reasons why everyone must study, understand and practice the “art of storytelling”. #1 — The Emergence of Platforms & Ecosystems I’ve that, in order to survive in a fast-changing digital world, companies have to either become the owner of a platform or be “integrated” or “collaborate” with one. written before One of the best examples is the dominance of and the urgency for “older companies” to partner with the platform. Amazon _SAN FRANCISCO, United States - Amazon.com Inc. is giving special privileges to companies that sell their wares directly…_www.businessoffashion.com Amazon Favours Brands Like Burberry, Levi's with 'Pay to Play' Strategy In the world of platforms, well-established brands and attractive products aren’t sufficient anymore to lure and attract consumers and employees. Companies must have a clear mission. They must offer a purpose, be tech-driven and embrace a customer-centric vision. Storytelling is one of the best strategies to achieve this. A good story is inspirational, builds relationships, invites input (creates a dialogue), and gives “heart and soul” to a company and its platform. This sounds all very straightforward, but what is difficult for business advisors is to advise their clients to be “personal”, “vulnerable” and “willing to openly address the hard issues”. All too often, this is something that advisors in the “old world” would be unwilling to do. #2 — Making Sense of Highly Complex Situations The current world is complex (and appears to become more complicated every day). Business choices are ever-more difficult and made under conditions of huge uncertainty. Business has to comply with more and more rules and regulations. Of course, this is music to the ears of advisors and consultants. In recent years, they have increasingly focused on compliance. But it appears that we have reached the limit. Consulting has become a box-ticking exercise in which mandatory reports are overly-complex and boring. What’s worse is that they don’t tell a “real story” anymore. A company’s annual reports in the 80s (left), 90s (middle) and 2000s (right) Moreover, consumers, investors and other stakeholders in a company have become less interested in the facts regarding past performance and more interested in the narrative for the future growth of a business. For instance, consumers want to understand companies better. They pay more attention to the environment and favour eco-friendly products. Investors have similar demands. For them, the narrative behind a company’s long-term value creation has become a key indicator of future success. Capital efficiency and financial metrics are, of course, still important indicators, but they need to be supported by a narrative that focuses on sustainability and innovation. This narrative is even more important for the many “platform” companies that still burn money every year. A convincing (possible, plausible and likely) story for future growth is crucial to attract investors, especially in the early stages. #3 — The Automation of Compliance & Big Data Mastering the art of storytelling is a new skill that provides many new opportunities for business advisors. But for many advisors there may not even be a choice. The compliance role will gradually be automated and overtaken by algorithms and data analytics. In one of my conversations with accountants it became clear that an increasing number of them predict that their supervising and controlling role will gradually disappear, as digital technologies replace them. Computers and algorithms will continuously monitor the performance of a company in real-time and “annual reports” will soon disappear. This will lead to more data. Business advisors will have to connect the dots and make sense of these data points. The value-added of the accountant will not be in the generation of data, but in the capacity to construct and then communicate stories about what the data “means”. This storytelling component will be forward looking and complement the historical data that is analyzed by machines. And it will not stop here. In smart, connected and sensor-based environments, more and more data will be available. Data that again needs to be analyzed and turned into a narrative that can be “sold” to the various stakeholders. What’s Next? I predict that 2018 will be a year of storytelling for advisors. In a business context, three things become really important: Advisors will have to master the art of storytelling. They need to help firms in constructing and communicating a personalized vision through a story. Advisors must be able to understand, analyze and judge other people’s stories. They must know a “good story” when they hear it. In an increasingly data-driven world, advisors must be able to use storytelling to make sense of the ever-more complex data that is being produced. 👏 Thank you for reading! Please click and hold the below, or leave a comment. There is a new story every week. So if you follow me you won’t miss my latest insights about how the digital age is changing the way we live and work.

Don’t Laugh at “Storytelling”

I thought I had observability, but it wasn't enough. The picture above says to me that you should know your infrastructure and heed your own advice. Hey brilliant human - so, as it turns out - a critical environment experienced an issue. How can you prevent issues like this before this could affect clients? I’ll tell you a little later in this article. If you are reading this, chances are: You have or had a similar DNS issue or DNS symptoms You are hardworking and you would like to learn how to do not step on a rake If you don't have time to read, and you want to see the solution right away, like how you scroll through all the answers on in search of the marked solution, then . stackoverflow read this detailed AWS DNS troubleshooting guide One more spoiler: Kubernetes’ official documentation . It’s the wrong way and will not resolve a root cause. refers to using NodeLocal DNSCache This article will help you if you have one of the following questions or problems: Kubernetes DNS lookup is slow How to change ndots default value of DNS in Kubernetes External DNS lookup fails in pods Kubernetes kube (or CoreDNS) dns best practices Kubernetes adds the wrong url suffix cluster.local at the end of query CoreDns had thousands RCode responses CoreDns had high load without any reason on the first glance. Most importantly, apps could not resolve DNS queries and could not pull critical data RCodes When CoreDNS encounters an error, it returns an rcode—a standard DNS error code. Errors like NXDomain and FormErr can reveal a problem with the requests CoreDNS is receiving, while a ServFail error could indicate an issue with the function of the CoreDNS server itself. So, below, I’ll tell you about : 3 topics Solving DNS issues for Kubernetes (but more about DNS with Linux really) DNS best practices How to prevent issues like this before this could affect clients The specific DNS issue in detail An issue has been reported that some apps can't connect to a service. It could be an external service or an internal service. We revised these services, everything worked fine. So, very strange behavior and not a persistent issue. Looking at all errors in the centralized log system at that specific time, we found a correlation with DNS service (CoreDNS). We also found problems with that service at that time. CoreDns metrics during this incident could look like below, which is the amount of queries. Here you can see the amount of errors that returned an answer to DNS queries Here you can see cpu usage. The DNS config inside the pods looks like below. /etc/resolv.conf: nameserver 10.100.0.10
search default.svc.cluster.local svc.cluster.local cluster.local ec2.internal
options ndots:5 NDOTS: n Sets a threshold for the number of dots that must appear in a name given to res_query() before an initial absolute query is made. The default for n is 1, meaning that if there are any dots in a name, the name is tried first as an absolute name before any search list elements are appended to it. The error logs look like the following: [INFO] 192.168.3.71:33238 - 36534 "A IN amazon.com.default.svc.cluster.local. udp 54 false 512" NXDOMAIN qr,aa,rd 147 0.000473434s
[INFO] 192.168.3.71:57098 - 43241 "A IN amazon.com.svc.cluster.local. udp 46 false 512" NXDOMAIN qr,aa,rd 139 0.000066171s
[INFO] 192.168.3.71:51937 - 15588 "A IN amazon.com.cluster.local. udp 42 false 512" NXDOMAIN qr,aa,rd 135 0.000137489s
[INFO] 192.168.3.71:52618 - 14916 "A IN amazon.com.ec2.internal. udp 41 false 512" NXDOMAIN qr,rd,ra 41 0.001248388s
[INFO] 192.168.3.71:51298 - 65181 "A IN amazon.com. udp 28 false 512" NOERROR qr,rd,ra 106 0.001711104s As you can see, the message level is info, that is why we did not see these messages before. You can see that the DNS names are absolutely wrong. means that the domain record wasn't found, and means that the domain record was found. NXDOMAIN NOERROR CoreDNS integrates with via the , or with with the . Kubernetes Kubernetes plugin etcd etcd plugin This is the logic of these queries. Why is , and why like ? CoreDNS searching external domains in the local domains there are 4 new domain suffixes .default.svc.cluster.local The app makes a DNS query, like secretsmanager.ca-central-1.amazonaws.com CoreDNS checks where it should search this domain k8s is based on Linux, so that means it searches this domain in the local or . internal system external system So, if the domain name has a format, then CoreDNS should make an , other way search in the . FQDN absolute query(external system) local system , we have a option. BUT ndots If the domain name , search in an internal system is not a FQDN , CoreDNS returns an service IP address in the same namespace. my-internal-service internal Check If a domain name has format  and check the option and of the domain name. FQDN ndots dot in the end If the domain name has fewer dots, than the option, search this domain first in the defined in the directive. ndots local domains search In our example has only 3 dots, whereas option has value 5. secretsmanager.ca-central-1.amazonaws.com ndots So first search: secretsmanager.ca-central-1.amazonaws.com.default.svc.cluster.local
secretsmanager.ca-central-1.amazonaws.com.svc.cluster.local
secretsmanager.ca-central-1.amazonaws.com.cluster.local
secretsmanager.ca-central-1.amazonaws.com.ec2.internal And only after these queries, make an absolutely query: secretsmanager.ca-central-1.amazonaws.com If the domain name has or has a , . more than 4 dots dot in the end make absolutely query If the domain name has FQDN, make an absolutely query. If the domain name has an absolute domain (dot in the end) FQDN, make an absolutely query Fully Qualified Domain Name FQDN: The FQDN consists of two parts: the hostname and the domain name. For example, an FQDN for a hypothetical mail server might be . The hostname is mymail, and the host is located within the domain . mymail.somecollege.edu somecollege.edu in the of the domain name means that this domain is an absolute FQDN. A Dot EG: “amazon.com.” means, make only absolutely query. Okay, we found the root cause. There are 2 questions: Why were there connection errors in the app? How to fix it? Why were there connection errors in the app? As we found, CoreDNS made an additional 4 queries for each query from an app. In peaks of the CoreDNS high load it doesn’t have enough resources. We scaled up an amount of pods, for some time we forgot about this issue. After we saw this issue again, we added , but this did not resolve the root cause. After some time, an amount of the queries grows, and we will see this issue again. So that is why we should fix a root cause. NodeLocal as mentioned in the official documentation How to fix it? We should reduce a value of the option in the . ndots resolv.conf Well, thank goodness k8s allows changing this (because if you are using managing Kubernetes you do not always you have permission to change options like this). option in the pod manifest apiVersion: v1
kind: Pod
metadata:
  namespace: default
  name: web-server
spec:
  containers:
    - name: test
      image: nginx
  dnsConfig:
    options:
      - name: ndots
        value: "2" So, /etc/resolv.conf in our pod will look like: nameserver 10.100.0.10
search default.svc.cluster.local svc.cluster.local cluster.local ec2.internal
options ndots:2 After the root cause is fixed, we could improve DNS settings with recommendations from below. DNS for k8s, PRO tips and tricks If you are using a managed k8s service, to scale up DNS, use (or something like ,  Kubernetes Event-driven Autoscaling) instead of manually changing settings because at any time, your provider could overwrite your changes. HPA KEDA HPA example: apiVersion: autoscaling/v2
kind: HorizontalPodAutoscaler
metadata:
  name: coredns
  namespace: kube-system
spec:
  maxReplicas: 20
  minReplicas: 2
  scaleTargetRef:
    apiVersion: apps/v1
    kind: Deployment
    name: coredns
  metrics:
  - type: Resource
    resource:
    name: cpu
    target:
      type: Utilization
      averageUtilization: 80
  - type: Resource
    resource:
    name: memory
    target:
      type: AverageValue
      averageUtilization: 80 The option above should be enough to not have to use NodeLocal. But if you need to change options in the DNS service, and you can’t make these changes (in the manages k8s case), you can install to your k8s cluster. NodeLocal This option will allow adding one more DNS cache points (this will remove the load from the main DNS service) and setup settings as you want. You should not change nameserver option in your pods, if you have . dnsPolicy ClusterFirst If one of the CoreDNS pods in your k8s system return an error, all will unhealthy, just retry DNS query. This setting we can set up on the system level. apiVersion: v1
kind: Pod
metadata:
  namespace: default
  name: web-server
spec:
  containers:
    - name: test
      image: nginx
  dnsConfig:
    options:
      - name: ndots
        value: "2"
      - name: attempts
        value: "3" If you don’t have enough time to make a patch for your env, of your DNS query. Then, your domain name will be absolutely FQDN, for example, add a “dot” in the end secretsmanager.ca-central-1.amazonaws.com. To propagate these changes to all nodes, you should change the kubelet settings, ing for kubelet settings us resolvConf option Why didn't I know about the problem at first? What’s your problem? Short answer, I didn’t do the next steps: Not enough attention was paid to setting up critical error notifications An audit of all critically important components was not carried out in order to check the monitoring settings later There was no “preflight checklist” like checklist this A little bit more about this methodology. As you know, DevOps it’s not a person, it’s a set of the best practices, and approaches that involve implementing continuous integration and deployment ... We have logs, metrics, and traces as often known as the three pillars of observability (as described in ). Distributed Systems Observability All logs scraped from a current env sending to centralized logs system like ELK, New Relic, DataDog. So in one place you can find and analyze almost any issue of your app or system service. App traces sending in the same as logs place and helps find a sequence of the events, filter step by step all apps related to specific event/request. All metrics from the current env sending to a centralized monitoring system and correlate with logs, and traces. We have alerts, notifications about some monitoring issues, ex: too many restarts of the pods, not enough disk capacity, etc …. My face, when I first saw a critical issue on the critical env, while I thought all ok. Pic from "They Live" (1988). How to prevent issues like this before his could affect clients? But logs, metrics were not enough, why? We had logs, metrics, traces, we had errors in our logs, but who is continuously watching all logs (10k log records every day - it’s ok)? We dig into logs, metrics, etc, when we are faced with an issue. But it’s very expensive when an issue finds your clients. That is why we should predict problems by some symptoms, and prevent issues before they affect something critical. In other words. Because not enough attention was paid to setting up critical error notifications. DNS in the kubernetes infrastructure is the one of the critical systems. So as I mentioned above, we should do  some env checklist  for the critical components  and pass it step by step. Some points of this checklist  should was like: we should that we  have logs, metrics and notification for the critical issues and of course verify it in the real infrastructure. As result, should be done next steps: Fix an issue Make postmortem (example: ) Postmortem of database outage of January 31 Make checklist for the critical components especially for important migrations, updates, deployments Use this shceklist at least once in existing infrastructure or use it before events like migration, update List of useful links Pod's DNS Config resolv.conf(5) - Linux man page How do I troubleshoot DNS failures with Amazon EKS? Fixing EKS DNS Production Ready EKS CoreDNS Configuration Racy conntrack and DNS lookup timeouts So, why I wrote this story today? Everyone makes mistakes(ex: ), those who do nothing and do not learn from their mistakes do not achieve success! GitLab.com database incident Good luck! I hope this helps. Please feel free to add any comments and connect to me . https://kazakov.xyz

I Thought I Had Observability - My Short DNS Story

Welcome to the first post of Upwork Series. In this series, we are going to work on gig requirements posted on UpWork. Web Scraping & Data Extraction Our task is to create web crawler which will scrape data daily from the report pages of a transportation company. Click here to see description of project Step 1: Understanding the task First, it is important to understand the task clearly. They want from us to where each attribute listed above is its own separate column. scrape data then save it in CSV file We are going to crawl the following information: Date ("The information below reflects the content of the FMCSA management information systems as of {Date}") Operating Status Legal Name DBA Name Physical Address Mailing Address USDOT Number Power Units Drivers We can provide an initial set of 100 DOT numbers to make sure the information above can be scraped easily, from there we can provide all DOT numbers we would like to scrape on a daily basis. Report pages can be accessed by dots or with other name IDs. Each page has its own id (dot). So, these dots locate in Excel file. We have to read this file and extract dots from there then pass it into URL to access the report page. Step 2: Creating our environment and installing dependencies Now, we know what client wants from us, so let's create our virtual environment then inspect elements that we are going to crawl. To create virtualenv run the following command in your terminal: virtualenv env then install BeautifulSoup which is a Python package for parsing HTML and XML documents and xlrd which is a library for reading data and formatting information from Excel files: pip install beautifulsoup4 xlrd Step 3: Crawling Data Alright Devs! Let's start with opening the example url from project description so can see the fields. Click to see Example URL The page should look like this: Our first target is to find - Date ("The information below reflects the content of the FMCSA management information systems as of {Date}") The information below reflects the content of the FMCSA management information systems as of 01/01/2020. The truth is we can't crawl this element by specific class name or id. Unfortunately, this report pages messed up. But we can see that this element is in bold format. There are also many elements locate with the bold format. However, we can crawl all of them as text and use to extract the data we need. RegEx A regular expression (RegEx) is a special sequence of characters that helps you match or find other strings or sets of strings, using a specialized syntax held in a pattern. The date locates between and . So , to find the date regex will look between these strings. The information below reflects the content of the FMCSA management information systems as of .(dot) re urllib.request urllib.request urlopen, Request bs4 BeautifulSoup req = Request(url, headers={ : })
    html = urlopen(req).read()
    bs = BeautifulSoup(html, ) bold_texts = bs.find_all( ) b bold_texts: : date = re.search( , b.get_text(strip= , separator= )).group( ).strip() len(date) > :
                date = date.split( , )[ ]
            print(date) AttributeError: import # regex import from import from import : def crawl_data (url) 'User-Agent' 'Mozilla/5.0' 'html.parser' # Find all bold texts 'b' for in try # look between these strings 'The information below reflects the content of the FMCSA management information systems as of(.*).' True '  ' 1 # If regex finds multiple dots, extract string before first dot if 11 "." 1 0 except pass Well if you run the program you will see it's printing the date. Let me quickly show you how regex works, because I feel some of you trying to understand. Consider the following code: re

# We need to extarct the string
data = name = re.search( , data)
print(name)

# Output: import "coderasha" from "Hello my name is coderasha." 'Hello my name is (.*).' < ; = ), = > _sre.SRE_Match object span (0, 27 match 'Hello my name is coderasha.' As you see match is found but its printed like object. group(1) capture the text matched by the regex inside them into a numbered group that can be reused with a numbered backreference re

# We need to extarct the string
data = name = re.search( , data).group( )
print(name)

# Output: coderasha import "coderasha" from "Hello my name is coderasha." 'Hello my name is (.*).' 1 So, I am applying the same logic to find the date inside strings that crawled. The next step is, to find a table and continue to crawl other fields. Luckily, the table locates between center tags. However, we have to find data again using RegEx because table elements have no any special attribute. information = bs.find( ).get_text(strip= , separator= ) operating = re.search( , information).group( ).strip()
    legal_name = re.search( , information).group( ).strip()
    physical_address = re.search( , information).group( ).strip()
    mailing_address = re.search( , information).group( ).strip()
    usdot_address = re.search( , information).group( ).strip()
    power_units = re.search( , information).group( ).strip()
    drivers = re.search( , information).group( ).strip() # Get all texts inside table 'center' True '  ' # Find fields using RegEx 'Operating Status:(.*)Out' 1 'Legal Name:(.*)DBA' 1 'Physical Address:(.*)Phone' 1 'Mailing Address:(.*)USDOT' 1 'USDOT Number:(.*)State Carrier ID Number' 1 'Power Units:(.*)Drivers' 1 'Drivers:(.*)MCS-150 Form Date' 1 Step 4: Write data in CSV Once data crawled, it is time to create new csv file and write data into it. I prefer to create another function which will handle this action. csv open(usdot_address + , mode= , newline= , encoding= ) csv_file:
            fieldnames = [ , , , , , , ]
            writer = csv.DictWriter(csv_file, fieldnames=fieldnames)
            writer.writeheader()
            writer.writerow({ :date, : operating, : legal_name, :physical_address, : mailing_address, :power_units, :drivers }) import : def write_csv (date, operating, legal_name, physical_address, mailing_address, usdot_address, power_units, drivers) with '.csv' 'w' '' "utf-8" as 'Date' 'Operating Status' 'Legal_Name' 'Physical Address' 'Mailing Address' 'Power Units' 'Drivers' 'Date' 'Operating Status' 'Legal_Name' 'Physical Address' 'Mailing Address' 'Power Units' 'Drivers' CSV name must be unique, so I named it with or with other name ID of report page from crawled data usdot_address Step 5: Read excel file to crawl data for each dot The final step is to read excel file and pass these dots end of the URL to access the pages. We can use to read excel file xlrd xlrd

dots = [] loc = ( ) 
    wb = xlrd.open_workbook(loc) 
    sheet = wb.sheet_by_index( ) 
    sheet.cell_value( , ) i range( , ): dot = str(sheet.cell_value(i, )).replace( , )
        dots.append(dot) import : def read_excel_file () "dots.xls" 0 0 0 # First five dot in excel for in 1 5 # Convert floats to string and clean from .0 0 '.0' '' xlrd reads numbers as float so the best solution is to convert them to strings and use method to remove .0 end of the string and pass these dots into url: replace() dot dots:
    crawl_data( + dot) time.sleep( ) for in 'https://safer.fmcsa.dot.gov/query.asp?searchtype=ANY&query_type=queryCarrierSnapshot&query_param=USDOT&query_string=' # Sleep 5 seconds to avoid any errors 5 Here is the Full Code: re csv urllib.request urllib.request urlopen, Request bs4 BeautifulSoup xlrd time

dots = [] loc = ( ) 
    wb = xlrd.open_workbook(loc) 
    sheet = wb.sheet_by_index( ) 
    sheet.cell_value( , ) i range( , ): 
        dot = str(sheet.cell_value(i, )).replace( , )
        dots.append(dot) req = Request(url, headers={ : })
    html = urlopen(req).read()
    bs = BeautifulSoup(html, )
    bold_texts = bs.find_all( ) b bold_texts: :
            date = re.search( , b.get_text(strip= , separator= )).group( ).strip() len(date) > :
                date = date.split( , )[ ]
            print(date) AttributeError: information = bs.find( ).get_text(strip= , separator= )

    operating = re.search( , information).group( ).strip()
    legal_name = re.search( , information).group( ).strip()
    physical_address = re.search( , information).group( ).strip()
    mailing_address = re.search( , information).group( ).strip()
    usdot_address = re.search( , information).group( ).strip()
    power_units = re.search( , information).group( ).strip()
    drivers = re.search( , information).group( ).strip()

    write_csv(date, operating, legal_name, physical_address, mailing_address, usdot_address, power_units, drivers) open(usdot_address + , mode= , newline= , encoding= ) csv_file:
            fieldnames = [ , , , , , , ]
            writer = csv.DictWriter(csv_file, fieldnames=fieldnames)
            writer.writeheader()
            writer.writerow({ :date, : operating, : legal_name, :physical_address, : mailing_address, :power_units, :drivers })                


read_excel_file()
print(dots) dot dots:
    crawl_data( + dot)
    time.sleep( ) import import import from import from import import import : def read_excel_file () "dots.xls" 0 0 0 for in 1 5 0 '.0' '' : def crawl_data (url) 'User-Agent' 'Mozilla/5.0' 'html.parser' 'b' for in try 'The information below reflects the content of the FMCSA management information systems as of(.*).' True '  ' 1 if 11 "." 1 0 except pass 'center' True '  ' 'Operating Status:(.*)Out' 1 'Legal Name:(.*)DBA' 1 'Physical Address:(.*)Phone' 1 'Mailing Address:(.*)USDOT' 1 'USDOT Number:(.*)State Carrier ID Number' 1 'Power Units:(.*)Drivers' 1 'Drivers:(.*)MCS-150 Form Date' 1 : def write_csv (date, operating, legal_name, physical_address, mailing_address, usdot_address, power_units, drivers) with '.csv' 'w' '' "utf-8" as 'Date' 'Operating Status' 'Legal_Name' 'Physical Address' 'Mailing Address' 'Power Units' 'Drivers' 'Date' 'Operating Status' 'Legal_Name' 'Physical Address' 'Mailing Address' 'Power Units' 'Drivers' for in 'https://safer.fmcsa.dot.gov/query.asp?searchtype=ANY&query_type=queryCarrierSnapshot&query_param=USDOT&query_string=' 5 Mission Accomplished! I hope you liked the first post of new Upwork series. The job offer still open so if want you can send proposal to client using this code. I post similar stories at . Check it out. Reverse Python Video Tutorial available in . YouTube Channel - Reverse Python Stay Connected!

Web Scraping And Data Extraction with Python: Upwork Series #1

Pinpointing Root Causes of Application Performance Problems in Dynamic Environments Pinpointing the root cause of application performance problems in a dynamic environment often resembles a complicated game of hide-and-seek. A familiar analogy is that it’s like trying to find a needle in a haystack. This characterization illustrates the challenge but isn’t especially helpful in offering solutions. So, if the root cause of an application problem is the “needle” and the application environment is the “haystack,” how exactly would we go about restoring peak performance? Taking the analogy literally is actually a pretty good way to explore the various approaches to resolving application performance problems in dynamic, elastic, and transient infrastructure environments. So, exactly how would you go about finding a needle in a haystack? 1. Eliminate the haystack Probably the fastest way to find the needle is to burn the haystack. Or dumping the hay into a pool of water and waiting for the needle to sink to the bottom would also work. If we were really talking about needles and haystacks, fine — but we’re not. There are fundamental business reasons why more and more companies are turning to dynamic cloud-based deployments in the first place. We can pretty much reject the option of returning to monolithic, static infrastructure where identifying application performance cause-and-effect relationships is more straightforward. 2. Rummage for the needle manually We could sift through the pile of hay, strand by strand, until we find the needle. That’s basically the way traditional (APM) tools work. They throw a massive collection of data at us (albeit usually in nicely formatted charts and graphs) and require us to comb through it all to figure what went wrong. Actually finding the needle remains a laborious manual process. Somebody somewhere has to pore over the charts and graphs, make sense of the data, and connect the dots to discover the root cause. Such handwork analysis can take hours — even days. application performance monitoring That’s too long when application problems are leading to disgruntled customers. Of course, things would go faster if we assigned more staff to tackle the problem: the more people sifting through the hay, the sooner we’d find the needle. But convening a war-room assembly to interpret the data is still a labor-intensive, time-consuming effort. Already most CIOs are frustrated that so many man-hours are spent on troubleshooting instead of innovating and optimizing. Furthermore, and perhaps more significant, today’s liquid environments — where millions of dependencies are changing on the fly from moment to moment — are simply too complex and too fast-moving, with too many performance data points, for humans to analyze in a timely manner. It would take more people than any business has at its disposal to detect causal relationships among so much data and identify the component that’s causing the problem. 3. Locate the general area of the needle Using a metal detector or an X-ray would narrow down the approximate location of the needle within a haystack. This is more efficient than looking through the entire pile, but it’s still a lot of work. We still have to manually sift through the hay — just not as much. Similarly, a handful of modern APM solutions get us a step closer. Discovery agents collect and correlate myriad metrics and performance data points from various distributed elements across the application environment. The data is consolidated and presented in a unified, integrated “single pane of glass” view. We now have a clear, comprehensive picture of the of the performance problem, but we haven’t diagnosed the The hard work is still left to us. We still have to pore through charts and graphs of data — just not as much. Modern APM displays the data within a more meaningful framework that helps us narrow down our focus. symptoms root cause. Now, imagine the difficulty when the needle is constantly on the move. That’s exactly what’s happening with today’s highly dynamic environments. Servers are perpetually coming and going, auto-scaling up and down as needs dictate. Container technology and microservices architecture are even more transient — moving from host to host — and generate even more metrics. With our applications now having so many moving parts, trying to keep up with them and their topology by dissecting a plethora of charts and graphs is literally beyond human capabilities. Dynamic applications have millions of dependencies that need to be analyzed, and they’re ever changing. No sooner do we think we have a handle on how everything is working together than the landscape changes and we’re back to square one. Present-day application environments change too fast and too often for even the most talented troubleshooters. Even a relatively simple containerized environment like this one, with only 142 hosts, has more dependencies than a human being can track without software assistance. 4. Extract the needle automatically Ultimately, the best way to find the needle (especially if it won’t sit still) is to use a powerful magnet to pull it right out of the haystack and deliver it into your hands. In our analogy, a next-generation solution would be such a “magnet.” It zeroes in on an application problem’s root cause automatically, rendering time-consuming manual analysis unnecessary — the same way a magnet obviates the need to sift through the pile of hay. artificial intelligence–powered APM Artificial intelligence (AI) enables computers to do what they do best: absorb huge amounts of information and make sense of it faster and more thoroughly than is humanly possible. It applies sophisticated algorithms and context-rich diagnostics to detect and correlate causal relationships among data with millions of dependencies in microseconds. In essence, AI-enhanced monitoring analyzes the problem the same way we humans would, only faster. Artificial intelligence is able to perform almost instantaneously the analytical “heavy lifting” that takes us humans hours or days. From theory to reality: Dynatrace APM Artificial intelligence has been defined as “being able to perceive its environment and apply cognitive functions such as learning and problem-solving.” has been built on artificial intelligence so that it is able to Dynatrace APM auto-discover all components of the full technology stack end to end from the customers’ web browsers all the way down to the host infrastructure — map out the entire IT in an interactive visual display environment identify the millions of dependencies among websites, applications, services, processes, hosts, , and cloud infrastructure networks learn how it all works together and what constitutes normal behavior automatically detect, analyze, and prioritize anomalies and performance problems actually recommend solutions to the root cause of those problems And AI allows Dynatrace to do all this at a speed, scale, and precision that no human could ever match. Dynatrace gets to “know” applications. Its proprietary Smartscape technology continuously auto-discovers and monitors every aspect of every application. Sophisticated algorithms learn normal application performance patterns and proactively flag anomalies. The AI auto-adjusts baselines dynamically in real time to avoid false positives caused by preset static alerting thresholds. Application performance problems are seldom isolated, one-time events, and they’re usually symptoms of a larger issue. Dynatrace looks at all other transactions that used the same components around the same time to see if they also experienced problems. Artificial intelligence correlates events throughout the full technology stack — client side, server side, infrastructure level — to identify analogous issues and detect causal relationships. AI diagnostics analyze the vast amount of data collected to pinpoint the exact component that’s causing the problem. In today’s increasingly complex and fluid IT environments, interpreting data points with millions of dependencies in order to determine underlying casual relationships is more than humans can master by themselves. Only artificial intelligence can take the colossal volume of data and translate it into actionable solutions before problems hit customers. See for yourself what Dynatrace can do. Dynatrace offers a — the complete full-blown version, not a stripped-down demo — that auto-discovers and visually maps out your entire technology stack within minutes. free trial

MAKE THE DOT

makethedot.com

-- employees

Since n.d.

COMPANY RANKING

MAKE THE DOT

EVERGREEN INDEX #6842

Representing this company? Click here to claim and customize this page!

Make The Dot WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

MAKE THE DOT

makethedot.com

-- employees

Since n.d.

COMPANY RANKING

MAKE THE DOT

EVERGREEN INDEX #6842

RELATED COMPANIESRANK

STORIES ABOUT MAKE THE DOT

Representing this company? Click here to claim and customize this page!

Make The Dot WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!