DEV Community: Ilaibavati

How to Build Responsive Apps in React Native

Ilaibavati — Thu, 01 Apr 2021 13:40:06 +0000

React Native is a JavaScript (JS) framework that you can use to develop mobile applications. It supports building iOS and multi-platform Android apps from native user interface (UI) elements. React Native is based on Babel transformers and the JavaScriptCore runtime. React Native has built-in support for continuous deployment and DevOps practices.

React Native was created by Facebook during an internal hackathon in 2013 and made publicly available in 2015. Since its release, it has been widely used by developers wishing to build native mobile apps and functional UIs. In this article, you’ll learn how to build responsive apps in react native, including an example.

Methods for Making React Native Apps Responsive

Although React Native does not include support for media queries, there are still several ways you can build responsive apps. Below are the most common methods to optimize images, videos, and web elements when building responsive apps with React Native.

Flexbox

Flexbox is a CSS module you can use to control a two-dimensional layout, similar to CSS Grid Layout. It includes a variety of properties you can use to automatically adapt your layout proportionally to various screen sizes.

There are several important properties to know if you want to use flexbox effectively:

flex—defines how your elements fill the available space. This number is proportional to other flex elements in the same container.
flexBasis—defines the default size of an element along the main axis.
flexGrow—defines how extra space should be assigned to elements within a container.
flexShrink—defines how elements should shrink to prevent overflowing a container.

To use these properties, you assign the properties to the elements you want to define, and a number to each property itself. Assigning a 0 makes the dimensions static. Assigning a floating-point number larger than 0 adapts the element according to the property the number is assigned to. For example, imagine two elements in the same container; element A has flex: 2 and element B has flex: 3. Element A takes up 2/5ths of the container and B takes 3/5ths.

Other important properties to know include:

flexDirection—defines the direction in which elements are flexed; either row or column. The default setting is a column, because mobile devices are typically elongated in shape.
justifyContent—defines how elements are spread within a container along the main axis.
alignItems—defines how elements are spread on the cross-axis. This property works similarly to justifyContent but along the perpendicular axis to the main axis.

aspectRatio

Another property you can use is aspectRatio, which controls the size of undefined dimensions of an element. For example, if only the height is specified, aspectRatio ensures that the width scales accordingly. This property is exclusive to React Native and is not used in CSS.

Screen Dimensions

When designing responsive sites, you often need to create different layouts for different device types or screen dimensions. Since React Native does not support media queries, this can be a challenge. However, you can access this same information using the Dimensions API.

You can use this API as follows:

import { Dimensions } from 'react-native';

const {width, height} = Dimensions.get(‘window');

Alternatively, if you are using React Native 0.61:

const {width, height} = useWindowDimensions();

After you obtain your dimensions, you can set breakpoints defining when your layout should change. These changes can include different media sizes, layout configurations, or behaviors.

For example:

import { Text, View, Dimensions } from 'react-native';

class App extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      width: Dimensions.get('window').width
    };
  }

  render() {
    return (
     <View>
       {this.state.width < 320 ? <Text>width of the past</Text> : <Text>how big is big enough?</Text>}
     </View>
    );
  }
}

react-native-responsive-screen Library

react-native-responsive-screen is a library you can use to code UI elements responsively. It includes methods for responsive sizing, automatic re-rendering, and screen orientation detection.

To use react-native-responsive-screen you need to perform the following:

Install the package with npm install react-native-responsive-screen --save. When your application runs, it will automatically detect the client screen width and height.
Use the two values widthPercentageToDP() and heightPercentageToDP() with a string percentage (i.e ‘50%’) in the brackets as your respective width or height values.

When using this library, you can use it in combination with flexbox for greater control. Also, it is suggested that you start with the largest screen you want to support and work your way down. This helps prevent forgetting to add responsive values for all of your type number properties.

Realistic Example: Building a Chat App

Building a chat app is a simple way to practice using the responsive methods covered above. This example is excerpted from a full tutorial created by Akshay Kadam.

Start by installing the react-native-responsive-screen library.
Download and store your graphic elements in your assets/ folder. In this case, you’re using pikachu_heart_eyes.png.
In your App.js file, add the following code. Note that SafeAreaView ensures that content stays within the boundaries of the device and ScrollView enables you to scroll to overflow content.

import React from 'react'
import{ Image, SafeAreaView, ScrollView, StyleSheet, Text } from 'react-native'
import {
 heightPercentageToDP as hp,
 widthPercentageToDP as wp,
} from 'react-native-responsive-screen'

export default function App(){
 return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <Image
        source={require('./assets/pikachu_heart_eyes.png')}
        style={styles.img}
        />
      </ScrollView>
    </SafeAreaView>
 )
}

const styles = StyleSheet.create({
  container:{
    flex: 1,
    backgroundColor: 'black',
  },
  img:{
    width: wp('70%'),
    height: hp('30%'),
    alignSelf: 'flex-end',
    resizeMode: 'contain',
  },
})

4.Add example chats as test content. An example of content is found below.

const chats = [
 { name: 'Prem', text: 'Hey, what’s up?' },
 { name: 'Pooja', text: 'Nothing, just studying. Why?' },
 { name: 'Prem', text: 'I just won tickets to a concert and have no one to go with...' },
 { name: 'Prem', text: 'You wanna go?' },
 { name: 'Pooja', text: 'Yeah! ' },
 { name: 'Prem', text: 'Perfect! It’s at 8 tonight' },
 { name: 'Pooja', text: 'Great!! I’ll meet you at your house at 7' },
]

5.Include the code below your image tag to style the chat content:

{chats.map((chat, i) => (
  <Text
    key={i}
    style={[
      styles.commonChat,
      chat.name === 'Prem' ? styles.rightChat : styles.leftChat,
    ]}
  >
    <Text style={styles.username}>@{chat.name}: </Text>
    {chat.text}
  </Text>
))}

