NorthBio Web Development

27/07/2023

13/06/2023

See link in comment below
for source of MILES concept.

* Other ideas that support this concept:
"Be a big fish in a small pond."
Blue ocean strategy

* Examples of successful people who used this concept:

Mayuko - shares her experiences at a FANG company.
Films herself as an attractive woman

Techlead - based on experience at Google as techlead.

He has keen intellect as entrepreneur since a teenager.

Bulldog Mindset - how to become a millionaire through real estate,
marketing as software engineer, weight loss; all experiences/
achievements in his own life.

Handsome body builder who regularly poses in video thumbnails

He uses money loaned from bank to purchase home and
rents it, until he makes the money back and profit.
He leverages bank's money.

Ruri Ohama - polyglot of 4 languages; experienced in how to learn
new languages. Her unique experience being a Turkish-Japanese
child in Turkey became a viral video

Ali Abdaal - top study tips as one of top students
at famous UK university; entrepreneurship tips as
a serial entrepreneur since teenager

He has become an authority on productivity
through reading dozens of books on topic,
constantly testing different concepts
and improving his own productivity system.
He is known as a lead star on productivity
on Youtube.

21/09/2022

WHY USE A SLIDER ON YOUR WEBSITE?

* Benefits

-maximize use of an area - A visitor may not want to scroll down and read lots of text / view images.
But they can passively and easily follow the text and images in each slide.
-get attention
-make your site stand out
-look more professional. Major websites use sliders.
-Sliders help create perception.
--look "artistic". If your site is related to web development, graphics design, social media presence, you need this.
--look "trendy". If you are sharing jokes, political commentary, have a young audience,
a graphical/animated slider makes you seem younger and more alive.

* What do you show in slides?

-news & updates about your company, industry, product/service offerings
-tell unique selling points or offer discounts right away. Show these in a slider on the home page/sales page.

* Capabilities:
sliders can show:
-images
-HTML
-multimedia: videos and sounds

* Features
These can vary depending on the slider you use. However, here are some of the
options you can find in sliders.

** Manage content/layout
-use templates
-drag and drop images into slider

** Easy to learn
-documentation
-examples of how to use different slider options

** Listing
thumbnails
playlist

** Appearance
css customizable file
animations ( between slides )

** Graphics options
full width
full screen
responsive - works well across devices

** Performance
load small file
use hardware acceleration

07/09/2022

WHAT IS "MODERN DESIGN" FOR WEBSITES?

You want to create modern design for websites?

Here are a few styles you should know.
"Modern design" derives from many ideas from the following styles:

minimalism
cyberpunk

If you want to create "modern design", then using
ideas from these styles will help you.

*Minimalism

Minimalism doesn't introduce unnecessary elements.
As a result, the elements which are used
gain importance.

Typography becomes a very important element.

Minimalism doesn't mean a lack of color.
You select fewer colors.

Overall, site structure should be functional.

Examples of concerns include:
-logo in a relevant location
-site navigation easy to find and convenient to use

Over the top use of graphics is avoided. It's all about function.

Negative space is a highly important principle.
Minimalism is often stated as "less is more."
As a result, negative space becomes extremely important.
It's said that the use of this principle separates the novice from the
master in this style.

You are going to have to use images in your website.

here are some invalid reasons to use an image:
-to display color
-to fill empty space

Any image used should be relevant to the content
and support it.

*Cyberpunk

This style is described as futuristic, but dystopic.
The future is "high tech, low society".

The world is advanced in technology.
But society did not develop to be a nice
place to live in.

it's a cold, underground, non human-centric
world with things such as
geishas, industrial wastelands
and cities which are a concrete jungle.

Let's look at the various aspects
used to create with this style.

** Major elements

-dark backgrounds
-white background and posh minimalistic design
-neon, glowing elements. - these derive from electronic
lights, computer screens, etc. from digital world.
-gradients over background. Here are some favorite colors for
gradients: red to green, red to blue, blue to pink
-gradients over patterns

