DEV Community: Shameem Reza

Common Use Cases Of ViewModifier In SwiftUI

Shameem Reza — Thu, 12 Jan 2023 10:00:59 +0000

ViewModifiers in SwiftUI is a powerful tool for modifying and customizing views in your app. They allow you to encapsulate common view modifications into reusable, composable units, making it easy to apply the same modifications to multiple views throughout your app. In this article, we'll explore some common use cases for ViewModifiers in SwiftUI and how you can use them to improve the design and functionality of your app.

One of the most common use cases for ViewModifiers is to add padding to views. Padding is used to add space around the edges of a view and can be used to create a more visually pleasing layout. In SwiftUI, you can use the padding() ViewModifier to add padding to a view. For example, the following code adds 8 points of padding to a Text view:

Text("DEV Community")
    .padding()

You can also specify the amount of padding on each side of the view using the .padding(.all, 8) or use .padding(.horizontal,8) and .padding(.vertical,8) to set padding on a specific axis.

Another common use case for ViewModifiers is changing the text's font. SwiftUI provides several ViewModifiers for changing the font of the text, including font(), bold(), italic(), and smallCaps(). For example, the following code sets the font of a Text view to the system font with a size of 18 points:

Text("DEV Community")
    .font(.system(size: 18))

You can also use ViewModifiers to change the color of views. The foregroundColor() ViewModifier can be used to change the color of text or other views. For example, the following code sets the text color of a Text view to pink:

Text("DEV Community")
    .foregroundColor(.pink)

Another common use case for ViewModifiers is to apply a border to a view. SwiftUI provides the border() ViewModifier for adding a border to a view. For example, the following code adds a black border with a width of 1 point to a Text view:

Text("DEV Community")
    .border(Color.black, width: 1)

You can also use ViewModifiers to apply a background color to a view. SwiftUI provides the background() ViewModifier for adding a background color to a view. For example, the following code adds a blue background color to a Text view:

Text("DEV Community")
    .background(Color.blue)

Another common use case for ViewModifiers is changing a view's shape. SwiftUI provides several ViewModifiers for changing the shape of a view, including clipShape(), overlay(), and mask(). For example, the following code creates a circular view from a rectangular view:

Rectangle()
    .clipShape(Circle())

You can also use ViewModifiers to add a shadow to a view. The shadow() ViewModifier can be used to add a shadow to a view. For example, the following code adds a gray shadow to a Text view:

Text("DEV Community")
    .shadow(color: .gray, radius: 2, x: 2, y: 2)

In conclusion, ViewModifiers in SwiftUI is a powerful tool for modifying and customizing views in your app. They allow you to encapsulate common view modifications into reusable, composable units, making it easy to apply the same modifications to multiple views throughout your app. The examples I've shown in this article are just a few of the many ways you can use ViewModifiers to improve the design and functionality of your app.

You can find more information about ViewModifiers in the SwiftUI documentation:

To wrap it up, ViewModifiers are an essential part of SwiftUI. They can be used to style and customize views simply and elegantly, making it easier to maintain and scale your app's codebase. Using these view modifiers can improve your app's overall design and user experience.

Bringing Your Markdown to Life: A Guide to Rendering Markdown in SwiftUI

Shameem Reza — Wed, 11 Jan 2023 10:00:17 +0000

SwiftUI is a powerful framework for building intuitive and responsive user interfaces on Apple platforms. One of the most common use cases for apps is displaying rich text, and Markdown is a popular format for representing this type of content. In this article, we'll explore how to use the Down library to render Markdown in a SwiftUI app.

First, let's take a look at what Markdown is and why it's useful. Markdown is a lightweight markup language that uses a simple syntax to format text. The syntax is designed to be easy to read and write and can be converted to other formats, such as HTML and PDF. Markdown is often used for documentation, readme files, and blog posts because it allows writers to focus on content, not formatting.

Before we dive into the code, you need to install the Down library using the Swift Package Manager by adding the following line to your Package.swift file.

dependencies: [
    .package(url: "https://github.com/johnxnguyen/Down.git", from: "4.0.0")
]