commonChat: {
 color: 'white',
 borderRadius: 10,
 borderWidth: 1,
 borderColor: 'white',
 overflow: 'hidden',
 padding: 10,
 margin: 10,
 fontSize: hp('1.6%'),
},
leftChat: {
 backgroundColor: '#c83660',
 alignSelf: 'flex-start',
},
rightChat: {
 backgroundColor: 'rebeccapurple',
 alignSelf: 'flex-end',
},
username: {
 fontWeight: 'bold',
},

6.Test your app to ensure it scales correctly.

Conclusion

Hopefully, this article helped you understand how you can build responsive apps in react native. While this article reviewed four popular methods, there are many more options, each suited for different projects. As you gain more experience, you’ll figure out your own methods, and the process will become much more familiar and faster.

CSS Image Overlays: 5 Cool Effects

Ilaibavati — Sun, 21 Mar 2021 18:23:59 +0000

You can use CSS for a variety of cool image effects. One of those effects is an overlay—causing an element, typically a colored rectangle or text, to appear over an image. This can be used to achieve a variety of effects, such as highlighting an image or element on hover, displaying image captions, adding live text to an image, and more. In this article I’ll show five ways you can use CSS to apply image overlays.

Adding Transparent Overlays to Images

Color overlays are some of the most popular visual effects you can add to images on your website. When used as a hover effect, transparent color overlays can help users understand what action they are about to perform.

The main CSS class used here is overlay-effect. This lets you specify transition properties and the overlay color. You can use one of the hover classes to enable the effect, typically by increasing capacity.

See a code example below—the full code can be seen on Scott Madara’s excellent post.

When the user hovers over the blue sky element, a purple overlay color appears:

Overlay Styled Error Message Over Broken Images

Broken images are an eyesore on a website. Because images will inevitably break sometimes, you should have a solution. A nice option is to use CSS and JavaScript to style damaged images and provide custom error messages to your visitors.

In this CodePen by Ire Aderinokun, you can see how to overlay text and a fully functional button over an image, to provide a professional experience for users who come across a broken image.

Zoom on Hover

Zooming in on mouseover is a nice effect that encourages users to click on images. The effect works by enlarging the image when the user hovers over it, but without changing the size of the container. To get this effect you need a wrapper div that bypasses the usual HTML img tag.

This requires setting the parent element's width and height, and setting overflow to hidden. You can then apply any type of transformation or animation to the inner image.

See the below code example by W3Schools.

On hover, the green square is zoomed by 150%:

Image Board with Fixed Width, Variable Height Elements

You can use CSS Grid and Flexboxes to make layouts responsive, and center elements that were previously difficult to place on a page. In particular, you can use these elements to create a layout like the one used on Pinterest, where each element's vertical position changes according to the vertical position of the element above it.

You can achieve a Pinterest-like layout using CSS column properties. The first step is to create a div wrapping your elements, and specify two properties: column-width and column-gap. Finally, use the column-break-inside:avoid directive to prevent any elements from splitting across the columns.

You can see how this works below—see the full code example by Nathan Da Silva.

Scroll-snap-type

The CSS scroll-snap-type property provides control over the user’s scrolling experience. This can be useful in situations like an image gallery, where you want to allow users to scroll precisely to the next image or item in the gallery.

scroll-snap-type takes two parameters:

The first determines how scroll snapping works—whether you control scrolling across the x or y axes
The second determines if scrolling is mandatory, meaning the user must scroll to the next scroll point, or proximity, meaning the browser snaps to a nearby scroll point when appropriate.

Here is a code example, which forces the user to snap to scroll points along the Y axis.

.snapping-scroll {
scroll-snap-type: y mandatory;
}

Conclusion

In this article I covered five CSS image overlay effects:

Adding transparent colored overlay using overlay-effect on hover
Adding a styled error message to an image using the before attribute
Achieving zoom on hover using a wrapper div that bypasses the img tag
Achieving a Pinterest-like page layout using column-width and column-gap properties of a DIV
Using scroll-snap-type to guide the user’s scrolling experience in an image gallery

I hope this will help you impress and guide users by creating your own image overlay effects.

Understanding Streaming Video Bitrate

Ilaibavati — Thu, 21 Jan 2021 07:58:44 +0000

What is Streaming Video Bitrate?

Bitrate (written as bit/s) is the number of bits per second in a video stream. It determines the size and quality of video and audio files. Bitrate is related to file size as follows:

Filesize = bit/s x duration

So the higher the bit rate, the higher the file size and quality. In most cases, 1 byte per second (1 B/s) corresponds to 8 bits per second.

The bitrate of a video affects video quality in many ways. Higher video bitrate results in higher video quality, and lower bitrate results in lower quality. The bitrate video users receive in practice mainly depends on their Internet connection speed and the ability of the streaming computer to encode the video.

Understanding Live Streaming Settings

Below are some of the key technical aspects you should understand to set up a live stream. Determining the right bitrate for your file and streaming platform is a key step when optimizing video for streaming.

Bitrate is a critical factor for any streaming video protocol, including HLS, WebRTC, or MPEG-DASH.

Video Quality

Video quality is typically a critical aspect that can make or break a video. Video quality should be focused on two things: resolution and frame rate. Resolution measures the size of the video on the screen in pixels. An example of high resolution is 1080p, meaning the video takes up 1920 x 1080 pixels. Common resolutions are:

4K (2160p)
HD (High Definition)
SD (Standard Definition)

Videos are made up of a large number of still images in sequence. Each image in this sequence is called a frame. So if the frame rate of your video is 30fps (frames per second), it will display 30 images per second. The more frames, the smoother the video. If the frame rate is low (15 fps for example), the video will stutter. Ideally, aim to broadcast at a high frame rate of 30 fps or more. For a cinema feel, you can use 24fps, which is the frame rate used when shooting movies.

A higher the resolution = a higher bit rate = a higher a framerate = more hardware resources are required to encode the video while streaming.

Bitrate and Internet speed

