Photo Pro Studiois in the Online Photos Industry

Photo Pro Studio

Last July, I started writing a series focused on how the Salesforce platform can be utilized in a manner without a traditional Salesforce client. Here are links to the other articles in the series: Leveraging Salesforce Using Spring Boot Leveraging Salesforce Using a Client Written In Svelte Leveraging Salesforce Using a Client Written In Vue.js Leveraging Salesforce Using Mobile Applications Written (Once) In React Native Leveraging Salesforce Using a Client Written In Angular A graphical representation of the series is shown below: The illustration above shows how various client frameworks can access the Salesforce data without actually utilizing clients provided by the Salesforce ecosystem. Recently, I started a new series to demonstrate the , which harnesses the power of the Salesforce platform within standalone mobile apps. Salesforce Mobile SDK A graphical representation of this new series is shown below: “ ” was the first article in this Mobile SDK series. In this article, I will focus on using Android Studio to produce the same application. Exploring the Salesforce Mobile SDK Using React Native Benefits of the Salesforce Mobile SDK The Salesforce Mobile SDK provides several benefits for software engineers: Allows custom mobile device applications to utilize Salesforce features and functionality Full access to Salesforce functionality (no need to reinvent the wheel) Applications can be distributed using the application store of the native device Processing push notifications from Salesforce The ability to work with Salesforce data in an offline mode If your application landscape utilizes Salesforce for key aspects of business operability, then consider leveraging the Salesforce Mobile SDK. By doing so, you can integrate data maintained by Salesforce into key component locations, allowing you to make strong business decisions. Benefits of Using Android Studio If your client base requires support for Android devices and you wish to use Android Studio for app development, then you’ll find value in the CLI for getting started quickly with Salesforce functionality. forcedroid Key features for teams employing Android Studio include: Uses Java or Kotlin as the base programming language Provides 100% native support for features and functionality on Android devices Allows experienced Android developers to quickly leverage Salesforce Mobile SDK functionality The long-term roadmap of features/functionality—along with the quality of ongoing support—tends to favor Android Studio over React Native Now that we’re ready to dive in, let’s briefly review our use case. Finny’s Foods: An Example Use Case Having a son (Finny) born with special needs introduced a personal desire to gain an understanding and appreciation of the products we use in our daily life. Years before Finny was born, my wife (Nicole) and I lived a healthy lifestyle. However, as Nicole began deep-diving into the ingredients in the foods that made up our daily diet, we received a much-needed wake-up call. Fast-forward to today, our diet consists of few processed foods, no gluten, low sugar, and very little dairy. As much as possible, our protein originates from grass-fed sources, and we always favor organic options. Don’t get me started on GMO. For this series, our Finny’s Foods application provides a simple list of meals that are both acceptable to us and favored by Finny. For now, we will include two simple attributes for each meal: Name of the meal Rating (1 to 5, where a rating of 5 is an absolute favorite for Finny) Over time, I plan to introduce other attributes (such as summary, ingredients, directions, and even a photo), but let’s walk before we run. Getting Started with Android Studio In addition to installing and on my MacBook Pro, I made sure my Android Studio version was up to date. Next, I visited the following URL to make sure everything was set up and configured as expected: git npm Set Up Your Android Development Environment These steps include installing Android Studio, the Android SDKs, and at least one Android emulator (AVD) and the CLI. forcedroid Next, I executed from a terminal session with the following options: forcedroid forcedroid create