With the Down library installed, we can create a simple SwiftUI view that displays Markdown. In the following example, we have a ContentView struct that has a TextEditor and a MarkdownView. The TextEditor allows the user to enter some Markdown text, and the MarkdownView displays that text as formatted HTML. The MarkdownView struct uses the Down library to convert the Markdown text to HTML. The toSwiftUI() method provided by Down converts the HTML to a View, which can be displayed by the MarkdownView.

import SwiftUI
import Down

struct ContentView: View {
    @State private var markdown: String = "# Welcome to Dev Community\nHere is some **bold** text."

    var body: some View {
        VStack {
            Text("Enter Markdown:")
            TextEditor(text: $markdown)
            Divider()
            MarkdownView(markdown: markdown)
        }
    }
}

struct MarkdownView: View {
    let markdown: String

    var body: some View {
        let markdown = Down(markdownString: self.markdown)

        return VStack {
            markdown.toSwiftUI().frame(minWidth: 0, maxWidth: .infinity)
        }
    }
}

In the above example, the ContentView struct contains a TextEditor and a MarkdownView. The TextEditor is bound to the markdown property, which is a state variable that stores the Markdown text entered by the user. The MarkdownView struct takes the markdown property as an input and uses the Down library to convert it to HTML. The toSwiftUI() method is then used to convert the HTML to a View, which is displayed in the MarkdownView.

The MarkdownView struct uses the frame modifier to set the minimum and maximum width of the view. This ensures that the view takes up the full width of the screen, regardless of the size of the device or orientation.

It's worth noting that this example is just a starting point, and in a production app, you would likely have more robust error handling and validation in place. Additionally, you could also customize the appearance of the rendered Markdown by using custom CSS styles. You can also add images and videos and provide live web links.

Another thing to consider is handling different types of markdowns. With the rise of different markdown dialects like GitHub Flavored Markdown and MultiMarkdown, some features may not be supported by the Down library. However, with the flexibility of SwiftUI, you can handle this with ease.

To handle different dialects of markdown, you can use any other markdown parsers available for swift like:

PEGMarkdown
MarkdownKit
MarkdownParser
MarkdownRenderer

All the libraries mentioned above have slightly different syntax and feature support, so be sure to pick the one that best fits your needs.

Another thing to consider is handling large markdown files; you can load the file using the FileManager and then render it using the markdown parser.

Update:

With the latest iOS 15 update, Apple has included built-in support for Markdown in SwiftUI. This makes it even simpler to incorporate rich text formatting into your app.

struct ContentView: View {
   var body: some View {
       VStack {
           Text("**Thank you**")
               .foregroundColor(.green)
           Text("*for your support*")
           Text("Welcome to [Dev](https://dev.to) community")
       }
   }
}

In conclusion, SwiftUI is a powerful framework that makes it easy to build responsive user interfaces, and Markdown is a popular format for representing rich text. You can easily render Markdown in your SwiftUI app using the Down library. With the flexibility of SwiftUI, you can handle different dialects of markdown and large markdown files as well. With this approach, you can provide a great reading experience to your users.

3 Tricks to automate development tasks with Git hooks

Shameem Reza — Sat, 12 Jan 2019 17:41:54 +0000

The Git version control system, like many others, comes with a few tricks in the sleeve that make it programmatically extensible. In this article we will learn one of them, the hooks, which allow automatic actions along with many of the typical Git commands.

Hooks are programs that run before or after some important Git event. For example, before completing a git commit, after changing branches or before sending changes during a git push.

They are stored in the .git / hooks / directory of each cloned project, and they must be executable scripts or programs (on Unix-like systems they must have the execution permission).

To add a hook to your project, simply copy or link to that directory the program you want to run automatically with the name of the "event" (for example, pre-commit, all possible names are available in the Git documentation).

If the program is a script and you want other collaborators to be able to use it, it is convenient to include it in the root of the project and create a direct access to it in .git / hooks /:

ln -s ../../pre-commit.sh .git/hooks/pre-commit

Let's see some practical applications of Git hooks.

1. Check the quality of the code before committing

