Advances in technology are continuously reshaping the online shopping experience. Being able to view products in 3D used to be limited to large, multi-million dollar companies that had the resources to invest in innovative experiences to draw in customers. But then came WebGL.

With its ability to render interactive 3D objects entirely within a web browser, this JavaScript API is vital for businesses that want to create a differentiated, interactive e-commerce experience. Unlike 360-degree image views, which are an array of images stitched together, WebGL’s 3D objects let users interact with products dynamically, positioning the camera in real-time.
Potential customers can rotate a handbag or change the color of a car they’re thinking of buying with a simple stroke of a touchscreen. Since everything is done within the browser, nothing special needs to be downloaded, making for an easy and seamless customer experience (CX).
&nbsp;
Enhancing the Shopping Experience
According to data collection company Statista, American shoppers spent $365.2 billion dollars on <a href="https://www.statista.com/statistics/272391/us-retail-e-commerce-sales-forecast/" title="https://www.statista.com/statistics/272391/us-retail-e-commerce-sales-forecast/" data-renderer-mark="true">online retail sales of physical goods</a> in 2019. By 2024, online retail sales are projected to reach $600 billion. With so much profit on the line, businesses need to make sure that the online shopping experience they’re providing is as useful as the ones shoppers get inside a brick-and-mortar store. This includes providing customers not only with detailed product descriptions, but interactive product views.
Verge3D, a <a href="https://www.soft8soft.com/gallery/ready-to-use-3d-e-commerce-website/" title="https://www.soft8soft.com/gallery/ready-to-use-3d-e-commerce-website/" data-renderer-mark="true">real-time renderer and toolkit</a> for creating 3D experiences on websites, uses WebGL to do just that. By featuring a full 3D view and zoom function, online shoppers can scrutinize a product from all angles and sides to inform their purchase decision.
This ability to examine a product before buying becomes even more necessary when purchasing something as expensive as an automobile. Car buyers need to have as much information as possible about a vehicle’s exterior, interior and available options. A website utilizing WebGL technology can provide shoppers with an interactive 3D configurator that lets them conveniently click on car parts and color palettes to customize their dream ride.
A 2019 <a href="https://www.coxautoinc.com/learning-center/2019-car-buyer-journey-study/" title="https://www.coxautoinc.com/learning-center/2019-car-buyer-journey-study/" data-renderer-mark="true">Car Buyer Journey Study</a> by Cox Automotive shows that the majority of the automotive industry’s potential customers make their initial buying choices online. By the time car shoppers go to a dealership, they’re ready to make a purchase. Because of this, dealers need a way to entice buyers on their website.

![543AFA01-307A-42F8-86D0-7C5EAE521609_1_105_c.jpeg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/543_AFA_01_307_A_42_F8_86_D0_7_C5_EAE_521609_1_105_c_05b2505bc2.jpeg)

Source: Shutterstock.com
Color plays a significant factor in the purchase decision. As WebGL makes advances in implementing complex shading, online car buyers can choose from realistic depictions of car paint options. Those interested in a Volkswagen can use the <a href="https://partner.viscircle.com/VWPolo/" title="https://partner.viscircle.com/VWPolo/" data-renderer-mark="true">VW Polo configurator</a> to test out which colors they like best on the vehicle.
Meanwhile, the <a href="http://experiences.xymatic.com/car/" title="http://experiences.xymatic.com/car/" data-renderer-mark="true">BMW 7 series configurator</a> uses WebGL technology to give potential customers the chance to not only see the cars with different paint options from any angle, but to also choose the wheels and interior colors, viewing their customizations in real-time.
Furniture is another big commitment purchase. Target has a feature on its site called <a href="https://corporate.target.com/article/2017/10/see-it-in-your-space" title="https://corporate.target.com/article/2017/10/see-it-in-your-space" data-renderer-mark="true">“See It In Your Space”</a> that allows online shoppers to use their phone camera to see how the furniture they’re considering buying will look in their home. The feature uses WebGL to render the interactive graphics in the customer’s browser, allowing shoppers to move, scale and rotate the home decor. A Target spokesperson explained to <a href="https://techcrunch.com/2017/10/24/target-adds-ar-shopping-to-its-mobile-website/" title="https://techcrunch.com/2017/10/24/target-adds-ar-shopping-to-its-mobile-website/" data-renderer-mark="true">TechCrunch</a>, a tech online publisher, that “guests can easily snap pictures using their phone, they don’t have to use any additional hardware or apps. We just felt like it was a really straightforward experience.”
This straightforward experience enhances CX. If a company is planning to launch an online store, WebGL can help them stand out from the crowd of digital marketplaces on the internet. 3D technology is the next evolution of the digital user experience.