Enter your application type (native_kotlin or native, leave empty for native_kotlin): native
Enter your application name: finnys-foods-android
Enter your package name: com.gitlab.johnjvester.finnysfoods.android
Enter your organization name (Acme, Inc.): JVC
Enter output directory for your app (leave empty for the current directory): Once completed, I started Android Studio and imported the new finnys-foods-android project as documented in the following URL: https://developer.salesforce.com/docs/atlas.en-us.noversion.mobile_sdk.meta/mobile_sdk/android_new_project.htm Creating the Meal Object in Salesforce Before I could begin creating a new application in Android, I needed to establish the Meal object in Salesforce. I already had a Developer org that I could use. (You can create a new one .) So, I simply logged in using my email address and password for that org. Next, I navigated to the and the perspective in Salesforce. here Apps | App Manager Setup I created a new Lightning App called Meal: On the remaining setup screens, I selected all the default settings and granted access to all Salesforce User Profiles. Next, I visited the menu option in the Salesforce Settings. Once I located the newly-created Meal item, I used the drop-down component to the object. Objects & Fields | Object Manager Edit I switched from the submenu to the option. I quickly realized I did not need to create a Name property for my Meal object since Salesforce already took care of that for me. I just needed to add the Rating field. Details Fields & Relationships Using the button, I selected the field type and populated Step Two as noted below: New number I used the default values and saved my new field. Now, I can use both the name and rating fields in my Android application. Using the Salesforce client, I populated some source data to develop the application in Android Studio. Below is a summary of the submitted values: Based upon the sample data, Finny always prefers ”Pizza” over “Chicken & Rice”. Adding Meal Functionality in Android Studio With the source object and data configured, I used my IntelliJ IDEA application to open the project for the first time. ./finnys-foods-android For simplicity, the source code for my Android application will exist in the file. Feature developers building business applications should consider adopting design principles for their Android applications. The “ ” article by the team provides some excellent information on this topic. ./android/MainActivity.java Organizing your Source Files CodePath The file was already populated with enough information to connect to Salesforce and make things quite easy to build upon. I first introduced a SOQL static string to house the simple query to access the : MainActivity.java Meal__c object private static final String SOQL = "SELECT Name, Rating__c FROM Meal__c ORDER BY Name ASC"; Instead of pushing a button to see data in the app, I updated the method to call the method to request data from Salesforce: onResume(RestClient client) sendRequest() @Override
public void onResume(RestClient client) {
  this.client = client;

  try {
    sendRequest();
  } catch (UnsupportedEncodingException e) {
    Toast.makeText(MainActivity.this,
	MainActivity.this.getString(R.string.sf__generic_error, 
         e.toString()),	Toast.LENGTH_LONG).show();
  }

  // Show everything
  findViewById(R.id.root).setVisibility(View.VISIBLE);
} I updated the method to not only retrieve data from Salesforce but to provide a visual representation of the rating for each item: sendRequest() private void sendRequest() throws UnsupportedEncodingException {
  RestRequest restRequest = RestRequest.getRequestForQuery(
                              ApiVersionStrings.getVersionNumber(this), SOQL);

  client.sendAsync(restRequest, new AsyncRequestCallback() {
    @Override
    public void onSuccess(RestRequest request, final RestResponse result) {
      result.consumeQuietly(); // consume before going back to main thread
      runOnUiThread(() -> {
        try {
          listAdapter.clear();
          JSONArray records = result.asJSONObject().getJSONArray("records");
          for (int i = 0; i < records.length(); i++) {
            listAdapter.add(records.getJSONObject(i).getString("Name") + " "
              + getRating(records.getJSONObject(i).getInt("Rating__c")));
          }
        } catch (Exception e) {
          onError(e);
        }
      });
    }
			
    @Override
    public void onError(final Exception exception) {
      runOnUiThread(() -> Toast.makeText(MainActivity.this,
                           MainActivity.this.getString(
                           R.string.sf__generic_error, exception.toString()),
                           Toast.LENGTH_LONG).show());
    }

    private String getRating(int rating) {
      switch (rating) {
        case 5:
          return "* * * * *";
        case 4:
          return "* * * *";
        case 3:
          return "* * *";
        case 2:
          return "* *";
        default:
          return "*";
      }
    }
  });
} For simplicity, I decided to show a five-star rating item using the asterisk symbol. So a five-star item will appear as shown below: Pizza * * * * * I added an issue to my GitLab repository to replace the asterisks with star-based icons—like those provided by Font Awesome—so that empty stars will display when the rating is less than a five. Introducing a Custom Text View Instead of relying on the default design of the component, I decided to create my own text view to display the data within the live view containing the list of meals in Salesforce. ListView Inside the folder, I created a new XML file, called and included the following information: ./app/res/layout custom_text_vew.xml <?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:fontFamily="sans-serif"
    android:paddingTop="10dip"
    android:paddingBottom="10dip"
    android:paddingLeft="1dip"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textSize="9pt" ></TextView> I was able to set the font and placement information to match my expectations. With the XML in place, all I needed to do was reference the custom text view with the following update: listAdapter = new ArrayAdapter<>(this, R.layout.custom_text_view, new ArrayList<>()); Some Final Clean-Up and Styling Since I wanted to match the React Native version of my application, I made the following updates to the file: ./app/res/layout/header.xml <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="100dp"
	android:layout_marginTop="5pt"
	android:layout_marginBottom="0pt"
	android:padding="3dp" >

	<TextView
		android:id="@+id/text_title"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_centerVertical="true"
		android:text="@string/app_name"
		android:textSize="12pt"
		android:fontFamily="sans-serif"
		android:textFontWeight="600"
		android:layout_marginLeft="3dp"
		android:paddingBottom="0pt"
		android:paddingLeft="7pt"
	></TextView>

	<View
		android:layout_below="@id/text_title"
		android:layout_width="match_parent"
		android:layout_height="2dp"
		android:layout_marginTop="5pt"
		android:background="@android:color/darker_gray" ></View>

</RelativeLayout> Finally, I reviewed the file and removed all of the unused methods as a result of updating the header.xml file. Android Studio, like IntelliJ IDEA, is great at changing the color of unused method names, which can be removed without impacting the run-time functionality of the application. ./finnysfoods/android/MainActivity.java Finny’s Foods in Action Using Android Studio, I used the Run menu option and selected the option, which also maps to the shortcut. Run ‘app’ Shift-F10 First-time use will automatically redirect to a Salesforce login screen, where I used the same email address and password to access my Developer org. After signing in, the Finny’s Foods application appeared, including the five-star rating value for each item. In a matter of minutes, we were able to create an Android application using Android Studio and the Salesforce Mobile SDK. Conclusion In this article, I introduced a custom mobile application that deploys natively from the Android store and uses source code written in Java and basic XML. Along the way, we gained a basic understanding of how Android-based applications are structured. Starting in 2021, I have been trying to live by the following mission statement, which I feel can apply to any IT professional: “Focus your time on delivering features/functionality which extends the value of your intellectual property. Leverage frameworks, products, and services for everything else.” - J. Vester The Salesforce Mobile SDK certainly adheres to my personal mission statement, which will benefit any feature team that requires Salesforce functionality as part of custom mobile applications running on Android devices. Software engineers in this realm of development should certainly consider adding the Salesforce Mobile SDK as a project dependency. If you wish to see the full source code for this article, simply navigate to the following project on GitLab: https://gitlab.com/johnjvester/finnys-foods-android In the final article of the series, I plan to use the Salesforce Mobile SDK with xCode to create a native application for iOS devices. Have a really great day! Also Published Here

