# data[].attributes.body
Genera placeholders

# data[].attributes.attachment_link.title
CSS Overview: Identify potential CSS improvements - Chrome Developers

# data[].attributes.attachment_link.description
Identify potential CSS improvements with the CSS Overview panel.

# data[].attributes.headline
Paletas de colores, generación, edición, mixing, etc.

# data[].attributes.subject
Paletas de colores, generación, edición, mixing, etc.

# data[].attributes.attachment_link.description
A free color mixer, blender, info and modifier tool. Mix multiple colors, get links for design inspiration and stock images based on a color, view various color combinations and modify colors in an intuitive.

# data[].attributes.attachment_link.readable_text
Squarespace es un sistema integral de gestión de contenidos (CMS, por sus siglas en inglés). Con una única suscripción, puedes crear un sitio web, alojar contenidos, registrar un nombre de dominio personalizado, vender productos, acceder a las métricas de tu sitio y mucho más.

Comienza con cualquier plantilla para crear páginas y organizar tu sitio, y luego personalízalo para que refleje tu estilo.

Para ver todas las funciones disponibles, mira nuestra lista de funciones y visita el Centro de ayuda para ver guías sobre las diversas funciones de Squarespace.

# data[].attributes.attachment_link.title
Crear página web - Diseño de páginas web - Squarespace

# data[].attributes.attachment_link.description
Squarespace es un sistema integral de gestión de contenidos (CMS, por sus siglas en inglés). Con una única suscripción, puedes crear un sitio web, alojar contenidos, registrar un nombre de dominio personalizado, vender productos, acceder a las métricas de tu sitio y mucho más.

# data[].attributes.attachment_link.title
2,000+ Webflow HTML website templates | Webflow

# data[].attributes.attachment_link.description
Browse over 2,000 of the best business, portfolio, and blog HTML website templates that are fully customizable with Webflow's no code web design tools.

