Screenshot of location analytics in Netlify.
Strategy

Comparing Data in Google and Netlify Analytics


tldr; the datasets weren’t even close for me.

In my (limited and anecdotal) experience, Google’s and Netlify’s analytics offerings report drastically different numbers given an identical timeframe. Granted, there are likely conceptual differences in the language each product uses to define their analytical data points (does “Pageviews” in Netlify mean the same thing in Google Analytics?). I’m not interested in spending time reconciling those differences. More than conceptual differences in language use, the more fundamental difference between these two datasets is that one is collected server-side, the other client-side. So in my mind, what follows is not specific to Netlify Analytics. I would imagine these kinds of data discrepancies would show up in any set of website analytics where one comes from the server, one from the client.

It’s also worthing noting that I found out Netlify counts bot traffic while Google Analytics does not. So (even though this may seem obvious, I’m going to say it) we’re not talking purely about implementation details of server-side vs. client-side analytics collection. There are fundamental differences in how the data is collected, so even if both products are using the same language (i.e. a “Pageview” is the same thing in both) to try and capture the same conceptual thing, the implementation details do matter and dictate that you are not guaranteed to end up with anything that’s similar.

If there’s anything I’ve learned from writing this blog post, it would be the following:

  • Never assume too much from a single set of data. In other words, don’t draw all your data-driven insights from one basket.
  • Server-side analytics are a lot more representative of the reality I’m looking for than client-side analytics.

Background

I’ve used Google Analytics for years on my icon gallery sites. I’ve never really used the analytics for anything other than satisfying my own personal curiosity. I haven’t found data-driven metrics to be of much use on these sites. I like to ignore what any specific collection of data might suggest. Doing so lets me focus on my love of building stuff for the web. For these kinds of personal projects, I feel similar to Jonnie and his desire to remove analytics from his personal blog:

Not seeing any metrics is actually refreshing and feels so much healthier than having that addiction. It lets me focus on my love of writing and makes me not care as much about fine-tuning or being perfect.

When Netlify Analytics came along, I was much more interested in that product because it was server-side instead of client-side (less code shipped to client, no more tracking, etc.). Netlify Analytics seemed like the right tool that would let me have my cake and eat it too: analytics for my own personal curiosity without any extra cost to the user. So I enabled Netlify Analytics for my sites and let it soak for a while.

And then I forgot about it and was left with two sets of analytics data being gathered. Then a couple days ago, I remembered what I’d done. I decided before removing Google Analytics I’d compare the data and see if they tell the same story.

They didn’t. They told a totally different story from each other.

Location

Google Analytics has always led me to believe that my primary base of viewers comes from…drumroll…China? For a number of years it was the United States, but sometime a few years back (maybe circa 2016-ish?), I noticed that—according to Google Analytics—China became the number one country sourcing viewers to my site.

Screenshot of location analytics in Netlify.

I honestly don’t know what to do with that statistic. Maybe support internationalization? I’m not going to do that in my free time. Plus, the primary purpose and driving value behind the site is the icons themselves, which are visual and don’t need translation. So I just tucked that little nugget of information away in my head as an interesting fact.

But then Netlify Analytics came along and had something very different to say about the geographic location of my viewers. Sliced from the same timeframe as Google Analytics, it tells a drastically different story.

Screenshot of location analytics in Google.

It’s rather interesting how wildly Netlify and Google differ on reporting the geography of my site’s viewers. I’m sure if I delved into exactly how they calculate and report on what, I could possibly figure out why the datasets are different. But honestly, I’m not that interested.

Top Pages

Screenshot of the “Top Pages” panel in Netlify Analytics.

Screenshot of the “Top Pages” panel in Google Analytics.

The data around “Top Pages” seems to agree in some regards, but not in others. For example: both Netlify and Google agree that / and /search/ are the most commonly-visited pages (though they drastically disagree in numbers, Netlify putting / at twice the page views that Google does, /search/ at three to four times as many). Beyond those first two statistics, Netlify and Google present a very different view of what’s happening on this website.