** Colors
-blue, violet hints of green. Cold colors
-gold, orange. Warm colors

** Real life places

-cityscapes
-skyscrapers
-lots of people
-buildings in construction
-wires/cables strown about randomly
-slums
-industrial sites or waste

** Brutalist architecture

This style of architecture is used in Cyberpunk.

It is defined as:
-minimalist
-bare essentials over decorative design
-only structure and materials
-angular geometric shapes
-predominantly monochrome color palette
-unpainted concrete or brick
-materials: concrete, timber, and glass

** Real life objects

-holograms
-neon signs
-Japanese vertical signs, geishas, ninja clothes, chopsticks
-high-tech things

These derive from electronics or were influenced from
films such as Blade Runner that imagine a future world.
Blade Runner featured Japanese culture
as being important.

** User interface

-thin lines
-code names and long numbers to make UI look really advanced
-UI elements over real images - AR or "augmented reality"

The general principle is "look super cool and technologically advanced".

Here are systems in the UI:
-real-time detections. This is like the view from Predator
or Terminator.
-displays of lots of data. These would be like the panels
you see in Star Trek.

common elements include:
-buttons
-settings
-precision-controls
-camera zooms
-glass effects

** Creating atmosphere

-rain
-mist
-fog
-night time or evening. This goes with the theme
of dark or dystopic future world.

** Unrealistic elements/fantasy

-darken blacks
-increase contrast
-increase saturation
-surreal
-glowing

30/08/2022

WHAT IS MODERN DESIGN IN WEBSITES?

I explain what "modern design" in websites is and how you can apply the style yourself.

I took examples of modern design (2022) of a few projects
I worked on.

They exemplify elements of modern design. I will highlight what
these elements are.

* Elements of modern design

My website designs were inspired by various
sites I saw and modeled from around the web. It's a personal style that emerged from
my personal selection of what is popular (2022).

-rounded buttons - Also popularized in Apple interfaces. For example, the close, minimize, and maximize buttons of a window are rounded.

-gradient background for buttons (darker at edges, lighter at center)

-dropshadow around boxes - Dropshadows are also popular in Apple OS interfaces. For example, there are the buttons at the bottom of the screen for quickly starting apps.

- negative space - Negative space is an important concept. It's used a lot.

It's functional. You can navigate more easily when there are fewer things to focus on.

Less items/minimalistic probably naturally feels better than cluttered.

It feels more "premium". It's like living in a big house with lots of room
for your stuff, versus piling things to the roof in small cramped apartment.

* Futuristic elements

Thes are "futuristic" elements. They draw inspiration probably from concepts of the future in TV and film.

- reflection - See an example in image 4 ( the text "App Media" ).

It's almost like the holograms you see in communications in Star Wars; or the UIs that show augmented reality UI elements over the physical world (

Reflection uses transparency.

- transparent background image over solid color - For example, see image 4 (background of mobile app of Avril Lavigne). There is high transparency image of Avril Lavigne, on a solid color blue-gray background.

It uses background images more like a texture. It distracts less from the main elements in the foreground.

-gradients - It makes an element pop out more.

It looks more shiny. It's innately appealing like shimmering water of a lake under the sun or a well washed sportscar on a summer day.

It feels more metallic and futuristic. Or it can feel more glossy and premium.

It adds more depth and feels more realistic and 3D.

* Colors

There is a big focus on colors. It sets the tone. It tends towards making things more "techish" or "futuristic".

darker colors (in background) - like a dark room where you see only bright computer monitors and electronic lights.
glossy colors - especially on classical colors like black, white and grey
simple color themes - 1 color or 2 complementary colors. but few colors

preferred colors:
grey - metallic color
whitish - future utopia white; like shiny kitchen surface
gradient background color

for text, avoid solid black. use a darker grey
light gray for lower priority text - placeholder text and less important options ( i.e. image 5: link "View more comments") are shown in this color.

* Basic principles