Using Android Studio to Explore the Salesforce Mobile SDK

An Android Developer’s Roadmap to React Native - Part 4 Photo by on Edgar Chaparro Unsplash If you come from native development background, you might be aware of a feature that both Android Studio and XCode provide to create different applications from the same code. These are known as flavors in Android Studio and targets in XCode. The idea is to create different packages with same core functionality but with minor difference in features. This can include different color schemes, branding or some functionalities unique to a package. A common example is creating a free and paid version of a same application, wherein the paid version has same core functionality as the free version with some added functionalities and features. Since the major functionality is the same there is no need to create different projects, but handle flavor/target specific changes at run-time. I hope you get the idea. If not follow these links to learn more. _Get started using Android Flavors to easily create variations in your app_proandroiddev.com Advanced Android Flavors Part 1 — Building White Label Apps on Android _How to create multiple applications that differentiate and share parts of the source code_medium.com Xcode “Targets” with multiple build configurations For simplicity, I will be using the Android term _flavors_ to represent different product builds in React Native. Now, lets move to the problem at hand The project I was working on relies heavily on build flavors, and React Native does not have inbuilt functionality to handle the same. Sure, you can create different flavors from but that only decides the build process, not the actual run-time changes that need to be made. So here is what I came up with, to bridge this gap between native and React Native. react-native-cli Setup Step 1: Configuration ( Native ) The first step is to setup product flavors in Android Studio and build targets in XCode. For the purpose of the tutorial, our application will be called . This application has two flavors: and . You can read the above mentioned articles to help you setup the configuration on Android Studio and Xcode. NoteTaker lite pro Step 2: Native Modules Once we have setup the flavors on the native side, we need a way to pass the product flavor identifier from native to react-native at run time. This, definitely requires us to create native modules or bridge methods for both Android and iOS. For simplicity, we will keep our flavor identifiers as strings. In Android, the flavor in stored in the and for iOS you can use from BuildConfig TargetName info.plist Take a look at the following documentation if you do not know what native modules are in React Native. _Sometimes an app needs access to a platform API that React Native doesn't have a corresponding module for yet. Maybe…_facebook.github.io Native Modules · React Native Step 3: Flavor.js Next, we create a JavaScript file that serves as a utility class for flavors in React Native. This file exposes a method to get the current product flavor from native and a variable that stores this information once it is fetched from native. Step 4: Colors.js Since our and versions have different color schemes, we create a file, that contains the flavor specific colors. Also this file exports a method to get the relevant colors based on the product flavor. lite pro Colors.js Our setup is now almost complete. We just need to call the build flavor method at the start of our react native application. But there is a catch. Since the build flavor is asynchronous, we need to ensure that the first component is mounted only when the flavor has been fetched from native. For this, we pass null in render method of our component initially, and on receiving callback from method we re-render the component by using buildFlavor setState Implementation Implementing flavor specific features Now that our flavor has been fetched from native and have access to our product flavor in any component, writing flavor specific code is a piece of cake. In fact, we have already seen such implementation in method. Consider a feature of adding images to notes which is only available in the flavor getThemeColors pro Implementing color schemes When defining styles for a component you can use two approaches:1. Directly apply styles using the styles prop2. Use StyleSheets The first method poses no problems since the styles are evaluated and applied at run time when that particular component is mounted. Thus the method is evaluated properly and we get the required colors. getThemeColors However, when using StyleSheets, the styles are evaluated when the file is loaded into the JavaScript run time environment. This means that even if the component is not mounted its styles are already evaluated. Thus, in our case, the delayed render of the component in after the flavor is fetched, fails to serve its purpose since even though the component is not mounted, its styles have already been evaluated. Thus, returns the wrong set of colors. To overcome this, we need to create StyleSheets for the component only when it is going to be mounted. We achieve this by creating StyleSheet in lifecycle method. App.js getThemeColors componentWillMount So now we have product flavor specific features and color schemes. The only drawback with this setup is that the styles and color schemes are now generated at run time rather than at compile time. Not that it has much of an impact on performance, but still, is a step behind. If you have any ideas to improve this setup, please feel free to share them with me either here in responses or via e-mail. This is the fourth part in the series “An Android Developer’s Roadmap to React Native”. You can read previous articles in the series by following these links: Part 1: Part 2: Part 3: https://medium.com/@rohanx96/an-android-developers-roadmap-to-react-native-part-1-5ec20cf93757 https://medium.com/@rohanx96/set-up-your-own-react-native-ide-f7d52c90da43 https://blog.usejournal.com/redux-an-intro-and-beyond-92d694bc314f

Setting up Android like product flavors in React Native

File this under the "I wasn't sure if it would work and it did" category. Recently, a friend on Facebook wondered if there was some way to take a collection of photos and figure out which were 'real' photos versus memes. I thought it could possibly be a good exercise for GenAI and decided to take a shot at it. As usual, I opened up Google's and did a few initial tests: AI Studio I then simply removed that image and pasted more info to test. From what I could see, it worked well enough. I then took the source code from AI Studio and began working. The Code First, I grabbed some pictures from my collection, eleven of them, and tried to get a few photos, memes, and screenshots. To make it easier for me, after downloading them I renamed them so it would be quicker to see if it worked right. As I mentioned above, AI Studio gave me the code, but I modified it slightly so I could pass a directory of images: import fs from 'fs/promises';
import 'dotenv/config';

import { GoogleGenerativeAI, HarmCategory, HarmBlockThreshold } from '@google/generative-ai';

