Post image

How to add the Logo on navigation Bar? : webdev

Hey Guys I want to place that logo(png) on the upside with the navigation bar how can i do that?

Please Help

<!DOCTYPE html>



<title>UnBillIt: Transform Your Bills</title>


margin: 0;





width: 100%;

background-color: black;


float: left;



padding: 0;

margin: 0 0 0 150px;

list-style: none;



float: right;


.logo img{

position: absolute;

margin: 0;

width: 300px;

height: auto;


nav a {

width: 100px;

display: block;

padding: 50px 25px;

text-decoration: none;

font-family: Aerial;

color: #f2f2f2;

text-align: center;

font-size: 28px;


nav a:hover {

background-color: purple;

text-transform: capitalize;

transition: 0.5s;





<div class= "logo"><a href="#"><img src= "jolly.png" ></a>




		<li><a href="#">Home</a></li>

		<li><a href="#">Services</a></li>

		<li><a href="#">About</a></li>

<li><a href=”#”>Contact</a></li>

<li><a href=”#”>User</a></li>




Post image

Source link

An Introduction to MDXJS | CSS-Tricks

An Introduction to MDXJS | CSS-Tricks

Markdown has traditionally been a favorite format for programmers to write documentation. It’s simple enough for almost everyone to learn and adapt to while making it easy to format and style content. It was so popular that commands from Markdown have been used in chat applications like Slack and Whatsapp as document applications, like Dropbox Paper and Notion. When GitHub introduced Markdown support for README documentation, they also rendered HTML content from it — so, for example, we could drop in some link and image elements and they would render just fine.

Even though Markdown isn’t broken by any stretch of the imagination, there’s always room for improvement. This is where Markdown Extended (MDX) comes in.

When would we consider MDX over Markdown? One thing about MDX is that JavaScript can be integrated into cases where normal Markdown is used. Here are few examples that illustrate how handy that is:

  • Frontend Armory uses MDX on its education playground, Demoboard. The playground supports MDX natively to create pages that serve both as demo and documentation, which is super ideal for demonstrating React concepts and components..
  • Brent Jackson has a brand new way of building websites pairing MDX and Styled System. Each page is written in MDX and Styled System styles the blocks. It’s currently in development, but you can find more details on the website.
  • Using mdx-deck or Spectacle could make your next presentation more interesting. You can show demos directly in your deck without switching screens!
  • MDX Go, ok-mdx and Docz all provide tools for documenting component libraries in MDX. You can drop components right in the documentation with Markdown and it will just work™.
  • Some sites, including Zeit Now and Prisma docs, use MDX to write content.

MDX shines in cases where you want to maintain a React-based blog. Using it means you no longer have to create custom React component pages when you want to do something impossible in Markdown (or create a plugin). I have been using it on my blog for over a year and have been loving the experience One of my favorite projects so far is a React component I call Playground that can be used to demo small HTML/CSS/JavaScript snippets while  allowing users to edit the code. Sure, I could have used some third-party service and embed demos with it, but this way I don’t have to load third party scripts at all.

Speaking of embedding, MDX makes it so easy to embed iFrames created by third-party services, say YouTube, Vimeo, Giphy, etc.

Use it alongside Markdown

You’ll know a file is written in MDX because it has an .mdx extension on the filename. But let’s check out what it looks like to actually write something in MDX.

import InteractiveChart from "../path/interactive-chart";

# Hello - I'm a Markdown heading

This is just markdown text

<InteractiveChart />

See that? It’s still possible to use Markdown and we can write it alongside React components when we want interactive visualizations or styling. Here is an example from my portfolio:

Another benefit of MDX is that, just like components, the files are composable. This means that pages can be split into multiple chunks and reused, rendering them all at once.

import Header from "./path/Header.mdx"
import Footer from "./path/Footer.mdx"

<Header />

# Here goes the actual content.

Some random content goes [here](link text)

<Footer />

Implementing MDX into apps

There are MDX plugins for most of the common React based integration platforms, like Gatsby and Next

To integrate it in a create-react-app project, MDX provides a Babel Macro that can be imported into the app:

import { importMDX } from './mdx.macro'
const MyDocument = React.lazy(() => importMDX('./my-document.mdx'))
  <React.Suspense fallback={<div>Loading...</div>}>
    <MyDocument />

You can also try out MDX on the playground they created for it.

MDX contributors are very actively working on bringing support for Vue. A sample is already available on GitHub. This is though in Alpha and not ready for production.

Editor support

Syntax highlighting and autocomplete have both been increasing support for VS CodeVim, and Sublime Text. However,in use, these do have some sharp edges and are difficult to navigate. A lot of these come from the inability to predict whether we are going for JavaScript or Markdown within the context of a page. That’s something that certainly can be improved.

MDX plugins and extensions

A key advantage of MDX is that it is part of the unified consortium for content that organizes remark content. This means that MDX can directly support the vast ecosystem of remark plugins and rehype plugins — there’s no need to reinvent the wheel. Some of these plugins, including remark-images and remark-redact, are remarkable to say the least. To use a plugin with MDX, you can add them to them to your corresponding  loader or plugin. You can even write your own MDX plugins by referring to the MDX Guide for creating plugins.

MDX is only a few years old but its influence has been growing in the content space. From writing blog posts and visualizing data to creating interactive demos and decks, MDX is well suited for many uses — well beyond what we have covered here in this introduction.

Source link

Clowiz CodeGen

iOS Spring Boot Code Generation in One Minute With Clowiz

With the current trends in the software development field, agility and faster delivery of software applications have become an essential part of the IT industry. In fact, this has been one of the main reasons for the evolution of many of the modern technologies and trends, such as single-page applications, lightweight frameworks, and microservices architecture.

Even with the massive improvements in the technologies, IDEs, and tools, developers still write much code to get the job done. To increase software developers’ productivity and to reduce the cost of software development, the Clowiz platform has been created.

Clowiz is a cloud-based platform that enables developers to generate software artifacts (using CodeGen), end-to-end features (using FeatureGen), and full end-to-end apps (using AppGen) without writing a single line of code. 

In this article, we are going to:

  1. Create and set up the following projects:
    • iOS Swift App
    • Spring Boot Rest API
  2. Generate app artifacts using Clowiz:
    • Generate and use the following artifacts in the iOS App:
      • List ViewController
      • Add/Edit ViewController
      • List View
      • Add/Edit View
      • Model 
      • Alamofire Sevice
    • Generate and use the following artifacts in the Spring Boot App:
      • JPA Repository
      • Entity
      • Rest API Controller
  3. Run and test the project

Create iOS Swift App

Using XCode:

  • Create a new iOS Storyboard project with a Single View App.
  • Add Alamofire POD to the project. (How to add Alamofire to xCode,  Alamofire latest version)
  • Delete the “Main.storyboard” file and its references from the “Info.plist” file. (Create project without storyboard)
  • Rename the file “ViewController.swift” to “TabBarVC.swift”. 
  • Change the class name to TabBarVC.
  • Change the rootViewCntroller to a to our TabBarVC by replacing the scene function in the SceneDelegate.swift file with the following:
  • Create a new subclass of UIViewController and call it “HomeVC.swift” with the following content:
  • Add UINavigationController to your tabs in the TabBarVC class.

Running the app displays the TabBar and an empty Home navigation page, now we can extend the app and add more functionalities to it.

Generate iOS Artifacts

To boost the development process, use the CodeGen feature from Clowiz to generate the project artifacts source code in one minute for both applications.

Clowiz CodeGen

To generate the artifacts for both applications, iOS, and Spring Boot:
  1. Go to Clowiz, then navigate to CodeGen
  2. From the technologies, choose iOS.
  3. In the metadata section, name your artifacts, e.g., Employee.
  4. For the first field, in the field name, type Name and keep is as Text.
  5. Create two more fields, e.g., Email and Salary, with data types of email and double.
  6. Check all fields as required. 

CodeGen has generated the following artifacts for the project:


Cell View: represents the data in each table row: 


Add Edit View: holds the input fields(name, email, salary input fields) and their labels.

Add Edit VC: used to add and edit data.

List VC: used to list and delete data. 

Service: service layer that uses Alamofire to handle the API requests.

Now let’s add the generated code to the project, you can press on Download Generated Code under the generated code section in CodeGen, then add the downloaded files to the project app folder, or you can copy-paste the generated code to the project. (Please note the file name should match the class name with .swift extension)

Add the EmployeeListViewController to a navigation bar in the TabBar class.

To keep the project simple and easy to maintain, divide it into groups (AddView, AddViewController, CellView, ListViewController, Model, Service).

To run the app, use one of the simulators provided, and press run.

Running the application displays the two tab items Home and Employee. The Employee tab contains a table to list all the employees, search bar,  and a button to add a new employee.

As soon as you access the Employee tab, you get a Network error because we still don’t have an API to handle the requests.

API requests

Create Spring Boot Rest API

Spring Boot reduces lots of development time and increases productivity. It avoids writing lots of boilerplate Codes, Annotations, and XML Configuration, however, just to get started, a lot of code is needed, but don’t worry, Clowiz supports Spring Boot, and can generate the code for our API in a minute.


Create a new Spring Boot project using Spring Initializr:

  1. Leave the default settings as Maven Project, Java, and the version.
  2. In the Group field type:
  3. In the Artifact field type: iosBackend
  4. From the Options, change the package name to
  5. Search and add the following dependencies:
    • Spring web
    • Spring Data JPA
    • MySQL Driver
  6. Press on Generate to download the project.

Using any eclipse based IDE:

  1. Import the downloaded project. (File -> Import -> Existing Maven Project)
  2. Add the following to the “” file in the “src/main/resources package”.

We don’t have to create a database manually; Spring JPA does that automatically, note the parameter  createDatabaseIfNotExist = true in the database URL.

Generate Spring Boot Artifacts

Back to Clowiz, press on the Spring Boot icon in the technologies section to generate the needed source code for the API.

For this tutorial, use the following generated artifacts:

Hibernate JPA Entity (The model).

SpringData Service.

Mature Spring RestController.

As we did in the iOS project, copy-paste the generated code to the right packages with the correct classes names, or you can download it by pressing Download Generated Code.

To keep the project simple and easy to maintain, divide it into packages (controllers, models, repositories).

Check that the URL in the iOS Service class matches with the Spring Boot properties file server IP.

To run the project, open the class, right-click and Run As Java Application.

You can test it using any tool like Postman, or using any browser, visit: this should return an empty list [] as we don’t have any data in the database.

Running the App

After running the Spring Boot API, rerun the iOS project.

  1. Go to the Employee tab
  2. Press on the Add button
  3. Fill in Employee data
  4. Press on save
  5. Tap on a row to edit it
  6. Swipe a row to delete it

failure message

Source link

Post image

Twitter brand guideline colors too different from the actual…

Hey guys, So i was having a look at the twitter brand guidelines when I noticed on page 8, the color scheme has been provided but the colors don’t match the actual pantone colors at all.

They have mentioned they use Pantone Black 7 C as their main secondary color. It looks like this on the website:

Post image

Pantone 2383 C and Pantone Black 7 C with a bunch of Cool Grays

Tbh it doesn’t even look like the screenshot I added above, on my screen. It looks more vivid to me but the screenshot looks more dull. Could be my color settings but whatever. Point is, the black that they used (Pantone Black 7 C) looks NOTHING like this. On my screen (In RGB mode in Illustrator)

This is the diff.

Post image

Left: Guide Colors, Right: My Software

I can’t understand why the difference is so high. I even checked the Pantone website and when I search for the color, the thumbnail looks dark but when I click it, it becomes grey again.

I’m scratching my head trying to figure this out.

Post image


Post image

Color Page

I would love it if someone could explain to me the reason this is happening. I’m so confused. Thanks in advance 🙂

Source link