![5FFC91FC-EC1A-415E-81AF-CAF05E9B490F_1_105_c.jpeg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/5_FFC_91_FC_EC_1_A_415_E_81_AF_CAF_05_E9_B490_F_1_105_c_050f722e1d.jpeg)

Source: Shutterstock.com
&nbsp;
Codazen Solutions: WebGL in Action
With <a href="https://www.thinkwithgoogle.com/feature/path-to-purchase-search-behavior/" title="https://www.thinkwithgoogle.com/feature/path-to-purchase-search-behavior/" data-renderer-mark="true">63% of shopping occasions</a> beginning online, it’s crucial for brands to have a strong digital presence. No matter where customers are making their purchase—online or in a brick-and-mortar store—their customer journey is starting in front of a screen. By improving the CX from the very first step, businesses have a higher chance of getting customers to buy their products. An e-commerce website featuring a 3D experience could give online retailers the competitive edge they need.
Codazen works closely with companies to improve CX using WebGL. Josh Grieve, Sr. UX Product Designer, explains how WebGL has enabled our team to create immersive web experiences by leveraging client-side hardware to render 3D visual effects in the browser:
<blockquote>
We have the ability to create elaborate immersive experiences with a relatively low load time. Imagine being able to place a couch in your living room without downloading an app to see it. Downloading an app is a hurdle for the consumer. We want to remove as much friction as possible to make it easier for the user. If they can see that the couch fits and looks good in their space, that helps them feel confident in the purchase.
</blockquote>
Creating these visual experiences is a partnership between UX and engineering. Elton Dan, Associate Full-Stack Engineer, thinks “overall WebGL is a really great tool, but for people who are new to working with 3D spaces and such, understanding the concept can be a bit challenging.” Our team keeps up with the ongoing updates to the JavaScript API’s libraries and can use existing platforms to build 3D experiences.
In our R&amp;D division, <a href="https://www.codazen.com/labs/" title="https://www.codazen.com/labs/" data-renderer-mark="true">Codazen Labs</a>, our designers and engineers know how to leverage WebGL and other 3D capabilities. <a href="https://www.codazen.com/contact/" title="https://www.codazen.com/contact/" data-renderer-mark="true">Contact us</a> to learn how 3D can propel your digital transformation, deliver higher revenue streams and create better brand experience.

WebGL brings digital transformation to e-commerce websites with convenient 3D graphics and better customer experience.

large_B610B17C-2C04-46BA-A182-666A6BCDF7D6_1_105_c-1.jpeg

medium_B610B17C-2C04-46BA-A182-666A6BCDF7D6_1_105_c-1.jpeg

small_B610B17C-2C04-46BA-A182-666A6BCDF7D6_1_105_c-1.jpeg

thumbnail_B610B17C-2C04-46BA-A182-666A6BCDF7D6_1_105_c-1.jpeg

WebGL Is Leveling Up E-Commerce With 3D

Codazen isn’t just a place to work. It’s a place to develop skills. Our Lunch &amp; Learn (L&amp;L) program provides us with lessons on topics ranging from data science and coding to UX design and meditation.
Josh Studley, Engineering Manager (and unofficial Coding Guru), recently taught us about CSS techniques and how it’s possible to create amazing images with less code. And just for fun, how to do it using a single div.