These rules will help you understand quickly how to create a "modern design" feel for your webpage.

The lefthand qualities are those of modern design. The righthand qualities are standard the qualities you start with when you create a blank webpage by default.

round/curved vs. rectangular/linear
minimalistic (negative space) vs. cluttered
changing (gradient) vs. solid color/static
transparent vs. opaque
depth vs. flatness - gradients. Transparent "glass" items over background. Dropshadow
realistic optical effects vs. abstraction. Optical effects from real world: use of reflection, shading (gradients) and transparency

19/08/2022

Upload file on same page without reloading
(AJAX File upload)

Don't upload a file and wait for next page to load
This was the OLD WAY.

NEW WAY
After you select the file,
the file uploads while you stay on current page.
It could show a progress bar or percentage for the file upload.
You can then go back to using other options on the same page.

Benefits:
-easier
-more efficient
-users have come to expect this. Pinterest, Facebook and other sites use this.
-keep them on your site. long waiting time can make people quit your website.
-keep people engaged. show progress bar, percentage, quotes, tips, etc. to keep people entertained/busy while uploading

08/08/2022

What are benefits of auto-generating data as PDFs for your business?
---

* What you can do in every report
-allow user to select parameters (search terms, categories, options, filters, sorting, etc.) to show any data you could want (same abilities as Excel, Google Calc, etc.)
-format large amounts of data into convenient tables with headers

* How it can transform your business
-show any text and images (positioned where you want)
-show branding (logo, company, slogan, etc.)
-auto-generate repeat info like contact info, physical address, social media accounts, legal info
-auto-insert info like invoice number, client name, selected products, user history
-PDFs with formatting and images look more professional. share your accounting reports, sales data, budgets with the confidence of a pro. look like a company that cares about its image to clients seeing your documents as PDF
-easily share knowledge in organization. load up tutorials, how-to, best practices easily in the browser

* Why generate data in PDFs instead of Microsoft Excel, Word, Google Calc, etc.?
-PDFs are readable across operating systems, browsers and are non-proprietary. reach all your clients
-avoid problems with proprietary formats. Doc, Docx, Xlsx, etc. require certain software, even specific versions and can
introduce format conversion errors
-convenience. You can have common reports just ready to view with one click.
Easily generate common reports (i.e. recent clients, clients with over $1000 in sales,
top selling products, products by category)
Excel, Google Calc just show static tables, where user has to manually search, filter, sort, by themselves.

28/07/2022

Why you need automatically generated emails for your business website

Uses:
-Remind people of appointments i.e. 24 hours before
-Remind people of upcoming events on site i.e. New Years or 4th of July Sale
-Send a message based on user's life. i.e. Birthday Offer
-Notify relevant poeple in business process. For example, if an item was just bought from a shopping cart,
then send an email to shipping staff. If a user has registered for a premium service, then notify the
the professional who should follow up with them.

Capability:
-Send files
-Attach images or use HTML. You can make it a great looking experience
-Receive links to where on the website you need to go to in order to complete the next step.
i.e. The user could go to a product page, a help page, a welcome FAQ, etc. on your website.
-Send a copy of data entered by user into a form
-Generate on any user driven event
-Generate based on date and time
-Send to relevant people only

Benefits for site owner:
-Be notified of errors
-Be notified of actions affecting security. For example, if some admin user
has logged in excessively, updated/deleted a lot of records, etc.
You can set a threshold amount i.e. of logins, data management activity or
bandwidth allowed before generating an email about security.
-Engage users to return to your site
-Make the website feel more active. If you hardly update your site or talk with
users, then receiving an email with their personalized name and today's date
makes the website feel "alive" with activity.

Benefits for website users:
-Be notified when there is value to be offerer. i.e. User's account has been approved,
there are special offers, etc.
-Get immediate feedback. Examples: registration, signing up for newsletter, etc.
-Receive only emails relevant to them. i.e. Only send job offer to people looking
for jobs in a certain category