inverted tree structure
Strategy

Arrays in JSON: Modeling, Querying and Indexing Performance


Array is THE difference between the relational model and the JSON model.   — Gerald Sangudi

Abstract

JSON array gives you flexibility in the type of elements,  number of elements, size of the elements, and the depth of the elements.  This adds to the flexibility of operational JSON databases like Couchbase and MongoDB. The performance of queries with an array predicate in operational databases depends on the array indexes. However, the array indexes in these databases come with significant limitations. E.g. only one array key is allowed per index. The array indexes, even when created, can only process AND predicates efficiently.   The upcoming Couchbase 6.6 release removes these limitations by using a built-in inverted index to be used to index and query arrays in N1QL.  This article explains the background and the workings of this novel implementation.

Introduction

An array is a basic type built into JSON defined as An array is an ordered collection of values. An array begins with [left bracket and ends with ]right bracket. Values are separated by ,commaAn array gives you flexibility because it can contain an arbitrary number of scalar, vector, and object values. A user profile can have an array of hobbies, a customer profile an array of cars, a member profile an array of friends. Couchbase N1QL provides a set of operators to manipulate arrays; MongoDB has a list of operators to handle arrays as well.

Before you start querying, you need to model your data in arrays. All JSON document databases like Couchbase, MongoDB recommend you to denormalize your data model to improve your performance and appdev. What that means is, transform your 1:N relationship into a single document by embedded the N into 1.  In JSON, you’d do that by using an array.  The example below, the document(1) contains 8 (N) likes. Instead of storing a foreign key reference to another table, in JSON, we store data inline. 

Values here are arrays of strings. In JSON, each element can be any valid JSON type: scalars (numeric, string, etc), or objects or vectors (arrays). Each hotel document contains an array of reviews. This is the process of denormalization. Converting multiple 1:N relationships to a single hotel object that contains N public_likes and M reviews. With this, the hotel object embeds two arrays: public_likes and reviews. There can be any number of values of any type under these arrays. This is the key contributing factor to JSON Schema flexibility. When you need to add new likes or reviews, you simply add a new value or an object to this.

Like the hotel object above, you denormalize your data model into JSON, there could be many arrays for each object. Profiles have arrays for hobbies, cars, credit cards, preferences, etc.  each of these can be scalars (simple numeric/string/boolean values) or vectors (arrays of other scalars, arrays of objects, etc). 

Once you model and store the data, you need to process it — select, join, project. Couchbase N1QL (SQL for JSON) provides an expressive language to do these and more. Here are common use cases.

Array Indexing:

Indexing arrays are a challenge for B-tree based indexes.  However, the JSON database has to do it to meet the performance requirements: MongoDB does it; Couchbase does it. However, both come with limitations.  You can only have one array key within an index.  This is true of MongoDB; this is true of Couchbase N1QL.  The core reason for this limitation is when you index elements of an array, you need separate index entries.  

The size of the index grows exponentially as the number of array keys in the index and the number of array elements in the index. Hence the limitation. Implications of this limitation are: 

  • Push only one array predicate to the index scan and handle other predicates after the index scan.
    • This means queries with multiple array predicates could be slow
  • Avoid composite indexes with array keys to avoid huge indexes.
    • This means queries with complex predicates on array keys will be slow

Good news from the LEFT FIELD.

The full-text search index was designed to handle text pattern search based on relevance.   The way it does by tokenizing each field.  In this example below, each document is analyzed to get tokens:

For each token, it keeps the list of documents that token is present.  This is the inverted tree structure! Unlike a B-Tree based index, it avoids repeating the same token value N number of times, one for each document it’s present in.  When you have millions or billions of documents, this is a huge saving. 

The second thing to note here is, the inverted index used for an ARRAY OF TOKENS! In fact, the inverted tree structure in the full-text-search is ideal for indexing and searching for array values, especially when these values have duplicates. 

inverted tree structure

Indexing arrays using the inverted index will be the same process, except there’s no tokenization. Let’s revisit indexing our document “bob”, with additional documents, “Sam” and “Neill”