Writing HTML and CSS to match a design is a useful skillset for every developer to have. While domain knowledge is great, the ability to write code that’s both simple and reusable can help an engineer stand out from the crowd.
Studley taught us how to overcome one of the major challenges found in creating page layouts: elements sharing code. During his L&amp;L, he created two flags on the same page—one from Japan and the other from France, each having dimensions of 300px by 200px.
And just like a pixelated Phoenix, once Studley successfully created the flags, he destroyed them to start anew and show us different ways for the flags to rise again. Below are his techniques broken down step-by-step to help build up your skillset.

![094A478B-BFE1-46D8-B3D7-A3B852E467E1_1_105_c.jpeg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/094_A478_B_BFE_1_46_D8_B3_D7_A3_B852_E467_E1_1_105_c_a19d825a13.jpeg)

![F5B6155B-ECE5-42AC-BEBF-6EBF3416230A_1_105_c.jpeg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/F5_B6155_B_ECE_5_42_AC_BEBF_6_EBF_3416230_A_1_105_c_22c9118fc1.jpeg)

Japanese and French flags before coding. (Source: <a href="http://shutterstock.com/" title="http://Shutterstock.com" data-renderer-mark="true">Shutterstock.com</a>)
<h2 data-renderer-start-pos="1415">CSS Technique 1: Flexible Box Layout (aka Flexbox)</h2>
One goal engineers have when writing code is to make it reusable. This can be done with shared CSS classes. A shared .flag class helps set the dimensions, border and background color of both flags. Scalability and dynamic measurements are also essential. This is where Flexbox shines.
To create the circle in the Japanese flag, use a height and width of 100px and set the border-radius to 50%. One feature of Flexbox is its ability to center child elements both horizontally and vertically, so the circle doesn’t need to position itself. The Japanese flag centers everything with two simple lines: align-items: center for horizontal and justify-content: center for vertical.
A scalable solution is best for creating the stripes on the French flag. Since each stripe is one-third of the container, use width: calc(100%/3). Flexbox by default will line elements left-to-right. Because one of our goals is simplicity, and the flag has a background color of white, we can eliminate the white stripe. As we have only the first stripe and the last stripe remaining, the justify-content property can be set to space-between. This puts as much space as possible between the flexed items.
HTML
<pre data-renderer-start-pos="2652">&lt;div class="flag japan"&gt; &lt;div class="circle red"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="flag france"&gt; &lt;div class="stripe blue"&gt;&lt;/div&gt; &lt;div class="stripe red"&gt;&lt;/div&gt; &lt;/div&gt;</pre>
CSS
<pre data-renderer-start-pos="2827">.flag { background-color: white; border: solid 1px black; display: flex; height: 200px; margin-bottom: 10px; width: 300px; } .japan { align-items: center; justify-content: center; } .japan .circle { border-radius: 50%; height: 100px; width: 100px; } .france { justify-content: space-between; } .france .stripe { height: 100%; width: calc(100% /3); } .blue { background-color: blue; } .red { background-color: red; }</pre>

![DBCE0237-2BE1-430D-ADEA-39143D120C6B_4_5005_c.jpeg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/DBCE_0237_2_BE_1_430_D_ADEA_39143_D120_C6_B_4_5005_c_9d2ea3afe6.jpeg)

Japanese and French flags after coding. (Courtesy: Josh Studley.)
<h2 data-renderer-start-pos="3357">CSS Technique 2: Background Gradient</h2>
The color patterns of the Japanese flag’s circle and the French flag’s stripes make them perfect candidates for background gradients. Typically, a gradient blends one or several colors into others over a distance.
The circle in the Japanese flag can be expressed as a radial-gradient with a circle shape instead of the default ellipse. To achieve the red circle, the gradient must include color stops, which are comma-separated color and measurement pairs. When the color stops are the same measurement, they create hard lines that no longer look blended. Radial gradients can look like they have jagged edges if they are the same measurement, so it’s good to make the next color start very close, within 1px.
To get the stripes in the French flag to line up, use linear-gradient instead of radial-gradient. The color stops can be the same measurement since we want lines and not curves. Use to right for the direction to accomplish the three-striped design.
Color stops can be expressed in the same section without repeating the color name. The stops white 33%, white 66% can be written as white 33% 66%. If the first color has a stop, like blue 0, blue 33%, the first value can be removed and blue 33% can remain. Likewise the last color stop can be removed if it is also the previous color stop. So red 66%, red 100% can be just red 66%. Taking out these extras helps keep your code length to a minimum.
HTML
<pre>&lt;div class="flag japan"&gt;&lt;/div&gt; &lt;div class="flag france"&gt;&lt;/div&gt;<code>&nbsp;</code></pre>
CSS
<pre><code>.flag {
 background-color: white;
 border: solid 1px black;
 height: 200px;
 margin-bottom: 10px;
 width: 300px;
}