Netlify seems to suggest that—apart from home and search—individual icon pages are the most popular. This would make me think lots of people are visiting individual pages, likely as a result of direct links from other pages. Google, on the other hand, suggests that the pagination pages are the most popular (/p/2, /p/3, etc), indicating that perhaps the way people use the site is by paginating through all the icons. Who knows? (And to be honest, who really cares?)

What’s interesting and insightful about Netlify’s analytics is that I can see what “pages” are popular that don’t have JavaScript embedded in them. For example, the third most popular “page” according to Netlify is my /related-icons.html page. Being as familiar with the site as I am, I know that document is an HTML partial, never intended to be viewed on its own. Instead, it’s a collection of HTML data used to populate the “Related Icons” module on each individual icon’s page. It doesn’t have <meta> tags, <link> tags, or any <script> tags. It’s basically like a JSON file but in HTML, and therefore doesn’t have a Google Analytics script embedded in it—which means it doesn’t show up on the radar of Google Analytics whatsoever. But because of Netlify’s ability to see requests on the server’s side, I can see just how popular that page is (and therefore how many people are using the “View Related Icons” aspect of the site).

Pageviews

Screenshot of the “Top Pages” panel in Netlify Analytics.

Screenshot of the “Top Pages” panel in Google Analytics.

So this is interesting. “Pageviews” for the same given period result in very different numbers:

  • Netlify Analytics: 185,157
  • Google Analytics: 43,626

Here are the definitions of these pieces of data according to the tooltips in their respective products:

  • Netlify: “Instances of your site’s pages being served.”
  • Google: “Pageviews is the total number of pages viewed. Repeated views of a single page are counted.”

So I have data that is telling two very different stories using the same language, at least on the surface. What do I believe? Who knows (or has the time to figure it out)?

Unique Visitors

Screenshot of the “Unique Visitors” panel in Netlify Analytics.

Screenshot “New Visotors” in Google Analytics.

Now here’s a look at new/unique visitors. I think this is conceptually comparing apples-to-apples, but it might not be. In this particular case, as I understand it, Google Analytics uses a number of tracking methods (cookies as an example) to gather its data.

Another factor to consider when looking at the users statistic is the number of web browsers each person is using on their computer. Google Analytics uses tracking cookies to keep tabs on each individual user and tracking cookies are dependent upon the browser. That is to say, Firefox only looks at the cookies created by Firefox. Chrome only looks at the cookies created by Chrome. Internet Explorer, Safari, Opera, and whatever other browser anyone happens to use do exactly the same thing. Therefore, if a person visits the same website from the same computer but uses three different browsers to do it, that will register as three unique users as far as Google Analytics is concerned.

Based on that piece of information, you’d think Google’s numbers would be inflated, but I got the opposite? Again, Google’s data is purely client-side, so who knows what has slipped through the cracks of “JavaScript disabled” or “JavaScript failed” or ad/script blockers or any other number of things. And Netlify’s data counts bots. So again, I don’t really know what source to trust here.

404s

Netlify has this great little slice of data called “Top Resources Not Found”. It gives me insight into the top hits on my domain for which Netlify has no static asset to serve.

Screenshot “Resources Not Found” within Netlify Analytics.

As far as I can tell, you can’t get data like this from Google Analytics, which makes sense since GA is purely client side. How could it track information on a request to a non-HTML file like robots.txt which doesn’t embedded the GA <script>? Apparently you can try to fix crawl errors with Google Search Console by I’ve never tried that and dare not say anything more on the matter for fear of appearing completely ignorant.

Anyway, I always find this slice of data in Netlify’s analytics quite interesting. It’s helpful in identifying any glaring resources I might be missing (“oh hey, I don’t have a robots.txt for my site”) but most of the time it gives me insight into three things:

  1. Missing conventional assets
  2. Broken links to static assets
  3. Security vulnerabilities

1. Missing Conventional Assets

