Froiden

froiden

Tutorial: Swift and SwiftUI for Data Science iOS Development

This article is based on my of the same title. Originally published at on May 4, 2020. PyCon 2020 talk vinayak.io . Well, not quite the command line we know today. In the beginning, was the command line We had typewriters. We were communicating using Morse code. One fine day, someone had an idea to connect a typewriter to an existing network of communication wires. And the teletypewriter was born! Image: Teletype teleprinters in use during World War II, Source: Wikipedia Teletypes removed the need for a human to know Morse code, which improved message typing speed and delivery time. In this , the narrator describes how a teletype takes only a matter of seconds to deliver a message from London to Edinburgh. A stark contrast to the earlier ETA of one week — the time taken by a mail coach to undertake the same 600 km journey. 1932 video Image: Assembly of IBM 1401 computers, Source: Computer History Museum Meanwhile, computers were becoming powerful enough to interact with users in real-time. Another fine day, someone had an idea to repurpose a teletype, connect it to a modem, and use it as a remote interface to early computers. This was the origin of the command-line interface! Among these teletypes were the and the . Users typed commands after a prompt character was printed on paper. After they were satisfied with the input, they would press Enter which would then send the command to the computer. And finally the output from the computer would be printed on paper again. Friden Flexowriter Teletype Model 33 Image: The VT100, Source: Wikipedia Teletypes were continued to be used as terminals to computers, until video displays came into the picture during the late 1970s. Video terminals quickly became popular input-output devices for computers after the manufacturers moved to a set of . common standards Today, physical teletypes and video terminals are obsolete. We instead have terminal emulators, which are . But, have modern terminal emulators borrowed any features from the OG metal beasts? software simulations of the real thing The Guide The jargon file. Learn how terminals and CLIs work. Part 1 — Anatomy of a Terminal and CLI Look at packages that can be used to write CLIs, which are available in the Python standard library and on PyPI. Part 2 — Python packages for writing CLIs Explore various CLI use cases and see how Click can be used to implement a clone of git, with some commonly used git subcommands. Part 3 — Writing and packaging a CLI using Click Look at some principles that can create a nice CLI user experience. Part 4 — User Experience Closing Thoughts I hope that you got a lot of touchpoints to the CLI ecosystem which you can now explore further, an understanding of how terminals and CLIs work and how to write CLIs in Python! Stay safe and be well.

The Hitchhiker's Guide to Command Line Interfaces in Python

If you're reading this, you probably know what a CI/CD pipeline is. If you don't, no big deal -- it's just yet another acronym. CI/CD short for "continuous integration and continuous delivery", which when we boil it down, simply means that everything between your git commit and a deployment works auto-magically so you can rest your fingers and watch some Netflix. In this example, I'm going to be focusing on deploying a static HTML website, but you really could do this for any sort of web application front-end. We will be highlighting how to do this using AWS, Terraform and Gitlab. Let me just explain real quick why we'd want to do this. First, this makes your life easier. You write the code, you make a commit, push, and your pipeline deletes old files from your S3 bucket, uploads the new files, sets permissions, and then invalidates your CloudFront distribution so that all you have to do is go look at your changes in production. Second, it removes human error. You can't forget to upload files or invalidate a CF if your code does it for you. Third, it speeds up your deployments because you no longer have to go ahead and do things manually. For all of these reasons, I always set up a pipeline for all of my personal and professional projects. Enough of me rambling; let's get to work. Prerequisites A account GitLab An account AWS is installed Terraform A account Keybase Set up the infrastructure I like to make things as easy and reproducible as possible, so we'll be using Terraform to build out the infrastructure. If you don't have Terraform installed, then you didn't read the prerequisites (tsk tsk...) and I'm going to need you to install it. For the website's infrastructure, all we'll need is an S3 bucket and a CloudFront distribution. We'll just use a default CloudFront certificate since we aren't connecting this distribution to our domain name in this example. Before we go any further, I would recommend creating a repository for all of your Terraform configs. It will just keep things more organized if you decide that you want to continue to use Terraform for configuring your infrastructure. Anyways... Create a file named main.tf and paste this into. You can change the bucket_name variable to whatever you want, just make sure you set this correctly later on in another file (you'll see as I've highlighted where it needs to be adjusted in the code snippet). {
  default // provider region }

resource bucket acl policy { : , : [
      { : , : , : , : , : }
  ]
}
EOF

  website index_document error_document }
}