const MODEL_NAME = "gemini-pro-vision";
const API_KEY = process.env.GOOGLE_AI_KEY;


async function detectPhoto(path) {
  const genAI = new GoogleGenerativeAI(API_KEY);
  const model = genAI.getGenerativeModel({ model: MODEL_NAME });

  const generationConfig = {
    temperature: 0.4,
    topK: 32,
    topP: 1,
    maxOutputTokens: 4096,
  };

  const safetySettings = [
    {
      category: HarmCategory.HARM_CATEGORY_HARASSMENT,
      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
    },
    {
      category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
    },
    {
      category: HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT,
      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
    },
    {
      category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
      threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
    },
  ];

  const parts = [
    {text: "Look at the following photo and tell me if it's a photo, a screenshot, or a meme. Answer with just one word.\n"},
    {
      inlineData: {
        mimeType: "image/jpeg",
        data: Buffer.from(await fs.readFile(path)).toString("base64")
      }
    },
    {text: "\n\n"},
  ];

  const result = await model.generateContent({
    contents: [{ role: "user", parts }],
    generationConfig,
    safetySettings,
  });

  const response = result.response;
  return response.text();
}

const root = './source_for_detector/';
let files = await fs.readdir(root);
for(const file of files) {
	console.log(`Check to see if ${file} is a photo, meme, or screenshot...`);
	let result = await detectPhoto(root + file);
	console.log(result);
} It worked perfectly! If you want a copy of the source, you can grab it here: https://github.com/cfjedimaster/ai-testingzone/tree/main/detect_meme_ss The Photos Ok, technically you can just head over to the GitHub repo to see these, but here are the source images. First, the 'regular' photos: Next, the screenshots: And finally, the memes. Enjoy.

How to Use GenAI to Classify an Image as a Photo, Screenshot, or Meme