There are a number of conventional assets that are expected for every website and browsers often automatically make requests for those assets, even if they’re not explicitly declared in the HTML. For example, the favicon is generally expected to be at the root of the web server at /favico.ico. You can specify exactly where it is (and what type of file it is) by putting some meta info in your HTML document’s <head>, but many clients just automatically look for it in this conventional location. I have a /favicon.ico, so I don’t see that one show up in my analytics. But there are a few others that I’ve chosen to not supply with my website, like /apple-touch-icon.png or a robots.txt file. Netlify’s analytics shows me just how prevalent requests for these files are. Makes me think twice about adding them—but to be honest, I probably won’t.

I always try to preserve the URLs to my pages but I don’t really try to do that with static assets. I change those when I want. Turns out, there are a number of people who hotlink to those assets. For example, I found there was some site out there on the web that had a Google Maps icon in their footer next to their address and they weren’t hosting that icon on their own site. They were hotlinking directly to the icon hosted on my site. So when I changed the URL to that image, I updated it in all the relevant files on my site but it broke for anyone out there who was linking directly to the file itself (instead of the canonical HTML file which linked to my assets).

To be honest, I don’t feel bad about breaking that. This seems like a standard thing. Your projects change over time. You have to shuffle around the directory structure. As long as I keep my canonical HTML URLs from breaking, I feel like a good citizen of the web.

In this case, I find it very interesting to look at Netlify’s analytics and see which assets were apparently very popular for hotlinking.

3. Security Vulnerabilities

I tweeted about this

Feels pretty good to look at my “Top Resources Not Found” in @Netlify analytics and think, “glad I don’t have to worry about any of these”

I actually always find it quite interesting to see what people are looking for on my site’s domain and not finding. Someday I might investigate this and see what all of these things are.

Conclusion

I honestly don’t know what to do with any of this knowledge. If anything, this little exercise made me lose a lot of faith in the conclusions I could draw from Google Analytics data. As I’ve used GA for the last decade on these sites, I’ve made a number of assumptions about how the site is used. Netlify Analytics made me question just about everything I thought I knew about my site’s visitors based on previous assumptions from Google Analytics data.

In the end, I put more merit behind Netlify’s analytics than I do Google’s because Netlify’s analytics are server-side which removes a lot of the “yes, but” caveats you have to remember when reading GA’s data. For example, because Google’s tracking is client-side and relies on JavaScript, it can’t capture any data around people who either don’t have JavaScript enabled or it failed to execute (for who knows what reason).

I’ve already gotten rid of Google Analytics on a number of my sites, just because I don’t love burdening the user with additional page weight and tracking. I held off keeping it on my icon gallery sites because it was always amusing for me to look at. Now I realize just how significantly prone to error my assumptions were from the data in Google Analytics. Now it just feels like, in addition to all the user-related concerns, if GA can’t amuse me with truthful entertaining details about my site’s data, what’s the point of keeping it?





Source link

Server-side and client-side rendering
Strategy

Server-Side Rendering (SSR) Made Easy With Angular Universal…


The Angular team recently, announced a pre-render builder in Angular Universal, in Jan 2020 to be specific. Angular Universal is for server-side rending (SSR); with these new Angular Schematics available in Angular 9+, creating new SSR with Angular Universal or configuring your existing application to SSR is easier than ever. All the configuration can be done with Angular CLI.

What Is Server-Side Rendering (SSR)

The server returns a static web page fully complied with dynamic data ready to display on the browser. The fetching of the dynamic data is done by server-side scripts written by server-side languages. This is how we used to render web pages in the old days (PHP/ Perl/CGI), and it has recently gained traction with technologies, such as React and Express. It is SEO friendly and great for devices with low power. 

Server-side and client-side rendering

The server returns a complete static web page with all the elements required to display the browser and the client-side scripts required to make the page dynamic. 

What Is Client-Side Rendering (CSR)

The server returns a partial web page with no dynamic data, but it provides the client-side scripts necessary to fetch the data on demand asynchronously.

Server-side vs client-side scripts

The client is responsible for fetching the data upon loading a new page or based on user interaction. There are many Async calls to the server. CSR is not SEO friendly, as the content is always dynamic. 

Now, we are going to create a standard Angular app, which, by default, has been programmed for Client-side rendering. Then, using the new Angular Schematic, we are going to configure the application as server-side rendering (SSR).

Create a Standard Angular App