The hooks that are executed prior to the confirmation of a commit are useful since they allow us to perform checks on the added or deleted code just before reflecting those changes in the version tree of the repository.

If the hook fails or returns error code, the commit will not be made.

In the following example (valid for Unix systems, such as Linux or macOS), we used the jslint package from Node.js to check the quality of a JavaScript application code before completing the commit:

#!/bin/bash
# pre-commit.sh

# Save unconfirmed changes
STASH_NAME="pre-commit-$(date +%s)"
git stash save -q --keep-index $STASH_NAME

# Checks and tests
jslint my_application.js || exit 1

# Recover saved changes
STASHES=$(git stash list)
if [[ $STASHES == "$STASH_NAME" ]]; then
  git stash pop -q
fi

You could proceed with the same strategy to launch a suite of tests on the application or other necessary checks, for example, a search for keys or secret tokens to avoid entering them into the repository.

2. Generate documentation as changes are uploaded

If in our project we have a documentation generator from the code, we can execute it regularly as we develop using a pre-push type hook.

We simply launch the necessary command to compose all the documentation in some directory (for example, docs /) and add it to a new commit.

In the following list I show you several examples of the possible commands that you could use for this purpose:

#!/bin/bash
# pre-push.sh

# Generate the documentation
doxygen Doxyfile

# Another example, with Python:
pydoc3 -w docs/

# Another example, with R:
Rscript -e 'pkgdown::build_site()'

# Add and confirm the changes related to the documentation
git add docs/
git commit -m "Update documentation ($(date +%F@%R))"

The advantage of this is that, if you use GitHub Pages or a similar service to serve your online documentation, you will always be up to date with the changes to your code and it will not become obsolete.

3. Check dependencies when changing branch

Finally, a very interesting application of the hooks is to update the installed dependencies when changing branches in a project.

If you use package managers and dependencies for your development language (Pip in Python, npm in Node.js, Nuget in .NET, Bundler in Ruby, Cargo in Rust etc.), the following example can be very useful.

The code listing below would correspond to a post-checkout hook, and what it does is check if between the previous branch and the new one the dependencies file has changed (in this case, Gem file for Ruby), in which case it executes the installer convenient (in this case, bundle).

#!/bin/bash
# post-checkout.sh

if [ $1 = 0000000000000000000000000000000000000000 ]; then
  # If we are in a recently cloned project, compare with the empty directory
  old=$(git hash-object -t tree /dev/null)
else
  # The first argument is the hash of the previous HEAD
  old=$1
fi
if [ -f Gemfile ] &&
  git diff --name-only $old $2 | egrep -q '^Gemfile|\.gemspec$'
then
  # Empty $ GIT DIR prevents problems if bundle calls git
  (unset GIT_DIR; exec bundle)
  # Checkout is completed even if the bundler fails
  true
fi

You can adapt this code for your own use by changing Gemfile for the dependencies file you use (package.json or requirements.txt, for example) and bundle for the corresponding command (npm install or pip install -r requirements.txt).

Suggest best resources to learn VueJs from Scratch

Shameem Reza — Tue, 08 Jan 2019 17:57:24 +0000

I am writing an article for those who are just starting or interested to learn VueJs.

I hope as a Top VueJs expert, you will suggest best resources to learn VueJs from your side.

Top 5 Data Management Trends for 2019

Shameem Reza — Tue, 08 Jan 2019 10:19:44 +0000

Since the way we consume and interact with the data changes daily, we also have a considerable number of innovations to improve the agility of the companies and their operational efficiency. With the EMEA market in mind, I have highlighted the following 5 relevant trends that decision makers must know in 2019:

1. It will increase the use of multi-cloud environments

A report by McKinsey & Company has shown that the flow of data to Asia is up to 45 times higher than in 2005. Data from key regions such as North America and Europe have grown considerably from 5,000 to 20,000 Gbps and 1,000 to 5,000 Gbps respectively. Based on the original figures of 100-500 Gbps and less than 50 Gbps in 2005.