.japan {
 background-image: radial-gradient(circle, red 25%, transparent calc(25% + 1px));
}

.france {
 background-image: linear-gradient(to right, blue 33%, transparent 33% 66%, red 66%);
}</code></pre>
<h2 data-renderer-start-pos="5199">CSS Technique 3: One Div to Rule Them All</h2>
Using just a single &lt;div&gt; to create both flags is possible if we creatively utilize background colors. Multiple gradients can be applied to the same element, and background-position and background-size can move these gradients around that element, with hard color stops creating the necessary lines.
Since the flags should not repeat, set background-repeat to no-repeat. The Japanese flag’s position will start in the upper left corner (0 0) and have a size of 300px by 200px. To add the French flag into the mix, we will include the gradient, position and size into the existing properties, separated by a comma.
Linear gradients which have hard 1px color stops and a transparent color in the middle will add the flag borders. Since gradients are layered based on their order in the list, the first items will be on top and the last items will be at the bottom. The border will appear first in the list as we want that to appear on top.
HTML
<pre><code>&lt;div class="flag"&gt;&lt;/div&gt;</code></pre>
CSS
<pre><code>.flag {
 background-image:
 linear-gradient(to right, black 1px, transparent 1px 299px, black 299px),
 linear-gradient(to right, black 1px, transparent 1px 299px, black 299px),
 linear-gradient(to bottom, black 1px, transparent 1px 199px, black 199px 200px, transparent 200px 210px, black 210px 211px, transparent 211px 409px, black 409px),
 radial-gradient(circle, red 25%, white calc(25% + 1px)),
 linear-gradient(to right, blue 33%, white 33% 66%, red 66%);
 background-position: 
 0 0,
 0 210px,
 0 0,
 0 0,
 0 210px;
 background-repeat: no-repeat;
 background-size:
 300px 200px,
 300px 200px,
 300px 410px,
 300px 200px, 
 300px 200px;
 height: 410px;
 width: 300px;
}</code></pre>
<h2 data-renderer-start-pos="6978">Codazen: Lunching and Learning</h2>

![FF9ABF54-9AF5-4713-93E8-D8A06E49C900.jpeg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/FF_9_ABF_54_9_AF_5_4713_93_E8_D8_A06_E49_C900_94931a0d00.jpeg)

Source: <a href="http://shutterstock.com/" title="http://Shutterstock.com" data-renderer-mark="true">Shutterstock.com</a>
At Codazen, we value employee growth. What better way to grow than watching a presentation led by an expert while eating a sandwich?
Nancy Cadena, UX Product Designer, was the one who requested this CSS L&amp;L. Studley had been posting interesting examples of images drawn in CSS on our workplace chat and Cadena wanted to see some examples in action. She says:
<blockquote>
It was actually the first coding L&amp;L that I could follow all the way through. I know the bare minimum about coding, but learning more and more about it from working with devs. This just seemed like a potential bridge between design and development, and could help both disciplines think of solutions and be more creative during projects where we run into issues like these.
</blockquote>
One of our Associate Full-Stack Engineers, Elton Dan, enjoyed seeing the different steps Studley took to tweak his CSS and make it more efficient to the point where he only needed one div. Dan says, “Josh's code examples are really easy to follow and I think he does a really great job of explaining through his examples. You can see the experience he has with teaching.”
<a href="https://www.codazen.com/contact/" title="https://www.codazen.com/contact/" data-renderer-mark="true">Codazen</a> values teaching its employees to broaden their horizons. So a coding Lunch &amp; Learn is a fun opportunity for both engineers, like Dan, and non-engineers, like Cadena.
You can lunch and learn with us too. <a href="https://codazen.bamboohr.com/jobs/" rel="noopener">Check out our current openings</a>.
&nbsp;