Step 1

Check you have the latest angular CLI (9 or greater). 

ng --version

if your CLI version is less than 9, then upgrade it to the latest version.

npm i -g @angular/cli

Step 2

Create a new Angular application.

 ng new angular-SSR-Demo

 The angular CLI will create a new angular project and install all packages. 

Step 3

Run the application and observe the content of the web page.

Once all the packages have installed successfully, we can run the application

 cd angular-SSR-Demo 

npm start

You will see the message that the development server is running at http://localhost:4200/.

Notice that the source of the HTML page served by the application. You don’t see the static HTML for the content you see on the page, as most of the content has been loaded dynamically by client-side scripts. 

HTML preview

As you can see, the application created with CLI is configured to have Client-side rendering. With Angular Universal, we can configure the application as server-side rendering (SSR) easily. 

Configure for Server-Side rendering (SSR)

Step 4: Create New Files and Update the Existing Files

We are going to the latest Angular Universal schematic from @nguniversal. It is also going to add the express server to the project.

ng add @nguniversal/express-engine@next

This is what you will see:

Installing express-engine@next module

All required files have been created.  Notice following has been added to the package.json.  

Also, notice the newly added scripts/shortcuts in package.json

Note: Please correct the line export function app():void to export function app():any in the server.ts file if applicable. 

Step 5

Run the application and check the content of the web page.

npm run dev:ssr

The server has delivered a completely static HTML page with all elements in pure SSR. The client-side script is only needed for user interaction and is not responsible for fetching the data. However, in Angular Universal, there are hybrid approaches with universal templates, etc.  

This is just an introduction as there are many more. To find out more about the universal template engine, the Pre-Render or Ahead-of-Time (AOT) compiler, or how the routing works in SSR please check out: https://angular.io/guide/universal

Source codes are available here

Thank you for taking the time to read this article; your feedback is greatly appreciated.  



Source link

Image or Video prompt
Strategy

Data Transferring Between Android Based Mobile Devices


In my previous article, I had shared some concepts of socket programming and gone through how to connect two Android devices using socket communication. I suggest that you read that article before you start.

In this part, we will learn how to send data between two devices once they are connected.

First, I’ll show a dialog box, asking for the user to choose between an image and video. Then, based on our user’s choice, we will use the MediaPicker library for file selection. 

Image or Video prompt

On activity result, we will get the selected file:

SendFileModel is a model where we can manage file type, send, receive status, and list all of our files.

To send a list of files, you need to get the total size of the file and send the size to the receiver. Then, you need to write the file name and the directory name if you want the same directory as per the sender. After that, start writing the content of the file.

At the receiving end, we need to check the file type, and if the type is file, start reading the data.

First, get the total size, file size, and file name, and create the folder, as per your need. THen, you can start reading files, while sending and receive the files show progress bar to show file is being send.

File transferring in application

Show a message once the file is received.

Once the file is sent, reset the list in the application class and application class manage list of the file. 

After that, the file can be seen in the newly created folder. This way, you can also show the list of files received, and before sending, show all the files in the list view.

Demo:

Demo of application

Source Code: https://github.com/omeryilmaz86/AndroidDataSharing.git.



Source link

Importing Flutter project on Android
Strategy

Brand New Flutter APP Publish and Update via Google PlayStor…


In that article we will learn how to publish and update a brand new Flutter project to the Google Play Store.

Before we start, I assume that you had coded and successfully tested your Flutter app and are ready to share it with other Android users.

First of all, you need to create a Google Developer Account in the Google Developer Console.

It is necessary to become a paid member of the Play Store with your Google account, estimated prices is 25 dollars per year.

Now, we are ready to start.

1) Open Flutter project and click on File → New → Import project on Android Studio

Importing Flutter project on Android

2) Find your Flutter project structured folder and open it from the “android” folder.

Opening Flutter project from Android folder

3) Click on Build→ Generate Signed Apk

generating signed bundle

4) Give Keystore file name with a path as shown below and fill up all the information 

adding keystore filename

5) Give Keystore your password. Please keep this file in safe because we cannot upload a new version if the file is lost. Then, click on the Next button.