Modern web must adapt to various screen sizes. Mobile is everywhere. Few web apps have the luxury of being desktop-only! But it’s hard to make such responsive designs with traditional tools like Photoshop or Sketch. React Studio has a powerful auto-layout system with instant device previews for creating flexible, responsive user interfaces. This tutorial shows you all you need to know. It’s different from static design… But easy, once you get the hang of it! Welcome! This tutorial will walk you through some of the most essential layout features in , the web app design tool created by . You’ll learn about keylines, overrides, scroll flow, content “below the fold”, typographic styles, and many other interesting concepts that apply to mobile-first web design. React Studio Neonto The end result is a one-screen site that looks like this: (click to view) Layout Demo When you open that link, make sure to resize your browser so you can see how the design behaves at different sizes. If you want to take a look at the completed tutorial project, you can find it in React Studio’s project templates (File menu → “New from Template”). The focus is on layout features, so there’s a great deal about React Studio that is not covered here. For example, we won’t go into navigation, components, advanced interactions, data linking, scripting, or the Sketch importer… But we’re constantly working on more content about those topics and more. So why not or to make sure you don’t miss it? follow us here on Medium on Twitter I must mention that we have a rather awesome Sketch plugin! You can make a static baseline design in Sketch, then turn it into a real layout in React Studio and export into high-quality React code: Check out this video Overview The layout demo screen has only a handful of elements, but they have a couple of interesting behaviors: The header image fills the width of small screens, but leaves a margin on larger screens; The rest of the content is within a column whose margins adapt to the screen size; The text input fields (“name” and “email”) have placeholder texts and are styled according to Material Design guidelines; The email field performs simple validation. If you enter some text that’s not an email address, it will highlight in red. Let’s build it up piece by piece, starting from the top. In React Studio, start a new empty project using the “Mobile-First Web App” setup. You’ll see a project map that contains a single screen named “Start”: Double-click on the screen block to open it for editing. Header image Everybody knows that cool web designs show people holding smartphones, so we’re using such a picture here as well. You can download the image file from (JPG, 916kB). (By the way, this rather nice photo was taken by Antti Sihlman, Neonto’s co-founder and marketing lead! Maybe he should have been a photographer…? 😋) this link In React Studio, click on the button in the toolbar, and find the downloaded picture. When prompted for how to place it, choose “Draw a Box”. Then draw an area within the canvas. (The area you draw is not actually important because we’ll change the alignments next anyway.) Import Image You should now see the following: Let’s implement the layout we want. Click on the new image to select it, then open the tab in the Inspector (on the right). Layout The screenshot to the left shows the settings. Physical size, layout flow, alignments — these are all the core pieces we can work with to make layouts! We’ll be making changes to all these settings. Most of them we can change visually by simply dragging in the canvas (for example, to resize the element, just grab its corner and drag). But it’s useful to know where these precise measurements can be found when you need them. Let’s start with “Align Edges”. We would like this image to be fixed on three sides: top, left and right. So, click on the checkbox next to “Right” to enable it. Then enter a zero for both the “Top” and “Left” offset values. You should now see this: Hmm, something is still missing. As you can see in the previews, the height of the image is the same on all device sizes. This makes the content get cropped. For something like a background image, that’s usually what you want. But in this case we’d like to show the full image. There are actually three different ways to do that, depending on what you require for your design: If you want to show the full image within the available layout box, you can just tell React Studio not to crop the image. This setting can be found in the tab. Disable cropping. Element If you feel that the image size needs to be bigger on one of the screens, you can simply make an override for that specific size. (To do that, double-click on the device preview and then resize the image. It will create an override on the image’s size property.) Make a device-specific override. Sometimes you know that you want to show the entire image, and have the layout adjust accordingly. Set image to maintain its content aspect ratio. For this demo, we’ll choose the last option. In the tab, click on the “Always maintain content aspect ratio” checkbox. You’ll see the device previews update to show the full image. Layout Layout overrides for header image’s margins Ok, now we have the image showing in full. But it’s awfully big on the largest device size. How about adding those margins that we have in the ? finished version Double-click on the largest screen size in Device Previews (If this view is hidden, go to View>Show Device Previews). This brings you into . It’s indicated by a dark green background color in the editing area. override mode Select the image and open the tab. See those “Override” buttons next to the Left and Right offset fields? That’s what we’ll use next. Layout Click on Left alignment’s “Override” button and choose “Set override”. The button is now pushed down, to indicate that there’s an override for this setting at this screen size. If you click on the button again, you’ll find options to clear the override, and also a list of all formats with active overrides: Do the same for the Right alignment. Now we have to overrides, but the values are still at zero. To change the margins, you can either visually drag the element’s edge in the editing area, or enter a specific number value in the offset field. (By the way, you can also enter a value by clicking the number field and dragging with the mouse to the left or right — try it!) For the published demo, the offset values were set at +50 on left, -50 on right: Before doing any more edits, return to the : double-click on the first screen size in Device Previews. (If we don’t return to the base format, we might accidentally create overrides later on.) Base format The base format is actually a project-wide setting: if you want to change it, click on the block in the Project Map… But for most mobile-friendly web apps, we recommend keeping the base format as the smallest device size. (That’s what “mobile-first” design is all about: think of the most constrained user experience first, then expand.) App Settings Scrollable content and elements Next we need to create the content column — but first, let’s fix something about the layout. When we imported the image, it was placed in the . You can see this at the bottom of the React Studio screen, in the Elements list. Elements in this group are fixed to the screen above other content. It’s great for something like a navigation footer, but in this case, we’d like the header image to scroll together with the content. Foreground group To make it scrollable, we’ll just place it into the . In the Elements list, click on the image element’s name (on the row below the “Foreground” group header), and drag it under the “Scroll Flow” header. That’s it. The image is now part of the scrollable content. Scroll Flow group Next, let’s add in the content elements. We’ll just throw the pieces in first and fix the layout next! So don’t worry that things won’t look right for a moment. To create new elements, drag-and-drop from the to the right of the editing area. When you drop an element into the screen, it goes into the Scroll Flow group by default. (If you want it to go in Foreground instead, hold down the Alt key while dragging.) element palette From the palette, grab the following elements and toss them into the screen: Expanding text block Transparent placeholder image (the round “N” logo) Text field Another text field Another expanding text block You’ll now see the following: Ok, we need to fix the content. For the two text blocks, enter whatever text (double-click the text blocks to edit them). The used some “Lorem ipsum” placeholder text — you can just copy from there. published demo For the first text block, set it to the Headline style. Select the text element, then in the tab, under , choose the style. Element Text Settings Then let’s style the text fields a little. Select the first field and enter a placeholder text: “Your name” (in the tab). Also enable the checkbox “Use UI framework style”. Element Select the second text field and choose these settings: Placeholder text: “Your email” Field type: “Email address” “Use UI framework style” checkbox enabled By setting the field type to email and enabling the UI framework style, we get the nice validation behavior where the field will get a red highlight if the input isn’t a valid email. (The UI framework by default is , but we’ll soon offer plugins that let you swap this out for something else!) MUI You can also select all the elements (drag a selection in the editing area) and move them to the right, to make the layout look a bit nicer. Here’s what you should now have: Notice the overflow at the bottom of the screen? The purple line is called . It shows you where the initially visible screen area ends. Content that is “below the fold” needs to be scrolled by the user to become visible. (This is often an important concern in design, for example if you have a “call to action” kind of button that you want to be immediately visible). the fold Keylines The layout is still a mess on other device sizes. Let’s put these elements inside a responsive column. For that, we’ll use . keylines Click on the “Add Keyline” button in the toolbar. You’ll see a vertical keyline appear in the editing area. Grab the keyline by the little diamond indicator at its top, and drag it to the right. You’ll see the keyline’s position update in the inspector. Rename this keyline as simply “Left”, and place it at something like 7.5% from the left: Create another keyline. Rename it as “Right”, and place it at a position of -7.5% from the right edge. (You can enter these settings manually in the keyline inspector shown above.) Now you have two keylines: Next, let’s align the content to these keylines. Select all the elements and click on the “Align…” command button in the bottom-right corner of the editing area, then choose “Left edge to keyline” and “Left”: Next align the two text elements and the two text fields (but not the image with the N logo — that one will stay aligned to left only!). In the tab, enable Right alignment and choose the Right keyline: Layout This is what we have now: Let’s ignore the “N” logo for a moment. Instead, look at the largest screen size in Device Previews. See how the text content hangs to the left of the header image? That doesn’t look good. We would instead want the text to be indented to the right. Also, we’d like to have more margin between the image and text. To fix this, let’s create overrides. Double-click on the largest screen size from Device Previews. Then just drag the keylines towards the center. Also, select the first text element and move it down a little. You’ll see that overrides for that specific screen were created: Remember to return to the base format by double clicking on after you’re done editing overrides. Base format More about scroll flow (and how not to push it) Finally, we’ll fix the placement of the “N” logo and the text fields. In the Elements list, click on the arrow to the left of the “roundimage” element’s name. It will change in to a minus sign: This means that the element doesn’t anymore. You can think of this setting as: contribute to scroll flow “Does this element push the scroll flow forward or not?” In the editing area, you can see that the text fields have jumped on top of the “N” logo. We’ll fix that with an offset. Select both text fields and give them a reasonable Left offset, for example 45 points. Now they’re neatly to the right of the logo: The “contributes to flow” setting is really useful for this kind of simple overlap between elements within a layout. But if you need more complicated multi-column layout, you should use the element. It gives you a lot more features, including responsiveness (e.g. you can have the content display as one stacked column on narrow screens, but as two side-by-side columns on wide screens). Columns Fonts (and how they’re embedded in your web app) So far we haven’t touched the styling of the text elements at all, apart from changing one of them to use the Headline style. Let’s do something about the typography. We could always set fonts on the elements individually, but it’s a better idea to use . These are the typographic foundation of your project. You can find them in the block — click on it in the Project Map, then select the tab in the inspector. app-wide styles App Settings App Styles The styles in use in our project are “Base text” and “Headline”. We can see that both are currently set to use the system font: Click on the “Other font” setting. A menu button for selecting the font appears. Click on the button and choose the font named . Then, select the Headline style (the bold text just above the font settings) and set the same font there. Source Sans Pro Both styles should now be set to use Source Sans Pro. The preview will now reflect this font choice: The Source Sans Pro font is actually included in React Studio. It’s a free font created by Adobe, and it looks great even on small screens making it an excellent choice for mobile web user experience. For that reason, we’ve bundled the font in the default React Studio installation. (Another font that we include is Open Sans, which is similarly free to use and highly legible on displays.) You can also use any other fonts installed on your computer. When you export your project, React Studio will copy the font files into the exported React/Webpack project’s assets. In other words, you don’t need to do anything to enable high-quality fonts on your site! However, a few caveats: Commercial fonts may have a license that prohibits embedding the font files on a website. If you’re unsure, contact the font vendor. Some of the standard fonts on the Mac are in a format that can’t be loaded by the web browser, and therefore they can’t be embedded. You’ll see a warning when exporting your project if that is the case. If you look again at the final , you’ll see one last difference in typography. The long block of text is using a light italic font, and it’s in a medium gray color (rather than black). You can do these changes by selecting the text element and looking at the tab in the inspector. published demo Element A button with interaction The final piece of this demo is the button in the bottom-right corner. If you click on it in the , you’ll see an alert message. That’s a simple example of an interaction. published demo To create the button, drag an “Icon button” from the element palette into the editing area. Then align the new button to the Right keyline: open the tab and click on the Right alignment checkbox to enable it. When prompted about the alignment, answer “Keep size and reposition” — that will clear the left alignment setting. Layout The default content of the icon button is a three-line “hamburger” menu icon, but it’s easy to change. React Studio includes hundreds of commonly used icons as templates. Or, if you don’t like the defaults, you can import an SVG vector image to use as the icon content. Open the tab and look under . Click on the “Template” menu button: Element Button icon The icon we used for the demo was a template called “Share #6”, but you can of course use anything you like. Open the tab. Click the checkbox next to “When user taps”, and then choose the “Script” interaction type: Interact This means that we want to run some JavaScript code when this button is clicked. (It’s possible to make a chain of multiple interactions in response to a single user event — look at the plus and minus buttons in the top-right corner.) Click on “Edit script”. This opens the Script Editor window. Enter the following text: alert(“Hello!”) Then click “Save”. The button will now display an alert box when it’s clicked. Previewing and publishing Let’s take a look at this completed design in the web browser! There are three ways to view your app, all accessible with one click in the toolbar: This runs a so-called development web server on your local computer, and opens your app in a web browser. Open in Web Browser. This command exports your project as a React+Web project, runs a production build on it (e.g. minifies the JavaScript), and then creates a hidden web link for your content on Neonto’s server. This way, you get a real web URL for your preview, so you can easily view it on your own device. The link can also be shared. It’s non-guessable but public, so only people with whom you’ve shared the link can access it. Mobile Preview. This command works similarly as Mobile Preview, but it lets you choose an URL path for your site. For example, the in this tutorial was published from React Studio using this feature, with the path “layoutdemo”. Once you’ve published to a path, the URL can’t be used by anyone else, so you effectively own it! Publish to Web. published demo There is also a fourth way, the button in the toolbar. This will give you a complete React+Webpack project that follows the latest best practices. There’s no “lock-in” to any Neonto-specific features here. If you want to hand over the project to a web developer for further development, nothing stops you from doing just that! And that’s the real power of React Studio: clean, high-quality React code is always one click away. Export What’s next Thanks for reading this far! You’re a true champ. Hopefully you feel enlightened about the awesomeness of responsive web design with React Studio’s toolset. (If not, let us know what went wrong?) We’re building up a content base of learning material. Check out the other posts on . Then head over to the for links to video tutorials (YouTube), etc. our Medium blog React Studio site If you have any questions, or suggestions on what material you’d like to see, don’t hesitate to get in touch! You can contact us at or using the built-in chat inside the React Studio app (look in the Help menu). reactstudio@neonto.com