Internet bandwidth on the client side is limited. Users can check their Internet download speed by running a test on a site like Speedtest.net. Bitrate refers to the amount of data transmitted through the network in real time. So higher resolutions require higher bitrates.

The video and audio bitrate must always be 20% lower than the download rate to achieve stable live streaming. For example, if the download speed is 10 Mbps, the video and audio must be less than 8 Mbps. However, the higher the resolution, the higher the demand on computing resources.

Run a test before the live stream to ensure stability and quality. Many live streaming apps have presets, so you don't have to be a bitrate expert, but test the default settings and adjust them if necessary.

Encoding & Latency

Encoding converts the video to a format that streaming media platforms can understand. Encoding software typically has presets like “high quality / low quality” or “high speed / low speed” to determine the quality of the stream.

The faster the encoding speed, the lower the video quality, but the easier it is for your hardware to encode the video. Selecting a slower encoding preset can improve quality, but there is a greater delay between what happens in the camera and what the viewer sees.

In addition to configuring the encoding software, define the relevant settings in your streaming platform. On YouTube, the delay as a result of encoding is called a live stream delay. If you need to interact with the viewers in real time, low latency is recommended, but increases the playback buffer. However, if this is not a priority, there will be less buffering, but with slightly higher latency.

How to Choose the Right Bitrate for your Stream

Here are some of the key considerations you should be aware of as you prepare to deliver a live stream to viewers.

Find your Upload Speed

Internet speed is the key to deciding which bitrate option to use. For a quick test, go to Ookla's speed test (speedtest.net) and record your results. What really matters to me is the upload speed in Mbps. Knowing your upload speed can help you determine how much bandwidth is available for streaming.

Note that the unit of video bitrate is Kbps, but the unit of internet speed is Mbps. The conversion is simple:

1000 Kbps = 1 Mbps

If you are streaming multiplayer games, reserve a quota of at least 2 Mbps for the game, on top of the bandwidth you require for streaming, because the game itself needs Internet connectivity to run.

Select your Resolution

The resolution of the stream determines the amount of detail to encode before it is sent to the streaming platform. In most cases it is best to use one the two most popular streaming resolutions: 720p and 1080p.

720p (1280 x 720) resolution is considered HD and is a high resolution that most streamers can easily reproduce.
1080p (1920 x 1080) resolution is considered full HD, and requires more processing power and a higher bit rate. Similarly, without sufficient bandwidth, video viewers may find it choppy.

Select your Framerate

The bitrate and resolution determine the video size, and the frame rate determines the smoothness of the video.

Let’s understand framerate by comparing two types of video games. For fast action games, a suitable framerate is 60 fps or higher, otherwise the action will be choppy. For a slower-paced single player game, 30 fps may suffice.

For video streaming, you should realize that framerate and bitrate work together. You may have to sacrifice resolution to increase the framerate. Framerate will become more important the more fast-paced action occurs in your stream.

Don’t Make Bitrate Too High: Consider Your Users

All streamers should consider that the bandwidth available to their viewers is limited. Even if you have an upload connection of 500 Mbps, do not use a very high bitrate, because this will cause problems for the viewer.

The problem is that some streaming platforms (for example, Twitch) don’t allow users to change resolution unless you are an official partner and the platform performs transcoding for you.

It is not always the case that you should send the best video and users will reduce quality as needed. In reality, the platform may reject the video or may have transcoding issues, which can cause your video to jitter.

How To Choose The Best Bitrate For Youtube, Twitch, and Facebook

Twitch

Twitch set an upload limit maximum of 6000kbps, and this limitation is set in stone. Consider using lower uploads, because Twitch reserves bandwidth for partners. If you are not a partner, your viewers will not be able to use high quality video options.

In most cases, viewers are required to view video quality as uploaded to Twitch’s servers, rather than getting high quality options. To ensure optimal viewing, the download speed of the viewer should match the bitrate of your upload. Since a bitrate of 6000kbps is too high for the majority of viewers, you should use lower bitrate when uploading.

You can limit most of your uploads to 720P at 60FPS. This is highly suitable for high fast action games, and you can also use Twitch’s set up recommendations:

Bitrate—4500kbps
Keyframe interval—2 seconds
Preset—Max Quality
B-frames—2
Here are Twitch bitrate recommendations per upload speed:
For 4,000kbps or less—720p 30fps
5,000 kbps or less—720p 60fps
6,000 kbps—900p 60fps
6,000kbps for partners—1080p 60fps

YouTube

YouTube performs automated transcoding for streams, regardless of the number of viewers. That ensures viewers gain access to all quality options, including low options like 360p as well as the highest possible quality. Since there is no limitation, you can stream using high bitrates. Viewers can choose quality options without experiencing buffering issues.

While there’s no limitation to bitrate, you should note YouTube’s recommended streaming resolution ranges. Typically, the higher resolution range can ensure the most ideal viewing experience.

Here is a list of recommended ranges for YouTube:

4K 60fps—use a range of 20,000-51,000
4K—use a range of 13,000-34,000
1440p 60fps—use a range of 9,000-18,000
1440p—use a range of 6,000-13,000
1080p 60fps—use a range of 4,500-9,000
1080p—use a range of 3,000-6,000
720p 60fps—use a range of 2,250-6,000
720p—use a range of 1,500-4,000
480p—use a range of 500-2,000

Facebook

In comparison to YouTube and Twitch, Facebook provides the lowest streaming quality. Note that the maximum video resolution on Facebook is 1080p. YouTube, on the other hand, enables resolutions as high as 4K / 2160p. However, not all streaming is meant for high resolution. You should run some tests to see what works best for your setup.

Here are the video format guidelines recommended for Facebook Live:

Recommended max Facebook bitrate—4000 Kbps (4 Mbps)
Max resolution—1080p (1920×1080) resolution at 60 fps.
An I-frame (keyframe)—must be sent at least every 2 seconds throughout the stream
Titles—must have fewer than 255 characters or the stream will fail
Use H264 encoded video and AAC encoded audio-only