Setting password in KeyStore

6) Click on both the checkbox, as shown below, select “release”, and click on the Finish button.

Clicking "release" and the "finish" button

7) It will generate the release APK. After that, go to the play store console and click on “App releases”.

Select your app, and then click on App Releases.

Selecting your app

8) Click on the Production Manage button

Selecting Production Manage button

9) Now click on the “Create release” option.

Creating release

10) Click on the Continue button

Clicking continue button

11) Just click on accept button

Accepting Google Play terms of service

12) Upload the generated release APK here.

Uploading generated APK

13) Enter the release notes and click on the Save button.

Entering release notes and hitting save

14) Now go to App content and fill out the information related to the application and click on the next button.

Filling out related application information and clicking next

15) After filling out the details, click on the submit button.

submitting app

16) Then, go to Pricing and Distribution 

Setting pricing and distribution

17) Fill out the information related to the application, as shown below, and click on the Save Draft button.

Saving draft

Final distribution information

18) Now, go to the content rating and fill the contact details and select application category

Filling out content rating

19) Select answer, as shown below then go to next and apply the content rating

filling out content rating

filling out content rating

20) Now go to store presence and then store listing and fill the application details and upload icons as shown below

Adding title and description

21) If you’re using any permission then include a privacy policy link as below and click on Save button

Creating privacy policy

22) Now, again go to Release management and select the release you have created and click on Start Rollout to Production

Rolling out to production

Updating the Application

After your app released to store you may need to update it. Lets see how can you handle that.

1) Follow steps 1 & 2 at previous section and Go to AndroidApp build.gradle file and increment the version name and version count

Updating version number

2) Again, generate the Signed APK by following previous steps and this time it will automatically fill out previous Keystore details and click on Next button and follow previous steps and it will generate APK

Generating new APK

3) Go to Playstore console and Release Management -> App Releases and Click on Create Release and upload new APK, add new release notes and click on Review and Release to Production

After reviewing your app from Google Dev team, then it will be release on Google Play Store.



Source link

Verifying user with Twilio
Strategy

Using Twilio for User Verification on Your website


While I love Twilio for sending text messages as much as the next person, I haven’t spent much time digging into the rest of their offerings. And there is so much to explore! Today, I want to look at how to use the Verify API from Twilio to require that a user verifies themselves before moving forward in a process. This can used for 2FA on accounts or verifying purchases from anonymous users.

Verifying user with Twilio

A breakdown of how this will all work:

  • we need to capture the user’s phone number
  • start a verification process with Twilio
  • have the user enter their code
  • retrieve that code and pass it to Twilio’s verification check service
  • get the green light and go!

So we need at least 2 UI inputs and 3 calls to Twilio. WAIITT…where did 3 come from, you only outlined 2. Well to make sure a phone number is in the proper format, instead of doing the regex verification on our side, Twilio has a service we can use for that too!

The first thing that you will need is an input field with the phone number. This can be on your sign-up screen, payment details, account settings page, wherever makes sense for your app. Since I’ll be using Corvid by Wix, I am just going to drag and drop a Text Input UI element onto my page and give it an ID of “phoneInput”. You may also want a button to trigger the Verification process, so feel free to add a button with id “verifyButton”.

Once we have our UI elements on our page, we need to add an event to the button click to retrieve the value of the phone number and pass it along to the Twilio Verify service. I am going to do the verification process in the backend of my app so I’ll start by importing my backend function from my Twilio file.

Next, in my page onReady event, I will add a new event listener for my button.

In my event listener, I will GET the value of the phone number input and assign it to a new variable.

And lastly (for now), we’ll pass this phone number as a parameter to our backend verification function.

Now we actually need to implement this backend function, so switch over to your backend code. In Corvid, we can accomplish this by going in our file structure to our Backend folder, and either add a new file or work with an existing one. Since we’re still working with the Twilio npm module, I will add these functions to my existing twilio.jsw file.

Let’s stub out the new sendVerification function. We need it to accept 1 parameter for the user entered phone number.

When using functions beyond the file they live in, make sure to export them so other code files can import their functionality.