The Couchbase FTS has an analyzer called a keyword analyzer. This indexes the values as-is instead of trying to find its root by stemming it. Basically, value is the token.  For array value indexing, we can use this index and exploit the efficiencies of an inverted index.  Let’s construct an FTS index on the documents bob, sam, neil.  In the case of the inverted tree, each field gets its own inverted tree: one each for id, a, and b.  Because these are individual trees, they don’t grow exponentially as the B-tree composite index. The number of index entries is proportional to the number of unique items in each field.  In this case, we have 14 entries for the 3 documents with three fields of a total of 24 values. Creating a B-tree index on (id, a, b) for the same document will create 36 entries!

Notice that for three documents with two index entries the difference is 157%. As the number of documents, the number of arrays increases, the savings using an inverted index increase as well.

However, we do have an issue.  How you process predicates?

The B-Tree index stores all of the values in (id, a, and b) together, the inverted index in FTS has distinct trees for each field. So, applying multiple predicates is not so easy.  This is true for our array processing as well as text processing.  It’s common in text processing to ask questions like: search for all Californian residents with skiing as their hobby.

To process this, FTS applies the predicate on each field individually to get the list of document-keys for each predicate.  It then applies the boolean predicate AND on top of it. This layer uses the famed roaring bitmap package to create and process the bitmap of document ids to finalize the result.   Yes, there is extra processing here compared to a simpler B-TREE based index, but this makes it possible to index many arrays and process the query in a reasonable time.

b-tree-based index

Inverted Tree: A tree that keeps on giving!

The B-Tree composite index combines the scanning and the AND predicate application. The inverted tree approach separates the two.  Index and scanning each field is different from processing the composite predicate.  Because of this separation,  the bitmap layer can process OR, NOT predicates along with AND predicates.  Changing the AND in the previous example to OR is simply an instruction to the bitmap processing on the document qualification and deduplication

COUCHBASE Release:

Couchbase 6.6 will support using FTS indexes for processing complex array predicates.  This improves the TCO of array handling, enables developers and designers to use, index, query arrays as needed without limitations. Look for upcoming announcements, documentation, feature blogs, etc.

References

  1. Working with JSON Arrays in N1QL
  2. Utilizing Arrays: Modeling, Querying, and Indexing
  3. Couchbase N1QL Collection Operators
  4. MongoDB: Query an arrray
  5. Couchbase FTS
  6. FREE: Couchbase interactive training
  7. FTS BLogs:  https://blog.couchbase.com/tag/fts/
  8. Collection operators
  9. ARRAY indexing
  10. Making most of your arrays…with N1QL Array Indexing
  11. Making most of your Arrays.. with Covering Array Indexes and more.
  12. Couchbase Indexing
  13. NEST and UNNEST: Normalizing and Denormalizing JSON on the Fly





Source link

.NET ecosystem
Strategy

A Brief Walk Through the .NET Ecosystem


.NET is an open-source developer platform created by Microsoft for building many different types of applications, such as web, mobile, desktop, games, etc. It consists of different tools, programming languages, and libraries. Let’s start with a brief history of the .NET.

The History Behind .NET

During 1990s, Microsoft started to work on something called the .NET Strategy. The key point of this strategy was to encompass all Microsoft products and add .NET to existing product names. In the 2000s, .NET framework was known as the Next Generation Windows Services (NGWS). The first beta versions of the .NET framework were released in the late 2000s, and the first version of .NET 1.0 was released on February 13, 2002. Since then, many versions were released with new features. Some of the most important were:

  • .NET Framework 2.0 (November 2005.): generic collections, iterators, nullable types, etc.
  • .NET Framework 3.0 (November 2006.): WPF, WCF and WWF.
  • .NET Framework 3.5 (November 2007.): AJAX, LINQ, ASP.NET MVC.
  • .NET Framework 4.0 (April 2010.): MEF, DLR, task parallel library, Razor view engine, new C#/VB language features.
  • .NET Framework 4.5 (August 2012.): support for Async, zip compression support.
  • .NET Core 1.0 (November, 2014.): first version which included cross-platform support. ASP.NET 5 and .NET Native.
  • .NET Core 2.0 (August 2017.): the second version, with major performance improvements and implemented .NET Standard 2.0.
  • .NET Framework 4.8 (April 2019.): final version included JIT enhancements, High DPI enhancements for WPF applications, accessibility improvements, performance updates, and security enhancements.
  • .NET Core 3.0 (September 2019.): performance improvements, C# 8.0 new features, implements .NET Standard 2.1. Windows Desktop supports .NET Core for Windows Forms and WPF.