Conclusion

Bitrate is a number that influences the quality and speed of video streaming. In order to provide your users with good video quality and loading speed, you should carefully choose the right bitrate for your stream. There are different specs for each platform, as explained above for Twitch, YouTube, and Facebook. If you are using another streaming platform, be sure to check out their specifications and set the appropriate bitrate.

Integrating Agile and Design: Challenges and Solutions

Ilaibavati — Thu, 18 Jun 2020 07:39:11 +0000

Many teams are embracing agile project management to work faster and more efficiently. Agile practices are typically applied to software development. However, you can use agile project development with a variety of projects and project aspects. Agile design practices are one aspect that you can incorporate into your projects.

Including design processes in your agile projects can help you ensure a unified vision and excellent user experience. Successfully including design requires adapting your current design and development processes to ensure that teams work collaboratively. In this article, you’ll learn some of the challenges faced by agile project managers incorporating design and how to solve issues that arise.

What Is Agile Project Management?

Agile is a methodology originating from lean manufacturing, which emphasizes work that is focused on user requirements, light on planning and specifications, and broken down into small iterations.

Agile projects are broken down into sprints, with each sprint focused on a limited number of “user stories”, which represent specific customer needs that need to be addressed by the project team. These user stories must be brought to completion, in such a way that they provide value to the customer, by the end of the sprint.

As issues are discovered or customer needs change, future sprints are adapted to meet these new needs. The agile team coordinates sprint tasks, to respond to change, and release progressively better products in each iteration. This is typically managed using one or more task management tools.

What Is Agile Design?

Agile design is typically integrated with agile development through one of three options:

An initial Design Sprint that takes place before the development sprints begin
A Design Sprint that runs concurrently to a development sprint
An Integrated sprint in which design and dev teams work together

Design Sprints were pioneered by Google, and their goal is to help design teams clearly define goals and deliverables. They are modeled on the Design Thinking framework, which helps teams bring user needs, technological ability, and economic feasibility.

A Design Sprint works as follows:

Understand—teams discuss the goal or problem of the sprint.
Define—teams use experience gained previous phases to determine a design focus
Sketch—designers generate and share ideas, which are refined and submitted to the entire team for feedback.
Decide—the team evaluates options and determines a final sprint design.
Prototype—the team creates a prototype based on the selected design, which works well enough to validate with testing.
Validate—real users test the prototype and return feedback, shedding light on whether stakeholder concerns were addressed, and whether the concept is technically feasible.

Challenges and Solutions

Below are some of the most common issues project managers and teams face when integrating design into agile workflows.

Communication Challenges

Designers and developers each have separate goals and processes, which can lead to gaps in communication. This presents a major issue for agile project managers.

Solutions
If you find that communication is an issue, work with your team to determine their perspective on the issue and ask for suggestions as to how to improve communication. You can focus on some of these areas:

What needs to be communicated?
What is not being communicated?
Which methods of communication are more effective and which are less so?
Are there specific obstacles hampering communication between team members?
What is the best way to give and receive constructive feedback? ### Planning Challenges If you run design sprints parallel to or before your development sprints, you need to plan and manage two separate sprints. If you have design and development members collaborate in a single sprint, your process has more moving parts.

Sprints require features and user stories to be broken into smaller chunks. This granularity can make design more difficult. It is difficult to create and ensure a coherent design if you cannot see the project as a whole. Additionally, the short timing of a sprint makes it more difficult for a designer to fully understand user needs and brainstorm ideas.

If you are running two sprints in parallel, you also have two backlogs to manage. You need to ensure that tasks are prioritized in a way that prevents bottlenecks, because one sprint can move forward faster, but get stuck because it is dependent on a task from the other sprint. Prevent scope creep from adding unneeded tasks to each of the sprints.

Solutions
Running a pre-project design sprint, called sprint zero, can assist with planning challenges. A sprint zero provides flexibility that gives designers the time they need to research and come up with a plan for a unified design. This design can be broken down into smaller pieces for refinement in your project sprints. Having some design guidance beforehand also provides developers a rough guideline for their work.

When planning sprint tasks, keep in mind how your planning will affect the next sprint. Developer tasks should address design elements from the previous sprint to provide feedback for designers, letting them prepare design specs for the next sprint.

Prototype Challenges

It is not uncommon that designers or stakeholders want to create and approve a high-fidelity prototype. A high-fidelity or hi-fi prototype is an interactive prototype that closely resembles a final product.

Hi-fi prototypes are fine for waterfall projects but not for agile projects. In agile projects, scope often changes along the way and issues may only become apparent in later iterations. If these issues and changes occur, your high-fidelity design may amount to wasted effort or unrealistic expectations. While hi-fi prototypes are often “prettier”, effort is wasted if a functional project can’t be made from the prototype.

Solutions
When possible, stick to lo-fi prototypes that get the idea across while still allowing flexibility. The point of the prototype isn’t to fully demonstrate or predict the finished project, it’s to solicit feedback and verify concepts.

If you still want or need a semi-functional design to present or work from, there are several options. Doing mockups in low-code development platforms, such as Axure or iRise, is one solution. These platforms enable designers to create mockups with limited programming skills. Many platforms also integrate into tools your development team may be using, such as Jira, as well as with various project management solutions.

Another option is to have prototypes double as design specs. Design specs are documents that provide information about design details, including measurements, workflow, behavior, color scheme, and functionality. When your prototypes serve as design specs, designers can spend more time refining without changing project timelines.

Challenges Created by the Lack of a Dedicated Designer

Commonly, designers work for multiple teams at once or design processes are outsourced. This can make it very difficult to successfully implement agile design.

When a designer is only present for parts of sprints, it can prevent the development of team trust and collaboration. The designer can’t be fully involved and isn't available to provide or receive feedback. It can also create the perception that designers are less accountable for their work.

Solutions
One possible solution for this issue is to have a dedicated designer in your team. You might be able to have the overall design research and planning done by an outside team. However, there should always be a designer on the team as a representative for that work.