Inside this verification function, we need to instantiate a new Twilio client, so we’ll need our Account SID and Auth Token like we did for sending a text message. If you don’t remember how we set this up, take a look at this blog post on working with Twilio and Corvid.

For the Twilio Verify API, we all need to create a new service. I did so via my Twilio account, but you can also use the API to create a new service. Once you create the service, take note of its ID as we will need it throughout the application. Since I created my service via my account GUI, I added it in the secrets manager for my application.

Now we have everything we need to start a verification process!

The Verification API is picky about the phone number format, so we can use Twilio’s Lookup API to find the proper phone number format every time no matter how the user enters it. Let’s start with looking up the phone number. We’ll pass in the user entered phone number to the phoneNumbers lookup function.

Once this promise resolves, we’ll have the number in the proper format we need via the returned object. On the promise resolve success, let’s move forward with the Verify API’s Verification Service. We need to use the service we created, so this is where you need the Service ID. From the services, we want to use the Verification service and create a new verification. A verficaition service needs 2 inputs via a JSON object: the phone number to send the code to and which channel to use (ie Call or SMS). I am going to set it to SMS.

Now we know we need to chain this together as we need the number from the lookup API to run the verification endpoint, so all linked up, it would look something like this:

The last thing we want to do is make sure to return the results so our calling code knows what to do next. For example, in our UI if we get a positive response from the verification service, we want to open up a new Input field for the user to enter their code But if the response was negative, maybe we need the user to reenter the phone number or wait for the service to come back online. So to finish up our backend code, make sure to return the result from your Verify API call via another chained then() and finally return the whole result to the calling function.

Sweet! Now we need to do something with this verification result on our UI, so jump back to your frontend where you have the user input their phone number.

For me, I am going to use a lightbox to collect the user’s code they received on their mobile device. I have created a lightbox called “Verify”. You can show a new input field on the same screen or also use a lightbox. Whatever fits your need!

When sendVerification() returns, I want to check the result and determine if I should open the lightbox. I’ll use an if() statement to look at the result object’s status.

If the code was successfully sent, we’ll see a status of “Pending”. When we see that status, I am going to open my lightbox using the Wix Window API. Additionally, I’ll need to phone number of the user again to check to make sure they are using the correct code sent to that number, so I’ll also make a data object to send along to the lightbox.

In the lightbox, I can retrieve my passed in data by retrieving the context of the lightbox also via the Wix Window API. Make sure to import this API on all pages and lightboxes that are using it!

This lightbox contains my next Text Input field called “codeInput” that is where the user should enter their code they received on their mobile device. I also have a button called “verifyButton” to kick off the Verification Check process. This process will also being running in my Twilio backend folder, so make sure to import you Verification Check process function at the top of your code.

When my Verify button is clicked, I want to start my verifyUser() function, which will take in the user’s phone number and the entered code. Let’s attach an onClick() event to the button.

In this onClick event, call the verifyUser() function, and pass in the phone number and code to verify.

And now we need to build out the verifyUser() function in our Twilio backend code! Switch over to your Twilio backend code file.

Here’s let stub out this new function.

We need a Twilio Client again, plus the Service ID from the service we created earlier. Grab these values from your Secrets Manager, or wherever else you stored them. Then initialize your Twilio Client.

We also need to make sure the user’s phone number is properly formatted again, so use the Twilio Client and the Lookups API we used earlier to set this up.

If you wanted to avoid making this call again, you can also retrieve the to property from the return verification object from above and use that as the user phone data object to keep the properly formatted number.

Once we have our phone number ready to go, we can access the Twilio Verify API again and this time use the Verification Checks service. This service takes in the phone number and code and makes sure it matches what Twilio recorded sending.

If you are using the Lookups API, you will need to chain your promises to look something like this:

And lastly, we need to make sure to return the result to the calling function. If the result does not say approved, the user may need to reenter the code or get a new code as it expires after 10 minutes.

And back on the UI, we can add in some additional error handling based on the result.

TADA! Verification Complete!