There are multiple coding paths to achieving the same HTML and CSS goal. Codazen’s Coding Guru teaches us how. 

large_D5AD906F-E369-4B0A-BADD-826E5A09467F_1_105_c.jpeg

medium_D5AD906F-E369-4B0A-BADD-826E5A09467F_1_105_c.jpeg

small_D5AD906F-E369-4B0A-BADD-826E5A09467F_1_105_c.jpeg

thumbnail_D5AD906F-E369-4B0A-BADD-826E5A09467F_1_105_c.jpeg

CSS: One Goal, Many Paths

‘There should be an app for this!'&nbsp; I’m sure being a developer this thought must have crossed your mind many times. But these thoughts rarely go beyond ideation phase. Why? Busy life? Steep learning curve?

How about this… Let’s just learn the basics of android development required to build any RESTFul mobile app in next 30 mins and by the end of this blog you will have your own fancy Pokémon battle app. Then you can decide if you are finding Android to be interesting enough to spend more time learning it.
<h2 style="font-weight: normal;">&nbsp;Prerequisites</h2>
You should have some programming experience and an understanding of Java.
<ul>
<li>Install <a href="https://www.java.com/en/" rel="noopener" target="_blank">Java Development Kit (JDK) 8</a> or later</li>
<li>Install <a href="https://developer.android.com/studio/" rel="noopener" target="_blank">Android Studio</a></li>
</ul>
Follow the prompts. Please follow any android installation tutorial on YouTube if you run into issues. <a href="https://youtu.be/7vvMltQtfxY" rel="noopener" target="_blank">My personal recommendation</a>.

<div data-node-type="mediaSingle" data-layout="align-start" data-width="50">
<div data-id="7649075d-733f-41d3-80ee-ef0bfb016532" data-node-type="media" data-type="file" data-collection="contentId-741048324" data-width="880" data-height="1396" title="Attachment" data-file-name="final app.mov" data-file-size="6425905" data-file-mime-type="video/quicktime">
&nbsp;
</div>
</div>
<h2 style="font-weight: normal;">Quick tour of the Android studio</h2>
When you go to the Android Studio, you have an option to start a new project, import or open an existing project. We will start a new project. 

![01_QuickTour-NewStudioProject.jpg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/01_Quick_Tour_New_Studio_Project_b7c5c15bba.jpg)

 After starting a new project, you will get an option to select an activity for your home screen. The Activity defines how your app will look and behave. Some of these activities come with predefined functionalities and UI elements. For our app we will use an empty activity.

![02_QuickTour-ChooseProjectv2.jpg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/02_Quick_Tour_Choose_Projectv2_1120884a8a.jpg)

&nbsp;
Next you will define the configurations for your app. You will get an option to decide name and minimum API level support for your app. Some functionalities are not available in phones with lower API levels. So make your selection based on the functionality of your app and the target audience.

![03_QuickTour-Configure.jpg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/03_Quick_Tour_Configure_4b4680cd8d.jpg)

&nbsp;
<div data-node-type="mediaSingle" data-layout="align-start" data-width="80">We will be testing our app on the android emulator. Please create your own emulator by clicking the highlighted button below and following prompts.</div>

![04_QuickTour-Emulator.jpg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/04_Quick_Tour_Emulator_df7235d51c.jpg)

<h2>Code… Code… Code</h2>

Now we will start with our development. Here I have selected the 4 most important files of our project:

![05_Code.jpg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/05_Code_388ac4c818.jpg)