Having a designer present ensures that relevant tasks are included and prioritized correctly. It also promotes skill sharing as design and development team members can collaborate in real-time.

Another solution is to have a Digital Asset Management (DAM) system support the design process. DAM is a centralized work tool that stores and keeps track of all your digital assets. This tool also works for project management, and collaboration between teams.

Challenges Due to Lack of Cross-Over Skills

Lack of cross-over skills makes communication more difficult and limits the ability of team members to help each other. It can also create bottlenecks if a team member with a needed skill is unable to work.

For designers, lack of technical knowledge limits their ability to design to greatest effectiveness. For developers, lack of design knowledge prevents them from contributing to design solutions. It can also prevent a developer from successfully interpreting and applying design mockups.

Solutions
If your team lacks cross-over skills, start with training. You can hold short sessions, during which team members teach each other the basics of their skill sets. You can also support independent learning through webinars or online courses.

Creating guidelines for goals and capabilities can help you create reference tools. You can then use these tools to build knowledge and understanding. In particular, you can have your team create design guidelines. For example, you can create a package of HTML, CSS, and JavaScript templates.

Templates can include aspects like color schemes, parameters for responsive design, and text styling. These templates can be used as a base by developers and project managers for mockups that designers can work to refine.

Conclusion

Including agile design in your projects can help you ensure the creation of a high-quality project. The integration of design and development can reduce sacrifices made in a project’s functionality and usability. It can also reinforce the customer-centric focus of agile projects.

Unfortunately, the integration of design and development isn’t always smooth. Hopefully, this article helped you understand what challenges you may face in managing this integration. Using the tips provided here, you can address these challenges and even work to prevent issues from arising in the first place.

Top Data Security Threats and How to Mitigate Them

Ilaibavati — Mon, 09 Sep 2019 08:24:46 +0000

Image by The Digital Artist from Pixabay

Whether you are a large business or a private individual, chances are you have some sensitive information online. However, if you are an organization that handles payments, for example, or you store personally identifiable information about your customers, you have an added responsibility for ensuring that this data is safe.

While business and personal data has always been attractive to attackers, the stakes have become increasingly high in recent years. Private companies, authorities and security software companies are pitted against cybercriminals in an unrelenting race to improve their protective capabilities. However, while technology is usually able to keep up with the increasingly sophisticated threats, many organizations are unable to protect themselves against such threats.

Read on to learn about some of the top threats to data security and what you can do to mitigate them.

What Is Data Security?

Data security refers to the practices and policies employed by organizations to ensure the confidentiality, integrity and availability of data. For some industries, standards such as the GDPR, HIPAA and PCI DSS may apply, and failure to comply can result in hefty financial repercussions.

Data security measures are typically laid out in an organizational policy and implemented by the Security Operations Center (SOC). In many cases, such as for companies operating in the EU, it is the responsibility of the Data Protection Officer (DPO) to oversee the implementation of security policies.

Top Data Security Threats

For the sake of simplification, I’ll classify data security threats into two types, data loss and data theft.

Data Loss
If data becomes unavailable, is damaged or deleted, this could potentially bring your operations grinding to a halt. It is also a legal requirement, in many cases, to guarantee that personal data is available to the data owner at all times.

Data loss can result from:

Physical incidents—such as natural disasters, a power outage, damage to the server or wars.
Human error—this is perhaps the most common cause of data loss, with users accidentally deleting data or falling prey to social engineering attacks such as phishing.
Cyberattack—often, the main concern for an organization is that a cybercriminal or malicious insider will attack the system and destroy the data. Data can become temporarily or permanently unavailable if there is an attack on the network that causes the server to crash, such as a Denial-of-Service (DoS) attack.

Data Theft
This is especially serious if it involves identity theft, which allows an attacker to gain access to restricted resources or steal money. Attackers will often steal data for corporate espionage purposes, or to sabotage a company.

Common causes of data theft include:

Insider threats—a disgruntled employee may steal data and pass it to a rival company, either for financial gain or
Social engineering—this refers to attacks that manipulate an insider with access to sensitive data or restricted parts of the network. The victim may mistakenly share privileged information with the attacker, allowing them to gain access. The most common form of social engineering attack is phishing, or spam emails and websites designed to get people to click on a link and unwittingly download malware.
Advanced Persistent Threats (APTs)—these are an insidious form of cyberattack, in which an attacker gains access to a system and hides for a long period of time within the network, quietly collecting data.
Man in the Middle (MitM) attacks—these intercept network traffic, capturing data when in transit.

What You Can Do

The following practices should help you protect

Data Loss Prevention (DLP)
To prevent data loss, organizations can employ a number of protective measures, such as backing up data to a second location. Physical redundancy is used to protect data in cases of natural disasters, outages or wars, or from an attack targeting on-premise servers. This involves storing data in an off-site data center or cloud environment.

There are a number of data loss prevention practices and policies that can help protect your data. It may also be worthwhile considering software tools, such as a DLP solution, to help you implement your data protection strategy.

Data Encryption
To ensure that only authorized users can access your data, it is advisable to encrypt it in transit and at rest. This works by making the data unreadable to anyone without a decryption key.

Authentication and Authorization
You can use authentication protocols such as OAuth to protect your network. For added security, use two-factor or multi-factor authentication, combining a password with an additional measure such as confirmation code. The purpose of authentication is to verify that you are indeed who you say you are.

The next step is authorization, which establishes the access rights of a user. Limiting access rights is an important way to reduce the risk of exposing data. Authorization ensures that the access rules you have applied are implemented.

Install Updates
This may seem very basic, but many organizations overlook this important step. You should be updating your operating system and any applications or dependencies regularly to ensure that known security vulnerabilities are fixed. You should enable automatic updates where possible.

Conduct Security Audits
You should be conducting security audits at least every few months. This is to ensure that your overall security profile is up to scratch. You can use a third-party professional to conduct the audit, but in most cases this is unnecessary, and you should be able to do it yourself.