locals s3_origin_id }

resource origin domain_name origin_id }

  wait_for_deployment enabled is_ipv6_enabled default_root_object default_cache_behavior allowed_methods cached_methods target_origin_id forwarded_values query_string cookies forward }
    }

    viewer_protocol_policy min_ttl default_ttl max_ttl }


  price_class restrictions geo_restriction restriction_type }
  }

  custom_error_response error_code error_caching_min_ttl response_code response_page_path }

  viewer_certificate cloudfront_default_certificate }
} variable "bucket_name" = "website.example.com" change this} "aws" { = "us-east-1" "aws_s3_bucket" "bucket" { = "${var.bucket_name}" = "private" = <<EOF "Version" "2012-10-17" "Statement" "Sid" "AddPerm" "Effect" "Allow" "Principal" "*" "Action" "s3:GetObject" "Resource" "arn:aws:s3:::${var.bucket_name}/*" { = "index.html" = "index.html" { = "S3-${var.bucket_name}" "aws_cloudfront_distribution" "s3_distribution" { { = "${aws_s3_bucket.bucket.bucket_regional_domain_name}" = "${local.s3_origin_id}" = false = true = true = "index.html" { = [ "DELETE" , "GET" , "HEAD" , "OPTIONS" , "PATCH" , "POST" , "PUT" ] = [ "GET" , "HEAD" ] = "${local.s3_origin_id}" { = false { = "none" = "redirect-to-https" = 0 = 3600 = 86400 = "PriceClass_100" { { = "none" { = 403 = 0 = 200 = "/index.html" { = true Now run the config create the infrastructure: terraform init
terraform - -approve apply auto Awesome! All of our infrastructure is set up in AWS and now we just need to set up our GitLab runner! Configure our Runner For this part, you'll need a GitLab repository for us to work with, so create a new one before proceeding. Now that you have a repository, let's set up our runner. We're going to use a shared runner from GitLab. They're free to use up for up to 2,000 minutes of deployments per month -- and they're enabled by default. I've found that they're somewhat slow and it stinks that you're throttled at 2,000 minutes, so I usually use my own runners spun up in Kubernetes or on EC2 instances, but let's save that for another tutorial. We need to supply the runner with an AWS IAM user to use to deploy to S3. Create another terraform config with this content: {
  description default // provider region }


resource user pgp_key }

resource name user policy { : , : [
        { : , : [ ], : },
        { : , : [ , , , , ], : [ },
        { : , : , : }
    ]
}
EOF
}

resource name }

output value }

output value } variable "keybase_user" = "A keybase username to encrypt the secret key output." = "dannextlinklabs" change this} "aws" { = "us-east-1" "aws_iam_access_key" "gitlab_ci" { = "${aws_iam_user.gitlab_ci.name}" = "keybase:${var.keybase_user}" "aws_iam_user_policy" "gitlab_ci" { = "gitlab-ci-policy" = "${aws_iam_user.gitlab_ci.name}" = <<EOF "Version" "2012-10-17" "Statement" "Effect" "Allow" "Action" "s3:ListBucket" "Resource" "*" "Effect" "Allow" "Action" "s3:PutObject" "s3:PutObjectAcl" "s3:GetObject" "s3:GetObjectAcl" "s3:DeleteObject" "Resource" "arn:aws:s3:::website.example.com/*" // this needs to be set to your bucket name            ] "Effect" "Allow" "Action" "cloudfront:*" "Resource" "*" "aws_iam_user" "gitlab_ci" { = "gitlab-ci" "access_key" { = "${aws_iam_access_key.gitlab_ci.id}" "secret_access_key" { = "${aws_iam_access_key.gitlab_ci.encrypted_secret}" Make sure you set the keybase user to your own keybase user, because Terraform uses that to encrypt the IAM user's secret access key. This won't work if you don't have a Keybase account, or if you try to use my Keybase account. Run the config. terraform init
terraform - -approve apply auto The terraform config returns an access key and an encrypted secret key for this user. We need to decrypt the secret key with the command (this is why you needed to use your own keybase user). terraform output encrypted_secret | --decode | pgp decrypt base64 keybase Now that we have the access key and the secret key for our GitLab user, we just to supply these variables to our runner by adding them to the variables section in the CI/CD settings. We need to set three variables in GitLab: AWS_ACCESS_KEY_ID - the access key that Terraform returned us
AWS_SECRET_ACCESS_KEY - the access key we just decrypted
AWS_DEFAULT_REGION - us-east-1 to to secret Create our super-duper simple website We have an empty repository set up with our GitLab runner enabled, so l Super cool website! Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. < > html < > body < > h1 </ > h1 < > p </ > p </ > body </ > html Commit that and push it to the repo, and that will be all we need for the "design". Run a Deployment GitLab CI/CD is based around a file called .gitlab-ci.yml. GitLab requires that file to be located in the root of your project. Our file needs to look like this: stages:
  - - variables:
  AWS_BUCKET: website.example.com // change this if necessary
deploy_s3:
  image: python:3.6
  stage: deploy-s3
  tags:
    - - before_script:
    - script:
    - only:
    - deploy_cf:
  image: python:3.6
  stage: deploy-cf
  tags:
    - - before_script:
    - script:
    - - only:
    - deploy-s3 deploy-cf docker gce pip install awscli -q aws s3 sync . / --delete --acl public-read s3: /$AWS_BUCKET/ master docker gce pip install awscli -q export distId=$(aws cloudfront list-distributions --output=text --query ] cut -f1) 'DistributionList.Items[*].[Id, DefaultCacheBehavior.TargetOriginId' | grep "S3-$AWS_BUCKET" | read -r dist; aws cloudfront create-invalidation --distribution-id $dist --paths ; done <<< while do "/*" "$distId" master This gitlab-ci file sets up two stages: deploy-s3, and deploy-cf. The first stage uploads our website to the S3 bucket, and the second invalidates the CloudFront distribution for that bucket in order to present the new changes to our website! This simple configuration is all you need to have a complete CI/CD pipeline for your business' website. Commit and push those changes, and then check out the pipelines section under the CI/CD tab in that project. You should see a deployment running. Success! You have a working CI/CD pipeline. Now, whenever you commit code to the master branch, GitLab will auto-magically upload and distribute your changes! Daniel Slapelis is a Devops Engineer with NextLink Labs, a Pittsburgh-based Devops and full stack engineering company.

Learn How to Build a CI/CD Pipeline Using GitLab for your Website

Publishing a book or documentation online has never been easier than it is today. Many services offer you incredible possibilities for publishing beautiful docs with custom domains. The only caveat is that often you need to pay for full features and probably need to use some web-based Markdown editor, which may complicate your life, rather than make it simpler. The good news is that you don't need to pay anything to publish visually appealing documentation online. You don't even need to change your favorite Markdown editor or have a custom domain. All you need is a GitHub account, a text editor of your choice, and a command prompt. In this post, I will show you how to publish your book or documentation on GitHub Pages in less than ten minutes. Getting Gitbook CLI Gitbook is an open-source project that helps thousands of developers, researchers, and journalists build beautiful documentation that support sections, nesting, code rendering, as well as multiple formats. While the main efforts of Gitbook developers are now focused on the platform (which is not completely free), the legacy tool called is still around and can be used to build static HTML files to render in a browser. Gitbook.com gitbook-cli To install the tool, you need , so make sure that you install Node.js ( will install together) if you haven't done so in the past. npm npm Install gitbook-cli. $ sudo npm install -g gitbook-cli Create Book Skeleton Create an empty directory where your docs or book will live. $ mkdir sample-book
$ sample-book/ cd Use the command to create sample files needed to compile a book. gitbook init $ gitbook init If you inspect the and files that were just created, you will see that they have no content except for headers and a table of contents in the file. README.md SUMMARY.md SUMMARY.md This is the file. SUMMARY.md # Summary

* [Introduction](README.md) And this is the file. README.md # Introduction By default, adds an "Introduction" header to the file and it will be the first page in your book. Make sure you add some text below the header. gitbook README.md Add Sections to Your Book Add more sections to your book building on top of the project skeleton. In the same folder, create two files: and . chapter1.md chapter2.md Add headers and optional content to each file and save them. For example, your file can have the following structure: chapter1.md Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. # Chapter 1 Edit the file by adding your newly created chapters to the list of contents. Save the file. SUMMARY.md # Summary

* [Introduction](README.md)
* [Chapter ](chapter1.md)
* [Chapter ](chapter2.md) 1 2 Build Your Book Now, build the book as follows: $ gitbook build You should see the following output: info: 7 plugins are installed 
info: 6 explicitly listed 
info: loading plugin ... OK 
info: loading plugin ... OK 
info: loading plugin ... OK 
info: loading plugin ... OK 
info: loading plugin ... OK 
info: loading plugin ... OK 
info: found 3 pages 
info: found 0 asset files 
info: >> generation finished with success 2.6s ! "highlight" "search" "lunr" "sharing" "fontsettings" "theme-default" in And done! The HTML files from your book are in the folder that created in the current directory. _book gitbook Publish Your Book to GitHub Pages Go to your GitHub account and create an empty repository. Do not tick the option to create a README file (we already have one, remember?). Go back to your terminal. Assuming that you are still in the folder, repeat the following steps (put repository URL when adding origin): sample-book your $ git init
$ cp -R _book/* .
$ git clean -fx _book
$ git add .
$ git commit -m $ git branch -M main
$ git remote add origin https://github.com/your-user-name/sample-gitbook.git
$ git push -u origin main "first commit" Go back to your sample book repository on GitHub, click and scroll down to the part. Settings GitHub Pages In , select the branch, folder, and click . Source main /root Save You will see the message " ." It may take a couple of minutes for GitHub to build your site. Your site is ready to be published at https://your-user-name.github.io/sample-book/ Once it finishes, your book is available at the link! Check it out . here Congrats! You have just published your book on GitHub Pages! What's Next Experiment with sections and nesting. Just edit the list in the file to have nested sections. SUMMARY.md Explore different color themes (you need to click the icon in the upper-left) and fonts. A Finally, add some real content!

How to Publish a Book with GitBook CLI and GitHub Pages in 7 Minutes

One of the best ways to handle navigation on small screens is to use sidenavs. When it comes to creating that nav, the best was is not the JavaScript all the time. Then what is the best formula to have fancy sidenav actions? Here comes the recipe; Ingredients: A checkbox to imitate the click event, A label to associate the checkbox, A sidenav, Some content - Optional, A pinch of CSS with . animation Preparation: 1- Create a checkbox in your HTML file with an "id", in our case we give it the id "toggler". < = = /> input type "checkbox" id "toggler" 2- Then create a to associate the checkbox by using the "for" attribute. The "for" will be "toggler" to connect the label with the checkbox. label < = = > label for "toggler" class "toggle-label" < = > i class "fas fa-chevron-circle-down" </ > i </ > label Now our button is ready to trigger the sidenav actions. In our example, I will put the label inside my sidenav to create a fancy button with the help of CSS animation. Also, I used a arrow for the label icon. font-awesome 3- Create a sidenav however you want. I added some links to create a sidenav. As I mentioned before I placed the label inside my nav. Twitter Instagran Github Linkedin Mql5 Mail -By Safa ERDEN < > nav < = = > label for "toggler" class "toggle-label" < = > i class "fas fa-chevron-circle-down" </ > i </ > label < > ul < > li < = > a href "https://twitter.com/safaerden" </ > a </ > li < > li < = > a href "https://www.instagram.com/safaerden" </ > a </ > li < > li < = > a href "https://github.com/SafaErden" </ > a </ > li < > li < = > a href "https://www.linkedin.com/in/safaerden/" </ > a </ > li < > li < = > a href "https://www.mql5.com/en/users/safaerden" </ > a </ > li < > li < = > a href "mailto:safaerden@gmail.com " </ > a </ > li < > li < = > a href "#" </ > a </ > li </ > ul </ > nav 4- Optionally you can add some content to your HTML file. "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum." < > main < > p </ > p </ > main Now we created our content but it is not functional right now. It is not even a good looking content without CSS. So let's begin to add some flavor to our content. 1- First of all we should hide the checkbox. We don't need to see it. We just need its pseudo-class selector ". ":checked { : absolute; : none;
} #toggler position display 2- Time to style the label which will be used as the checkbox. I gave my label "toggle-label" class. I position it to the top-left of my sidenav with "position: absolute" attribute. When my nav is not shown, I want my label is to be positioned outside of my nav, pointing left to indicate the sliding direction. When my nav is shown, I want my label to be positioned inside of my nav pointing right to indicate the sliding direction. I use the "transform" attribute to rotate the arrow. I use the "left" attribute to put the label inside and outside of the sidenav each time user click on it. I also change its color to make it look better between position changes. To make all these changes I use ":checked" pseudo-class. It enables me to trigger the animations. With "transition" property I set the duration for each animation. { : absolute; : - ; : ; : (90deg); : transform, left, color;
} ~ { : (270deg); : ; : ;
} .toggle-label position left 55px top 5px transform rotate transition 1s 1s 1s #toggler :checked nav .toggle-label transform rotate left 5px color #2c3e50 3-  Once you finished the label styling, you can begin styling the sidenav including animations rules. My nav has 500px width and it is pushed 500px right outside of my body to hide it when I do not need it. When I need to reveal my sidenav, I should move it back inside my body. So I update it's "right" attribute to "0" to show it inside my body. For the "right" value transform, I set the transition duration 1 second. Also for the body, "overflow-x" property should be hidden to avoid horizontal scrollbar. { : fixed; : (256, 256, 256, 0.9); : ; : ; : ; : - ; : ; : right ; : ;
} ~ { : ;
} nav position background-color rgba height 100vh width 500px max-width 100% right 500px top 0 transition 1s padding 50px #toggler :checked nav right 0 4- Additionally you can style your main content to make it have a better look. { : ; : white; : ; : ; : hidden;
} { : ; : ; : auto;
} { : none; : ; : ;
} { : none; : ;
} body background-color #2c3e50 color font-size 50px font-weight 900 overflow-x p font-size 30px width 75% margin 20px nav ul list-style-type margin-top 100px color #2c3e50 nav ul li a text-decoration color #2c3e50 Now your CSS-only, JavaScript-free sidenav is ready to serve, Have a good appetite :) To reach the source visit . For live demo check . the repo this link

Creating An Animated SideNav without JavaScript [A How To Guide]

This tutorial is the third part of our implementation of the Apple app of the day Animation in React native. Therefore, it is suggested to go through part one and two of this tutorial series in order to get the full insight into the app and make ourself comfortable with all the implementations. In the second part of this tutorial, we successfully implemented the enlarge-image animation when we click or press on any image. Here, we are going to add the text section to the enlarged pop-up animation and also close the animation.this tutorial inspired from React native ecommerce template. [Read Part I here] [Read Part II here] The idea is to first complete the text section for the enlarged part and then implement the close animation of the enlarged image with content. So, let us begin! Adding Content Description In the second part of the tutorial, we created two View components. One with flex value 2 and one with flex value as 1. In the upper View, we added the copied image which appears with enlarging animation when clicked. Now, we work on the second View component in order to add the content section. First, we need to define an animation variable initialized to Animated value as 0 as shown in the code snippet below: } ; constructor (props) {
    super(props);
    .....
    this.animation = new Animated.Value(0);
    this.state = {
      activeImage: null,
    } Adding content and styles In this step, we are going to add some content to the second View component by using the Text component and then add some styles to the View as well as the Text component. Then, we need to change the normal View component to the Animated View component. The code and styles required to implement this are provided in the code snippet below: ;Animated. style={{ flex: 1,  backgroundColor: , padding: 20, paddingTop: 50 }} ; ;Text style={{ fontSize: 24, paddingBottom: 10 }} ;Very Sure Developer ;/Text ; ;Text ;Eiusmod consectetur cupidatat dolor Lorem excepteur excepteur. Nostrud sint officia consectetur eu pariatur laboris est velit. Laborum non cupidatat qui ut sit dolore proident. ;/Text ; ;/Animated. ; &lt View 'white' &gt &lt &gt &lt &gt &lt &gt &lt &gt &lt View &gt Hence, we get the following result on the emulator screen as we click on any image: Adding Animation In this step, we are going to add the fade-in animation to the Text section. The idea is make the text section appear from the bottom as fading in. In order to do this, we need to defined two animation styles which are opacity and translateYwhich will help to solve this animation effect. In order to configure animation, we are going to use interpolate method initialized to animatedContentY constant that takes an object with two properties: inputRange and outputRange as shown in the code snippet below: animatedContentY = .animation. erpolate({
      inputRange: [ , ],
      outputRange: [ , ]
    }) const this int 0 1 -150 0 To understand how the inputRange and outputRange work, let's match the value from two properties as shown below: 0 and -150 where 0 = 0% means that animation does not start when position set to -150.1 and 0 where 1 = 100% mean animation to finish and position will go back to original. Next, we also initialize the interpolate method to animatedContentOpacity constant for the opacity effect as shown in the code snippet below: animatedContentOpacity = .animation. erpolate({
    inputRange: [ , , ],
    outputRange: [ , , ]
  }) const this int 0 0.5 1 0 1 1 Here, we want to display 100%  opacity when animation reaches 50% so that the inputRange and outputRange work like a charm. Now, we need to finish this section by adding both of animatedContentY and animatedContentOpacity constant to animatedContentStyle constant as an object. The animatedContentStyle constant is defined as an object which takes two animation values which are opacity and transform. The opacity is initialized to animatedContentOpacity and transform is initialized to an array of object with translateY value as animatedContentY as shown in the code snippet below: : : : const animatedContentStyle = { opacity animatedContentOpacity, transform [ { translateY animatedContentY, }, ], }; Now, we need to add the animatedContentStyle constant to the style prop array as shown in the code snippet below: ;Animated. style={[
              {
                flex: 1,
                backgroundColor: ,
                padding: 20,
                paddingTop: 50,
              },
              animatedContentStyle,
            ]} ; ;Text style={{fontSize: 24, paddingBottom: 10}} ;
              Very Sure Developer ;/Text ; ;Text ;
              Eiusmod consectetur cupidatat dolor Lorem excepteur excepteur.
              Nostrud sint officia consectetur eu pariatur laboris est velit.
              Laborum non cupidatat qui ut sit dolore proident. ;/Text ; ;/Animated. ; &lt View 'white' &gt &lt &gt &lt &gt &lt &gt &lt &gt &lt View &gt Lastly, we need to activate the animation in openImage function that we defined in the previous part. The animation variable is provided as a parameter to timing function of Animated component with toValue as 1 and duration of 300ms as shown in the code snippet below: Animated.parallel([
           ...........
           Animated.timing(this.animation, {
             toValue: ,
             duration: ,
           }),
         ]).start(); 1 300 Hence, we get the following result in our emulator screen: Finish Closing Animation The last thing we need to add is the close animation to our pop-up enlarged image element. In order to do this, we need to define a new function named closeImage. The closeImage function is configured with all the Animated properties that are required to close the image element as shown in the code snippet below: closeImage = () =&gt; { : this ,
       duration: 300
     }),
     Animated (this , {
       toValue: this ,
       duration: 250
     }),
     Animated (this , {
       toValue: this ,
       duration: 250
     }),
     Animated (this , {
       toValue: this ,
       duration: 250
     }),
     Animated (this , {
       toValue: 0,
       duration: 250
     })
   ]) (() =&gt; { : null
     })
   })
 } Animated.parallel([
     Animated.timing(this.position.x, {
       toValue .oldPosition .x .timing .position .y .oldPosition .y .timing .dimensions .x .oldPosition .width .timing .dimensions .y .oldPosition .height .timing .animation .start this.setState({
       activeImage The idea of the implementation of closeImage function is to add the same animation properties from openImage function that we defined in the last tutorial. And then, we rewind the animation positions to the original positions by using the value that we stored in the oldPosition variable. Then, when the animation starts, we need to set the activeImage state to null. Finally, we need to add the close button(X) to trigger the closeImage function. In order to implement the close button, we put a letter "X" inside of Text component wrapped by the Animated View component. Then, we need to add the TouchableWithoutFeedback component wrapping the Animated View component in order to make the text clickable. Lastly, we add the closeImage function to the onPress event of the TouchableWithoutFeedback component. Then, we need to bind those components with some styles to make it appear at the top right corner. The code and the styles required to implement the close button is provided in the code snippet below: ;TouchableWithoutFeedback onPress={() = ; this.closeImage()} ; ;Animated. style={{ position: , top: 30, right: 30 }} ; ;Text style={{ fontSize: 24, fontWeight: , color: }} ; ;/Text ; ;/Animated. ; ;/TouchableWithoutFeedback ; &lt &gt &gt &lt View 'absolute' &gt &lt 'bold' 'white' &gt X &lt &gt &lt View &gt &lt &gt Hence, we get the following result in our emulator screen: Now, we test the same thing with other images as well and the result is shown in the emulator simulation below: Hence, we have successfully added the text section as well as implemented the close animation in our React Native app. Conclusion This tutorial is a third of part of our implementation of the Apple app of the day example on React Native. In this part of the tutorial, we learned how to add text and configure different animation properties. We also learned how to bind different styles to the components. Then, we finally implemented the close animation to our pop-up enlarged image element from the previous tutorial. I am very grateful to for this great and interesting tutorial. Nathavarun from UnsureProgrammer If you like this tutorial please leave feedback on the comment section and do not forget to share! Credit The content is acquired from the . #3 Apple App of the day Animation by Unsureprogrammer And the image is acquired from . Unsplash

React Native Apple App of the Day Animation Part III : Close Animation

The more I learn about coding, the more inspired I get about how creative and revolutionary some of these ideas are. From the readability of Ruby, to a world of hashes in , these ideas keep renewing the way we think and evolve the tech world all the time. Javascript “No Logic/Coding in Front End” This was a common stereotype that I noticed was common among up and coming developers at Makers Academy, when consulting them over their job prospects and interests. In our company we have found it very difficult to find a mid and senior level front end developer to join our team. It does make me think about whether this attitude is something that contributes towards developers not wanting commit to the front end. But recently the front end has been revolutionised with multiple ideas such as CSS grids, the standardisation from Bootstrap and the use of … components The Before Here we show how pages are made up typically. (Using the dev tools mode in Chrome (Apple + Alt + I and then going to the Elements Tab) shows the HTML code of the page) We put all the elements of the page in between the body tags of the HTML code which outputs to the page. This seems like a totally fine way of doing thing but the question is, what if had lots of pages and we wanted the header and footer to be on all of them? We would be copying and pasting that code a lot on each of our pages which would be quite an inefficient way of doing things. The Refactor Mindset (In Vue.js) Whenever DRY (Do Not Repeat Yourself) appears in code, it means one thing… we can refactor it into something reusable, that is referred to! There are a few suggestions for this such as using partials, but the most popular one over the last few years has been to use Components, as popularised by the Facebook developers using React.js. Lets look at an example using Vue.js, which is similar to React.js. I like Vue.js because it is more readable and clearer then React imo. Our components are stored in vue files, and its parent vue file refers to it, usually called App.vue. Each vue file always has the same structure where it is divided into three parts; <template> < script> // HTML of the component goes here /template>
<script>
/ / Code goes here
</ < > style </ > style So lets split up our code and put them into a separate vue file in a folder called components. We’ll take out the footer code and put that into Header.vue. The HTML goes inside the template tags, and we create a variable in the data hash that contains the text. // Header.vue < > template < > header < > p {{ headerText }} </ > p </ > header </ > template < > script { : { : ,
    }
} export default data headerText "This is the header" </ > script < > style </ > style In our original App.vue file, we refer to that newly created header component we just created. <template> <br>
        <app-header></app-header>
        <hr>
        <h1>The Article</h1>
        <article class="article">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </article>
        <hr>
        <footer>
            <p>This is the footer</p>
        </footer>
    </div>
</template>
<script>
import appHeader from './components/Header.vue'
export default {
  components: {
    'app-header': appHeader,
  },
};
</script>
<style>
</style> // App.vue < = > div class "container" In the script, we import that component using the component hash, then we use that name into its own customly named html tag, in this case we called it <app-header>. We can use the name ‘header’ but because that is aleady a tag name that exists we want to avoid these names as to avoid any conflicting code. This is how Vue refers to its components, which is different to React.js. So lets do the same thing with the Article and Footer section. <template> <h1>The Article</h1> <article>{{ articleText }}</article> < script> // Article.vue < > div </ > div /template>
<script>
export default {
    data() {
        return {
            articleText: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        }
    }
}
</ < > style </ > style Now the footer… <template> < script> {{ footerText }} < > footer </ > footer /template>
<script>
export default {
    data() {
        return {
            footerText: "This is the footer",
        }
    }
}
</ < = > style lang "css" </ > style The final App.vue; <template> <br>
        <app-header></app-header>
        <hr>
        <app-article></app-article>
        <hr>
        <app-footer></app-footer>
    </div>
</template>
<script>
import appHeader from './components/Header.vue'
import appArticle from './components/Article.vue'
import appFooter from './components/Footer.vue'
export default {
  components: {
    'app-header': appHeader,
    'app-article': appArticle,
    'app-footer': appFooter,
  },
};
</script>
<style>
</style> < = > div class "container" After all this work, its the same look exactly. But now we have reusable components! This means that any other page we want to create, we can import in those components and use it. And what is great is that its very easy to tell which component has been imported in, and where in the page it is in by just looking at the template section. Front End Revolutionised Components are super flexible and reusable which are great for huge websites. Even elements such as buttons and forms can be components and therefore reusable throughout. The styling of each component can also be included within it, which is great for consistency of the branding of the website. Another reason why components are great is that logic from functions can also be added to each component. This really changed the way websites were created as the logic was typically put in a completely separate place to the HTML. Now, it is added into the component which means that the logic is linked to it right there and can be easier to find. This means that a lot of the logic is now mixed in with the front end, allowing for a more full stack experience for front end devs and at the same time putting less stress on the the backend which only contains the code that is relevant to what it is trying to do. (It seems like this will be the battle of the component based Javascript framework! Who will win?) I hope everyone will have a great May day bank holiday weekend, cya next time!

Front End Refactored — Components with Vue

I’ve been working for almost two months building a React web app, and while it’s still a work in progress, I wanted to start teaching myself to work on building an app version as I go along. You can read more about getting started with installing . React Native React Native in Part 1 In this post, I’m going to focus on walking through making basic updates to my app, using the home page as an example. In my web app, the home page was several presentational components, including some information about the app and the nav bar. First, I’m just going to tackle the information on the home screen. I’m working on this project already familiar with core React concepts and having built out a basic web app, so it’s pretty simple for me to follow along with scaffolded React Native . In upcoming posts, I’ll be looking more closely at key differences between React and React Native and how to create components strategically, but for the purposes of this post, I’m really just going to get the information updated. code What’s there so far Right now, as a reminder, I’m using Expo. This allows me to view changes on my phone, rather than using something like an iOS or Android simulator on my computer, although both of those options will work as well. This is the default screen when you create a new project. Then, I opened up the code to take a look at it and start working through which components were connected to which functionality, and start figuring out next steps. Like this, there is a distinction between components and screens. I may end up restructuring my files later, but for now, I’m going to go along with the pattern that’s here and work on just updating the home screen file. And finally, here’s what the web version of my app looks like on the welcome page. I want to convey the same information (all the text will be the same), and then work on styling it in a way that makes sense and is easy to read, which I’ll cover in an upcoming post. Updating Text First, I focused on just getting some of the text on the page to update, working within the structure of the existing component. This portion of text corresponds with the following screenshot on mobile. I deleted some of the text that was there, and simply copy and pasted the text from my web app into the location. My screen did not automatically reload. When this doesn’t happen, you can click a link for help. The link suggested downloading Watchman ( ) or simply closing and reopening the app. which I already installed That did the trick for the first update. I then shook the phone, which opens the developer menu, and disabled and then re-enabled live reloading. This solved the problem going forward. Formatting Notes There’s some great documentation about getting going with formatting your text with React Native . here One of the first problems I ran into was this very red but not particularly helpful error screen when I tried to add more text into the main body of the screen. I realized that the problem was that I was using <br></br> tags to split up sections of text within the component like this: When really I should have continued to use the <Text></Text> tags. Formatting and padding can be added later below. Essentially, the text on the home screen (or any static screen) should follow a pattern something like this. <View style={styles.container}><ScrollViewstyle={styles.container}contentContainerStyle={styles.contentContainer}> <View style={styles.welcomeContainer}><Text> WELCOME TO LEVEL </Text></View> <View style={styles.getStartedContainer}>{/* {this._maybeRenderDevelopmentModeWarning()} */} <Text style={styles.getStartedText}>Lorem ipsum dolor sit amet,    consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text> <Text style={styles.getStartedText}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text> </View> There aren’t too many functions in the home screen component, but one that I found unnecessary was _maybeRenderDevelopmentModeWarning(). This function is responsible for checking to see whether or not Development Mode is enabled in Expo, and links to information about how it might affect the speed of your app as you’re developing it. For the sake of writing efficient code and eliminating unnecessary lines right away, I deleted it and commented out where it was called in the component. I find deleting extra code as soon as I come across it helpful when using a scaffolded app, although it is important to be sure you’re not deleting a function that might be used elsewhere in your program in a non-obvious place. I also added a quick title (again, without any real formatting) and got rid of the image icon. I am planning on creating my own design to add in later, but now, I’m mostly concerned with getting information on the page. And finally, all my text on the screen! And that’s pretty much it! Getting the simplest presentational information updated on the screen is not too difficult, and it’s a great place to start. Coming up in future posts A closer examination of differences between building out components with React vs. React Native, and structuring files Navigation Bar Forms Styling Resources _Learn React Native with interactive examples._www.reactnativeexpress.com React Native Express _These are the docs for Expo . Expo is a set of tools, libraries and services which let you build native iOS and Android…_docs.expo.io Quick Start | Expo latest documentation _A framework for building native apps using React_facebook.github.io Text - React Native

Stories, News & Mentions about FROIDEN

Froiden’s Stories on HackerNoon