&nbsp;
Following is the use of each of these files in layman’s terms -
<ol>
<li>activity_main.xml This file defines how the UI will look. You have an option to drag-and-drop UI components like buttons, images etc.</li>
<li>MainActivity.java This file defines the functionality and logic for the UI. Ex - Action to be taken on button click.</li>
<li>Manifest.xml This file defines project and app level configurations. Things like permission requests from app user, app icon and many more are defined here.</li>
<li>build.gradle(Module: app) This file is mainly used for importing 3rd party libraries so they can be used in our app.</li>
</ol>
Let’s start with the UI. Open activity_main.xml in design mode 
 Play around with all the UI elements. At the end, our UI should look something similar to this: 

![UI%20Elements.png](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/UI_20_Elements_86a7132b23.png)

There is an ID associated with each of these UI components, as shown below.&nbsp; 

![06_Code-ID.jpg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/06_Code_ID_d8281ea9c8.jpg)

&nbsp;
For this project we will be using the following IDs:&nbsp; searchTerm1, pokemonImage1, pokemonName1, pokemonType1, pokemonPower1, pokemonAttack1, searchTerm2, pokemonImage2, pokemonName2, pokemonType2, pokemonPower2,&nbsp; and pokemonAttack2.
Later we will be using these IDs in the MainActivity.java to define the logic for each of these components.
For this app we will need some 3rd party libraries. Open build.gradle(Module: app) and add the following code in the dependencies block and run 'Sync Now ’:
<pre><code class="language-java">// Volley library for sending HTTP requests to an API
compile 'com.android.volley:volley:1.1.0'

// Picasso library to fetch images over internet
compile group: 'com.squareup.picasso', name: 'picasso', version: '2.71828'</code></pre>
Let’s begin with setting up the logic now. Open MainActivity.java and define references for our UI components in onCreate method. 
<pre><code class="language-java">TextView pokemonName1;
ImageView pokemonImage1;
TextView pokemonType1;
TextView pokemonPower1;

TextView pokemonName2;
ImageView pokemonImage2;
TextView pokemonType2;
TextView pokemonPower2;

@Override
protected void onCreate(Bundle savedInstanceState) {
 ImageButton searchButton1 = (ImageButton) findViewById(R.id.searchButton1);
 final EditText searchTerm1 = (EditText) findViewById(R.id.searchTerm1);
 pokemonName1 = (TextView) findViewById(R.id.pokemonName1);
 pokemonImage1 = (ImageView) findViewById(R.id.pokemonImage1);
 pokemonType1 = (TextView) findViewById(R.id.pokemonType1);
 pokemonPower1 = (TextView) findViewById(R.id.pokemonPower1);
 Button pokemonAttack1 = (Button) findViewById(R.id.pokemonAttack1);
 
 ImageButton searchButton2 = (ImageButton) findViewById(R.id.searchButton2);
 final EditText searchTerm2 = (EditText) findViewById(R.id.searchTerm2);
 pokemonName2 = (TextView) findViewById(R.id.pokemonName2);
 pokemonImage2 = (ImageView) findViewById(R.id.pokemonImage2);
 pokemonType2 = (TextView) findViewById(R.id.pokemonType2);
 pokemonPower2 = (TextView) findViewById(R.id.pokemonPower2);
 Button pokemonAttack2 = (Button) findViewById(R.id.pokemonAttack2);
}</code></pre>
Now our java code understands what are we referring to from the UI.
To make our app more dynamic, we will be fetching the following information for our Pokémons from a <a href="https://pokeapi.co/api/v2/pokemon/" rel="noopener" target="_blank">3rd party API</a>. We will be using Volley library for sending a GET request to this API and fetching the data.
Add this code at appropriate places:
<pre><code class="language-java">RequestQueue queue;
String baseURL = "https://pokeapi.co/api/v2/pokemon/";

@Override
 protected void onCreate(Bundle savedInstanceState) {
 queue = Volley.newRequestQueue(getApplicationContext());
 }</code></pre>