Credit Freeze
As a last line of defense in the event of an actual data breach, you can freeze your credit report. This involves locking your data at the credit bureau level, which has the ability to sell your personal financial identity data. This is the most effective way to block identity theft, as it disables the ability of a threat actor to use, for example, credit card information.

Use Anti-Malware and Antivirus
Since malware is the most common vector for cyberattacks, it is important to make sure you have the right protection installed.

Protect Your Endpoints
Endpoint devices are an important way for users to access critical data remotely but they also present an opportunity to attackers. You should implement good endpoint security practices, such as reducing access to endpoint devices where possible.

In some cases, limiting access is not a practical solution, so it is better to rely on software solutions such as an Endpoint Protection Platform (EPP) with Endpoint Detection and Response (EDR) capabilities. This will help mitigate against threats on the endpoints, including insider threats.

The Bottom Line

Data breaches are everywhere, and the threats to the security and integrity of your data are only going to multiply. However, there are a number of measures that you can apply to help protect your data from loss, damage or theft. The practices mentioned above are a good start, but you should establish a clear data security policy that will allow you and your employees to implement these measures as required.

It is also important to update your security strategy to keep up with evolving threats. Use the tools available to you, and don’t be afraid to seek help when you need it—a third-party security platform or consultant may well know best what you need to do to protect your data. Maintaining data security is essential for the survival of your business, as well as for compliance purposes, depending on your industry.

Getting the Best Performance Out of Amazon EFS

Ilaibavati — Sun, 25 Aug 2019 22:35:17 +0000

Image source: Pixabay

Amazon is the most widely used cloud provider and with new services being released regularly that seems unlikely to change any time soon. This makes sense—if you’ve already adopted one of AWS’ offerings, keeping your cloud services uniform can be easier to manage. EFS is just one of the offerings from AWS which is appealing because of its potential both as a stand-alone product and it’s usefulness as an integrated service.

An Intro to AWS EFS

AWS Elastic File System (EFS) is an automatically scaling system for Linux-based workloads that can be used with AWS or with on-premise resources. EFS is a fully managed service with a standard file system interface that offers file sharing through instances, AWS Direct Connect, or AWS VPN. It is designed to provide parallel access to thousands of Elastic Cloud Compute (EC2) instances for high aggregate throughput and I/O Operations per Second (IOPS) with low latency.

EFS is accessible across Availability Zones, Regions, and VPCs. Its primary uses are for lift-and-shift of enterprise applications, big data analytics, web serving, content management, media and entertainment workflows, and database backups.

How to Test Drive EFS

If you haven’t yet decided on AWS EFS, the best way to test it is by getting started with the free tier, which lets you use 5 GB of storage for 12 months. Doing so can help you get a feel for how the service works, what its limitations are, and develop some advanced file system techniques that are needed for successful operation.

To get set up you’ll need to create and launch an EC2 instance, create your EFS file system, connect to your instance, and mount the file system. This can be done either through the Management Console or the Command Line Interface (CLI) and a walkthrough can be found on AWS.

Once you’re set up, you can start testing its capabilities by writing files using single threads, multiple threads, with variable numbers of instances, or whatever other settings you think you might be interested in using.

Performance Tuning

Once you get EFS up and running in production, you’ll likely need to spend a bit of time tweaking your configuration to get the best performance. The following tips can get you started.

Increase Your Limits
In EFS, because instances are not used, I/O limits are dictated by storage type. You can select between General Performance, for low-latency and high scalability, or Max I/O, for large transfer volume but higher latency.

Whichever you choose, your new volumes will start with only .5MB/s baseline throughput and 7.2 minutes of 100MB/s burst throughput which can only be increased by increasing your file system size. To get around this, the simplest solution is to write dummy data to your system. Doing so will force both your baseline throughput and your burst limits.

Use Asynchronous Write
You can buffer pending write operations onto your EC2 instances if you enable the asynchronous write feature. Doing so will eliminate the need for a round trip from EFS to the client for each write and will reduce latency.

Learn From Metrics
AWS CloudWatch automatically collects metrics data for you, which can be accessed through CLI, API, or the console. This data can keep you updated on how your system is performing and provide you the information you need to troubleshoot any issues that arise. All of the metrics collected can provide value but burst credits, in particular, is one to keep an eye on as EFS users are frequently caught off-guard by them running out.

Separate Your Operations
To maximize your EFS performance, consider separating your latency-sensitive operations into individual volumes. This will grant them separate burst credits and throughput caps, thus protecting them from time-insensitive operations. You may not see the same performance as you would if your files were locally mounted but will get more consistent performance.

Don’t Run App Code
EFS is not able to provide the fast speed or large read volumes that deploying applications or managing codebases require. Instead, it is meant to be used as massively shared storage, used for media assets, asynchronous logs, or exported data files. It can certainly be used to store application data or even be accessed by applications but for actual deployment, you should stick to local file systems or containers.

Automate Backups
Unlike some of AWS’ other services, EFS does not come with a snapshot feature and you must use other methods for backing up your data. AWS Backup, custom scripting with Lambda, or via third-party tools, are all viable options. Backup has the added benefit of being able to manage the backup of your other AWS services while Lambda and custom scripting allow you the greatest flexibility.

Take Care With Mount Options
EFS default mount options are sufficient for most users so you should avoid adjusting them unless you’re sure that doing so will improve your system. During configuration, try to use Network File System (NFS) version 4.1 if possible to avoid missing out on protocol improvements.

One of the biggest benefits of EFS is its ability to attach to thousands of EC2 instances concurrently so make sure you’re taking advantage of this ability for increased aggregate throughput.

Wrap Up

EFS is just one of several services offered by AWS for file storage and it may be the right option for you. If you need to share files broadly and on a huge scale, it might even be your best option.

If you’ve been considering this service, I encourage you to play around with the free tier, keeping in mind the potential performance issues mentioned here. If you’ve already adopted this service, hopefully, this article gave you some useful tips for improving your system performance.

