Month: June 2021

Posted on

How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side?

Category Image 091

I got this exact question in an email the other day, and I thought it would make a nice blog post because of how wonderfully satisfying this is to do in CSS these days. Plus we can sprinkle in polish to it as we go.

HTML-wise, I’m thinking image, text, image, text, etc.

<img src="..." alt="..." height="" width="" />
<p>Text text text...</p>

<img src="..." alt="..." height="" width="" />
<p>Text text text...</p>

<img src="..." alt="..." height="" width="" />
<p>Text text text...</p>

If that was our entire body in an HTML document, the answer to the question in the blog post title is literally two lines of CSS:

body {
  display: grid;
  grid-template-columns: min-content 1fr;
}

It’s going to look something like this…

Not pretty but we got the job done very quickly.

So cool. Thanks CSS. But let’s clean it up. Let’s make sure there is a gap, set the default type, and reign in the layout. 

body {
  display: grid;
  padding: 2rem;
  grid-template-columns: 300px 1fr;
  gap: 1rem;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  font: 500 100%/1.5 system-ui;
}
img {
  max-width: 100%;
  height: auto;
}

I mean… ship it, right? Close, but maybe we can just add a quick mobile style.

@media (max-width: 650px) {
  body {
    display: block;
    font-size: 80%;
  }
  p {
    position: relative;
    margin: -3rem 0 2rem 1rem;
    padding: 1rem;
    background: rgba(white, 0.8);
  }
}

OK, NOW ship it!

The post How do you make a layout with pictures down one side of a page matched up with paragraphs on the other side? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

Shopify Launches Online Store Version 2.0

Featured Imgs 23

Shopify is currently hosting its Unite conference and has announced the release of version 2.0 of the company’s online store. With this update, Shopify has unlocked new opportunities for developers to build platform experiences and themes. The company has also provided guidance for upgrading themes to 2.0 standards. 

Posted on

Cost for DaniWeb Premium

Featured Imgs 23

DaniWeb Premium is currently $5 per month. You can find details about everything it gives you here

Do you think this is too high a price point? At what price point would you be willing to pay? What if it were $1.99? What if it were $3?

Posted on

Add Editor-Only Notes via the Markdown Comment Block WordPress Plugin

Category Image 052

Rich Tabor, the Senior Product Manager of WordPress Experience at GoDaddy, tweeted that he had an idea for a new block at the end of last week. Shortly after, the Markdown Comment Block plugin appeared on WordPress.org.

The plugin is a one-off block. It allows users to enter notes directly into the post editor that will not appear on the front end of the site. Tabor said he came up with the idea when working on an article for building single-block plugins.

There are few things I love more than simple plugins with a tight focus, performing a single function. Markdown Comment Block lands in this category.

The plugin creates a new block that works nearly the same as a typical Paragraph block:

Adding inline comments to the WordPress post editor via the Markdown Comments Block plugin.
Adding inline comments to a post.

Users can change the text color, but they will not have access to the typical Rich Text controls. Those should be unnecessary anyway.

As someone who does long-form writing almost exclusively in Markdown, the block’s use of the double percent-sign syntax for comments intrigued me. Technically, the Markdown spec does not support any sort of special characters for them. It handles HTML comments. However, those appear in the source code on the front end when the document is rendered. I have only seen the %% mark to denote comments in the Inspire Writer app for Windows. Tabor said he had seen the same in Ulysses. The feature also exists in the Iceberg editor for WordPress, which Tabor created alongside Jeffrey Carandang.

The plugin also introduces the %% keyboard shortcut. Typing it directly in the editor will create a new Markdown Comment block.

My primary use case for the plugin would be leaving notes for my later self. However, it could also be handy in users’ publishing flows. The block adds a “Resolve” button to the toolbar. Clicking it deletes the comment.

Clicking the Resolve button for the Markdown Comment block to delete a comment.
Clicking the “Resolve” button will delete the block.

The block itself will not likely offer a robust enough feature set for complex workflows. However, pairing it with a plugin like Post Descriptions could round out the experience for larger teams of writers and copyeditors.

The Post Descriptions plugin allows users to add notes on the post level. These notes appear on the post-management screen, letting other team members know when to check an article. However, it may be hard to provide the full context of what issues need to be resolved before publishing. Markdown Comment Block adds an inline comments system, letting team members pass in-text notes.

Theme developers should appreciate that the block uses CSS custom properties too, which makes it easy to overwrite its default style rules. In moments, I was able to make it match my theme:

Customized output of the Markdown Comment Block.
Custom color, font, and line-height styles.

The --markdown-comment-font-size, --markdown-comment-line-height, and --markdown-comment-color variables are available for theme developers who want to add in support.

The one complaint I had about the block is its title: “Comment.” It is easy to confuse it with the six other comment-related blocks already in the WordPress block list. And, there will only be more in upcoming versions. Giving it a title of “Markdown Comment” would better distinguish it from others.

Posted on

What does `font: 110%/1.4 system-ui` mean?

Category Image 052

I use this line, or one like it, in a lot of quick demos. Not that it’s not a production-worthy line of code—I just tend to be a bit more explicit on bigger projects. 

html {
  font: 110%/1.4 system-ui;
}

Someone wrote in confused by it, and I could see how a line like that is a bit bewildering at first.

The first thing to know is that it is called shorthand. The font property in CSS gives you the opportunity to set a bunch of font-* properties all at once. In this case, we’re setting:

html {
  font-family: system-ui;
  font-size: 110%;
  line-height: 1.4;
}

There are a few more little specific things to know. For example, the order matters.