To fetch data for a particular Pokémon (For example, Pikachu), we need to send a GET request to the API with the name of the Pokémon appended to it: <a href="https://pokeapi.co/api/v2/pokemon/pikachu" rel=" noopener">https://pokeapi.co/api/v2/pokemon/pikachu</a>. Let’s define two functions fetchDataForPokemon1 and fetchDataForPokemon2. These functions will hit the API using Volley’s syntax to fetch the required data and assign it to the corresponding UI components. 
<pre><code class="language-java">private void fetchDataForPokemon1(String pokemon) {
 JsonObjectRequest stringRequest = new JsonObjectRequest(Request.Method.GET, baseURL + pokemon, null,
 new Response.Listener&lt;JSONObject&gt;() {
 @Override
 public void onResponse(JSONObject response) {
 try {
 pokemonName1.setText(response.getString("name"));
 // Picasso library to download an image from a URL and assign it to a UI component
 Picasso.get().load(response.getJSONObject("sprites").getString("front_default")).into(pokemonImage1);
 pokemonType1.setText(response.getJSONArray("types").getJSONObject(0).getJSONObject("type").getString("name") + " type");
 pokemonPower1.setText(response.getString("base_experience"));
 } catch (JSONException e) {
 e.printStackTrace();
 }
 }
 }, new Response.ErrorListener() {
 @Override
 public void onErrorResponse(VolleyError error) {
 pokemonName1.setText("No such pokemon exists");
 }
 });
 
 // Add the request to the RequestQueue.
 queue.add(stringRequest);
}</code></pre>
Similarly, define fetchDataForPokemon2 for all the UI components corresponding to Pokemon2. We will be calling for these functions when the user enters a search text and hits search button.
Let’s define onClick listeners for our search buttons in onCreate method.
<pre><code class="language-java">searchButton1.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 String pokemon = searchTerm1.getText().toString();
 fetchDataForPokemon1(pokemon);
 }
});</code></pre>
Note, we are fetching the search text of the user and sending it to the function. Similarly define onClick listener for searchButton2 and call fetchDataForPokemon2.
Our Pokémons will now be able to attack each other. We are fetching the power of our Pokémons from the API. Whenever a Pokémon attacks, we will be reducing power of the opponent by 2.
We will now define onClick functions for our attack buttons in the onCreate method.
<pre><code class="language-java">pokemonAttack1.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {
 int newPower = Integer.parseInt(pokemonPower2.getText().toString())-2;
 pokemonPower2.setText(newPower+"");
 }
});</code></pre>
Similarly, define an onClick listener for pokemonAttack2.
Our app is now ready! There are many opportunities for customization here. Some ideas: 
<ul>
<li>Create a game-over pop-up to display when one of the Pokémons runs out of power.</li>
<li>Make it multi-device. You can remove all the duplication of code and UI by introducing a communication or database layer. You can explore various options like <a href="http://developer.android.com/guide/topics/wireless/bluetooth.html" rel="noopener" target="_blank">BluetoothSockets</a>&nbsp;or <a href="https://firebase.google.com/" rel="noopener" target="_blank">Firebase database</a>.</li>
<li>Use <a href="https://pokeapi.co/" rel="noopener" target="_blank">PokeAPI</a> to fetch different types of attacks your Pokémon can perform. This will allow the user to choose a type of attack. Assign different weightage to the varying attack types. 
<ul>
<li>Particular types of Pokémons are more/less effective against a particular type. Define a map for this. Compare the type of Pokémons received from the API and assign a weightage accordingly.</li>
</ul>
</li>
</ul>
Now you have your very own Pokémon battle app. Enjoy battling with your friends!&nbsp;

Following is the use of each of these files in layman's terms - activity_main.xml This file defines how the UI will look. You have an option to drag-and-drop UI components like buttons, images etc.

large_LearnAndroidDev_CDZ%20%281%29-1.jpg

medium_LearnAndroidDev_CDZ%20%281%29-1.jpg

small_LearnAndroidDev_CDZ%20%281%29-1.jpg

thumbnail_LearnAndroidDev_CDZ%20%281%29-1.jpg

Learn Android App Development in 30 mins

Keyframes control the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. - MDN web docs