.NET Ecosystem: An Overview

Currently, the .NET Ecosystem consists of different components in the development platform. It encompasses different runtimes, such as:

  • .NET Framework (WPF, Windows Forms, ASP.NET) – Windows centric.
  • .NET Core (ASP.NET Core, Universal Windows Platform – UWP) – Cross-platform, works side-by-side with other versions.
  • Mono for Xamarin (IOS, OS X, Android) – Cross-platform.

All of the above runtimes implement the .NET Standard Library, which is a specification of .NET APIs that have implementations for each runtime. So, code that is created for one runtime can be executed with other runtimes.

All the runtimes use tools and infrastructure to compile and run code. This includes languages (C#, Visual Basic), compilers (Roslyn), garbage collection, as well as build tools like MS Build, or (Core) CLR.

.NET ecosystem

.NET Runtimes

In this section we will look at main .NET runtimes:

.NET Framework

.NET Framework is a software development framework for building and running applications on Windows. It is partly open-sourced at here. The .NET Framework consists of Common Language Runtime (CLR), .NET Framework Class library, and Application workloads (WPF, Windows Forms and ASP.NET). CLR is part of common infrastructure that can run code, jit, do garbage collection (C#, VB.NET, F#), etc. 

Code that is managed by CLR is called managed code. Code is compiled into Common Intermediate Language (CIL) and stored in assemblies (with .exe or .dll extension). When the application runs, CLR takes assembly and uses just-in-time compiler (JIT) to transpile machine code into code that can run on a specific computer architecture.

language transpilation

.NET framework library contains classes, interfaces and types that provide capabilities, such as string, file system support, etc. It allows users to create different types of applications, such as: console applications or Windows Forms, Windows Communication Foundation (WCF), Windows Workflow Foundation (WF), Windows Presentation Foundation (WPF), ASP.NET (Forms, Web API), Azure (WebJobs, Cloud Services). Most of those are specific to Windows platforms and use Windows API, so they work only on Windows platform.

If you want to run applications that are built by using .NET Framework, you need to install it first, although Windows already comes with some versions installed. Each version has the CLR and library. It is possible to install multiple versions, side-by-side (only major versions). Minor versions will override existing versions, as they don’t contain braking changes. For example, for .NET 4.2.3: the major version is 4 (new CLR), 2 minor version means (new library, which introduces new features), and 3 revision (bug fixes).

.NET Framework is installed usually at C:WindowsMicrosoft.NETFramework (or Framework64). Inside, you will find folders with all major versions installed.

.NET Core

.NET Core is one of the runtimes in the .NET Ecosystem. It was released in 2016 and open-sourced (https://github.com/dotnet/core). It does not represent a new version of the .NET Framework and will not replace it. It’s completely independent built to allow cross-platform capabilities to application development. .NET Core consists of the App Host (dotnet.exe) that runs CLR and Library. It has Common language runtimes (CoreCLR) and the .NET Core Class Library.

CoreCLR uses JIT Compilation and garbage collection to run code. It supports C#, VB.NET, and F#. .NET Core has .NET Core Class Library, which includes classes that provides different capabilities, and it’s a smaller subset of .NET Framework library. It supports different types of application workloads, such as ASP.NET Core (MVC and API), console applications and UWP (currently). UWP provides a common type system, APIs, and application model for all devices running on Windows 10. From the .NET Core 3.0 SDK, it includes support for Windows Forms applications, including Windows Forms Designer.

.NET Core can run on different platforms: Windows Client, Server, IoT, Linux, Ubnutu, FreeBSD, Tizen, Mac OSX and can be installed side-by-side of different versions, per machine or user.

.NET Core is installed in C:Program Filesdotnetshared Microsoft.NETCore.App[versions], which live side-by-side.

In addition, its possible to create self-contained version, which don’t need installed .NET core on the host machine, as it packs app host in the resulting .exe file. The disadvantage is that the the deployment will be larger. It is run via:

Mono For Xamarin

Mono is a clone of .NET framework runtime. Mono was created in 2001, but the specific part for Xamarin was released in 2011. and its open source: https://github.com/mono/mono and www.mono-project.com. Microsoft acquired Xamarin in 2016., making it a fully open-source branch of the .NET platform. It consists of Mono runtime and Xamarin Class Library and can run application workloads like IOS, OS X and Android.

Mono is similar to .NET Core and includes Garbage collection, JIT, AOT and full support for C# (not VB.NET and F#). The Mono AOT compiler enables .NET code to be built into a single native code executable that can run on a machine, much like C++ code. Mono for Xamarin has a class library that support creating applications (for IO, collections, etc). But its a subset of .NET framework, there are not all components supported.

It can run following workloads: Apple IOS applications, MAC OS X applications (desktop), Android applications, etc. and allows you to share code between these platforms and they run as native applications on devices that run on Mono. Each application is bundled with the Mono runtime and a class library. There is no need to install Mono on a device.

Over time, it branched out into wider areas, such as game development, where Unity and Mono for Xamarin have long worked together to provide C# support in Unity.

Other Frameworks: .NET Compact Framework and .NET Micro Framework

These are specific frameworks with a specific purpose. Both runtime were attempts to provide cut-down runtimes that would run on more constrained devices, such as PDAs, mobile phones factory controllers, etc. For example, .NET Micro Framework was build for resource-constrained devices with at least 256KB of flash and 64KB of RAM memory.

Silverlight

Silverlight was a popular cross-platform, .NET technology that enabled building rich media experiences for browsers. It was released on 2007 and had multiple capabilities, such as playing videos, download medias, creating rich UI and animations, etc. In 2015. Microsoft decided to stop supporting Silverlight in October 2021.

Community Projects

Besides Microsoft official runtimes, there are .NET runtimes made by community, such as DotGNU Portable.NET, DotNetAnywhere, CosmosOS and CrossNet. All of them have a slighty different approach to build such a framework.

.NET Standard

As different runtimes uses different class libraries, e.g. .NET Framework uses .NET Framework class library, while .NET Core contains its own class library, as well as Xamarin with its own class library. In this way its hard to share code between different runtimes, as they don’t use the same APIs. Microsoft solution to this is .NET Standard library, released in 2016. It represent set of (formal) specifications that say which APIs you can use and its implemented by all runtimes. It is evolution of Portable Class Libraries (PCL). Specific runtimes implement specific version of .NET Standard (implementing specific set of APIs). E.g., .NET Framework 4.6.1 implements .NET Standard 2.0 (link).

.NET ecosystem

The differences between .NET Standard and Portable Class Libraries (which is library that can be used on different platforms).

  • .NET Standard represent set of API defined by Microsoft, while PCL is using API dependent on platform which is chosen.
  • .NET Standard is platform agnostic, while PCL can target limited set of platforms.

Each version of .NET Standard has set of APIs (e.g. System.Drawing) and it include all APIs of previous version, so its backward compatible. Specific .NET runtime versions implement specific .NET Standard versions. Lower versions of .NET Standard cover more platforms, which means that you should always target the lowest version possible.

.NET ecosystem versioning

Tools

.NET Framework Tooling

For the .NET Framework tooling, use MSBuild, which is invoked when code is built in Visual Studio, or it can be called from a command line. MSBuild knows how to build or who should compile them. If the code is C#/VB.NET, it will call the .NET Compiler Platform (Roslyn). The result of compilation is a binary file (.EXE or .DLL) with intermediate language (IL). It can be interpreted by CLR. CLR contains a JIT-compiler, which compiles to native code, which OS understands. CLR has tools like Garbage Collector to clean memory when not needed.

.NET Core Tooling

MSBuild is also used in .NET Core tooling, as well as .NET Compiler Platform (Roslyn). It produces binaries (.EXE, .DLL) with intermediate language (IL), which is used by the Core Common Language Runtime (CoreCLR). CoreCLR is different from .NET Framwork CLR, as it can run on multiple frameworks. It has JIT-Compiler that can compile IL into native code for Windows, MacOS, and Linux.

There is another path to compile apps. When UWP is compiled, it’s compiled with AOT-Compiled (.NET Native), which produced Native code from IL and produced code as deployable package instead of compiling at runtime, which has performance benefit.

CoreCLR and Native Code is loaded by app host process (dotnet.exe).

Mono for Xamarin Tooling

MSBuild is used again to run build processes but only for files in C#. If there are C# code for Android, its compiled via Xamarin Compiler and compiled for Android platform (IL). Then Mono Runtime, which as JIT-Compiler, takes IL and produces Native code specific for that Android device on demand at runtime. It has also runtime services such as Garbage Collector.

If we have C# code for IOS, its compiled via Xamarin Compiler, who pre-compile and produce package native for IOS (uses ARM Assembly language).

As a side note on Xamarin, it also has different competitors, such as Uno Platform and Avalonia UI. There is also a new kid in the block from Microsoft, called Blazor. All of these tools mainly uses WebAssembly (WASM) in combination with C# and XAML or JavaScript to allow developers to deploy apps in the browser, but also on different devices.

Visual Studio IDE

Visual Studio is a Microsoft IDE used for building, debugging, and publishing applications across all platforms, including Android and iOS. Visual Studio is integrated with .NET and provides the features of language-specific environment.

Visual Studio can be run on Windows and Mac. There is a free community version to be used.

Visual Studio community version

Libraries

There are different kinds of libraries that can be used in the .NET ecosystem, most of which can be found as NuGet packages. NuGet is a package manager build for .NET that contains more than 90,000 packages.

Languages

Different kinds of .NET applications can be written in C#, F# or Visual Basic.

C# is a simple, modern, object-oriented programming language, whose roots are in the C family of languages. The current version is 8.0 and is supported on .NET Core 3.x and .NET Standard 2.1. More on C# here.

F# is a cross-platform, open-source, functional programming language for .NET. More about F# here.

Visual Basic is traditional programming language from Microsoft kitchen with simple syntax for building type-safe, object-oriented applications. More on Visual Basic here.

Usage

The question is when to use each of the runtimes. This is a suggestion:

  • .NET Frameworkshould be used to:
    • build Forms applications.
    • that cannot run cross-platform (Windows).
  • .NET Coreshould be used if:
    • build high performance applications with small footprint.
    • that run cross-platform.
  • Mono for Xamarinshould be used:
    • build mobile applications that utilize native features and cross-platform.

If you use .NET Core you can use framework-dependent applications or self-contained applications. Use Framework-dependent if no target os is needed, you need small deployment (installed on machine). But for self-contained app there is control over version and .NET Core doesn’t need to be installed, but the deployment is larger and need to select target OS.

If we choose between ASP.NET or ASP.NET Core, ASP.NET is much older technology that runs only on Windows, but it has large set of capatibilites and features. ASP.NET Core can be run cross-platform and its designed for high-performance and can run self-contained. It has less capatibilites and 3rd party libraries than ASP.NET. No ASP.NET Forms.

Regarding the usage of sharing code, we need to check first do we need it. If yes, we should use .NET Standard library. If no, than we share code between applications in the same runtime, then we can use library with that specific runtime. This enabled runtime specific features not available in .NET Standard.

Look to the Future

At the Microsoft Build 2019. conference, it is announced that .NET Core and .NET Framework will be unified in .NET 5. There will be only one .NET to target different platforms, such as: Windows, Linux, macOS, iOS, Android, etc. It will consists of new .NET APIs, runtime capatibilities and language features. One of the main topics for .NET 5 will be performance improvements over previous versions of .NET, as well as improvements to RyuJIT code quality, garbage collection, and JSON serialization. Release plan for .NET 5 is that it will ship in November 2020.

.NET a unified platform

In addition, this year its announced that there will be a new first-class UI framework for creating cross-platform applications, called .NET MAUI. It will be evolution of Xamarin.Forms and will simplify developer workflow and a project structure into a single project to target multiple platforms. Geberal availability of the .NE MAUI will be with .NET 6 in November of 2021.

In 2018. Microsoft also introduced the ML.NET framework for C# and F# languages. So, looking at the latest trends, including Azure as one of the main Cloud platforms, future for the Microsoft-developer world is looking great. With open source and cross-platform as key priorities seems like a right direction in the years to follow.

Useful Links

.NET Guide – the general documentation by Microsoft for newbies;

.NET Core Guide – for those considering transitioning to the Core version;

.NET Framework – the original .NET documentation;

Xamarin – documentation for mobile development;

.NET Foundation – .NET open-source community;

NuGet – the place to find all .NET packages.

.NET Core and Framework – download it here.

.NET Developer Community – developer community and support with links to social media, forums, blogs, live workshops, and organizations like .NET foundation.



Source link

Halfmoon: A Bootstrap Alternative with Dark Mode Built In
Strategy

Halfmoon: A Bootstrap Alternative with Dark Mode Built In


I recently launched the first production version of Halfmoon, a front-end framework that I have been building for the last few months. This is a short introductory post about what the framework is, and why I decided to build it.

The elevator pitch

Halfmoon is a front-end framework with a few interesting things going for it:

  • Dark mode built right in: Creating a dark mode version of a site is baked in and a snap.
  • Modular components: A lot of consideration has gone into making modular components — such as forms, navbars, sidebars, dropdowns, toasts, shortcuts, etc. — that can be used anywhere to make layouts, even complex ones like dashboards.
  • JavaScript is optional: Many of the components found in Halfmoon are built to work without JavaScript. However, the framework still comes with a powerful JavaScript library with no extra dependencies.
  • All the CSS classes you need: The class names should be instantly familiar to anyone who has used Bootstrap because that was the inspiration.
  • Cross-browser compatibility: Halfmoon fully supports nearly every browser under the sun, including really old ones like Internet Explorer 11.
  • Easily customizable: Halfmoon uses custom CSS properties for things like colors and layouts, making it extremely easy to customize things to your liking, even without a CSS preprocessor.

In many ways, you can think of Halfmoon as Bootstrap with an integrated dark mode implementation. It uses a lot of Bootstrap’s components with slightly altered markup in many cases.

OK, great, but why this framework?

Whenever a new framework is introduced, the same question is inevitably pops up: Why did you actually build this? The answer is that I freaking love dark modes and themes. Tools that come with both a light and a dark mode (along with a toggle switch) are my favorite because I feel that being able to change a theme on a whim makes me less likely to get bored looking at it for hours. I sometimes read in dim lighting conditions (pray for my eyes), and dark modes are significantly more comfortable in that type of situation. 

Anyway, a few months ago, I wanted to build a simple tool for myself that makes dark mode implementation easy for a dashboard project I was working on. After doing some research, I concluded that I had only two viable options: either pickup a JavaScript-based component library for a front-end framework — like Vuetify for Vue — or shell out some cash for a premium dark theme for Bootstrap (and I did not like the look of the free ones). I did not want to use a component library because I like building simple server-rendered websites using Django. That’s just my cup of tea. Therefore, I built what I needed: a free, good-looking front-end framework that’s along the same lines as Bootstrap, but includes equally good-looking light and dark themes out of the box.

Future plans

I just wanted to share Halfmoon with you to let you know that it exists and is freely available if you happen to be looking for an extensible framework in the same vein as Bootstrap that prioritizes dark mode in the implementation.

And, as you might imagine, I’m still working on Halfmoon. In fact I have plenty of enhancements in mind:

  • More components
  • More customization options (using CSS variables)
  • More examples and templates
  • Better tooling
  • Improved accessibility examples in the docs
  • Vanilla JavaScript implementations of useful components, such as custom multi-select (think Select2, only without jQuery), data tables and form validators, among other things.

In short, the plan is to build a framework that is really useful when it comes to building complex dashboards, but is still great for building any website. The documentation for the framework can be found on the project’s website. The code is all open-source and licensed under MIT. You can also follow the project on GitHub. I’d love for you to check it out, leave feedback, open issues, or even contribute to it.



Source link

r/graphic_design - A School Schedule
Strategy

A School Schedule : graphic_design


I’m a teacher that has been tasked with creating a visual of our schedule for the students to better help them sort of visualize their week with the importance being on reiterating that they see their teachers 1-2 times a week but have work to do that entire week.

This is what I came up with, but I was having a tough time really visualizing it. I’m definitely not a graphic designer, but I feel like there is probably a better way.

The “ABC” is obviously a placeholder, and I’m waiting to see how they are going to determine lunch (it’s usually set by which building you’re in, but they added a lunch and don’t know how they’re doing it yet).

The other side will be the same except with the Week 2 schedule, which is the same except they have in-person classes on Friday.

The B Schedule kids have the same thing just flipped. Virtual M/W, in-person T/Th, and every other Friday in-person.

Any suggestions?

r/graphic_design - A School Schedule



Source link

r/web_design - Help me with CSS styling
Strategy

Help me with CSS styling : web_design


first of all i’m not good enough with English

I started to learn html and css two week ago and finally made my first test html. look at the picture below i placed all of the title of pics to where they should be but third pic from left went a little to left

what’s the problem?

r/web_design - Help me with CSS styling

Here is my html and css

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">  
    <title>Celeber</title>
    <style>
      #container{
        display: flex;
        flex-flow: row wrap;
      }

      .actress {
        background: #f6f7fb;
        padding: 18px;
        margin: 18px;
      }
    </style>
      <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Heebo:wght@850&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@900&display=swap" rel="stylesheet">
      
      <link rel="stylesheet" href="style.css">
      
  </head>
  <body>
   <header>
       <a href="index.html"><h1>CELEBER</h1></a>
    <h5 class="subject">Only high quality photos of celebrities</h5>
    <hr>
    <h5 class="asm">ACTRESS SINGER MODEL</h5>
   </header>
  
      
      <main id="container">
        <div class="actress"
             style="position: relative">
          <img src="imgs/natalie.jpg" alt="natalie">
            <h2 class="title" id="position">Natalie Portman</h2>
            </div></a>
          
        <div class="actress" style="position: relative">
          <img src="imgs/christina.jpg" alt="natalie">
            <h2 class="title" id="position">Christina Aguilera</h2>
        </div>
          
        <div class="actress" style="position: relative">
           <img src="imgs/alexis.jpg" alt="alexis">
            <h2 class="title" id="position" class="title">Alexis Bledel</h2>
        </div>
          
        <div class="actress" style="position: relative">
           <img src="imgs/kelley.jpg" alt="kelly">
            <h2 class="title" id="position" class="title">Nathalie Kelley</h2>
        </div>
          
          <div class="actress" style="position: relative">
          <img src="imgs/christina.jpg" alt="natalie">
            <h2 class="title" id="position">Christina Aguilera</h2>
        </div>
          
        <div class="actress" style="position: relative">
           <img src="imgs/alexis.jpg" alt="alexis">
            <h2 class="title" id="position" class="title">Alexis Bledel</h2>
        </div>
          
        <div class="actress" style="position: relative">
           <img src="imgs/kelley.jpg" alt="kelly">
            <h2 class="title" id="position" class="title">Nathalie Kelley</h2>
        </div>
          
          <div class="actress" style="position: relative">
          <img src="imgs/christina.jpg" alt="natalie">
            <h2 class="title" id="position">Christina Aguilera</h2>
        </div>
          
        <div class="actress" style="position: relative">
           <img src="imgs/alexis.jpg" alt="alexis">
            <h2 class="title" id="position" class="title">Alexis Bledel</h2>
        </div>
          
      </main>
      
   <footer>
    <h5 class="copy">2020 &copy; celeber.ru</h5>
   </footer>
  </body>
</html>

CSS

html {
    background: #ffffff;
    margin: 0px;
    padding: 0px;
}

body {
    margin: 0px;
    color: #4c4c4c
}

header {
    background: #ffffff;
    max-width: 2000px;
    max-height: 2000px;
    margin: auto;
    text-align: center;    
}

main {
    background: #f6f7fb
}

.copy {

  font-family: nexa light;
    text-align: center;
}

footer {
    background: #333333;
    color: #ffffff;
    margin: 0px;
    padding: 20px;
}

h1 {
    font-family: 'Josefin Sans', sans-serif;
    margin: auto;
    padding: 0px;
    margin: 20px
}

.asm {
    font-family: 'Josefin Sans', sans-serif;
    padding: 10px;
    margin: 10px    
}

.subject {
    font-family: 'Comfortaa', cursive;
    color: #9d9d9d;
}

.title {
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
}

#position {
position: absolute;
top:335px;
left: 110px;    
margin: 0px;
padding: 0px;
}

a {
text-decoration: none;
color: inherit
}

a:hover {
color: #01ff85;
}



Source link

System UIcons
Strategy

System UIcons


This is a great collection of icons by Corey Ginnivan that’s both free and with no attribution required when you use them. The style is super simple. Each icon looks like older versions of the icons from macOS to me because they’re cute but not too cute.

Also? The icon picker UI is slick and looks something like this today:

Oh and also, as I was looking around Corey’s personal site I noticed this lovely UI effect when you scroll —each card stacks on top of each other:

Direct Link to ArticlePermalink


The post System UIcons appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.



Source link