With companies that operate beyond their borders and being more technology-dependent than ever. It is practically inevitable to expand the use of the multi- cloud IDC estimates that customers will spend $554 billion on cloud computing and related services in 2021, more than double that of 2016.

On-premises data and applications will not become obsolete, but data deployment models will increase by mixing each Once again the option on premise (own data center), software as a service (SaaS), infrastructure as a service (IaaS), managed clouds and private clouds.

2. The shortage of flash memory supply and prices will improve in 2019

According to a Gartner report from October 2018, it is expected that there will be a slight shortage of supply shortages in flash memory by mid-2019 and that prices will be stabilized to a large extent thanks to the increase in the production of memory in China.

Greater supply and improved pricing will mean that flash deployment will be used more in the field of operational recovery, where the fourteen most recent days of backup and replication data are normally hosted.

In my opinion, this increased flash capacity will result in an increased use of instantaneous mounting of backup machine images (or copy data management).

Systems that offer the copy data management (CDM) function can provide value beyond availability, as well as better commercial results. Some of the practical examples of use to take advantage of the backup and replication data are: DevOps, DevSecOps and DevTest, Patch Testing, Analytics and Reporting (testing, analysis and generation of patch reports).

3. Predictive analysis will become widespread and standard

Forecasts indicate that the predictive analytics market will reach 12,410 million dollars in 2022, which will mean an increase of 272% since 2017, with a compound annual growth rate of 22.1%.

Specifically, the Asia-Pacific market (APAC) is expected to register the highest compound annual growth rate during the period of this forecast.

The predictive analysis based on telemetry data, essentially advice and recommendations driven by machine learning (ML or machine learning), is one of the categories that surely becomes generalized and the norm.

4. The "versatile" (or generalist) function will become the new operating model for most IT companies

While the first two trends focused on technological aspects, the future of digital remains analog: people.

If we combine the talent shortage with new infrastructure and on the verge of collapse on premises, the public cloud + software as a service (SaaS), we will find that specialists with experience in a wide range of disciplines are needed, who also have to know better the business.

For example, the labor market of information technology (IT) in Singapore continues to register high levels of recruitment.

a. Frustration with traditional backup approaches and solutions

The three main suppliers in the sector will continue to lose market share in 2019. In fact, the largest supplier in the sector has been losing market share for ten years.

Companies are leaving aside traditional suppliers and prefer more agile, disruptive and dynamic options that offer them the functions they need to grow in the data-driven era.

A Cognizant report noted that 82% of leaders of companies in the Asia-Pacific (APAC) believe that the future of work lies in smart machines.

b. The critical points of the three C's: Cost, complexity and capacity

These three C's are still the reason why those who work with data centers are not happy with the solutions of other providers.

In general, the costs are excessive, it is unnecessarily complex and lacks sufficient capacity, which affects the speed of backup, restoration or instantaneous mounting to a virtual machine image.

These three key criteria will continue to be the main reasons why companies increase or completely replace their backup solutions.

5. The arrival of the first 5G networks will create new opportunities for distributors and cloud service providers (CSPs) to collect, manage, store and process the largest possible volume of data.

The 5G will be adopted quickly for machine-to-machine communication and for Internet of Things (IoT) technology. The mobile consumer network has reached a point where it is likely that 4G speed is fast enough to meet the needs of most consumers.

2019 will focus more on the standardization and generalized testing of technology.

On devices designed for the future capable of guaranteeing that they are compatible with technology when available and in Europe converted into a genuine "Gigabit Society".

Accelerate your website with Nginx as a reverse proxy cache

Shameem Reza — Sun, 06 Jan 2019 17:45:00 +0000

Optimizing Web Performance is a pending issue that we must continually work on. There are multiple solutions to improve our response times.

What is an Inverse Proxy cache?

In computing, a reverse proxy is a type of server located between the client and the server or web servers that retrieves the resources of these. These resources are returned to the client as if returned by the web server itself. Basically it is an intermediary that can act in different roles.

The possible applications that we can give to this proxy is to use it as a firewall to an internal network, as a load balancer, as a tool to apply an AB Testing or the reason for this article, as a static cache server.