<h2 style="font-weight: normal;">What Are Keyframes?</h2>
Keyframes are one of two halves responsible for front end animations built with CSS. Simply put, keyframes tell an element&nbsp;what it should look like&nbsp;and&nbsp;when it should look that way. Keyframe’s other half, CSS&nbsp;Animation&nbsp;properties, allow further animation traits to be configured (such as: animation duration, iterations, acceleration, etc.). These two halves working together allow for animations to be built quickly and easily while performing efficiently.
<h2 style="font-weight: normal;">Why Use Keyframes?</h2>
Besides the awesome visuals and simplicity in its use, keyframes have numerous benefits for developers. First and foremost, you do not need to know JavaScript (or another scripting language). Simple animation in JavaScript can often lead to poor performance (if not written well), but keyframes can run well even under moderate system load. The rendering engine can utilize frame skipping and other techniques to keep the performance as smooth as possible. Allowing the browser to control the animation sequence helps optimize performance and efficiency by reducing the update frequency of animations running in non-visible tabs.
<h2 style="font-weight: normal;">How To Use Keyframes?</h2>
You can imagine keyframes as a collection of rules, whereas each rule holds a set of styles and a percentage value. This percentage value translates to a specific point on the animation timeline. It is responsible for applying its set of styles on the element at its given time in the animation sequence.
Keyframes can be initialized by stating the&nbsp;@keyframe&nbsp;keyword followed by a unique name for the keyframe (to be used later in conjunction with an animation property to bind the animation to an element). Then, within the keyframe, you’ll define each step by defining a percentage value followed by an set of CSS property/values. These steps are syntactically similar to CSS selectors and should look familiar if you have experience with them.
<pre><code class="language-css">// Syntax Example
@keyframes &lt;keyframe-name&gt; {
 &lt;percentage-value&gt; {
 &lt;css-property&gt;: &lt;css-value&gt;
 }
}

// Actual Example
@keyframes fade-in {
 0% {
 opacity: 0;
 }

 100% {
 opacity: 1;
 }
}
</code></pre>
The steps you’ll take to successfully utilize keyframes goes as follow:
<ul>
<li>Define the keyframes (create the set of rules with appropriate styles and percentage values).</li>
<li>Bind the keyframe onto the desired element (designate which element you want the styling blueprint applied to).</li>
<li>Apply animation properties (finalize configurations of the animation)</li>
</ul>

![53302279_257032235177518_2599501914789904384_n.jpg](https://codazen-website-cms-uploads.s3.us-west-2.amazonaws.com/53302279_257032235177518_2599501914789904384_n_03332d946d.jpg)

<h2 style="font-weight: normal;">Summary</h2>
Keyframe’s small learning curve and vast configurability make it an effective way to get amazing animations in little to no time. Simply define a keyframe with the desired styles at the appropriate animation intervals (via percentage values), then bind them onto an element and configure the rest of the animation sequence via CSS’ Animation properties.
<h2 style="font-weight: normal;">Helpful Links and Tools</h2>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes" rel="noopener" target="_blank">MDN Document (Keyframes)</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations" rel="noopener" style="color: #128bbc;" target="_blank">MDN Document (Animations)</a>
<a href="https://css-tricks.com/snippets/css/keyframe-animation-syntax/" rel="noopener" style="color: #128bbc;" target="_blank">Basic Keyframe Animation Syntax</a>
<a href="https://caniuse.com/#feat=css-animation" rel="noopener" style="color: #128bbc;" target="_blank">Can I Use</a>
<a href="http://cssanimate.com/" rel="noopener" style="color: #128bbc;" target="_blank">Animation Builder</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties" rel="noopener" style="color: #128bbc;" target="_blank">Animatable CSS Properties</a>

Keyframes are one of two halves responsible for front end animations built with CSS. Simply put, keyframes tell an element what it should look like and when it should look that way.

Blog

WebGL Is Leveling Up E-Commerce With 3D

By Gwenever Pacifico / October 27, 2020

Categories

All

Marketing

Immersive Experiences

Data Science

UX

Business

Culture

Tech

Strategy

Categories

Tech

By Gwenever Pacifico / October 19, 2020

By Pavan Shah / July 24, 2019

By Joe Kim / March 09, 2019

How can we elevate your brand experience?

Orange County

Salt Lake City