Web projects use system default fonts if we don’t speficy fonts to them. Therefore, same project may look different depends on system or browser. My prefered way to add custom fonts to site is using google fonts. One of my all time favarite fonts is Inter, it looks pleased in all screens.
Unsurprisingly, I came across same problem as my previous post about adding fontawesome icons to nextjs project when I tried to add google fonts to my nextjs project.
Using icons is common for building UI in web development. While my favorite icon library heroicons has a bunch of easy to use svg icons, Font Awesome free version provides loads more icons as a supplement. I am heavily using nextjs to build my frontend projects recently, unlike react or vue projects that have an index.html file we can import fontawesome as a stylesheet from cndjs. Nextjs doesn’t have a root template html file.
Today I registered nextjs conf and received a digital ticket. It is visually appealing. Visual design is my weak point and I am starting to learn and use CSS more often. As I am getting confident and confortable to use CSS for building any kind of UI conponents. I’ve got a pulse to make a replica of this ticket using tailwind CSS. Unfortunately, I failed to do so eventually.
Why validate props in React React props, which stands for “properties”, are read-only object being send from one component to another. Since Javascript is a dynamic language and doen’t have a built-in type checking solution, a component doen’t know props sent to it has correct type as it designed for. This can lead to bugs, or even worse, unexpected behaviors in a react app.
Many developers turned to TypeScript because it is a superset of Javascript and more important, it is strong typed.
Today I learned that the proper way to reference favicon(and other local resources in HTML):
<link rel="icon" href="/favicon.ico" >
I used to use <link rel="icon" href="favicon.ico" > to reference favicon for my websites, and that caused favicon only showed up on my homepage instead of all pages.
The difference:
<img src=“myfile.png” />: The browser treats resouces path as relative path, and loaded from current folder. <img src="/myfile.png" />: This is an absolute path and starts from root directory.
I am intensively using tailwind css for my frontend projects recently. Here I am recording a bunch of widgets that I created in my projects and thought will be refered to in the furture.
Tooltip The main part is just a rounded div block The tip is a div rotated 45 degree so that only a triangle tip showed up 1 2 3 4 5 6 7 <div class="mt-6 flex justify-center items-center"> <div class="h-16 w-32 rounded-lg bg-indigo-500 relative"> <div class="absolute -bottom-2 left-6 h-0 w-0 border-8 border-indigo-500 transform rotate-45"> </div> </div> </div> Search form No border style: use apperance-none and focus:outline-none Use border-b-2 for border line 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div className="max-w-sm rounded my-10 mx-auto"> <form className="w-full max-w-sm"> <div className="flex items-center border-b-2 border-gray-500 py-2"> <input className="appearance-none bg-transparent border-none w-full font-medium text-lg text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none" type="text" placeholder="Search Image.
Django ships with a built-in User model for authentication and it is good enough for most common cases. However, according to Django docs, the best practice is always use a custom user model for all new django projects.
Why to use cutom user model Convenience: django default Usermodel uses username as identifier to login. A custom user model makes logging with email possible thus improves user experience a little bit better.