# data[].attributes.attachment_link.description
Designs built entirely around forms that can collect emails, gather customer feedback, and even sell stuff (if you're on a Pro Plus plan or higher).

# data[].attributes.attachment_link.readable_text
Looking for the best CSS cheats and snippets? SheCodes CSS Cheatsheets got you covered! We offer the best CSS cheat sheet that covers everything from basic syntax to specific selectors. Our cheat sheet is designed to help you quickly reference the most commonly used CSS techniques for styling HTML elements. Whether you're new to CSS or an experienced developer, our cheat sheet is a valuable resource. Check them out today!

# data[].attributes.attachment_link.description
Looking for the best CSS cheats and snippets? SheCodes CSS Cheatsheets got you covered! We offer the best CSS cheat sheet that covers everything from basic syntax to specific selectors. Our cheat sheet is designed to help you quickly reference the most commonly used CSS techniques for styling HTML elements.

# data[].attributes.attachment_link.title
code2flow - online interactive code to flowchart converter

# data[].attributes.attachment_link.description
Online automatic pseudo code to flowchart generator with plugins for JIRA and Confluence. SVG, PNG and PDF export. Unlimited free trial.

# data[].attributes.attachment_link.title
Curso gratis de ReactJS 2020 con clases en vivo

# data[].attributes.attachment_link.description
Aprende qué es React, crea una aplicación desde cero, crea tus propios hooks y añade infinite scroll y testing con estas clases en vivo gratis.

# data[].attributes.attachment_link.description
Free loaders & spinners for your next project. Built with HTML, CSS and a soupçon of SVG. Available for copypasta or as a tree-shakeable React component library.

# data[].attributes.attachment_link.title
Scrum Fundamentals Certified - SCRUMstudy

# data[].attributes.attachment_link.description
SCRUMstudy's 'Scrum Fundamentals Certified' is a free Online course to understand Scrum framework. Become 'Scrum Fundamentals Certified' and get to know the fundamental essentials of Scrum.

# data[].attributes.attachment_link.readable_text
Who's using Milligram

Check out how people using Milligram to design fast and clean websites

Airform

The Node.js Foundation

Why it's awesome

Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. Hope you enjoy!

Do you want to star it, tweet it, or share it with anyone? So do it! This means a lot to me ♥

Getting Started

There are some ways to get started. First, see all download options available below, then choose the most suitable option for your need. Now you should add the main file of the Milligram and the CSS Reset in the header of your project. Just that!
Download Milligram
Install with Bower
Milligram is available to install using Bower.

$ bower install milligram
Install with npm
Milligram is also available to install using npm.

$ npm install milligram
Install with Yarn
Milligram is also available to install using Yarn.

$ yarn add milligram
What's included
Once downloaded, extract the compressed folder to see the main file in the uncompressed and minified version.

milligram/ ├── dist/ │ ├── milligram.css │ └── milligram.min.css ├── example.html ├── license └── readme.md
Usage
First, use any method mentioned above to download Milligram. Then, just add these tags in the head. Milligram is also available via CDN.

/* Google Fonts */ /* CSS Reset */ /* Milligram CSS */ /* You should properly set the path from the main file. */
CLI
A CLI for getting started with Milligram. It offers a super simple boilerplate project with Milligram.

$ npm install -g milligram-cli

Create a new app using the command milligram init, then install dependencies and run with npm start.

$ milligram init new_app $ cd new_app $ npm start

See more examples of getting started.

Typography

CSS3 introduces a few new units, including the rem unit, which stands for "root em". The rem unit is relative to the font-size of the root element html . That means that we can define a single font size on the root element, and define all rem units to be a percentage of that. The typography has font-size defined in 1.6rem (16px) and line-height in 1.6 (24px). Milligram uses the font-family Roboto, created by Christian Robertson, and provided by Google.

Heading h2 3.6rem (36px)

Heading h3 2.8rem (28px)

Heading h4 2.2rem (22px)

Heading h5 1.8rem (18px)

Heading h6 1.6rem (16px)

/* Base font-size and line-height */
The base type is 1.6rem (16px) over 1.6 line height (24px)
 /* Other elements to text markup */
AnchorEmphasisSmallStrongUnderline /* Default Headings */
Heading


Heading


Heading


Heading


Heading
 /* The base font-size is set at 62.5% for having the convenience of sizing rems in a way that is similar to using px. So basically 1.6rem = 16px. */

See more examples of typography.

Blockquotes

The Blockquote represents a section that is quoted from another source.

Yeah!! Milligram is amazing.

Yeah!! Milligram is amazing.

See more examples of blockquotes.

Buttons

The Button, an essential part of any user experience. Buttons come in three basic styles in Milligram: The button element has flat color by default, whereas .button-outline has a simple outline around, and .button-clear is entirely clear.

/* Default Button */ Default Button /* Outlined Button */Outlined Button /* Clear Button */ /* Easily apply the `.button` class for button style in the anchor element. */

See more examples of buttons.

Lists

The List is a very versatile and common way to display items. Milligram has three types of lists: The unordered list use ul element will be marked with a outline circles, the ordered list use ol element and your items will be marked with numbers, the description list use dl element and your items will not be marking, only spacings.

Unordered list item 1

Unordered list item 2

1. Ordered list item 1

2. Ordered list item 2

Description list item 1

Description list item 1.1

/* Unordered list */


Unordered list item 1


Unordered list item 2


 /* Ordered list */



1. Ordered list item 1


2. Ordered list item 2


 /* Description list */


Description list item 1

Description list item 1.1

 /* Easily change any `dl`, `ul` or an `ol` to get clear lists, number lists or outline circles. */

See more examples of lists.

Forms

The Form has never been exactly fun, and it can be downright painful on a mobile device with its on-screen keyboard. Milligram helps to make this much easier with design focused on the user experience.

 /* Always wrap checkbox and radio inputs in a label and use a `.label-inline` inside of it */

See more examples of forms.

Tables

The Table element represents data in two dimensions or more. We encourage the use of proper formatting with thead and tbody to create a table. The code becomes cleaner without disturbing understanding.

Name

Age

Height

Location

Stephen Curry

27

1,91

Akron, OH

Klay Thompson

25

2,01

Los Angeles, CA

Name

Age

Height

Location



Stephen Curry


27


1,91


Akron, OH






Klay Thompson


25


2,01


Los Angeles, CA



 /* Prior to the creation of CSS, HTML `table` elements were often used as a method for page layout. This usage has been discouraged since HTML4, and the `table` element should not be used for layout purposes. */

See more examples of tables.

Grids

The Grid is a fluid system with a max width of 112.0rem (1120px), that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. Milligram is different than most because of its use of the CSS Flexible Box Layout Module standard. The advantage is the simplicity, and we know that a functional code is very important for maintainability and scalability. Simply add columns you want in a row, and they'll evenly take up the available space. If you want three columns, add three columns, if you want five columns, add five columns. There is no restriction on number of columns, but we advise you to follow a design pattern of grid system. See more tips on best practices in the tips.

.column-50.column-offset-25

/* `.container` is main centered wrapper */




.column column-50 column-offset-25




 /* Every `.column` added inside a `.row` will automatically receive an equal amount of the available area. */

See more examples of grids.

Code

The Code element represents a fragment of computer code. Just wrap anything in a code and it will appear like this. if you need a block, by default, enter the code within the pre element.

.milligram { color: #9b4dca; }

 .milligram { color: #9b4dca; }

See more examples of code.

Utilities

Milligram has some functional classes to improve the performance and productivity everyday.

/* Functional Classes */ /* Clear any float */


/* Float either directions */

See more examples of utilities.

Tips

Tips, techniques, and best practice on using Cascading Style Sheets.
Mobile First
The Mobile First is the design strategy that takes priority development for mobile devices like smartphones and tablets. It means all styles outside of a media queries apply to all devices, then larger screens are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. Milligram use some breakpoints like these:

Larger than Mobile screen: 40.0rem (640px)

Larger than Tablet screen: 80.0rem (1280px)

Larger than Desktop screen: 120.0rem (1920px)

/* Mobile First Media Queries */ /* Base style */ { ... } /* Larger than mobile screen */ @media (min-width: 40.0rem) { ... } /* Larger than tablet screen */ @media (min-width: 80.0rem) { ... } /* Larger than desktop screen */ @media (min-width: 120.0rem) { ... }
Embed Font
Milligram uses the font-family Roboto, created by Christian Robertson, and provided by Google. Customize your projects using Google Fonts. To embed your selected fonts into a webpage, copy this code into the
of your HTML document.
/* Embed Font */ /* Use the following CSS rules to specify these families */
Extending The Inheritances
The style of an element can be defined in several different locations, which interact in a complex way. It is this form of interaction makes CSS powerful, but it can make it confusing and difficult to debug.

/* Extending The Inheritances */ /* Custom color */ .button-black { background-color: black; border-color: black; } .button-black.button-clear, .button-black.button-outline { background-color: transparent; color: black; } .button-black.button-clear { border-color: transparent; } /* Custom size */ .button-small { font-size: .8rem; height: 2.8rem; line-height: 2.8rem; padding: 0 1.5rem; } .button-large { font-size: 1.4rem; height: 4.5rem; line-height: 4.5rem; padding: 0 2rem; }

See more examples of tips.

Browser Support

While not designed for old browsers, Milligram has support for some old versions, but we recommend using the latest versions of their browsers.

Brave latest

Chrome latest

Edge latest

Firefox latest

Opera latest

Safari latest

See more examples of browser support.

Examples

You can view more examples of using Milligram.

Contributing

Want to contribute? Follow these recommendations.

Subscribe to our newsletter

The latest news and resources sent straight to your inbox.

# data[].attributes.attachment_link.description
Check out how people using Milligram to design fast and clean websites Airform The Node.js Foundation Milligram provides a minimal setup of styles for a fast and clean starting point. Just it! Only 2kb gzipped! It's not about a UI framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code.

# data[].attributes.attachment_link.readable_text
Pure is ridiculously tiny. The entire set of modules clocks in at 3.7KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.

* We can add correctly :) the numbers above are individual module sizes; when grouped together they compress (gzip) even more.

# data[].attributes.attachment_link.description
Pure is ridiculously tiny. The entire set of modules clocks in at 3.7KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.

# data[].attributes.attachment_link.readable_text
You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started. In fact, this site is built on Skeleton and has ~200 lines of custom CSS (half of which is the docking navigation).

Love Skeleton and want to Tweet it, share it, or star it? Well, I appreciate that <3

The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.

Type is all set with the rems, so font-sizes and spacial relationships can be responsively sized based on a single <html> font-size property. Out of the box, Skeleton never changes the <html> font-size, but it's there in case you need it for your project. All measurements are still base 10 though so, an <h1> with 5.0remfont-size just means 50px.

Forms are a huge pain, but hopefully these styles make it a bit easier. All inputs, select, and buttons are normalized for a common height cross-browser so inputs can be stacked or placed alongside each other.

Unordered lists have basic styles

They use the circle list style

Nested lists styled to feel right

Can nest either type of list into the other

Just more list items mama san

1. Ordered lists also have basic styles

2. They use the decimal list style

Ordered and unordered can be nested

Can nest either type of list into the other

3. Last list item just for the fun

Code styling is kept basic - just wrap anything in a <code> and it will appear like this. For blocks of code, wrap a <code> with a <pre>.

.some-class { background-color: red; }

Be sure to use properly formed table markup with <thead> and <tbody> when building a table.

Skeleton uses media queries to serve its scalable grid, but also has a list of queries for convenience of styling your site across devices. The queries are mobile-first, meaning they target min-width. Mobile-first queries are how Skeleton's grid is built and is the preferrable method of organizing CSS. It means all styles outside of a query apply to all devices, then larger devices are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS. The sizes for the queries are:

/* Mobile first queries */ /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet */ @media (min-width: 550px) {} /* Larger than tablet */ @media (min-width: 750px) {} /* Larger than desktop */ @media (min-width: 1000px) {} /* Larger than Desktop HD */ @media (min-width: 1200px) {}

Skeleton has a number of small utility classes that act as easy-to-use helpers. Sometimes it's better to use a utility class than create a whole new class just to float an element.

/* Utility Classes */ /* Make element full width */ .u-full-width { width: 100%; box-sizing: border-box; } /* Make sure elements don't run outside containers (great for images in columns) */ .u-max-full-width { max-width: 100%; box-sizing: border-box; } /* Float either direction */ .u-pull-right { float: right; } .u-pull-left { float: left; } /* Clear a float */ .u-cf { content: ""; display: table; clear: both; }

This template is an example of how easy it can be to create a landing page with just the Skeleton grid and a few custom styles. The entire demo is ~150 lines of CSS including comments (most of which is positioning the phones at the top).

More examples will be added to help anyone get started or more familiar with how Skeleton works. The goal is education. If you're more interested in real, live examples of Skeleton sites, I'll be creating a "Built on Skeleton" list soon!

# data[].attributes.attachment_link.description
You should use Skeleton if you're embarking on a smaller project or just don't feel like you need all the utility of larger frameworks. Skeleton only styles a handful of standard HTML elements and includes a grid, but that's often more than enough to get started.

# data[].attributes.attachment_link.title
Pico.css * Minimal CSS Framework for semantic HTML

# data[].attributes.attachment_link.description
Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled. 7.9 kB minified and gzipped!

# data[].attributes.attachment_link.description
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

# data[].attributes.headline
AI de sugerencia de código (tipo Copilot)

# data[].attributes.subject
AI de sugerencia de código (tipo Copilot)

# data[].attributes.attachment_link.title
Tabnine is an AI assistant that speeds up delivery and keeps your code safe | Tabnine

# data[].attributes.attachment_link.description
Tabnine is an AI code assistant that makes you a better developer | Trusted by millions of developers | Supports all programming languages and IDEs

# data[].attributes.attachment_link.readable_text
Take all the sizes from the flex items and add them up. If this total flex basis is less than the parent container, the remaining space will be distributed amongst the items.

The flex-grow attribute is used to determine how the remaining space should be allocated. Think of flex-grow as a mulitplier which will increase the amount of space it will get in the final calculation.

Take all the sizes from the flex items and add them up. If this total flex basis is greater than the parent container, each flex-item will have to reduce it's size to fit.

The flex-shrink attribute determines how much space is given up by the flex-item. Unlike flex-grow, the flex-shrink value controls how much space is given up. Increasing the flex-shrink will reduce the size of the flex-item relative to its siblings.

# data[].attributes.attachment_link.description
Take all the sizes from the flex items and add them up. If this total flex basis is less than the parent container, the remaining space will be distributed amongst the items. The flex-grow attribute is used to determine how the remaining space should be allocated.

# data[].attributes.attachment_link.title
Download for MSN Messenger | Escargot | MSN Messenger and Windows Live Messenger

# data[].attributes.attachment_link.description
Downloads for MSN Messenger clients supported by Escargot along with related extras

# data[].attributes.attachment_link.title
Markdown Cheatsheet · adam-p/markdown-here Wiki

# data[].attributes.attachment_link.description
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

# data[].attributes.attachment_link.title
Online Markdown Editor - Dillinger, the Last Markdown Editor ever.

# data[].attributes.attachment_link.description
Dillinger is an online cloud based HTML5 filled Markdown Editor. Sync with Dropbox, Github, Google Drive or OneDrive. Convert HTML to Markdown. 100% Open Source!

# data[].attributes.attachment_link.readable_text
Artboard_00-FinalFinal-v2
?
Open Source
Browser Design Tools

Welcome!

You've arrived at the "try before you buy" sandbox and playground.
Each artboard is tailor made to provoke your design brain and teach you a feature.

Select
?
Click Me 😏

Keyboard Nav
?

Tab & Shift + Tab traverse laterally

Enter & Shift + Enter traverse lineage

Select Multiple
?

Hold shift to manually multi-select

Click 1, then click a class in the label for that element: ".cmd-e" in this case!

Press cmd+e to expand your selection

Press cmd+shift+e to expand to all matches

Change Colors
?

Click one of these squares, then click a color icon under the toolbar to get a picker!

Try the

Keyboard Trainers

Press ? with any tool

Home About Docs Code Contact

Delete
?

Delete this 😤 thing! 👇

Ad

Redlines & distance coming soon!

Am I in the center?

Inspect Tool
?

inboxInbox

starStar

sendSend

draftsDrafts

Good contrast Bad contrast

Duplicate
?

Copy/Cut & Paste Elements
?

Copy the circle from the left box cmd+c

Paste it in the right box cmd+v

Did I mention it works across tabs!

Copy/Paste Styles
?

Copy styles with cmd+opt+c

Paste copied styles with cmd+opt+v

For fun: copy the styles of a dark artboard and paste it over some light artboards

Copy my darkness Join the darkside

Image Swap
?

Hotkey f

The font in this artboard is the system font. It has lots of weights and is very elegant at large or small sizes. Can you make it look better?

Multiselect these headings and edit the ramp with the font tool, what ramp styles do you like?

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Fix the order of the circles below

Tip: left and right are safe, up and down are difficult

Flow direction can make left/right be up/down 🤔

Fix the order of the stop light below

How much are you worth? Edit the text to specify your rate.

Break

This

Site
#tangiblelearning

Inline SVG
?

Delete, copy, paste, & duplicate svg!

Change color, move x/y, & inspect svg!

Position Tool
?

Hotkey l

Click to select, then click hold and drag anything around

Move this artboard to somewhere wierd!

No undo..

yet!

BUT
You can unstyle

Select me by searching ".search-title"

Delete styles
?

Press opt+del to remove inline styles

Ew, get rid of these terrible edits someone (me) did! 👇

Fix Me!

Hotkey [ or ] to switch between foreground/background

Try multi-selecting all these circles and changing their hue contextually, it makes a pretty light show

# data[].attributes.attachment_link.description
Artboard_00-FinalFinal-v2 ? You've arrived at the "try before you buy" sandbox and playground. Each artboard is tailor made to provoke your design brain and teach you a feature. Select ? Click Me 😏 Keyboard Nav ? Tab & Shift + Tab traverse laterally Enter & Shift + Enter traverse lineage Select Multiple ?

# data[].attributes.attachment_link.readable_text
The first dashboard to ever make 4,157 humans weep

Have you every been mystified by those gorgeous online dashboard demos that have you wondering, "Will I ever be able to build that...?" Well, I am here to tell you that you can build it!

We will first introduce some CSS Grid basics. We'll then use those to build our base dashboard layout. After that, we'll explore the setup and structure of our inner content blocks, including some flexbox. Finally, we'll talk briefly about responsible mobile-responsiveness, while integrating mobile-friendly sliding functionality into our side nav. What will you walk away with? A boom-goes-the-dynamite dashboard that will make people like you a lot.

Note: We will be building a simplified version of the dashboard above, which uses the same concepts as the full version. The full version would make this piece silly long...

First things first: our basic grid layout

I'm going to break down CSS Grid for you, short and sweet. We need a main grid container, and then we need a div (or semantic element) for each element within the grid container:

Pretty simple structure, right? Our layout will help produce this immediately-beautiful canvas below. Don't worry, we will be adding more content.

Your first simplified, no-frills dashboard layout

Next, let's lay down the law...I mean CSS

Your main container must be defined as display: grid; for any grid functionality to actually work. We also give it a height of 100% to tell it that we want our dashboard to fill the entire page. And, for each child container, we will assign a name so that we can tell the grid what to do with it. Then we will use the names to create the page structure in a spreadsheet-like declaration using grid-template-areas:

Our final, responsive dashboard will look like this:

Our simple dashboard with responsive inner content and sliding side nav

Grid-template-areas explained

We basically assigned each of our child containers a name, and then threw them into a spreadsheet-like format via grid-template-areas. Dead simple.

We have two columns total from left to right. The first column is 250px wide (the side nav), and the second one is 1fr, or fraction. That means that it will take up the remaining container space after the first column has been drawn.

Next, we declare three total rows. Rows flow from top to bottom. So, starting at the top, we have a <header> element that is 50px tall. Then we declare the <main> content area, which is given a height of 1fr. This means that it will vertically stretch to fill the remaining window space after explicitly-declared heights have been drawn. Finally, we declare our <footer>, also at a height of 50px.

Adding the header and footer

Both the <header> and the<footer> will be flex containers, with flex spacing and alignment:

We use justify-content: space-between; to spread out the first and last elements so that they stretch to both ends of their container. This is so easy compared to old-school float instructions. And, thanks to align-items: center;, we have our items perfectly aligned without having to rely on padding, etc., for centering.

A brief note on our weird-looking CSS class syntax: we are using BEM-style (block-element-modifier) CSS, which I recommend for scalability and readability. It is recommended to avoid raw html tag selectors.

Adding the side nav element

For the side nav content, we use traditional <ul> and <li> elements. I recommend this over <div> or any other elements for good html semantics and human readability. We will be adding mobile-friendly sliding functionality into our side nav a little bit further down:

Adding the first <main> section element

This one is straightforward and simple. Another flex container:

Now things get interesting... the responsive grid introduction cards

This is one of my favorite sections of our dashboard, because we get to utilize a super effective, elegant grid solution. Watch the dashboard animation provided previously again. Notice how these gray cards behave as the screen changes? Our cards amazingly keep a consistent gutter width between them, they have consistent wrapping, and when we can't fill up an entire row, our wrapped card matches exactly the height and width of the card above it, while remaining lined up with it. This is very challenging and tedious to accomplish without the method that I'm about to show you:

Neat how we used a grid container for these, which is inside of our main page grid container, right? We did this because it's the most straightforward, elegant solution to use for the needed responsiveness of the card items. Our instruction repeat(auto-fit, minmax(265px, 1fr) takes care of a couple of major hurdles:

1. If cards go below 265px in width, they will wrap to another row.

2. If cards go above 265px in width, they will stretch to take up the available remaining container width.

3. When cards wrap to a new row (auto-fit), they will line up from left to right with the cards above them, matching their widths! And you also get built-in responsiveness without any media queries!

Using the column repeat method is also a fantastic way to build beautiful, responsive image galleries, even with images of differing sizes. You even have access to dynamic packing algorithms with the grid-auto-flow: dense; instruction. This will prevent any empty row spaces due to different image heights. They must scale with each other in relative fr units for this method to work, however, which is why we won't use it for our cards shown below.

Adding the main content containers

Our dashboard cards with dynamic heights

This section also has an interesting twist. These cards will contain your dashboard's main content items, and they will vary in height from each other due to their dynamic content. On most typical interfaces, you would want like-minded cards on the same row to have the same uniform height and width. And you would accomplish that by assigning each card a flex: 1; value so that they would grow to match the tallest card.

However, in our case, we don't want to force these cards to match each other's height because their content subject matter will vary. To get them flowing naturally in two columns, we will use a special CSS property for this, column-count:

Using column-count will ensure that our content inside of the main-cards section gets split into two columns. We also apply a gap between the cards with column-gap. This is very similar to our overview cards, where we used grid-gap.

The reason we didn't use display: grid; for this section is that our heights for each card are dynamic. We want them to flow naturally into two columns, while observing their varying heights. This method also prevents us from having to use a traditional float grid, which would have us calculating percentage widths, gutters, and special margin rules for first and last child elements.

We also used column-break-inside: avoid; to make sure that each card does not get its content split. column-count will actually break up the content of each element to make both rows the same height, which we do not want.

A brief note on responsible mobile-responsiveness

Watch the responsive video at the top of the piece again. See how the main-cards section turns into one column as you approach tablet-sized screens? And see how the side nav disappears on mobile-sized screens? For this responsiveness, we should really write our CSS in a mobile-first format.

That means that our initial CSS should be mobile-friendly. Then, as our screen size increases, we observe larger screen styles using graduating min-width media queries. This is better practice than overriding desktop styles with max-width media queries, as that approach can lead to some headaches:

Making our side nav slidable on mobile devices

Our job is not really complete until we also make the side nav useable on mobile devices. We need to:

1. Add our menu icon and close icon.

2. Add some responsive transitions for the sliding action.

3. Write some JavaScript to make our clicks activate the side nav.

We'll use the Font Awesome library for our icons, and bring in jQuery for some easy DOM manipulation (See the codepen for reference).

Next, let's update our CSS to include the new icons and to give our side nav some sliding transitions. Once again, we will use graduating media queries:

Finally, we need to write some JavaScript to get our clicks working. The sliding functionality is accomplished by toggling the .active class name, which updates the transform: translateX(); instruction. Don't forget to add the jQuery CDN link before your ending </body> tag:

You should now have a fully responsive side nav. Scale down your window until it is mobile-sized. It should hide, and the menu icon should appear. Click it, and the side nav should slide into view. Click the close icon, and the side nav should close again. Pretty slick, eh? And you thought you couldn't do it...

# data[].attributes.attachment_link.title
Build a Responsive, Modern Dashboard Layout With CSS Grid and Flexbox

# data[].attributes.attachment_link.description
Have you every been mystified by those gorgeous online dashboard demos that have you wondering, "Will I ever be able to build that...?" Well, I am here to tell you that you can build it! We will first introduce some CSS Grid basics. We'll then use those to build our base dashboard layout.

# data[].attributes.attachment_link.readable_text
Docs

HTML Reference

For a showcase of each styled element, check out the quickstart template &nearr;.

MVP.css works with the following HTML elements:

Modifying the CSS variables

MVP.css includes a list of CSS variables. Editing these variables will change the styles globally.

 :root { --active-brightness: 0.85; --border-radius: 5px; --box-shadow: 2px 2px 10px; --color: #118bee; --color-accent: #118bee15; --color-bg: #fff; --color-bg-secondary: #e9e9e9; --color-link: #118bee; --color-secondary: #920de9; --color-secondary-accent: #920de90b; --color-shadow: #f4f4f4; --color-table: #118bee; --color-text: #000; --color-text-secondary: #999; --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --hover-brightness: 1.2; --justify-important: center; --justify-normal: left; --line-height: 1.5; --width-card: 285px; --width-card-medium: 460px; --width-card-wide: 800px; --width-content: 1080px; }

Custom styles can be added inside a <style> tag, or at the end of your local mvp.css file

Frequently Asked Questions

Why would I use this?

If you just want to launch already.

PRO TIP An MVP is a temporary site, it doesn't have to be and shouldn't be perfect.

Is there a minified version?

No, you don't need one for an MVP.

How can I improve my design?

Here are some helpful resources:

How do I handle a user's dark mode preference?

By default <html> will force users into light mode. By using <html color-mode="user"> MVP.css will respect the user's dark mode preferences. The original concept and additional tips can be found in this article: https://ryanfeigenbaum.com/dark-mode/

What if I don't like the default styles?

Most styles are editable through CSS variables. You can also add your own styles inline, at the end of MVP.css or in a new stylesheet.

PRO TIP If there are two conflicting CSS styles, the last one will take precedence.

 :root { --color: #118bee; } /* Lower in the CSS, or in a 2nd stylesheet */ :root { --color: green; /* This will take precedence */ }

What if I still don't like it?

That's OK, you probably shouldn't love your MVP. The goal of MVP.css is to help you feel slightly less embarrased about it.

👉 If you want a CSS framework with more features check out Bulma &nearr; or Tailwind &nearr;.

# data[].attributes.attachment_link.title
MVP.css - Minimalist stylesheet for HTML elements

# data[].attributes.attachment_link.description
For a showcase of each styled element, check out the quickstart template ↗. MVP.css works with the following HTML elements: MVP.css includes a list of CSS variables. Editing these variables will change the styles globally.

# data[].attributes.attachment_link.description
Puedes ponerte en contacto con otros Artista para solicitar servicios o información así como solicitar ayuda técnica en nuestros foros. Visualizar Artista registrados públicos

# data[].attributes.attachment_link.readable_text
Less Code. Fewer Edge Cases.

Formik comes with battle-tested solutions for input validation, formatting, masking, arrays, and error handling. This means you spend less time writing form code and more time building your next big thing.

# data[].attributes.attachment_link.description
Formik comes with battle-tested solutions for input validation, formatting, masking, arrays, and error handling. This means you spend less time writing form code and more time building your next big thing.

# data[].attributes.attachment_link.readable_text
En la práctica totalidad de las aplicaciones web que desarrollamos, nos encontramos con la necesidad de pedirle información a nuestras/os usuarias/os a través de formularios (desde un login simple hasta un complejo flujo de compra).

Aunque existen varias librerías para facilitarnos esta tarea, en este artículo vamos a dar a conocer la sencillez de React Hook Form y por qué la consideramos la mejor alternativa a día de hoy frente a sus competidoras.

Todos estaremos de acuerdo en que el desarrollo de un formulario en React no es una tarea compleja. Puede resultar monótono tener que ir añadiendo elemento a elemento, cuidando la apariencia de cada uno y guardando un sentido común. Pero no es realmente problemático.

El problema se nos presenta si tenemos en cuenta el rendimiento, sobre todo cuando tenemos muchos campos en nuestro formulario, con sus respectivas validaciones, y esto a su vez pueda estar replicado en varias partes de nuestra aplicación. Los elementos de un formulario en React se definen como componentes controlados ya que debemos ejercer un control sobre ellos para escuchar los eventos que puedan producirse y así actualizar el estado de nuestro componente con la nueva información. Como ya sabemos, toda acción de actualizar un componente, provocará un nuevo render de este, o lo que es lo mismo, volverá a pintarse en nuestro navegador.

React Hook Form nos ofrece la capacidad de desarrollar nuestros formularios de manera no controlada, independizando todo cambio que pueda producirse en cada uno de los elementos del formulario, evitando con ello renders innecesarios, haciendo uso de hooks y con una sencillez total.

Entre las características que la definen, cabe destacar:

Énfasis en el desarrollador haciendo especial hincapié en la experiencia del desarrollador o Developer Experience (DX) para facilitar su integración en cualquier proyecto.

Respeta el estándar HTML permitiendo incorporar las funciones de la librería como nuevos atributos en nuestras etiquetas nativas de HTML sin tener que incluir nuevos componentes que las envuelvan o modifiquen.

Super ligera con un tamaño de 8kb y sin dependencias externas.

Mejora de rendimiento reduciendo el número de renders de nuestros formularios así como el tiempo de montaje de los elementos que lo componen.

Contempla todos los dispositivos ya que es compatible con React Native, lo que nos permite replicar el mismo formulario en desktop y resoluciones móviles.

Podemos instalar la librería mediante los gestores de paquetes NPM o Yarn.
npm install react-hook-form --save yarn add react-hook-form
Para los siguientes ejemplos y comparativas, vamos a tomar como referencia un formulario sencillo en el que un usuario debe rellenar tres campos muy comunes en cualquier aplicación: su nombre, correo electrónico y número de teléfono móvil.

 <form> <label htmlFor="name">Nombre completo</label> <input id="name" type="text" /> <label htmlFor="mail">Correo electrónico</label> <input id="mail" type="email" /> <label htmlFor="phone">Teléfono móvil</label> <input id="phone" type="tel" placeholder="+34" /> <input type="submit" /> </form>

Como podéis ver, el formulario carece por completo de lógica para recoger la información de los distintos campos. Realizaremos la gestión primero desde una perspectiva controlada, sin librerías externas, para después hacerlo de una manera no-controlada delegando esta funcionalidad a nuestra nueva librería.

En este primer ejemplo, empleando React por defecto, todo el protagonismo recae sobre el estado de nuestro componente. En él, almacenaremos en distintas propiedades los cambios que se produzcan en cada elemento del formulario:

 const [userInfo, setUserInfo] = useState({ name: "", mail: "", phone: "", });

Dado que cada campo del formulario se interpreta como un nuevo elemento controlado, debemos recoger la información de todos ellos por medio de una función común que nos permita actualizar el estado interno de nuestro componente.

Esta acción la llevaremos a cabo por medio de la función handleChange que a su vez emplea setState, la cual es la única manera que nos proporciona React para actualizar el estado de un componente dada su inmutabilidad. Una vez recopilada la información en nuestro nuevo estado, asignaremos cada propiedad a su respectivo elemento por medio de su atributo value con el fin de reflejar en ellos los nuevos valores.

const handleChange = (event) => { const { name, value } = event.target; setUserInfo({ ...userInfo, [name]: value }); }; return ( <form> <label htmlFor="name">Nombre completo</label> <input name="name" type="text" value={userInfo.name} onChange={handleChange} /> <label htmlFor="mail">Correo electrónico</label> <input name="mail" type="email" value={userInfo.mail} onChange={handleChange} /> <label htmlFor="phone">Teléfono móvil</label> <input name="phone" type="tel" placeholder="+34" value={userInfo.phone} onChange={handleChange} /> <input type="submit" /> </form> );

Hay que tener en consideración que con el ejemplo anterior estamos únicamente recogiendo información para mostrarla actualizada en cada campo, sin ningún tipo de validación previa del formato ni gestión de posibles errores que mostrar al usuario.

Incluir estas mejoras provocaría un incremento de propiedades en el estado actual o la necesidad de hacer nuevos estados dedicados específicamente a los posibles errores causados como resultado de nuestras validaciones previamente definidas.

En la gestión de manera controlada esto puede traer consigo problemas de rendimiento en aplicaciones con muchos componentes controlados debido a la constante actualización de los estados internos y al repintado o re-render del componente en pantalla. Esta problemática sería fácilmente solucionable si lográramos aislar los renders producidos por cada elemento, algo que veremos a continuación.

Puedes acceder al ejemplo completo en este enlace.

Aquí es donde entra en juego la librería que venimos a presentar, que nos va a permitir aislar todo render producido por cada uno de los elementos que componen nuestro formulario, minimizando casi al máximo su repintado y mejorando con ello la experiencia del usuario.

Para empezar a delegar la lógica de nuestro formulario, lo único que debemos importar en nuestro componente es el hook useForm que nos provee la librería.

import { useForm } from "react-hook-form";

A partir de este, obtendremos las funciones necesarias para simular la lógica que teníamos en el ejemplo anterior: recopilar la información de los elementos para posteriormente enviarla a un tercero.

const { register, handleSubmit } = useForm();

register nos permitirá incluirla en todo elemento que queramos observar de nuestro formulario, ya que será la única vía por la cual la librería sepa obtener los cambios que se produzcan en cada campo. De momento ya nos podemos olvidar de nuestra función auxiliar handleChange previamente definida que nos permitía almacenar en un estado interno las actualizaciones derivadas de cada elemento.

handleSubmit se encargará de recopilar por nosotros el conjunto de valores finales producidos en cada elemento del formulario para enviarlos donde queramos mediante un único objeto similar al que previamente definimos como userInfo empleando un estado interno de React.

Para incorporar la función register en el formulario, bastará con añadirla como un nuevo atributo a la propia etiqueta HTML, por este motivo hemos resaltado en la introducción que la librería se caracteriza por respetar el estándar evitando tener que añadir nuevos componentes o wrappers a nuestras etiquetas ya existentes:

 <label htmlFor="name">Nombre completo</label> <input {...register("name")} name="name" type="text" /> <label htmlFor="mail">Correo electrónico</label> <input {...register("mail")} name="mail" type="email" /> <label htmlFor="phone">Teléfono móvil</label> <input {...register("phone")} name="phone" type="tel" />

El nombre introducido como parámetro en la función será como se denominen cada una de las propiedades incluidas en el objeto final listo para su envío.

Este objeto podremos obtenerlo haciendo uso de la función handleSubmit que incluiremos en el atributo onSubmit de nuestra etiqueta nativa <form> pasándole una función auxiliar que queramos, con el fin de que se ejecute al producirse el envío del formulario.

const onSubmit = (userInfo) => console.log(userInfo); <form onSubmit={handleSubmit(onSubmit)}>

Con muy pocas líneas de código, y a falta de poder complicarlo mucho todavía, hemos dado vida a nuestro formulario delegando la recogida de información del usuario así como su envío a la par que mejoramos la performance, algo que demostraremos más adelante en un apartado dedicado a ello.

Puedes acceder al ejemplo completo en este enlace.

Pasamos al momento de dar un poco de vidilla a nuestro formulario. Añadir validaciones en nuestro formulario, por muy básico que este sea, siempre debe ser un requisito indispensable de cara a asegurarnos que recogemos la información en un formato correcto para ser enviada donde queramos.

Esta tarea implica realizar comprobaciones individuales en cada uno de los campos para evitar que el usuario pueda insertar mal la información que esperamos de él, como por ejemplo: escribir texto en un campo dedicado al teléfono móvil, escribir un número de teléfono demasiado largo, escribir un correo electrónico sin respetar el formato, etc.

Dado que toda validación tendrá un resultado, bien sea satisfactorio o erróneo, esto nos obliga a realizar la gestión de errores: tenemos que poder informar al usuario de posibles mensajes de error sobre aquellos campos en los que se haya insertado incorrectamente la información solicitada. ¡Vamos a ello!

Para empezar a añadir nuestras validaciones en cada campo, basta con reutilizar la función register que ya incluimos en cada elemento y a la que podemos añadir cualquier validación del estándar HTML. Las validaciones que vamos a definir para nuestro ejemplo son las siguientes:

Todos los campos deben ser obligatorios

Para ello añadimos la propiedad required sobre un nuevo objeto a la función.

<input {...register("name", { required: true })} /> <input {...register("mail", { required: true })} /> <input {...register("phone", { required: true })} />

Con esto sería suficiente, pero como tenemos en mente realizar una gestión de errores es conveniente que dejemos un mensaje genérico que mostrar al usuario cuando pase por alto rellenar cualquiera de los campos obligatorios.

Definiremos un nuevo objeto que almacenará todos los posibles mensajes que mostremos al usuario en caso de error:

const messages = { req: "Este campo es obligatorio", name: "El formato introducido no es el correcto", mail: "Debes introducir una dirección correcta", phone: "Debes introducir un número correcto" };

Así podremos incluir directamente el mensaje asociado a cada validación y lo usaremos seguidamente para mostrarlo por pantalla en el caso de producirse el error en la validación.

<input {...register("name", { required: messages.req })} />

El campo nombre no podrá aceptar números

No solo queremos asegurarnos de que el campo sea rellenado, sino también de que la información escrita sea la correcta. Por este motivo, definiremos otro nuevo objeto con las expresiones regulares que vayamos utilizando para asegurar el formato correcto.

Para el caso del nombre, añadiremos una nueva expresión que sólo permite incluir letras, con ello evitaremos que puedan introducirse números o caracteres especiales.

const patterns = { name: /^[A-Za-z]+$/i };

Podemos añadir nuestra nueva expresión regular directamente al objeto de la función register en una nueva propiedad denominada pattern, acompañado del mensaje que queramos mostrar al usuario cuando dicho patrón no se cumpla:

 <input {...register("name", { required: messages.required, pattern: { value: patterns.name, message: messages.name } })}

El campo correo deberá cumplir el formato correcto de un correo

El campo del correo electrónico suele ser un clásico en casi cualquier formulario que nos encontremos. Por norma general, la validación siempre suele hacerse por medio de una expresión regular genérica que compruebe el formato habitual de un correo.

Actualizamos nuestro objeto de expresiones regulares con la nueva expresión y pasamos a añadirlo como nuevo patrón junto a su respectivo mensaje:

const patterns = { name: /^[A-Za-z]+$/i, mail:/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/ };

 <input name="mail" type="text" {...register("mail", { required: messages.required, pattern: { value: patterns.mail, message: messages.mail } })}

El campo teléfono no podrá aceptar letras ni ser inferior ó mayor a 9 dígitos

En nuestro último campo, necesitamos hacer dos validaciones: una, de formato, asegurando que no se escriban letras, ya que se trata de un número de teléfono; y otra, de longitud, ya que como conocemos a priori la longitud que tiene un número móvil en España, no nos conviene que nos escriban números con longitud inferior o mayor a 9 dígitos.

Para el primer caso procedemos igual que en los anteriores: definir la expresión regular en nuestro objeto y añadirla en nuestra etiqueta por medio de register. Para el segundo caso, la librería nos ofrece las reglas del estándar maxLength y minLength, que incluiremos a continuación como una nueva propiedad acompañado de su respectivo mensaje de error y el valor máximo o mínimo permitidos.

const patterns = { name: /^[A-Za-z]+$/i, mail: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/, phone: /^[0-9]+$/i };

 <input name="phone" type="tel" placeholder="+34" {...register("phone", { required: messages.required, minLength: { value: 9, message: messages.phone }, maxLength: { value: 9, message: messages.phone }, pattern: { value: patterns.phone, message: messages.phone } })} />

De esta manera tan simple y reutilizando la función que ya habíamos incorporado, hemos realizado todas nuestras validaciones sobre el formulario. Las validaciones podrían ser numerosas y más complejas en función del tipo de información que recopilemos del usuario.

En cualquier caso, esta es una tarea que siempre debemos intentar que esté recogida en el front y con ello, tratar de restar lógica y gestión de la información al back de nuestra aplicación, facilitando que sea éste quién reciba la información ya tratada y en un formato correcto para su gestión.

Tal y como hemos visto, hemos almacenado en dos objetos todas nuestras expresiones regulares y los mensajes de error en lugar de ir poniendo uno a uno en cada elemento. De esta manera somos mucho más organizados y nos resultará muy fácil modificar el formulario si en algún momento las propiedades pudieran cambiar o incrementar, del mismo modo que facilitamos la lectura a posibles desarrolladores que accedan a él.

Tenemos nuestras validaciones aplicadas en cada campo, pero de nada sirve validar lo que introduce el usuario si no le informamos debidamente en el caso de que algún dato lo haya introducido mal. Siempre que se produzca un error, debemos evitar que siga adelante con el formulario y sugerir las correcciones.

Para ello, la librería nos provee de un objeto errors que irá actualizándose con la información de aquellos campos que no han superado cualquiera de las validaciones que hayamos definido.

 const { formState: { errors } } = useForm();

De esta manera, siempre que el objeto errors contenga alguna propiedad, sabremos que algo ha salido mal y avisaremos de ello al usuario por medio del mensaje asociado a dicha validación. Las propiedades que forman este objeto serán cada uno de los campos que contenga nuestro formulario.

Supongamos un caso en el que el usuario se ha dejado sin rellenar el campo nombre y ha puesto un número de más en el campo teléfono. En este momento, el objeto errors almacenará un total de dos propiedades, una por cada validación incumplida, con la siguiente información: tipo de la validación, el elemento al que aplica y su respectivo mensaje asociado:

Dado que este objeto se actualiza dinámicamente, lo emplearemos para mostrar los mensajes de error comprobando previamente si dicha propiedad existe:

 <input name="mail" type="text" {...register("mail", { required: messages.required, pattern: { value: patterns.mail, message: messages.mail } })} /> {errors.mail && {errors.mail.message}}

Por simplicidad, únicamente hemos añadido un mensaje por cada campo, pero gracias al campo type devuelto por el objeto errors, podríamos personalizar mucho más el feedback que le damos al usuario con el fin de ayudarle a entender mejor cuál ha sido el fallo cometido por su parte: error de formato, de longitud, de obligatoriedad, etc.

Puedes acceder al ejemplo completo en este enlace.

Hemos destacado como una de las características más importantes de la librería su capacidad para mejorar el rendimiento de nuestros componentes debido a su forma de aislar los renders de un elemento frente a otro.

En nuestro ejemplo, esto se traduce en que si el usuario estuviera rellenando un campo cualquiera de nuestro formulario, esto no provocaría un repintado del formulario sobre nuestra aplicación debido a que estamos aplicando una gestión no-controlada en ese campo específico.

Para demostrar la comparativa de rendimiento de un formulario controlado frente a otro no-controlado, hemos incluido una variable contador en el cuerpo de nuestro formulario que incrementará su valor cada vez que se produzca un nuevo repintado o render.

Podemos comprobar que la diferencia es notable entre ambos casos. Vemos que para el caso del formulario no-controlado usando React Hook Form no se produce ningún render mientras el usuario edita cada uno de los campos, algo que ocurre de manera constante en el ejemplo contrario.

Los únicos renders para el caso no-controlado se producen al final del proceso, cuando el usuario clica en el botón para proceder a su envío. Esto es debido a que las validaciones se aplican por defecto cuando se envía el formulario, tras producirse el evento onSubmit, para finalmente informar al usuario de los posibles errores causados.

Dependiendo del caso concreto de nuestra aplicación, podríamos no querer que las validaciones esperaran hasta el último momento para aplicarse. Por este motivo la librería nos da la posibilidad de cambiar el modo en que se aplican sobre el formulario:

useForm({ mode: "onChange | onBlur | onTouched" });

onChange: las validaciones se aplican dinámicamente durante la edición de cada uno de los campos, tal y como veíamos en la gestión controlada de los elementos. Para este caso, la documentación nos avisa del posible incremento de renders que podremos provocar.

onTouched: las validaciones se aplican al clicar en cualquiera de los campos del formulario.

onBlur: las validaciones se aplican al perder el foco sobre un campo del formulario.

Es interesante apreciar que aunque decidamos escoger el modo onChange, el cual no es recomendado por la librería por ser el que más penaliza el rendimiento, este sigue ofreciendo una mejora considerable con respecto a la gestión controlada:

Puedes acceder al ejemplo completo en este enlace.

Existen situaciones en las que por algún motivo necesitamos escuchar los cambios que se produzcan en todo nuestro formulario o simplemente en algunos campos concretos del mismo. Esta necesidad nos puede surgir si elaboramos un formulario dinámico y quisiéramos mostrar u ocultar determinados elementos en base a la interacción del usuario.

Para llevar a cabo esta escucha o suscripción ante los cambios que puedan producirse en el formulario, sin provocar renders en el componente como nos ocurriría en un formulario con elementos controlados, la librería nos provee de la función watch a la que podremos indicarle el nombre de cualquier campo a ser observado o al conjunto completo de ellos.

const { watch } = useForm();

Un caso muy típico podría ser incluir un elemento checkbox en el formulario y que en base a su estado se inserten nuevos elementos dinámicamente. Para ello nos bastaría con observar el nombre asignado a nuestro elemento checkbox por medio de register:

const watchShowAddress = watch("showAddress"); <input type="checkbox" {...register("showAddress")} />

Y con la suscripción almacenada en una nueva variable, basarnos en ella para mostrar u ocultar el nuevo elemento:

 {watchShowAddress && ( <> <label htmlFor="address">Dirección postal</label> <input name="address" type="text" {...register("address")} /> </> )}

Por el contrario, un caso más avanzado podría ser querer realizar un tracking de toda la información que vaya escribiendo el usuario antes del envío del formulario con el fin de realizar métricas del comportamiento de los usuarios en nuestra aplicación.

Gracias a watch, esto es algo realmente fácil de implementar teniendo en cuenta que la recopilación de los datos será completamente invisible hacia el usuario y no provocará nuevos renders del componente que puedan perjudicar el rendimiento durante la interacción.

En este caso nos apoyaremos del hook useEffect que nos permitirá escuchar todo cambio que se produzca en nuestro formulario y a su vez cancelará la suscripción para evitar con ello el repintado del componente.

 useEffect(() => { const subscription = watch((data) => console.log(data)); return () => subscription.unsubscribe(); }, [watch]);

De esta manera tan sencilla, habremos realizado un tracking de toda interacción que tuviera el usuario en nuestro formulario para enviarlo a nuestra herramienta de métricas y así analizar el comportamiento que ha tenido el usuario desde el inicio hasta su envío. Todo ello sin afectar a la experiencia del usuario ni al rendimiento.

Puedes acceder al ejemplo completo en este enlace.

Con la presentación de React Hook Form hemos podido ver una gran alternativa a la elaboración de formularios tradicionales si lo que buscamos es agilizar nuestros desarrollos a la par que simplificar nuestro código y ofrecer un buen rendimiento en nuestra aplicación.

Son muchos los factores que pueden llevar a nuestra aplicación a ofrecer un mal rendimiento durante su uso y es preciso tener en cuenta esta problemática en tareas comunes a cualquier desarrollo como puede ser la incorporación de un formulario. Reducir estas posibles causas de mal rendimiento en elementos tan frecuentes no sólo mejorará la experiencia del usuario sino que nos permitirá filtrar mejor en un futuro cuando surjan nuevos problemas de rendimiento.

Resulta interesante el hincapié de la librería en la experiencia del usuario no sólo por facilitar su integración en cuanto al código sino también por los recursos que ofrece en su página para construir visualmente el layout de tu formulario mediante drag & drop ó sus propias DevTools para hacer debug fácilmente desde la UI. Con ello, facilita enormemente esa primera toma de contacto del desarrollador.

Recomendaría el uso de esta librería en cualquier proyecto que busque o necesite mejorar determinados aspectos de su performance así como en proyectos personales o pruebas de concepto que necesiten un desarrollo ágil para publicar cuanto antes una primera versión que enseñar a interesados.

Debemos saber también que contamos con una amplia comunidad detrás de este proyecto, el cual recibe constantes actualizaciones y cuya última release fue subida 2 días antes de escribir este artículo. Sólo por este motivo, considero que ya merece la pena tenerla en cuenta.

Si te perdiste el anterior artículo sobre cómo agilizar tus desarrollos en React, puedes acceder a él desde aquí.

# data[].attributes.attachment_link.title
Agilizando el desarrollo de formularios en React

# data[].attributes.attachment_link.description
En la práctica totalidad de las aplicaciones web que desarrollamos, nos encontramos con la necesidad de pedirle información a nuestras/os usuarias/os a través de formularios (desde un login simple hasta un complejo flujo de compra).

# data[].attributes.attachment_link.readable_text
Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB.

# data[].attributes.attachment_link.title
Imagehover.css - A Pure CSS Image Hover Library

# data[].attributes.attachment_link.description
Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable image hover effects. Choose from over 40 hover effect classes from a CSS library weighing in at a minified size of only 19KB.

# data[].attributes.attachment_link.readable_text
En este tutorial conoceremos más a detalle a las pseudoclases first-child, last-child y nth-child y veremos ejemplos sobre ellas.

Dentro de CSS existen clases especiales a las cuales podemos denominar pseudoclases, estas nos ayudaran a modificar el comportamiento de los elementos HTML a los que estén aplicados.

En este tutorial vamos a centrarnos en las pseudoclases :first-child, :last-child y nth-child.

Comencemos hablando de las pseudoclases :first-child, lo que hace es seleccionar al primer elemento dentro de otro elemento, o dicho de otro modo al primer elemento hijo de un elemento padre. Por ejemplo:

Como se ve en el ejemplo, seleccionamos el primer elemento "p" contenido dentro del elemento "div" y modificamos las propiedades que este tiene asignadas sin afectar al resto. La pseudoclase :first-child puede ser utilizada con cualquier otro elemento HTML, no solamente con el elemento "p" o "li" por poner ejemplos.

La pseudoclase :last-child funciona de manera similar que :first-child solo que esta selecciona al último elemento dentro de un elemento padre o mejor dicho el último elemento hijo de un elemento padre. Veamos el siguiente ejemplo para entenderlo mejor.

La pseudoclase :nth-child(an+b) selecciona un o una serie de elementos hijos que se encuentran dentro de un elemento padre, dentro de :nth-child(an+b) podemos establecer el número de elemento que queremos seleccionar, por ejemplo:

Pero qué pasa si queremos modificar a los elementos pares o impares, para esto cambiaremos el patrón de :nth-child(an+b) por :nth-child(2n+0) o podemos utilizar :nth-child(odd) para seleccionar elementos pares y :nth-child(2n+1) o :nth-child(even) para elementos impares.

En los siguientes ejemplos se puede apreciar mejor lo antes mencionado.

Los valores de an+b, deben ser números enteros, el índice de un first-child es de 1 y las propiedades establecidas en nth-child() se aplicarán a los hijos que estén dentro de "an+b" cuando n=1,2,3...

Por ejemplo si a=2 y b=0, las propiedades solo se aplicaran a los elementos con índice par (2,4,6...) y los elementos con índice impar (1,3,5...) no se verán afectados por las propiedades establecidas.

Con esto terminamos el tutorial de hoy, espero te haya sido de ayuda, si deseas aprender más sobre estas y más pseudoclases así como aprender más sobre HTML y CSS, te invitamos a registrarte al Curso Gratuito de HTML y CSS que tenemos en la plataforma, si tienes dudas u opiniones déjalas en la caja de comentarios. Este fue @kusillus nos vamos en la próxima.

# data[].attributes.attachment_link.title
Pseudoclases CSS: first-child, last-child y nth-child

# data[].attributes.attachment_link.description
En este tutorial conoceremos más a detalle a las pseudoclases first-child, last-child y nth-child y veremos ejemplos sobre ellas. Dentro de CSS existen clases especiales a las cuales podemos denominar pseudoclases, estas nos ayudaran a modificar el comportamiento de los elementos HTML a los que estén aplicados.

# data[].attributes.attachment_link.readable_text
¿Qué es un adviento?

Aunque tiene sus raices en al religión católica, el adviento se ha convertido en una tradición donde los niños conseguían chocolate por 4 semanas, uno por día, del 1 al 24 de diciembre.

¿Dónde encuentro el código fuente?

Actualmente el código fuente no está disponible. Es un proyecto que he hecho en muy poco tiempo y todavía está en fase de desarrollo. Intentaré abrir el código fuente en el futuro. Mientras, si encuentras un error, puedes dejar una issue en este repositorio.

¿Esto es una idea original?

Desde 2015 se celebra el Advent Of Code que trae retos de programación cada día. En este caso, los retos están pensados para ser solucionados con JavaScript.

¿Es gratis?

Sí, jugar al Adviento es totalmente gratis. Del 1 al 25 de diciembre tendrás un nuevo reto de JavaScript.

# data[].attributes.attachment_link.title
adventJS - Retos de código para JavaScript cada día

# data[].attributes.attachment_link.description
¿Qué es un adviento? Aunque tiene sus raices en al religión católica, el adviento se ha convertido en una tradición donde los niños conseguían chocolate por 4 semanas, uno por día, del 1 al 24 de diciembre. ¿Dónde encuentro el código fuente? Actualmente el código fuente no está disponible.

# data[].attributes.attachment_link.description
Code Monster gets kids excited about programming. It is a combination of a game and tutorial where kids experiment with learning to code.

# data[].attributes.attachment_link.title
Untrusted - a user javascript adventure game

# data[].attributes.attachment_link.title
VIM Adventures - Learn VIM while playing a game

# data[].attributes.attachment_link.description
VIM Adventures is an online game based on VIM's keyboard shortcuts. It's the "Zelda meets text editing" game. So come have some fun and learn some VIM!

# data[].attributes.attachment_link.title
Coding Games and Programming Challenges to Code Better

# data[].attributes.attachment_link.description
CodinGame is a challenge-based training platform for programmers where you can play with the hottest programming topics. Solve games, code AI bots, learn from your peers, have fun.

# data[].attributes.attachment_link.title
CodeCombat: Learn to Code by Playing a Game

# data[].attributes.attachment_link.description
Learn typed code through a programming game. Learn Python, JavaScript, and HTML as you solve puzzles and learn to make your own coding games and websites.

# data[].attributes.attachment_link.title
Elevator Saga - the elevator programming game

# data[].attributes.attachment_link.description
Code your way through dungeons, prove your skills, and get hired. Find talent by filtering the players according to your needs, look at their problem-solving approach, and directly reach out to the best candidates.

# data[].attributes.attachment_link.description
The Useless Web Button... just press it and find where it takes you. The perfect button for the bored, or those looking to find useless sites online!

# data[].attributes.attachment_link.title
Free to Use Clip Art Images & Vector Illustrations | ManyPixels

# data[].attributes.attachment_link.description
Download our 2,500+ editable and royalty-free SVG and PNG illustrations to power up your designs.

# data[].attributes.attachment_link.readable_text
¿Y si nos juntáramos un grupo de expertos que trabajan en grandes sitios para crear una guía para el rendimiento front-end definitiva?

Y no sólo una de esas aburridas guías hechas para robots, ¿y si hiciéramos algo divertido? ¿Qué tal reunirse Briza Bueno (Americanas.com), Davidson Fellipe (Globo.com), Giovanni Keppelen (ex-Peixe Urbano), Jaydson Gomes (Terra), Marcel Duran (Twitter), Mike Taylor (Opera), Renato Mangini (Google) y Sérgio Lopes (Caelum) para crear la mejor referencia posible?

¡Eso es exactamente lo que hemos hecho! Y nosotros te guiaremos en esta batalla para crear sitios incluso más rápidos.

- Zeno Rocha, líder del proyecto.

Desde luego importa y lo sabes. Entonces, ¿por qué seguimos haciendo sitios lentos que desembocan en una mala experiencia del usuario? Ésta es una guía práctica impulsada por la comunidad que te mostrará cómo hacer sitios web más rápidos. No desperdiciemos tiempo mostrando casos millonarios sobre rendimiento, ¡vayamos directos al grano!

Hay tres formas básicas de incluir CSS o Javascript en tu página

1) En línea: El css es definido dentro de un atributo style, y el JavaScript en un atributo onclick por ejemplo, en cualquier etiqueta HTML.

2) Incrustado: El CSS es definido dentro de una etiqueta <style> y el JavaScript dentro de una etiqueta <script>.

3) Externo: El CSS es cargado desde una etiqueta <link> y el Javascript desde el atributo src de la etiqueta <script>.

Las dos primeras opciones, pese a que reducen el número de solicitudes HTTP, aumentan el tamaño de tu documento HTML. Pero esto puede ser útil cuando tienes archivos pequeños y el costo de hacer una solicitud es mayor. En este caso, haz tests para evaluar si hay alguna ganancia en velocidad. Asegúrate de evaluar el propósito de tu página y su audiencia: si esperas que la gente sólo visite tu página una vez, por ejemplo en alguna campaña temporal donde nunca esperas visitantes de vuelta, poner código en línea o incrustado ayudará a reducir el número de solicitudes HTTP.
> Evita escribir manualmente CSS o JS en el medio de tu HTML (es preferible automatizar este proceso con herramientas).
La tercera opción nó solo mejora la organización de tu código, sino que también hace posible al navegador cachearlo. Esta opción suele ser la mejor en la mayoría de los casos, sobre todo cuando estás trabajando con archivos grandes y una gran cantidad de páginas.

Cuando ponemos hojas de estilo en el <head> permitimos a la página mostrarse progresivamente, lo que da la impresión a nuestros usuarios de que la página está cargando rápido.

Pero si los ponemos al fondo de la página, la página se renderizará sin estilos hasta que el CSS se descargue y aplique.

Por otro lado, cuando tratamos con JavaScript, es importante poner los scripts al fondo de la página ya que bloquean el renderizado mientras se están descargando y ejecutando.

Para explicar cómo este atributo es útil para el rendimiento, es mejor entender qué pasa cuando no lo usamos.

De esta forma, la página tiene que esperar a que el script sea descargado, analizado y ejecutado completamente antes de poder seguir mostrando el HTML. Esto puede incrementar significativamente el tiempo de carga de tu página. A veces este comportamiento puede ser el deseado, pero no suele ser el caso.

El script es descargado asíncronamente mientras el resto de la página sigue siendo analizada. El script se ejecutará en cuanto se acabe de descargar. Tenga en cuenta que varios scripts asincrónicos se ejecutará sin un orden específico.

Para mantener un código legible, es una buena idea escribir comentarios y usar indentación:

Pero para el navegador, eso no importa. Por eso, recuerda siempre comprimir tu CSS mediante herramientas automatizadas.

Esto quitará bytes al archivo, lo que resultará en un proceso de descarga, análisis y ejecución más rápido.

Para los que usan preprocesadores como Sass, Less, y Stylus, es posible configurarlos para que la salida sea comprimida.

Otra buena práctica para la organización y mantenimiento de tus estilos es separarlos en componentes modulares.

Sin embargo, hace falta una solicitud HTTP para cada archivo (y sabemos que los navegadores sólo pueden descargar un número limitado de recursos en paralelo).

Así que combina tu CSS. Tener un menor número de archivos resultará en un menor número de solicitudes y una página más rápida.

¿Quieres tener lo mejor de ambos mundos? Automatiza este proceso mediante una herramienta de compilación.

Hay dos formas de incluir hojas de estilo externas en tu página: mediante la etiqueta <link>:

O mediante la directiva @import (dentro de una hoja de estilos externa o una etiqueta <style>):

Cuando usas la segunda opción dentro de una hoja de estilos externa, el navegador no es capaz de descargar el archivo en paralelo, lo que puede bloquear la descarga de otros archivos.

¿Quién nunca ha cargado contenido de terceros para incrustar un video de YouTube o un botón de like/tweet?

El gran problema es que esos códigos no son siempre distribuidos eficientemente, ya sea por la conexión del usuario, o la conexión del servidor donde se alojan. O este servicio puede estar caído temporalmente o incluso estar bloqueado por el firewall del usuario o su compañía.

Para evitar que esto se convierta en un problema crítico, o peor, bloquee la carga de la página completamente, siempre carga estos códigos asíncronamente (o usa Friendly iFrames).

Alternativamente, si quieres cargar varios widgets de terceros, puedes cargarlos asíncronamente con este script.

El loop es sin duda una de las partes más importantes relacionadas con el rendimiento de JavaScript. Trata de optimizar la lógica dentro de un loop para que cada interacción sea hecha eficientemente.

Una forma de hacer esto es almacenar el tamaño de la array sobre la que iteraremos, para que no tenga que ser recalculada cada iteración.

> Nota: Pese a que los navegadores modernos automáticamente optimizan este proceso, sigue siendo una buena práctica para adaptarse a los navegadores antiguos que aún perduran.

En iteraciones sobre colecciones en HTML como una lista de nodos ( NodeList) generada por ejemplo por document.getElementsByTagName('a') esto es particularmente crítico. Estas colecciones son consideradas vivas, es decir, son automáticamente actualizadas cuando hay cambios en el elemento que les pertenece.

El uso de document.write hace que la página dependa de su valor de retorno para cargar completamente.

Esta (mala) práctica ha sido evitada por los desarrolladores, pero aún hay casos donde es necesaria, como un fallback para algún archivo Javascript.

HTML5 Boilerplate, por ejemplo, usa esta técnica para cargar jQuery localmente si la CDN de Google no responde.

> Atención: document.write ejecutado posteriormente o durante el evento window.onload reemplaza todo el contenido de la página actual.

El resultado de la página final será sólo bar y no foobar como se esperaría. Lo mismo ocurre cuando se ejecuta tras el evento window.onload.

El resultado será el mismo que el ejemplo anterior si la función programada por setTimeout es ejecutada tras window.onload.

Los repaints y reflows son causados cuando hay cualquier proceso de re-renderización del DOM cuando cierta propiedad o elemento cambia.

Los repaints se ejecutan cuando la apariencia de un elemento cambia sin cambiar su estructura. Nicole Sullivan describe esto como un cambio de estilos (como cambiar un background-color).

Reflows son los más costosos, ya que son causados por cambiar la estructura de la página, como cambiar el ancho de un elemento.

No hay duda de que excesivos reflows y repaints deberían de ser evitados, así que en vez de hacer esto:

Haz esto:

Cuando estableces style.width, el navegador necesita recalcular la estructura. Normalmente, cambiar los estilos de varios elementos sólo resulta en un reflow. Sin embargo, en el primer ejemplo, usamos continuamente offsetWidth, que fuerza al navegador a recalcular la estructura cada iteración.

Si necesitas leer datos sobre la estructura de la página, hazlo todo junto antes de establecer algún valor que cambie la estructora, tal y como en el segundo ejemplo

Cada vez que tocas el DOM sin necesidad muere un panda.

No, ahora en serio, navegar por los elementos del DOM es costoso. Aunque los motores de JavaScript son cada vez más potentes y rápidos, siempre es preferible optimizar al máximo las consultas al DOM tree.

Una de las alternativas más simples a adoptar es guardar un elemento en una variable cuando tiene que ser usado más de una vez, por lo que sólo se consulta al DOM una vez.

```js // mucho mucho mejor :) var myListHTML = document.getElementById("myList").innerHTML;

for (var i = 0; i < 100; i++) { myListHTML += "" + i + ""; }

Al igual que con el CSS, para mantener un código legible, es una buena idea escribir comentarios y usar indentación:

Pero para el navegador, eso no importa. Por eso, recuerda siempre comprimir tu JavaScript mediante herramientas automatizadas.

Esto quitará bytes al archivo, lo que resultará en un proceso de descarga, análisis y ejecución más rápido.

Otra buena práctica para la organización y el mantenimiento de los scripts es separarlos en componentes modulares.

Sin embargo, una solicitud HTTP es necesaria para cada archivo (y sabemos que los navegadores sólo pueden descargar un número limitado de recursos en paralelo).

Así que combina tu JavaScript. Tener un menor número de archivos resultará en un menor número de solicitudes y una página más rápida.

¿Quieres tener lo mejor de ambos mundos? Automatiza este proceso mediante una herramienta de compilación.

El equipo de jQuery siempre está buscando mejorar la librería, mediante mejor legibilidad del código, nuevas funcionalidades, y optimización de algoritmos existentes.

Por eso, usa siempre la última versión, que siempre se encuentra aquí, si quieres copiarla en un archivo local:

http://code.jquery.com/jquery-latest.js

Pero nunca uses esa url en una etiqueta <script>, puede crear problemas en el futuro ya que nuevas versiones son automáticamente servidas a tu sitio antes de que puedas testarlas. En vez de eso, usa la última versión de jQuery que necesites específicamente.

Como el sabio Barney Stinson dice, "Lo nuevo es siempre mejor" :P

Los selectores son unos de los asuntos mas importantes en el uso de jquery. Hay muchas vias de seleccionar un elemento del DOM, pero no significa que todas tengan el mismo comportamiento, puedes seleccionar un elemento usando clases, IDs or methodos(methods) como 'find()', 'children()'.

Entre todos ellos, seleccionar un ID es la via mas rapida porque esta basada en una operacion nativa del DOM.

El uso de funciones de JavaScript nativas resulta casi siempre en una ejecución más rápida que usando las de jQuery. Por eso, en vez de usar el método jQuery.each usa el loop for de JavaScript.

Pero presta atención, pese a que for in es nativo, en muchos casos es más lento que jQuery.each.

Y el loop for nos da otra oportunidad de acelerar las cosas cacheando el tamaño ( length) de las colecciones sobre las que estamos iterando.

El uso de los loops while y for de forma inversa es un tema caliente de discusión en la comunidad, y son citados frecuentemente como la forma más rápida de iteración. Sin embargo suele ser evitado por ser menos legible.

A veces JavaScript a secas puede ser más fácil y rápido que jQuery.

Considera el siguiente html:

En lugar de hacer esto:

$('#text').html('El texto está cambiado').css({ backgroundColor: 'red', color: 'yellow' });

Usa JavaScript a secas

var text = document.getElementById('text'); text.innerHTML = 'El texto está cambiado'; text.style.backgroundColor = 'red'; text.style.color = 'yellow';

Es sencillo y mucho más rápido. Échale un vistazo a los resultados en JSPerf

Ésta técnica es sobre agrupar varias imágenes en un sólo archivo.

Y después posicinarlas con CSS.

Como resultado, has reducido dramáticamente el número de solicitudes HTTP y evitado cualquier retraso potencial de otros recursos en tu página.

Cuando estás usando tu sprite, evita dejar demasiado espacio en blanco entre imágenes. Esto no afectará al tamaño del archivo, pero tendrá efecto en el consumo de memoria.

Y pese a que casi todo el mundo conoce las sprites, esta técnica no está demasiado extendida-tal vez debido a que los desarrolladores no usan herramientas automatizadas para generar sprites. Hemos seleccionado algunas que pueden ayudarte con esto.

Esta técnica es una alternativa a usar sprites.

Una Data-URI es una forma de poner en línea el contenido de la URI a la que apuntarías normalmente. En este ejemplo estamos usándolo para poner en línea el contenido de un background-image para reducir el número de solicitudes HTTP requeridas para cargar la página.

Antes:

Después:

Todos los navegadores desde IE8 soportan esta técnica.

Tanto este método como el uso de sprites requieren herramientas para ser mantenibles. Éste método tiene la ventaja de no requerir el posicionamiento manual de las sprites ya que mantiene tus imágenes en archivos individuales durante el desarrollo.

Sin embargo, tiene la desventaja de aumentar el tamaño de tu HTML/CSS considerablemente si tienes imágenes grandes. Éste método no es recomendado si no estás comprimiendo con gzip tu HTML/CSS durante las solicitudes HTTP, ya que el aumento de tamaño puede sobrepasar a la ganancia en velocidad.

Siempre define el atributo width y height de una imagen. Esto ayudará a evitar repaints y reflows durante el renderizado.

Sabiendo esto, Pepe, desarrollador que tiene una imagen de 700x700px decide usar esta técnica para mostrar la imágen como 50x50px.

De lo que Pepe no se da cuenta es que se enviarán docenas de kilobytes innecesarios.

Siempre ten en mente: sólo porque puedas definir el alto y el ancho de una imágen en HTML, no significa que debas usarlo para reducir el tamaño de imágenes grandes.

Los archivos de imágenes contienen muchísima información inútil en la Web. Por ejemplo una foto JPEG puede tener metadatos Exif sobre la cámara (fecha, modelo de cámara, ubicación, etc.). Una imagen PNG contiene información sobre colores, metadatos, y a veces incluso una miniatura incrustada. Nada de esto es usado por el navegador y contribuye al aumento del tamaño del archivo.

Hay herramientas para la optimización de imágenes que borrarán estos datos innecesarios y te darán un archivo más ligero sin afectar a la calidad. Decimos que hacen una compresión sin pérdida.

Otra forma de optimizar imágenes es comprimirlas a cambio de calidad visual. Llamamos a esto una optimización con pérdida. Cuando exportas un JPEG, por ejemplo, puedes escoger el nivel de calidad (un número del uno al 100). Pensando en el rendimiento, siempre escoge el menor número posible mientras la calidad visual sea aceptable. Otra forma común de optimizar con pérdida es reducir la paleta de colores en un PNG, o convertir archivos PNG-24 en PNG-8.

Para mejorar la percepción de rendimiento del usuario, deberías también transformar todos tus archivos JPEG en JPEGs progresivos. Los JPEGs progresivos son soportados por una gran cantidad de navegadores, son muy simples de crear, y no conllevan ningúna pérdida de rendimiento significativa. La ventaja es que la imagen aparecerá más pronto en la página ( ver demo).

Si quieres aventurarte en este mundo, es imprescindible insalar la extension YSlow en tu navegador Chrome o Firefox. Ellas serán tus mejores amigas a partir de ese momento.

O si prefieres herramientas online, visite WebPageTest, HTTP Archive o PageSpeed.

En general analizan el rendimiento de tu sitio, y generan un informe que califica a tu sitio con una nota además de darte consejos invaluables para ayudarte a resolver los problemas potenciales.

Esperamos que tras leer esta guía puedas poner a tu sitio en forma. :)

Y recuerda, como todo en la vida, no hay una solución milagrosa. La optimización del rendimiento de tu aplicación es un riesgo que vale la pena, pero no debería ser la única base de todas tus decisiones como desarrollador-A veces necesitarás sopesar los costos y los beneficios.

¿Quiéres aprender más? Échale un ojo a las Referencias que usamos para escribir esta guía.

¿Alguna sugerencia? Envía un tweet a @BrowserDiet o una pull request en Github.

No te olvides de compartir con tus amigos, hagamos una web más rápida para todos. \o/

# data[].attributes.attachment_link.description
¿Y si nos juntáramos un grupo de expertos que trabajan en grandes sitios para crear una guía para el rendimiento front-end definitiva? Y no sólo una de esas aburridas guías hechas para robots, ¿y si hiciéramos algo divertido?

# data[].attributes.attachment_link.description
Convert PNG to ICO, JPG to ICO, GIF to ICO. Create favicon.ico and iOS / Android App Icons. Edit a favicon to fit your needs, or search our gallery.

# data[].attributes.attachment_link.title
JavaScript Minifier & Compressor | Toptal®

# data[].attributes.attachment_link.description
Use our JavaScript Minifier & Compressor tool to reduce JavaScript code size and make your website load faster. Get started for free now.

# data[].attributes.attachment_link.title
Gradient Hunt - Beautiful Color Gradients

# data[].attributes.attachment_link.description
Thousands of trendy color gradients in a curated collection that is updated daily. Get a fresh color gradient for your next design project and save all the gradients you like.

# data[].attributes.attachment_link.readable_text
👋 Listado de Herramientas, bienvenidos!

// PROTOTIPADO - MOCKUP

Listado de herramientas para desarrollo de prototipos y maquetas web

Figma
Figma: the collaborative interface design tool.
Packed with design features you already love plus unique inventions like the Arc tool and Vector Networks, Figma helps you keep the ideas flowing. No need to stop to install, save, or export. It's what any good cloud software should be. Explore features. " Figma is fast. Files are always up to date.

Balsamiq
Balsamiq Wireframes - Industry Standard Low-Fidelity Wireframing Software | Balsamiq
** Balsamiq Wireframes - Industry Standard Low-Fidelity Wireframing Software | Balsamiq**Balsamiq Wireframes is the industry standard quick and easy low-fidelity UI wireframing tool. It makes work fun!

XD
Adobe XD | Fast & Powerful UI/UX Design & Collaboration Tool
** Adobe XD | Fast & Powerful UI/UX Design & Collaboration Tool**Adobe XD is a fast & powerful UI/UX design solution for websites, apps & more. Design, wireframe, animate, prototype...

InVision
Transformative collaboration for all the work you do | InVision

# data[].attributes.attachment_link.title
Herramientas de Prototipado y Desarrollo

# data[].attributes.attachment_link.description
👋 Listado de Herramientas, bienvenidos! Listado de herramientas para desarrollo de prototipos y maquetas web Figma: the collaborative interface design tool. Packed with design features you already love plus unique inventions like the Arc tool and Vector Networks, Figma helps you keep the ideas flowing. No need to stop to install, save, or export.

# data[].attributes.attachment_link.readable_text
Hi everyone and welcome! In this tutorial series, we are going to build a blog application with Python and the Django web framework. We will start from the configuration of the project then we will implement the following features: authentication, reset password, change password, comment, create a post, and finally we will deploy the application.

You can open the link below to see the application we are going to create (two features are missing, though: media files are not displayed and reset password don't work because the application is hosted for free).
www.django-blog-rouizi.herokuapp.com
The application has 1000 free dyno hours per month, when this limit is reached the application stop working until next month. This is because I am using Heroku free plan.

Below, I included a list of the articles in this series:

1. Django blog tutorial part 1: Project Configuration (This post)

2. Django blog tutorial part 2: Model View Template

3. Django blog tutorial part 3: Authentication and Profile Page

4. Django blog tutorial 4: Posts and Comments

5. Django blog tutorial part 5: Deployment on Heroku

6. Django blog tutorial part 6: Setting Up an Email Service

7. Django blog tutorial part 7: Serving Media Files From Amazon S3

Sponsored

Dependencies

To check the version of Python tap the following command in the terminal:

$ python3 -V Python 3.8.2

Setting Up a Virtual Environment and the Project

Let's start by creating a new directory and then initialize a virtual environment:

$ mkdir myproject && cd $_ myproject$ python3 -m venv venv myproject$ source venv/bin/activate

Note: From now on when we are in the root directory of the project ( myproject$), I will abbreviate it to $.

Now we can install Django with the pip command:

(venv) $ pip install django

When the installation ends we are ready to create a new Django project:

(venv) $ django-admin startproject blog .

The use of . just tell Django to create the project in the current directory ( myproject).
Sponsored

Configuring a PostgreSQL Database

To use a PostgreSQL database in a Django project, you must install the Psycopg2 library:

(venv) $ pip install psycopg2

Now we need to connect to PostgreSQL using the postgres user to create a user and a database:

(venv) $ sudo -u postgres psql password for user postgres : psql (12.4 (Ubuntu 12.4-1.pgdg20.04+1)) Type "help" for help. postgres=# CREATE DATABASE blog; postgres=# CREATE USER test WITH ENCRYPTED PASSWORD '1234'; postgres=# GRANT ALL PRIVILEGES ON DATABASE blog TO test; postgres=# \q

The last step is to let Django know that we want to use the database we just created.

# blog/settings.py # ... DATABASES = { 'default': { 'ENGINE': 'django.db.backends.postgresql', 'NAME': 'blog', 'USER': 'test', 'PASSWORD': '1234', 'HOST': '', 'PORT': 5432 } } # ...

You can remove the db.sqlite3 database:

(venv) $ rm db.sqlite3

Then start the server. You should see the output below:

(venv) $ python manage.py runserver Watching for file changes with StatReloader Performing system checks... System check identified no issues (0 silenced). # ...

If, instead, you have this error:

Watching for file changes with StatReloader Performing system checks... System check identified no issues (0 silenced). Exception in thread django-main-thread: Traceback (most recent call last): # ... django.db.utils.OperationalError: FATAL: Peer authentication failed for user "test"

Then you need to modify peer authentication to password authentication. Open the file pg_hba.conf (run locate pg_hba.conf to find where the file is):

(venv) $ sudo nano /etc/postgresql/12/main/pg_hba.conf # change this line: # "local" is for Unix domain socket connections only local all all peer # to this: # "local" is for Unix domain socket connections only local all test md5

Don't forget to restart the server:

(venv) $ sudo service postgresql restart
Sponsored

Using a Custom User Model

In the Django documentation, they highly recommend setting up a custom user model when starting a new project, even if the default one is sufficient for us. And since we need to extend the user model later, we are going to follow this recommendation.

First, we need to create an app:

(venv) $ python manage.py startapp users

Then open the file users/models.py and add these lines:

# users/models.py from django.db import models from django.contrib.auth.models import AbstractUser class User(AbstractUser): pass

Now we need to add the app in the INSTALLED_APPS settings and point AUTH_USER_MODEL to our custom user model:

# blog/settings.py INSTALLED_APPS = [ # ... 'users', ] # ... AUTH_USER_MODEL = 'users.User'

and register the model in users/admin.py:

# users/admin.py from django.contrib import admin from django.contrib.auth.admin import UserAdmin from .models import User admin.site.register(User, UserAdmin)

Finally, we can run the migrations:

(venv) $ python manage.py makemigrations Migrations for 'users': users/migrations/0001_initial.py - Create model User (venv) $ python manage.py migrate Operations to perform: Apply all migrations: admin, auth, contenttypes, sessions, users Running migrations: Applying contenttypes.0001_initial... OK # ...

If you want to learn more about custom user models, check out my post Django: Custom User Model Extending AbstractUser.

Hello World

To finish this part we are going to create a simple page that displays "Hello World".

First, let's create a new app:

(venv) $ python manage.py startapp core

and add it to INSTALLED_APPS:

# blog/settings.py INSTALLED_APPS = [ # ... 'users', 'core', ]

So far our project structure looks like this:

|── myproject/ | |── blog/ | | |── asgi.py | | |── __init__.py | | |── settings.py | | |── urls.py | | |── wsgi.py | |── core/ | | |── migrations/ | | | |── __init__.py | | |── admin.py | | |── apps.py | | |── __init__.py | | |── models.py | | |── tests.py | | |── views.py | |── users/ | | |── migrations/ | | | |── __init__.py | | |── admin.py | | |── apps.py | | |── __init__.py | | |── models.py | | |── tests.py | | |── views.py | |──venv/ | |── manage.py
Sponsored

Template Configuration

Good. Now we have to create a new folder named templates in the root directory where manage.py live:

|── myproject/ | |── blog/ | |── core/ | |── templates/ <-- here! | |── users/ | |── venv/ | |── manage.py

and inside the templates folder, create a file named base.html:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <title>{% block head_title %}Welcome - Blog{% endblock %}</title> </head> <body> <h1>Hello World !</h1> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> </body> </html>

It is recommended adding Bootstrap in a project via CDN (Content Delivery Network) for multiple reasons:

1. They are hosting the files on multiple servers, so the loading time is reduced.

2. The libraries are automatically updated.

3. SEO improved ...

After that we need to tell Django where to find our application's templates.

# blog/settings.py TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [BASE_DIR / 'templates'], # <-- add this 'APP_DIRS': True, 'OPTIONS': { # ... ], }, }, ]

The last step is to have a view that render the HTML file above. We are going to use a class based view.

Open the urls.py file and add the code below:

# blog/urls.py # ... from django.views.generic import TemplateView urlpatterns = [ path('admin/', admin.site.urls), path('', TemplateView.as_view(template_name='base.html'), name='home') ]

If you run the server you should see the result below:

Finally, let's create a superuser and add a requirements.txt file:

(venv) $ python manage.py createsuperuser Username: test Email address: Password: # 1234 Password (again): # 1234 # ... Superuser created successfully. (venv) $ pip freeze > requirements.txt

Ok, so far so good! We have all the pieces in place to start the core of our project. The blog!

I hope you enjoyed going through this first part of the tutorial as much as I enjoyed writing the content. See you in the next part.

If you are looking for the source code for this part of the tutorial you can find it at this link in GitHub: https://github.com/Rouizi/django-blog/tree/v0.1

# data[].attributes.attachment_link.title
Django blog tutorial part 1: Project Configuration

# data[].attributes.attachment_link.description
In this tutorial series, we are going to build a blog application with the Django web framework. We will start from the configuration of the project to deployment. In this first part, we are going to do all the required configuration for the project.

# data[].attributes.attachment_link.readable_text
100 Days CSS Challenge Day #

Grab the template and submit your work.

00:00:00

Switch Day

# data[].attributes.attachment_link.description
Challenge yourself and become a CSS expert in 100 days. Be creative, submit your result and check out what others have created. No Registration and completely free.

# data[].attributes.attachment_link.readable_text
How did you do?

I need more practice All good!

Optional anonymous feedback about this challenge:

# data[].attributes.attachment_link.description
Ace your front end web developer interview

# data[].attributes.attachment_link.readable_text
851

solution

s

Avengers Simple HTML

Sara B

193

solution

s

Cool webpage

Akash

155

solution

s

Pure CSS button animation

Elias

269

solution

s

Make a CSS Blog div with Flex

Nazrul Islam Nayan

13

solution

s

Minecraft Tutorial

Emil

746

solution

s

HTML - Simple Page

Sara B

132

solution

s

Pure CSS Button hover

Tom Snelling

0

solution

s

Create A Cool Login And Signup Page With Responsive

sunny00006

0

solution

s

Create A Cool Login And Signup Page With Responsive

sunny00006

1

solution

India Flag

balajirameshh

3

solution

s

landing page

xayrullayevzafarsam

# data[].attributes.attachment_link.description
Explore and attempt front-end coding challenges on Codier

# data[].attributes.attachment_link.readable_text
To use, add a number between 1 and 1,000 at the end of our URL. Height will be automatically set.

If you wish to add a custom height, add a number between 1 and 1,000 after the width's number.

https://placedog.net/500/280

To add a filter, append one of the following options after the width (if using auto-height), or height (if using custom height):

https://placedog.net/500/g - (g/greyscale) Adds the greyscale filter.

https://placedog.net/360/480/pixelate - (p/pixelate) Applies a pixelation filter with a strength of 5.

https://placedog.net/900/650/b - (b/blur) Applies blur filter with a strength of 10.

https://placedog.net/280/invert - (i/invert) Inverts the image.

https://placedog.net/950/640/s - (s/sepia) Adds a sepia effect, giving that vintage look.

https://placedog.net/950/640/bn - (bn/brightness) Increases brightness by 100.

https://placedog.net/950/640/contrast - (ct/contrast) Increases contrst by 70.

Each image listed here contains an image ID. You can append this ID at the end of your URL to always get that image, regardless of width, height or filters.

https://placedog.net/500/280/sepia?id=5

If you want to have a random image appear on every request, add the random parameter at the end of the URL.

https://placedog.net/640/480?random or https://placedog.net/640/480?r

# data[].attributes.attachment_link.description
To use, add a number between 1 and 1,000 at the end of our URL. Height will be automatically set. If you wish to add a custom height, add a number between 1 and 1,000 after the width's number.

# data[].attributes.attachment_link.description
Tigrenator es una calculadora de tarifas de Diseño y servicios creativos freelance, que permite en menos de un minuto a los creativos obtener un precio referencial al momento de realizar una cotización. El objetivo principal de esta aplicación es ofrecer a los creativos independientes una herramienta gratuita que les permita mantenerse informados sobre el precio en el mercado de su trabajo.

# data[].attributes.attachment_link.readable_text
Primero, nos referíamos al tema económico pero, a medida que íbamos avanzando, nos dimos cuenta de que tenía que ser accesible también para personas que no son profesionales del SEO.

¿Por qué?

Piénsalo, ¿qué producto, servicio o empresa no lucha cada día por mejorar su posicionamiento y obtener mayor visibilidad en Google?

Absolutamente todas están en esa lucha diaria.

Desde un freelance, hasta un ecommerce, pasando por una empresa de servicios.

Y esas personas tienen que poder trabajar el SEO a nivel económico y también de conocimiento.

Por eso DinoRANK es supersencilla de manejar y muy visual.

# data[].attributes.attachment_link.description
Primero, nos referíamos al tema económico pero, a medida que íbamos avanzando, nos dimos cuenta de que tenía que ser accesible también para personas que no son profesionales del SEO. ¿Por qué? Piénsalo, ¿qué producto, servicio o empresa no lucha cada día por mejorar su posicionamiento y obtener mayor visibilidad en Google?

# data[].attributes.attachment_link.readable_text
A collection of CSS spinners

# data[].attributes.attachment_link.title
uiGradients - Beautiful colored gradients

# data[].attributes.attachment_link.description
uiGradients is a handpicked collection of beautiful color gradients for designers and developers.

# data[].attributes.attachment_link.readable_text
Free for commercial or personal use by Dima Braven.

WebGradients is a free collection of 180 linear gradients that you can use as
content backdrops in any part of your website. Easy copy CSS3 crossbrowser code
and use it in a moment! We've also prepared a .PNG version of each gradient.
As a bonus, there are packs for Sketch & Photoshop.

# data[].attributes.attachment_link.description
Come to WebGradients.com for 180 beautiful linear gradients in CSS3, Photoshop and Sketch. This collection is curated by top designers and totally free.

# data[].attributes.attachment_link.readable_text
Collection of hand-picked free HTML and CSS hover effect code examples: animations, transitions, etc. Update of February 2019 collection. 11 new items.

CSS Hover Effect Examples

HTML and CSS hover effect code examples (34 items).

Demo GIF: Attract Hover Effect

Attract Hover Effect

Attract hover effect with HTML, CSS and JavaScript.
Made by Louis Hoebregts
July 6, 2017

Demo Image: Pure CSS Perspective Hover Effect

Pure CSS Perspective Hover Effect

List of blocks with perspective effect.
Made by Maxime Lafarie
July 6, 2017

Demo Image: Image Hover Effect

Image Hover Effect

Image with reflection and proximity effect on hover.
Made by Tiago Alexandre Lopes
June 2, 2017

Demo Image: Stacked Cards Hover Effects

Stacked Cards Hover Effects

Just playing around with more CSS transitions and hover effects.
Made by Kyle Brumm
May 17, 2017

Demo Image: CSS 3D Hover

CSS 3D Hover

Pure CSS 3D hover effect for cards.
Made by Akhil Sai Ram
December 24, 2016

Demo Image: 10 Stylish Hover Effects With LESS

10 Stylish Hover Effects With LESS

A small collection of stylish effects with LESS.
Made by Renan C. Araujo
October 13, 2016

Demo Image: 10 Stunning Hover Effects With SCSS

10 Stunning Hover Effects With SCSS

A small collection of stylish effects with SCSS.
Made by Renan C. Araujo
October 13, 2016

Demo Image: Pure CSS 3D Perspective Render With :hover Animation

Pure CSS 3D Perspective Render With :hover Animation

Tip: To keep this 3D look you must know a detail, the length of the word must be proportional to the body's perspective property number. If the length of this word increase you must increase the perspective too :)
Made by Rafael González
September 16, 2016

Demo Image: Hover Squares

Hover Squares

HTML and CSS hover squares.
Made by Rudolf van der Ven
December 8, 2015

Demo GIF: Direction-Aware 3D Hover Effect

Direction-Aware 3D Hover Effect

CSS & bits of JS.
Made by Noel Delgado
October 30, 2014

Demo GIF: CSS3 Hover Effects

CSS3 Hover Effects

Inspired by tympanus.net, a showcase of most CSS3 hover effects.
Made by honglio
November 21, 2013

Demo GIF: Hover Animation

Hover Animation

Uses jQuery to add/remove classes and trigger animation only on mouse out.
Made by Matt Boldt
July 8, 2013

Hover Effect CSS Libraries

HTML and CSS hover effect libraries (5 items).

Demo Image: Hover.css

Hover.css

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.
Made by Ian Lunn

Demo Image: iHover.css

iHover.css

iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.
Made by gudh

Demo Image: Image Hover Effects

Image Hover Effects

Image hover effects that work with or without Bootstrap.
Made by Michael

Demo Image: Mocassin.css

Mocassin.css

Mocassin.css is a responsive collection of hover effects for captions, powered by Sass. Each caption is adapt the size of the image.
Made by Eliezer Pujols

Demo Image: HoverEffects.css

HoverEffects.css

Several hover effects for navigation (CSS3).
Made by Kevin Jannis

# data[].attributes.attachment_link.description
Collection of hand-picked free HTML and CSS hover effect code examples: animations, transitions, etc. Update of February 2019 collection. 11 new items. HTML and CSS hover effect code examples (34 items). Attract hover effect with HTML, CSS and JavaScript. Made by Louis Hoebregts July 6, 2017 List of blocks with perspective effect.

# data[].attributes.headline
Cuando usar Flexbox o la basura de Grids

# data[].attributes.subject
Cuando usar Flexbox o la basura de Grids

# data[].attributes.attachment_link.title
CSS Grid vs Flexbox - Cuando usar uno u otro.

# data[].attributes.attachment_link.readable_text
Django

Hosting by In-kind donors

Design by Threespot & andrevv

© 2005-2022 Django Software Foundation and individual contributors. Django is a registered trademark of the Django Software Foundation.

# data[].attributes.attachment_link.readable_text
Use these test fonts to mock up your print, web or app designs for approval before licensing the full versions.

The 11.4 MB download includes:

All of our retail fonts

OpenType Format (.otf) files

Web Open Font Format 2.0 (.woff2) files

Our test font family names are prefixed with "Test".

Test fonts have no OpenType features and a limited character set:

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 .,-

# data[].attributes.attachment_link.description
Use these test fonts to mock up your print, web or app designs for approval before licensing the full versions. The 11.4 MB download includes: All of our retail fonts OpenType Format (.otf) files Web Open Font Format 2.0 (.woff2) files Our test font family names are prefixed with "Test".

# data[].attributes.attachment_link.readable_text
Browser support

The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients).

Also, this gallery won't work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation.

Submission guidelines

If you have a new pattern to submit, please send a pull request. However, please bear in mind that I can't accept all submissions, sorry for that. For a pattern to be accepted, the following factors are considered (in descending order of importance):

Does it present a new technique?

Is the number of gradients and color stops worth the effect? The whole point of those patterns is to make page loading faster by reducing file size and HTTP requests without the unreadable gibberish that data URIs add in our stylesheets. If your pattern needs a 2KB code for example (which becomes 10KB when used in production, due to all the prefixes), then it's not very useful, except serving as a proof of concept.

How common is the pattern?

Does it look nice?

# data[].attributes.attachment_link.description
Todos los enlaces útiles de diseño y desarrollo que fui coleccionando con el tiempo 😄

# data[].attributes.attachment_link.description
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.

# data[].attributes.attachment_link.title
Material Symbols and Icons - Google Fonts

# data[].attributes.attachment_link.description
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

# data[].attributes.attachment_link.title
Boxicons : Premium web friendly icons for free

# data[].attributes.attachment_link.description
Boxicons is a free collection of carefully crafted open source icons. Each icon is designed on a 24px grid with the material guidelines

# data[].attributes.attachment_link.readable_text
master

Switch branches/tags

1 branch 0 tags

Go to file

Code

Clone

Use Git or checkout with SVN using the web URL.

Download ZIP

Latest commit

the-kodechamp Added Signup, Login and Password Reset Folder

75ddaea
on Apr 28, 2020

Added Signup, Login and Password Reset Folder

75ddaea

Git stats

9 commits

Files

Permalink

Failed to load latest commit information.

Type

Name

Latest commit message

Commit time

.env

Added Sendgrid Mail Integration

2 years ago

.idea

Added Signup, Login and Password Reset Folder

2 years ago

blog

Added Signup, Login and Password Reset

2 years ago

myblog

Added Signup, Login and Password Reset

2 years ago

.gitignore

Added Signup, Login and Password Reset

2 years ago

README.md

Create README.md

2 years ago

db.sqlite3

Added Signup, Login and Password Reset

2 years ago

manage.py

Initial Commit - Create a Blog with Django

2 years ago

README.md

django_blog_tutorial

A Django tutorial on Creating a Blog

This blog was created as part of a tutorial on how to create a blog with Django.

# data[].attributes.attachment_link.title
GitHub - the-kodechamp/django_blog_tutorial: A Django tutorial on Creating a Blog

# data[].attributes.attachment_link.description
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

# data[].attributes.attachment_link.readable_text
Space Awesome

Adventures in Space

You are the captain of the SS Avius. You are about to embark on a long journey to the planet of Insecano Prime. You must hire a crew and buy supplies for the long journey ahead.

© 2022 FONTICONS INC.

Space Awesome is created and powered by Font Awesome, the internet's most popular icon library and toolkit. Join millions of other devs, designers, and content creators and go make something awesome.

v1.0.1

# data[].attributes.attachment_link.readable_text
Al tener sitios web que toman todo el ancho de la pantalla, encontramos que se puede integrar ciertos elementos que pueden venir muy bien para exponer todo un muestrario de productos en venta o los viajes que podamos tener en oferta para el verano. Los carruseles o sliders son uno de esos elementos web que permiten mostrar nuestros productos de forma bastante llamativa en lo visual.

Los sliders, scrollers o carruseles gratuitos en CSS que encontraréis a continuación, conforman un buen repertorio para todo tipo de objetivos en el trabajo que vayamos a mostrar al cliente antes de que acepte nuestro presupuesto. Es una colección de sliders en HTML y CSS con un poco de JavaScript tanto en formato horizontal como en vertical. Vamos a ello para que podáis acceder al código implementarlos rápidamente.

Este carrusel consta de una animación bastante llamativa como si estuviéramos corriendo una cortina, para justo hazer un zoom out para las fotos e iconos de los perfiles que vayamos a instaurar en este slider. Es un carrusel perfecto para testimonios de usuarios que se encuentran muy satisfechos con los productos que vendamos en la web.

Este slider es como la publicidad que a veces se puede ver en los campos de futbol en los laterales y que muestra distintos anuncios que se desplazan de forma horizontal. Es ideal para landing pages que necesitan mostrar los socios de marcas y otro tipo de logos.

Este scroll destaca por su React.js. que se presta a mostrar las imágenes a un tamaño proporcionado según vamos pasando de una imagen a otra en una continua animación. Poco más que decir sobre este CSS bastante simple, pero de gran efecto si sabemos situarla adecuadamente en la web.

Compuesto por HTML, CSS y JavaScript, este carrusel 3D destaca por su suavidad y una animación de rebote de gran efecto visual. Con una serie de elementos que identifican cada tarjeta, un trabajo y llamativo carrusel para incorporarlo ya en tu sitio web.

Un slider que como su propio nombre avisa, se muestra de forma automática sin que el usuario tenga que interactuar en ningún momento con él. Van apareciendo las distintas imágenes que componen este carrusel llamativo por la transición en la que desvanece por arte de magia.

Con el elemento hover este slider se mueve de izquierda a derecha, o viceversa, según vamos dejando el puntero del ratón encima del mismo. Una suave transición para transitar entre las distintas fotografías que pueden componer este slider de imágenes.

También llamado Carrusel Material Design, y con la tendencia actual con todo tipo de tarjetas, aquí podéis encontrar otro artículo con un gran número de ellas en CSS/HTML, se distancia del resto por estar compuesto por el lenguaje de diseño publicado por Google. Puedes mover las distintas tarjetas al pulsar prolongadamente sobre las tarjetas.

Puede chocar la idea detrás de este slider que destaca por una tira de imágenes que pueden ser ampliadas al pulsar en una de ellas. Una animación de gran efecto, aunque este dirigida para un tipo de web en concreto. Publicaciones de Instagram llevadas a un carrusel slick.js.

Tiene mucho que ver con el anterior, sobre todo en la tira de imágenes, aunque la interacción con el slider es bien diferente al desplazarlo con un gesto lateral de izquierda a derecha y viceversa. De nuevo tenemos a slick.js haciendo de las suyas. Llamativo por su gran efecto.

Uno de los carruseles más interesantes de toda la lista que publicamos. Destaca por sus sliders horizontales en CSS y HTML que se mueven fantasticamente bien. Solamente has de dejar el puntero del ratón sobre las cajas para encontrar los distintos efectos que se pueden producir con las cuatro variaciones.

Simple y de gran efecto visual con una serie de tarjetas que se van turnando en la parte frontal. El efecto es en 3D, así que es uno de esos sliders que llaman mucho la atención, sobre todo por el mínimo efecto de rebote que muestra genio por parte del creador del mismo.

Un simple slider con gran efecto que no destaca por mucho. Es uno de esos sliders simples que solemos buscar y que brinda esa sensación de ser uno sin muchos alardes, pero que cumple perfectamente su función.

Si quieres presentar al equipo editorial que tienes en el blog, este slider es perfecto en su cometido. Bien parecido al anterior por lo simple que es. Destaca por el uso de rombos para albergar cada una de las fotografías del equipo. Tiene reproducción automática.

Slider que destaca por ser un cubo en el que cada una de las caras es una de las imágenes o fotografías que queremos mostrar en un sitio web. Solamente has de hacer clic en cada una de ellas para desplazarlas y averiguar así el contenido que te espera.

Un slider en el que la interacción pasa por el uso de las teclas de dirección. Simple sin muchos alardes que va directamente a otro tipo de interacción, una que parece de hace años. Para un uso en determinado.

Un slider de gran efecto visual que se reproduce automáticamente en una continua animación vertical que destaca por sus tarjetas con esquinas redondeadas. Muy actual y uno de los que destaca por si solo de toda esta lista.

Este carrusel destaca por tener un menú lateral desde el que podemos ir pulsando en cada una de sus opciones. La información aparece con un efecto de rebote bien conseguido sin mucho más que lo dicho.

Similar al anterior por su verticalidad, aunque este slider es capaz de tomar todo el ancho de la página para mostrar las imágenes de cada una de sus pestañas. Interesante por su gran formato y el uso de transiciones CSS para deslizarse entre los slides.

De un gran efecto en lo visual con un patrón de sliders que va girando en 3D con una animación muy llamativa. Se puede seleccionar cada una de las opciones desde el menú lateral izquierdo con puntos para cada una de ellas. Uno de los mejores de la lista por lo creativo que es.

# data[].attributes.attachment_link.title
19 sliders gratuitos en HTML y CSS para tu sitio web

# data[].attributes.attachment_link.description
Al tener sitios web que toman todo el ancho de la pantalla, encontramos que se puede integrar ciertos elementos que pueden venir muy bien para exponer todo un muestrario de productos en venta o los viajes que podamos tener en oferta para el verano.

# data[].attributes.attachment_link.readable_text
One of the main contributors to our success at grox.io: the Bulma framework by @jgthms.

His work is brilliant. It's very low JavaScript, and it plays very well with @elixirphoenix #liveview.

In short, Bulma provides its value and gets out of the way. Thanks!

# data[].attributes.attachment_link.title
Bulma: Free, open source, and modern CSS framework based on Flexbox

# data[].attributes.attachment_link.description
One of the main contributors to our success at grox.io: the Bulma framework by @jgthms. His work is brilliant. It's very low JavaScript, and it plays very well with @elixirphoenix #liveview. In short, Bulma provides its value and gets out of the way. Thanks!

# data[].attributes.attachment_link.readable_text
This branch is not ahead of the upstream kautukkundan:master.

No new commits yet. Enjoy your day!

# data[].attributes.attachment_link.title
GitHub - milemonson/Awesome-Profile-README-templates: A collection of awesome readme templates to display on your profile

# data[].attributes.attachment_link.description
The aim of this repository is to collect awesome READMEs that developers around the world are using on their own profiles to act as an inspiration for others. Video about GitHub Profile README Feel free to add your own or someone else's profile README if you find it super awesome!

# data[].attributes.attachment_link.readable_text
Welcome to Learn Progressive Web Apps! #

Welcome to Learn Progressive Web Apps!

This course covers the fundamentals of Progressive Web App development into easy-to-understand pieces. Over the following modules, you'll learn what a Progressive Web App is, how to create one or upgrade your existing web content, and how to add all the pieces for an offline, installable app. Use the menu pane by the "Learn PWA" logo to navigate the modules.

You'll learn PWA fundamentals like the Web App Manifest, service workers, how to design with an app in mind, what's different from a classic web app, how to use other tools to test and debug your PWA. After these fundamentals, you'll learn about integration with the platform and operating system, how to enhance your PWA's installation and usage experience, and how to offer an offline experience.

Each module includes interactive demos and self-assessments for you to test your knowledge. You will be able to test and try demos on your mobile phone, tablet, or laptop while playing with code to understand the fundamentals of what makes a Progressive Web App.

This course is created for a beginner and advanced web developers alike. You can go through the series from start to finish to get a general understanding of PWA from top to bottom, or you can use it as a reference for specific subjects. For those new to web development you will need a grounding in HTML, CSS, and JavaScript to follow along. Check out Learn CSS, and the HTML and JavaScript courses on MDN.

Here's what you'll learn:

Progressive Web Apps

Progressive Web Apps (PWAs) are web apps built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device, all with a single codebase.

Getting started

If you want to build a Progressive Web App, you may be wondering where to start, if it's possible to upgrade a website to a PWA without starting from scratch, or how to move from a platform-specific app to a PWA. This article will help you answer these questions.

Foundations

All Progressive Web Apps are, at their core, modern websites, so it's important that your website has a solid foundation in responsive design, mobile and everything first, intrinsic design, and web performance.

App design

One of the key differences between Progressive Web Apps and classic websites and web apps is installability. This creates a standalone experience more integrated into the platform and operating system. Installation enables new flexibility and new responsibility, as we won't have a browser's user interface around our content.

Assets and data

A Progressive Web App is a website; all its assets are the same as on the web, but with new tools to make those assets load fast when online and available when offline.

Service workers

Service workers are a fundamental part of a PWA. They enable fast loading (regardless of the network), offline access, push notifications, and other capabilities.

Caching

You can use the Cache Storage API to download, store, delete or update assets on the device. Then these assets can be served on the device without needing a network request.

Serving

Using the service worker's fetch event, you can intercept network requests and serve a response using different techniques.

Workbox

Workbox is a set of modules that simplify common service worker interactions such as routing and caching. Each module addresses a specific aspect of service worker development. Workbox aims to make using service workers as easy as possible while allowing the flexibility to accommodate complex application requirements where needed.

Offline data

To build a solid offline experience you need to implement storage management. Tools like IndexedDB, Cache, Storage Manager, Persistent Storage, and Content Indexing can help.

Installation

Installed apps are easy to access and can take advantage of some deeper integrations with the OS. Learn to make your PWA installable and gain those benefits.

Web app manifest

The web app manifest is a JSON file that defines how the PWA should be treated as an installed application, including the look and feel and basic behavior within the operating system.

Installation prompt

For sites that pass the PWA install criteria, the browser triggers an event to prompt the user to install it. The good news is that you can use this event to customize your prompt and invite users to install your app.

Update

Chances are your PWA needs updating. This chapter gives you the tools to update different parts of your PWA, from assets to metadata.

Enhancements

Your user expects a good experience. In this chapter, you will see how to enhance your PWA with splash screens, app shortcuts, and how sessions work.

Detection

Identifying how your users interact with your app is useful in customizing and improving the user experience. For example, you can check whether your app is already installed on the user's device and implement features such as transferring navigation to the standalone app from the browser.

OS Integration

Your PWA now works outside the browser. This chapter covers how to integrate further with the operating system once users install your app.

Window management

A PWA outside of the browser manages its own window. In this chapter, you will understand the APIs and capabilities for managing a window within the operating system.

Experimental features

There are PWA capabilities that are still under construction and you can be part of their development. In this chapter you'll learn about the Fugu project, how to sign-up for an origin trial, and how to use experimental APIs

Tools and debug

We will explore the tools available to develop, debug, and test your Progressive Web Apps.

Architecture

You make some decisions when developing a PWA, such as whether to create a single page application or a multi-page application, and whether you will host it in the root of your domain or within a folder.

Complexity management

Keeping a web app simple can be surprisingly complicated. In this module, you will learn how web APIs work with threading and how you can use this for common PWA patterns such as state management.

Capabilities

PWAs are not just tied to the screen. This chapter is about the capabilities that a PWA has today in terms of hardware, sensors, and platform usage.

Conclusion

Next steps and resources.

So, are you ready to learn PWA?

# data[].attributes.attachment_link.description
A course that breaks down every aspect of modern progressive web app development.

# data[].attributes.attachment_link.readable_text
Welcome to Learn forms #

This course breaks down HTML forms into easy to understand pieces. Over the next few modules, you'll learn how an HTML form works and how to use them effectively in your projects. Use the menu pane by the Learn Forms logo to navigate the modules.

You'll learn how to build a basic HTML form, about HTML form elements, styling forms, help users re-entering data, ensuring the form is accessible, and secure, how to test your forms, and about specific form types.

Each module is full of interactive demos and self-assessments for you to test your knowledge.

This course is suitable for beginners and advanced HTML developers. The first few modules help you get started with building HTML forms, the other modules give more detail. You can go through the series from start to finish to get a general understanding of HTML forms, or pick a specific module you want to learn more about.

Prerequisites #

Before starting this course, you should know about HTML. For those new to web development, check out the intro to HTML course from MDN to learn all about how to write markup.

Demos #

For most demos, we use CodePen.

Looking at the demos, you might wonder where the styles come from. We use a general stylesheet included in all demos, so only the relevant styles are shown there. In CodePen, you can select included CSS files from Settings.

Form controls and form fields #

A form control is an element that enables user interaction and data entry or selection: an <input>, <select>, <textarea> or <button>.

Sometimes form field is used to refer to form controls, in particular elements for text entry: <input> and <textarea>.

Here's what you'll learn #

Use forms to get data from users

Learn the basics of using a form on the web with this introduction to the form element.

Help users enter data in forms

An overview of the various form elements you can choose from to build your form.

Help users avoid re-entering data in forms

Make it more convenient for users to fill out forms.

Help users enter the right data in forms

Learn how to validate your forms on the frontend.

Test your forms

Learn how to test and analyze your forms.

Design basics

Learn how to build user-friendly forms.

Accessibility

How to build inclusive forms.

Internationalization and localization

Be prepared for international data formats, and learn how to plan your form for localization.

Security and privacy

Learn how to make your forms secure and keep your users' data private.

Autofill

Learn all about autofill and the autocomplete attribute.

How to test forms for usability

Discover how to do usability testing and ensure your form works well for all your users.

Test forms across devices and platforms

Ensure your form works with different devices, browsers, platforms, and different contexts.

Gathering data

Learn how to measure and analyze your form.

The form element in depth

Learn all about the form element, when you should use a form, and how a form works in detail.

Form fields in depth

Learn about the different form fields you can use, and how to choose the right form element.

Form attributes in depth

Learn all about form attributes: how to modify the layout of on-screen keyboards, activate built-in validation, and more.

Styling forms

Style forms using CSS, while ensuring they remain usable and readable for everyone.

Styling form controls

Learn how to implement form controls with CSS.

JavaScript

Find out how to use JavaScript to enhance your forms.

Identity

Learn how to build secure and accessible sign-up and sign-in forms, and find out how to help users change their account settings.

Payment forms

Improve conversion rates by building better payment forms.

Address forms

Help users fill out address forms quickly and easily.

Conclusion and next steps

Further resources to help you take your next steps.

So, are you ready to learn about forms? Let's get started.

# data[].attributes.attachment_link.description
A course about HTML forms to help you improve your web developer expertise.

# data[].attributes.attachment_link.description
A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.

# data[].attributes.attachment_link.readable_text
Welcome to Learn CSS! #

This course breaks down the fundamentals of CSS into digestible, easy to understand pieces. Over the next few modules, you'll learn how the core aspects of CSS work and how to use them effectively in your projects. Use the menu pane by the "Learn CSS" logo to navigate the modules.

You'll learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid and z-index. And, along with these fundamentals, you'll learn about functions, color types, gradients, logical properties and inheritance to make you a well-rounded front-end developer, ready to take on any user interface.

Each module is full of interactive demos and self-assessments for you to test your knowledge. In addition to learning through reading and demos, there is an accompanying podcast episode for each topic as another way to learn and continue expanding your knowledge.

This course is created for beginner and advanced CSS developers alike. You can go through the series from start to finish to get a general understanding of CSS from top to bottom, or you can use it as a reference for specific styling subjects. For those new to web development overall, check out Learn HTML to learn all about how to write markup and link your stylesheets.

Here's what you'll learn:

Everything displayed by CSS is a box. Understanding how the CSS Box Model works is therefore a core foundation of CSS.

To apply CSS to an element you need to select it. CSS provides you with a number of different ways to do this, and you can explore them in this module.

Sometimes two or more competing CSS rules could apply to an element. In this module find out how the browser chooses which to use, and how to control this selection.

This module takes a deeper look at specificity, a key part of the cascade.

Some CSS properties inherit if you don't specify a value for them. Find out how this works, and how to use it to your advantage in this module.

There are several different ways to specify color in CSS. In this module we take a look at the most commonly used color values.

In this module find out how to size elements using CSS, working with the flexible medium of the web.

An overview of the various layout methods you have to choose from when building a component or page layout.

Flexbox is a layout mechanism designed for laying out groups of items in one dimension. Learn how to use it in this module.

CSS Grid Layout provides a two dimensional layout system, controlling layout in rows and columns. In this module discover everything grid has to offer.

Logical, flow relative properties and values are linked to the flow of text, rather than the physical shape of the screen. Learn how to take advantage of this newer approach to CSS.

Find out how to select the best method of spacing elements, taking into consideration the layout method you are using and component that you need to build.

A pseudo-element is like adding or targeting an extra element without having to add more HTML. They have a variety of roles and you can learn about them in this module.

Pseudo-classes let you apply CSS based on state changes. This means that your design can react to user input such as an invalid email address.

A border provides a frame for your boxes. In this module find out how to change the size, style and color of borders using CSS.

There are a number of ways to add shadows to text and elements in CSS. In this module you'll learn how to use each option, and the tasks they were designed for.

Understand the importance of focus in your web applications. You'll find out how to manage focus, and how to make sure the path through your page works for people using a mouse, and those using the keyboard to navigate.

In this module find out how to control the order in which things layer on top of each other, by using z-index and the stacking context.

CSS has a range of inbuilt functions. In this module you will find out about some of the key functions, and how to use them.

In this module you will find out how to use the various types of gradients available in CSS. Gradients can be used to create a whole host of useful effects, without needing to create an image using a graphics application.

Animation is a great way to highlight interactive elements, and add interest and fun to your designs. In this module find out how to add and control animation effects with CSS.

Filters in CSS mean that you can apply effects you might only think possible in a graphics application. In this module, you can discover what is available.

Create compositional effects by mixing two or more layers, and learn how to isolate an image with a white background in this module on blend modes.

A list, structurally, is composed of a list container element filled with list items. In this module, you'll learn how to style all the parts of a list.

In this module, learn how to define transitions between states of an element. Use transitions to improve user experience by providing visual feedback to user interaction.

Overflow is how you deal with content that doesn't fit in a set parent size. In this module, you'll think outside the box, and learn how to style overflowing content.

In this module learn the ways you can style backgrounds of boxes using CSS.

In this module, learn how to style text on the web.

Further resources to help you take your next steps.

So, are you ready to learn CSS? Let's get started.

# data[].attributes.attachment_link.description
An evergreen CSS course and reference to level up your web styling expertise.

# data[].attributes.attachment_link.readable_text
Loading...

clear all icons clear selected icons

Drag custom SVG icons or SVG font here.

by license:

Oops! Nothing found...

# data[].attributes.attachment_link.description
Standing on the shoulders of Subtle Patterns. Built and maintained by @mikehearn.

# data[].attributes.attachment_link.description
This is a book about JavaScript, programming, and the wonders of the digital. You can read it online here, or get your own paperback copy of the second edition. A paper third edition is expected to be available this December.

# data[].attributes.attachment_link.description
54997 free fonts in 30871 families · Free licenses for commercial use · Direct font downloads · Mac · Windows · Linux

# data[].attributes.attachment_link.readable_text
Designing Interface Animation - Meaningful Motion for User Experience ( PDFDrive ).pdf

Designing Interface Animation - Meaningful Motion for User Experience ( PDFDrive ).pdf

# data[].attributes.attachment_link.title
Designing Interface Animation - Meaningful Motion for User Experience ( PDFDrive ).pdf

# data[].attributes.attachment_link.readable_text
0:00 / 15:31•Watch full video

# data[].attributes.attachment_link.title
Learn Intersection Observer In 15 Minutes

# data[].attributes.attachment_link.title
Cómo crear 7 efectos CSS “hover” distintos desde cero

# data[].attributes.attachment_link.description
En el tutorial de hoy, vamos a crear 7 diferentes efectos CSS para el estado “hover” (cuando sitúas el ratón o el dedo sobre un elemento cliclable). Mientras vemos esto aprenderemos un montón...

# data[].attributes.attachment_link.readable_text
One of the best ways to learn JavaScript is to create projects. One of the best and funnest ways is to create games.

We just published a course on the freeCodeCamp.org YouTube channel that will help you learn JavaScript by building 7 different retro games.

Ania Kubów created this course. She has created many popular courses both on her own channel and the freeCodeCamp YouTube channel.

You will learn how to create clones of the following games:

Rock Paper Scissors

Memory Game

Connect Four

Space Invaders

Watch the full course below or on the freeCodeCamp.org YouTube channel (5-hour watch).

# data[].attributes.attachment_link.description
One of the best ways to learn JavaScript is to create projects. One of the best and funnest ways is to create games. We just published a course on the freeCodeCamp.org YouTube channel that will help you learn JavaScript by building 7 different retro games. Ania Kubów created this course.

# data[].attributes.attachment_link.title
Aprende GIT ahora! curso completo GRATIS desde cero