Image credit: Privacy Canada (https://privacycanada.net)

Basically this server used as a cache, consults the web server if it does not have the requested resource, a MISS occurs and this resource is stored in memory. The next request to the same resource is served by the proxy itself in a very efficient way, producing a HIT and avoiding the call to the web server during a given TTL. In this way we can mount a static server centralized and from which we serve all our static content.

There are different technologies that allow us to fulfill this scenario. One of the best known tools is Varnish, but Nginx apart from web server can also be configured to act as a reverse proxy cache. Reading several articles of comparisons and benchmarks the difference is minimal, so today we are going to focus on the Nginx-Nginx scenario.

However, we could represent the same scenario with different combinations: Varnish-Apache, Varnish-Nginx or Nginx-Apache, being the first of the couple the cache server and the second the web server.

Why Nginx?

Like Varnish, Nginx is able to act as a web cache but not all system administrators know this aspect. Nginx can serve static content directly in a very efficient way and can act as a front-facing cache, just like Varnish would. While Varnish its only task is to act as a cache with advanced options, Nginx is versatile and offers several alternatives.

The truth is that I would not know which of the two options to decline, but the decision to use only nginx, is not to introduce new technologies to learn and maintain in our infrastructure, and it seems that the configuration of nginx is much simpler than the of Varnish.

Mounting the infrastructure

Install Nginx

To install nginx on our server we simply execute the following command:

sudo apt-get install nginx

By default nginx will be installed on your system listening on port 80, serving a static welcome html. Let's see how to configure nginx.

Configure the web server

First of all we must take into account that the web server that will read the resources of our filesystem should no longer listen on port 80, because the proxy will be placed instead.

We are going to create a folder where our resources will be hosted:

mkdir /var/www/assets

After this we are going to configure our nginx so that it listens on port 81, that defines as root our directory of resources and that includes a time of expiration of the resource of 12 hours. This can be configured through regular expressions that allows configuration. For this we generate the following file / etc / nginx / sites-available / static-server

server {
listen 81;
server_name {{tu ip o subdominio}};
access_log /var/log/nginx/static-server.log;
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
expires 12h;
root /var/www/assets;
add_header Cache-Control "public";
}
}

And finally we'll move it to / etc / nginx / sites-enabled / static-server. If we now make a request to a resource through port 81 we should be able to receive it.

Configure the proxy cache

To configure nginx to act as a cache we will use the proxy_cache_path directive. This directive indicates a directory of your machine where all the resources that are being cached will be stored.

This directory should contain the www-data group and 700 permissions so that the proxy can write correctly. In addition, this directive indicates a keys_zone identifier that defines the name, the maximum size of this cache with max_size, and the levels of indirection of the folder hierarchy in the cache.

We will also rely on another proxy_cache_key directive, which is the key to store the cached resources. Basically nginx makes a hash of this structure, in this way to be able to choose the level of cache, for example if it uses the same parameter or not in the url.

Once we have these two directives clear, we will indicate that the proxy listens on port 80, and that any request that comes inspect the cache area that we have defined and otherwise check against our web server listening on port 81 with the proxy_pass directive

In addition Nginx includes a header called X-Proxy-Cache that tells the client if the resource was returned by the cache (HIT) or had to consult the web server (MISS). This information is especially interesting to debug that everything is working correctly.

Now I am leaving the complete configuration of the caching server:

#/etc/nginx/sites-enabled/caching-server
proxy_cache_path /tmp/nginx levels=1:2 keys_zone=assets_zone:10m inactive=60m;
proxy_cache_key "$scheme$request_method$host$request_uri";
server {
listen 80;
server_name {{tu ip o subdominio}};
access_log /var/log/nginx/caching-server.log;
location /static/ {
proxy_cache assets_zone;
add_header X-Proxy-Cache $upstream_cache_status;
include proxy_params;
proxy_pass http://localhost:81/;
}
}

I hope this article has been interesting and useful and I hope you tell us your experiences on how you have optimized your website and the problems you have faced and solutions you have implemented.

https://www.digitalocean.com/community/tutorials/understanding-nginx-http-proxying-load-balancing-buffering-and-caching