Tips for a Solid AWS Disaster Recovery Plan

Ilaibavati — Thu, 27 Jun 2019 21:48:47 +0000

Pixabay

No environment or platform is 100% secure, and even a brief interruption of service can mean thousands of dollars in data loss, not to mention the loss of sales opportunities and the impact in customer trust. The cause of the disaster can be natural, a human error, malicious activity or mechanical failure.

The most important thing for a company in the cloud is to ensure business continuity. To prevent a disaster to get you out of business you need a solid disaster recovery plan that can help you stay running in the event of an outage or attack. AWS users can leverage from functions in the environment to build their own Disaster Recovery Plan (DRP). Read on to learn how to use the features in your AWS console to keep your data safe.

AWS Disaster Recovery Plan Overview

A Disaster Recovery Plan (DRP) consists of structured, detailed and documented instructions to recover disrupted systems and networks, helping companies bounce back to business as close as normal as possible.

A disaster is anything that can take operations offline, impacting business continuity or finances, can be malicious attacks or hardware or software failures. Many companies cannot afford an on-premises disaster recovery solution because of the high costs of implementation and maintenance. Cloud technology helps organizations with a cost-effective solution as part of the cloud provider services, like AWS or Azure. AWS has partnered with companies such as N2WS and Cloudberrylab, which offer disaster recovery solutions specifically for AWS.

Why Do You Need an AWS Disaster Recovery Plan

Users who choose AWS as their cloud provider should develop a disaster recovery plan using the tools specifically available for the platform. There are a number of benefits from having a disaster recovery plan ready when you use AWS. These include:

Protecting critical data—by establishing replication intervals to minimize data loss.
Minimized downtime—a DRP allows restoring critical applications to running mode quickly.
Ensured business continuity—using AWS cross-region disaster recovery to disperse the risk of having all your data exposed to the same threats.
Quick retrieval of files and data—implies minimal time to restore service.
Reliable and scalable service—leveraging AWS overall benefits. ## Tips for a Solid AWS Disaster Recovery Plan When you develop a DR Plan for AWS these are the basic steps to follow:
Audit your assets—identify what resources, applications, and components are critical to your organization. Conducting a Business Impact Analysis gives you an idea of how threats can affect business operations and growth.
Define control measures—they can be preventive measures such as surge protectors, detective measures such a server and network monitoring software. Remediation tools, for example, are corrective measures that help restore a system after a disaster.
Test your plan before you need it—conduct scheduled testing to find the gaps in the DRP.
Plan the maintenance—updated on a regular basis to keep up with system changes.

After you have your plan laid out, it is time to use the features in your AWS console to help secure your data. The following are some tips and aspects to consider when developing a DRP with AWS.

Backup your data, it is the backbone of disaster recovery
You can only recover what is on backup. Simply scheduling regular backups of what you have stored on Amazon EC2 and the EBS volumes attached to those instances is not enough. You need to access your data quickly in times of disaster. A well laid and tested AWS disaster recovery process can help you retrieve and restore the backup data from the AWS cloud environment.

Define what is your recovery time objective(RTO) and the recovery point objective(RPO)
Knowing how long your organization can be offline before suffering unacceptable monetary losses, (RTO), is critical to design your recovery plan. It is also vital to know how much data loss are you going to accept (RPO) in terms of time. For example, if losing 6 hours of data is unacceptable, then you need an RPO of less than 6 hours.

Choose your disaster recovery planning method
There are many options for DR recovery methods depending on your preferences and needs. Some of the most common are:

Backup and Restore—simply backup and restores data as needed. It has the drawback that none of the data is on standby so it can be time-consuming.
Pilot Light—keeps critical applications and data ready to be quickly retrieved in the event of a disaster.
Warm Standby—keeps a duplicate version of the organization’s core elements running on standby at all times, so in a disaster, they can use this duplicate to maintain operations.
Hot Standby—replicates fully the data and applications in two or more active locations, splitting the traffic between them. In the event of a disaster, is simple to reroute everything to the unaffected region, meaning close to no downtime.

Identify critical data and utilizing cross-region backups
You need to choose not only what data is critical to protect but how your data will be stored (for example using snapshots), and where this data will be stored. Storing all your backups close geographically is not the best idea, much like putting all your eggs in one basket. Should a disaster occur, your whole system could get knocked offline in an instant. It is better to spread the data across availability zones (AZ) around the world. How do you do it?

If your database is covered in Amazon Relational Database (RDS), you can use a Multi-AZ option to create a backup of an RDS instance. The downside? This will cost you extra since AWS charges double for a multi-AZ RDS setup instead of a single RDS instance. Make sure the EC2 instances are also spread across several AZ especially the ones in production.

Using Auto-Scaling Groups (ASG) can allow you to choose multiple AZ to deploy your instances. An Elastic Load Balancer (ELB) to distribute the traffic between them and balance the workload.

Use cross-region replication for S3
Amazon S3’s ability to duplicate the data to multiple locations within a region has made it the most popular AWS storage service. While this default feature creates high durability doesn’t annul the risk of losing data in a specific region. To avoid this scenario, just use the cross-region replication option, that copies the data to a designated bucket in another region. The feature does it automatically. How do you do it?

Go to the S3 console
Enable versioning
Look for the cross-region replication option and enable it.
Pick the source bucket and prefix
Create an IAM role

Keep in mind the cross-region synchronization starts from the moment the option is enabled. If you want to synchronize existing data you need to do it by hand.

Use global tables for DynamoDB Data cross-region replication
DynamoDB global tables deploy a multi-region multi-master database and send changes across several tables. This works great for disaster recovery as the data is spread in several regions, minimizing the risk of critical data loss.

Keep your AWS Root Credentials secure with multi-factor authentication
Root credentials are used to create initial users with administrator privileges. Therefore, the Root password should be hidden from non-authorized users, to avoid the risk of internal threats. The programmatic keys should be disabled once they are used. How do you do it? The best option is to set up a multi-factor authentication solution.While it may seem obvious, overlooking this detail can have disastrous consequences if they fall in malicious hands.