This is just a sample of what you can do with the Twilio Verify API and just one way of flowing it into your application. Feel free to play around with this to fit your applications needs, but alway remember with the Twilio Verify API you need to do these steps in order:

  1. Create a Twilio Service
  2. Create a new Verification
  3. Check the Verification with the same information as you created it with

Enjoy!



Source link

Registration Form with HTML and CSS #1
Strategy

Registration Form with HTML and CSS #1


What we know matters but who we are matters more.

–  Brené Brown

Introduction

Today we are going to build a simple registration form. The requirements for this tutorial is just a basic knowledge of Html and  CSS as well as a code editor.

A Preview of What We Are Going To Build

complete form design

Let us get started.

Code Structure

First, in our code editor, we are going to create a new folder. We can call the folder formInside that folder, we will create two files. The index.html and the style.css.

HTML

In the index.html file, we should have a bare bone structure similar to what is shown below:

Next, I am going to add the tags to the HTML page.

From the code above, we started by adding a form tag. In the form tag, there are four label tags and a button tag. Each input tag is wrapped in a label.

These labels are very important because they tell the user what information to provide in the form element.

This is all we need for the Html code and our form should look something like this:

HTML preview

HTML preview

Yes, that is ugly. Time for some CSS!

CSS

We start in the style.css file by adding color to the background of the page and also styling the form tag:

The Outcome:

first CSS preview

Furthermore, we need to style the labels and input. For the labelwe will be adding letter-spacing, color, margin, padding and a positional direction for the label and the texts that will be within it.

The Outcome:

second css preview

Finally, we will be styling the line for the input field and the button.

To get the line effect, we need to set the height in the .line-box class. This will make the line visible. Also, we will be adding some transition effect when the input field is active.

The design for the button class is straight forward, We added a hover color, a background color, padding and borderradius. We also set the display to inline-block, this allows us to set padding to the side of the button.

Final Results:

final view

Conclusion

I know this is a very basic tutorial, but I hope you can learn one or two things from it.

Here is the link to the repo on Github.

Support me by subscribing to my newsletter here.



Source link

r/web_design - Top Menu Customization
Strategy

Top Menu Customization : web_design


Hello all,I need some help, please. I have a WordPress question. My designer wants me to create a customized top menu bar; she wants it to look like this, is that possible? She wants the logo to kind of inch out from the menu bar.Thank you for your time and help!

I need some help, please. I have a WordPress question. My designer wants me to create a customized top menu bar, she wants it to look like this, is that possible? She wants the logo to kind of inch out from the menu bar.

Thank you for your time and help!

r/web_design - Top Menu Customization



Source link

r/web_design - My site
Strategy

My site’s images are sharp in Firefox but blurry in Chrome :…


Hi all!

I design detailed maps which are posted on my website, and I’m noticing that, at least on my machine, the maps display crisp and sharp on Firefox but are slightly blurry on Chrome. This isn’t the issue people talk about with Chrome being blurry in general, because it’s just the images. Surrounding text is sharp on both browsers.

I suspect this is about display scaling on Windows 10 for higher-resolution screens (i.e. it scales things up so they’re not too small on the screen), but I’ve already taken that into account by uploading 200%-sized images and scaling them down in the browser – this solved the problem in Firefox, but for some reason Chrome is still doing it.

Now, I realize there may be some setting in Chrome that would fix this, but that’s not what I’m after. I need to know, as a web designer, what I can do about this so that other people with Chrome and Windows 10 and high-resolution screens (a.k.a. the majority of desktop users) won’t see my maps as blurry. I’ve of course tried Googling this, but it’s very hard to find the right search terms, and what I’ve found mostly suggests things I’ve already done.

Any ideas? Screenshots below – I realize the difference is a little subtle, but I think as picky designers a lot of you will understand. 😉 In case anyone wants to see the code, here’s the link that the screenshots below were taken from.

P.S. Please try not to laugh at the overall design of the website, which started out as a Blogspot blog – I know it needs a major makeover. :-p

r/web_design - My site's images are sharp in Firefox but blurry in Chrome

Screenshot from Firefox

r/web_design - My site's images are sharp in Firefox but blurry in Chrome

Screenshot from Chrome



Source link