/* invalid */
html {
  font: system-ui 100%/1.4;
}

You also can’t set the line-height without also setting the font-size. If you’re going to set line-height, you have to set both. Be extra careful there because something like 20px is both a valid line-height and font-size, and if you only set one, it’ll be the font-size. If you go for a unitless number, which is a great idea for line-height, and try to set it alone, it’ll just fail.

/* invalid */
html {
  font: 1.5 system-ui;
}

Of course, we’ve got all this detailed in the Almanac entry for font. But I’ll also give a shout to Mateusz Hadryś who has a detailed article titled “Full Text Styling With a Single Line of CSS” with some detailed figures like this that are helpful in understanding everything:

Showing the font property declaration. Style, variant and weight are in yellow with a label above that says order doesn't matter and a label beneath saying these have to be first. Next is size with a forward slash then line-height in red. Above them is a label that says these have to be next to each other. Next is family in light blue with a label that says it has to be last. There is an additional white label that connects size and family that says they are required.

Lastly, if system-ui was part of the confusion there, that’s one of those System Things.

The post What does `font: 110%/1.4 system-ui` mean? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Posted on

My Business Needs Local SEO

Featured Imgs 20

To expand your customer base, it is pertinent to launch an organic search engine optimization campaign.
Avail these highly beneficial local SEO Tactics
At first claim Google My Business Listing
Google hosts 75% of the Global Search Engine market. Get benefit from Free listing at Google My Business. Make your company easily approachable. Make an account on these sites.

MerchantCircle
Thumbtack
Facebook
Whitepages

Prioritize your Customer Reviews
Approximately, 90% customers value the reviews on your website. Also consider the star rating.

Localized Your Website Content
Always add your name, address, and phone number easily scrollable on your website, make a header or footer of this information.

Always Avoid Keyword Stuffing, otherwise, Google Search Engine would detect your content as spammy.

Posted on

New Embed Modal

Featured Imgs 23

If you’ve used Embedded Pens before, you might notice the UI for helping you get the code from them has been updated:

All the same functionality there, it’s just everything works better. I’m a particular fan of how clear the choice is now on which tabs to display by default (that was a bit wonky before, sorry!). Plus, as you resize the height now, you’ll get a height readout in case you’re aiming for a very particular value. We’ll also remember all of your settings, so for example, if you always tend to select the same theme, that’ll be pre-selected when you open it back up.

Always feels good for us to bring areas of the site like this in-line with our latest-and-greatest design patterns, not only ensuring it looks and works good now, but will continue to take advantage of our pattern work.

The post New Embed Modal appeared first on CodePen Blog.

Posted on

how can this code be written

558fe5180e0e8fc922d31c23ef84d240

hey guys
i have this question that i am finding difficulity in help will be appriciated
Modify the Wombat 1 computer to Wombat 2 by adding Stack. Stack is a memory which
has only one opening where the values are pushed into or popped from stack. The values
pushed into the stack will settle down on top of other value. The last value pushed into the
stack will be the first one to come out and similarly the first value pushed into the stack will
be the last one to come out of the stack. The stack has two operations: which are Push
and Pop. Add a stack, a new stack pointer register, push and pop machine instructions to
make Wombat 2 computer. Please note that the push operation will push a value from the
main memory to the stack while the pop operation will pop a value from the stack to the
main memory.
Also, add call and return machine instructions. call instruction will allow the
subprogram to be called (which means start executing the code for the subprogram)
whereas return instruction will allow the subprogram to end and return to main program
(start executing the main program from where function call was made).
Write a complete Wombat 2 assembly language program. The main program should take a
positive number as input and call first subprogram to calculate the radix 4 representation
for that number and the second program will display the result. The radix 4 calculation
should use stack.

Posted on

Custom Property Brain Twisters

Category Image 052

I am part of that 82% that got it wrong in Lea’s quiz (tweet version).

Here’s the code:

:root {
  --accent-color: skyblue;
}

div {
  --accent-color: revert; 
  background: var(--accent-color, orange);
}

So what background do I expect <div> to have?

My brain goes like this:

  1. Well, --accent-color is declared, so it’s definitely not orange (the fallback).
  2. The value for the background is revert, so it’s essentially background: revert;
  3. The background property doesn’t inherit though, and even if you force it to, it would inherit from the <body>, not the root.
  4. So… transparent.

Nope.

Lea:

[Because the value is revert it] cancels out any author styles, and resets back to whatever value the property would have from the user stylesheet and UA stylesheet. Assuming there is no --accent-color declaration in the user stylesheet, and of course UA stylesheets don’t set custom properties, then that means the property doesn’t have a value.

Since custom properties are inherited properties (unless they are registered with inherits: false, but this one is not), this means the inherited value trickles in, which is — you guessed it — skyblue.

Stephen posted a similar quiz the other day:

Again, my brain does it totally wrong. It goes:

  1. OK, well, --color is declared, so it’s not blue (the fallback).
  2. It’s not red because the second declaration will override that one.
  3. So, it’s essentially like p { color: inherit; }.
  4. The <p> will inherit yellow from the <body>, which it would have done naturally anyway, but whatever, it’s still yellow.

Nope.

Apparently inherit there is actually inheriting from the next place up the tree that sets it, which html does, so green. That actually is now normal inheriting works. It’s just a brain twister because it’s easy to conflate color the property with --color the custom property.

It also might be useful to know that when you actually declare a custom property with @property you can say whether you want it to inherit or not. So that would change the game with these brain twisters!

@property --property-name {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

The post Custom Property Brain Twisters appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.