Consider a third-party disaster recovery as a service (DRaaS)
While most companies handle disaster recovery in-house, for small companies without a large IT team, sometimes makes it sense to get a third-party solution. DRaaS solutions help companies by implementing and maintaining their DRPs, allowing them to focus on developing their business with peace of mind.

The Bottom Line

AWS users can leverage the existing tools in the AWS environment to build their disaster recovery plan. While AWS doesn’t have proprietary disaster recovery services, the platform allows users to repurpose some of its features and functions to create their own DR solution. We described several tips and tricks that can help you take full advantage of the functions in your AWS environment, to keep your data safe.

How to Automate AWS Snapshots Using the Life Cycle Policy

Ilaibavati — Thu, 20 Jun 2019 16:30:51 +0000

Pixabay

What Are AWS EBS Snapshots?

EBS snapshots are point-in-time copies of EBS volumes stored on Amazon S3. These snapshots are incremental, meaning each snapshot only stores data which has changed since the last snapshot, reducing necessary storage space. Snapshots are chained together into a sort of version history and the data is consolidated by Amazon, meaning individual snapshots can be deleted without affecting recovery capabilities. AWS snapshots can be accessed from the AWS portal to restore EBS volumes in case of loss but are not downloadable or exportable.

How Snapshots Were Created Before Native Automation

Initially, there was no automated process for snapshot creation and they had to either be taken manually, created using API calls, or a script or had to be run with Cron, a time-based scheduler, for each instance. The script that you created, or chose to use, had to be run through AWS CLI and was reliant on AWS not altering its code structure or denying third-party access. The introduction of Lambda simplified this process by allowing you to run code on AWS administrated instead of self-managed servers, but you still had to provide the code to be run.

Automation Process with Data Lifecycle Manager (DLM)

Amazon’s DLM allows you to create and manage your AWS snapshots through native automation directed by policies you create. In order to use DLM, you must first tag your resources and then create a backup policy. Policies define which resources are managed, which tags are targeted, the schedule of the backup, and how many snapshots are retained. Currently, EBS volumes and EC2 instances are the available resources. Tags are defined by you and should be created with careful consideration. Multiple tags can be added to each EBS volume to allow targeting by multiple policies and multiple policies can target the same tags. The policies you define will run according to their schedule, with up to an hour variance, until you deactivate or modify them.

Some things to be aware of:

Each AWS account is limited to 100 lifecycle policies per region, 50 tags per resource, and one schedule per policy. Once a policy is changed, it will no longer manage retained snapshots or target tags to which it no longer applies, so it is up to you to manage these manually, through the creation of a new policy, or with custom scripts. DLM is a per-region service so policies will only apply to the region for which they are created. There is no built-in option for copying snapshots from one region to another, such as for the purpose of disaster recovery, so you may still need to use custom scripts or do this process manually. DLM is a free service but you are still charged for storage used by snapshots and instance load and I/O usage will increase while snapshots are created.

Using the Lifecycle Policy to Automate AWS Snapshots

Life cycle policies can be created and managed through the EC2 console, the CLI, or APIs. All three methods require the creation of an IAM role to grant permissions necessary for DLM to manage your snapshots.

Permissions for Amazon DLM

The IAM role is created automatically, as AWSDataLifecycleManagerDefaultRole, the first time you create a policy through the AWS management console or you can create the role manually. If you choose the manual route you will need to assign permissions and add a trust relationship. You will also need to grant permissions for DLM use to your IAM users.

Using the EC2 Console

Using the EC2 console is probably the simplest user interface available. To create lifecycle policies navigate to the lifecycle manager in the EBS and provide the information outlined below:

Description—description of the policy
Target with tags—tags identifying volumes or instances to be backed up
Schedule Name—name for the backup schedule
Create snapshots every n Hours—time between repetitions, supported values are 2, 3, 4, 6, 8, 12, and 24
Snapshot creation start time hh:mm UTC—time policy is scheduled to start
Retention rule—set number of snapshots to be retained in the range of 1-1000
Copy tags—Copy all user-defined tags on a source volume to snapshots of the volume created by this policy.
Tag created snapshots—policy id and schedule name tags are automatically added but you can add additional tags
IAM role—either the default created by DLM or your custom creation
Policy status after creation—enable to run, disable to not

After a policy has been created you can view the policy in the details tab and modify settings or delete the policy through actions.

Using the CLI

If you are already familiar with the CLI, you can now use this method to work with lifecycle policies through AWS specified commands. To create policies, use create-lifecycle-policy and its appropriate parameters. An example of this can be seen below and AWS has produced a whitepaper with more detail.

aws dlm create-lifecycle-policy --description "My first policy" --state ENABLED --execution-role-arn arn:aws:iam::12345678910:role/AWSDataLifecycleManagerDefaultRole --policy-details file://policyDetails.json

After a policy has been created, use the following commands for management:

To display—get-lifecycle-policy --policy-id policy-xxxxxxxxxxxxxxxxx
To modify—update-lifecycle-policy (with changes to parameters used in creation as necessary)
To delete—delete-lifecycle-policy --policy-id policy-xxxxxxxxxxxxxxxxx ### Other options If using the EC2 console or the CLI doesn’t suit you, policies can also be created and managed through either the Amazon DLM query API or by using AWS SDKs to access an API appropriate to your needs. ## Conclusion The introduction of native automation for AWS snapshot management makes the process much simpler and hopefully more reliable but it is important to understand the limitations of DML to make the benefits work for you. This automation can save you time and effort if used correctly but must still be monitored, particularly if there are multiple users with the ability to create or manage policies. Be sure to consider the cost of running and storing all your newly created backups when determining your automation policies so you aren’t trading time value for that of resources. If you need extended capabilities that go beyond what is currently offered natively, you can try a lifecycle management software.