Designing responsive web layouts in React Studio

Steve Jobs introduced the iPad in 2010 as a consumption device, a tablet to browse the web, watch a movie, read a book, you get the idea. Certain productivity tasks, like writing documents, painting, or composing music, also adapted well to the touch-only interface and over time, the iPad became a versatile tech product. For years, Apple has defended the idea that a single customer can benefit from owning both an iPad and a MacBook, using them in different scenarios but bound by the same ecosystem. On one hand, an iPad was more suitable for lightweight scenarios, for those who did not want to be tied to any heavy peripherals to get things done. On the other hand, a MacBook was more convenient for sit-down scenarios with a need for processing power, the comfort of a bigger screen, the precision of a keyboard and mouse, etc. This product distinction started blurring with the introduction of bigger iPads, accessories like the Apple Pencil or the Magic Keyboard, and more desktop-like features on iPadOS. An example of this was adding mouse or trackpad support in iPadOS 13. Taking into account all of these changes, there seems to be a secret plan from Apple to transform the iPad into something new, with features that were previously reserved for a laptop/desktop experience. One more nail in the coffin was Apple’s where it was announced that the new iPad Pro will house the new M1 chip. This new desktop-class processor allows Apple to compete with the likes of Intel or AMD. More importantly, Apple now owns the entire hardware manufacturing pipeline, reducing costs and eliminating dependencies on vendors. M1 already provides significant performance improvements to the latest line-up of Macs, and now iPads too. The new iPad Pro will also include up to 16GB of RAM, which is surprising given that these are the same tech specs as the newest MacBook Pro. recent Spring 2021 event Many have started wondering, what is Apple planning to do with an iPad Pro that contains the same hardware as a MacBook Pro? Rumors and leaks have not provided much insight into what’s being cooked in Cupertino, so let’s explore the iPad’s intriguing future. Imagine that each of the following possible scenarios takes place in a different universe, that they are mutually exclusive futures. Let’s travel through the iPad’s multiverse and see what can happen. 1. iPad will support dual-booting into iPadOS or macOS (Spoiler: a terrible idea!) Macs have plenty of history with dual-boot solutions, as Boot Camp lovers will point out. Providing a way to natively boot an iPad into macOS would delight a lot of power users and would likely be the easiest solution from Apple’s engineering perspective. Apple has the dual-boot expertise and now the required hardware too, so this solution would have a low cost. iPad fans out there have been asking for this dual-boot option since iPadOS was introduced, but they talk about it as if a restart of the iPad was not required to switch between the two operating systems. Unfortunately, a device restart is required, making it too disruptive from a user experience perspective. A way to mitigate these negative side effects would be to ensure that both iPadOS and macOS shared the same installed iOS/iPadOS apps (now that these apps can run on macOS), the same background image, the same file system, etc. But it doesn’t fix the flow-breaking impact of a required reboot. This means that if you are browsing or shopping on iPadOS, and suddenly you want to open a native macOS app, you are forced to close/save your progress and restart the whole device just to get to macOS. Yuck. Even if that doesn’t bother you, don’t get your hopes up, since this is probably the most unlikely future among all the possibilities. The macOS interface on the iPad, at least as we know it today, would be highly frustrating for the average user (imagine trying to accurately tap with your finger the tiny red button that closes a window). If those weren’t enough reasons why this future is a terrible idea, consider how it would contradict the design principles that Steve Jobs championed since the introduction of the touch-first iOS. Asking customers to use their fingers to interact with a graphical interface that was designed for use with a mouse/trackpad would be the most anti-Apple future I can think of. 2. iPadOS will support macOS apps (Spoiler: it gets ugly) iOS apps are now available on the macOS App Store on Macs with the M1 chip. These apps don’t require any modification from the developer side, so there is no porting process at all. The introduction of Rosetta 2 as a component of macOS Big Sur also allows Intel applications to run on Apple Silicon-based Macs. This ensures that Macs shipped with an M1 chip have access to the myriad of both native macOS and iOS apps available in the world. What if Apple launched a similar Rosetta component on iPadOS? Sure, Apple would have to solve how to beautifully render these classic apps on an iPad, but I can imagine a solution where macOS apps launched on iPadOS with the exact same frame-less behavior of any other native iOS app, including the restrictive app-docking options available today for multitasking. This future doesn’t provide a very promising solution from a UI design perspective either. Many—if not most— classic macOS apps are not touch-friendly, so even if they could run on an iPad, the user experience would be subpar. If this ever was implemented, the first user study would probably shut it down before it was released. How would grandma understand why some apps on her iPad are so difficult to use and ugly compared to others? Forget about it. 3. Apple Silicon will usher in a new ‘Universal Apple Platform’ plan (Spoiler: it’s complicated) Apple taking a page from Microsoft’s runbook would be a fun and interesting future. Microsoft’s Universal Windows Platform (UWP) enabled developers to code apps that would work seamlessly on Windows Phone, Windows, Xbox, and Surface Hubs. Apple had this synergy between iPhone and iPad from the beginning, but a Universal Apple Platform (UAP) could truly allow developers to create one single app that runs on all products with Apple Silicon. This model could also make it easy for developers to migrate their classic desktop Mac apps to UAP apps. One shared app implementation would give developers effortless availability on iPhone, iPad, Mac, Apple TV, and even Apple Watch. And what better way of showcasing this plan than making a UAP version of Xcode and enabling developers to create apps using an iPad. This would make for a great presentation at the next WWDC, no doubt. Nonetheless, some heavy apps like Final Cut Pro, Photoshop, or AutoCAD are good examples of a challenge that is difficult to address with this “universal dream”. If the functionality set of an app was drastically different depending on the device where it ran, it could cause too much friction for developers to code it as a UAP app. Developers would need a clear incentive to use UAP versus keeping separate implementations. This can be mitigated with a clear developer story and an easy-to-use SDK, a set of developer tools that simplifies APIs, and makes it easy to tailor an app according to the available hardware (e.g. screen size, LiDAR, or accelerometer availability, etc.). There is some prior art here because the iPhone/iPad screen sizes have changed over time, leading to a versatile iOS SDK that today powers multiple generations of devices. Existing solutions like Mac Catalyst, which helps developers build a native Mac app from the same codebase as their iPadOS app, are proof that Apple knows how to do this. They just need to pack it all together in a single developer platform focused on Apple Silicon interoperability. Of course, the introduction of the ever-rumored Apple Glass—Apple’s unannounced augmented reality glasses— could make this plan more plausible than ever. The UAP plan would be of great help for quickly getting developer traction on a product that would need to solve a broad range of use cases in order to succeed. I consider this future actually possible, but given the success of Apple’s current developer story, I’m not convinced this is what Tim Cook is actually planning. As opposed to Microsoft, Apple doesn’t need UAP to get developers interested in developing apps for their products; their ecosystem is already thriving, so the return of investment for Apple is not clear in this possible but costly future. 4. iPadOS will continue getting more desktop-like features (Spoiler: too boring) This possible future is the most probable, and unfortunately the most boring as well. It simply requires Apple to continue doing the same as the past few years, beefing up iPadOS with features that help improve performance and productivity, transforming the iPad into an easy-to-use and powerful machine. Recent confirm that much. The next iPadOS update is expected to be announced on June 7; it will include a revamped notification system with more customization options, a redesigned Home Screen that allows users to place widgets anywhere on the app grid, and further privacy-related improvements. Nothing revolutionary, and yet an exciting set of new features for those of us who look at Android’s customization capabilities with envy. leaks on iPadOS 15 If this future indeed becomes a reality, it would confirm that Apple’s intention behind the impressive tech specs on the new iPad Pro is to further differentiate it from the iPad Air through high-end performance—especially because the design is the same on both products. Video rendering, photo editing, video games, 3D modeling, all those tasks are typically done on a desktop computer, not a tablet, but the new iPad Pro can change that perception. As boring and potentially plausible as this option may sound, it’s worth highlighting that the decision to further push the iPad Pro’s capabilities to be closer to the Macbook brings some stress to the future customer who is simply trying to determine what Apple device is better for their use case. They may find themselves debating the razor-thin differences between the multiple devices available in a highly diversified and compressed portfolio. 5. iPadOS and macOS will merge into a new touch-friendly OS (Spoiler: it’s magical!) Marvel Studios built its Marvel Cinematic Universe by making individual movies for each superhero first, letting the audience get familiarized with each character, and finally putting them together in an epic event like ‘The Avengers’. It’s exciting to think of an improbable future where Apple has been playing the Marvel card for the last 10 years. First introducing the iPad with a zoomed-in version of iOS in 2010, letting it share updates with iPhone for 9 years, cohabitating with macOS all along. Then in 2019, Apple announced a slightly more independent fork as iPadOS and started incorporating desktop-like features. Meanwhile, macOS started getting more tablet-like features. What a glorious culmination to the saga would be if Apple introduced a new OS that merged these two beloved characters. If this mythical ever happened, Apple would be following Microsoft’s troubled steps in trying to produce an operating system that dynamically adapts its interface depending on whether or not an external mouse and keyboard are detected. Fortunately, macOS Big Sur took one more step towards a touch-friendly interface. appleOS An out-of-the-box iPad Pro would have the touch-first interface that we know and love. When connected to a keyboard and mouse, the interface would adapt automatically, perhaps allowing apps to have floating windows that could overlap, pretty much like macOS does today. Certain UI paradigms, like invoking the Notification Center or Control Center, would have a cohesive experience across devices. This futuristic would include all the features that macOS has today, including support for multiple screens, user accounts, and other useful settings that iPadOS desperately needs. The interface would simply be a hybrid between iPadOS and macOS, adapted to be touch-friendly. appleOS To prevent a similar issue to Microsoft’s mishap with Windows 8 and its lack of support for classic Win32 apps, Apple could limit classic Mac apps to work in “desktop mode” only. A standalone iPad Pro would only allow users to launch apps from the App Store, but when connecting it to a Magic Keyboard, the full power of classic desktop apps would be unleashed. MacBooks would still exist, in a thinner form factor, for those who need a more robust keyboard, extra ports, longer battery life, etc. In fact, MacBooks with touch screens would finally be a possibility, eager to ignite the anger of any Microsoft Surface fan out there. The cherry on the cake for this alternate future is that an iPhone 15—which of course would use an M2 chip— would be a top-notch mobile smartphone or gaming console while on the go, but when docked to an adapter, it would become a desktop powerhouse. appleOS Conclusion The 2021 WWDC will start with a keynote on June 7, and I’m sure it will provide new clues for this mysterious puzzle. Until then, which possible future is your favorite? Feel free to share your own predictions in the comments. Header image via YouTube channel: ‘A Better Computer’

PHOTO PRO STUDIO

photoprostudio.fr

-- employees

Since n.d.

COMPANY RANKING

PHOTO PRO STUDIO

EVERGREEN INDEX #7622

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

Photo Pro Studio WIKI

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

PHOTO PRO STUDIO

photoprostudio.fr

-- employees

Since n.d.

COMPANY RANKING

PHOTO PRO STUDIO

EVERGREEN INDEX #7622

RELATED COMPANIESRANK

STORIES ABOUT PHOTO PRO STUDIO

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

Photo Pro Studio WIKI

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