#NumberedLists

[phonemantra-blog]

In the ever-evolving landscape of instant messaging, WhatsApp continues to lead the way with innovative features designed to enhance users' overall experience. One such groundbreaking addition is the 'Search by Date' feature, enabling users to effortlessly locate specific messages within their WhatsApp chats based on the date. Available for Android, iOS, and Web users, this feature streamlines the search process, making it more intuitive and user-friendly. Understanding the 'Search by Date' Feature: A Step-By-Step Guide Step 1: Update Your WhatsApp App To begin harnessing the benefits of the 'Search by Date' feature, ensure that your WhatsApp app is up-to-date. Head to the Google Play Store for Android users or the Apple App Store for iOS enthusiasts, and download the latest version. Step 2: Open a Chat Navigate to any individual or group chat where you intend to search for specific messages. This can be a personal conversation or a group discussion. Step 3: Access Search Options For Android users, click on the three dots icon positioned in the top right corner of the screen. iPhone users, on the other hand, should tap on the contact or group name. Step 4: Initiate the Search Select the 'Search' option, unveiling a small calendar icon adorned with a search symbol. Step 5: Set Date Parameters Upon clicking 'Search,' a pop-up calendar emerges. Choose the desired date, month, and year, refining your search to pinpoint the exact timeframe. Step 6: Explore Messages Once you've set the parameters, gain access to messages from the specified day. Navigate through the chat by scrolling up or down to retrieve the information you seek. WhatsApp's Continuous Innovation: Recent Additions In addition to the 'Search by Date' feature, WhatsApp has recently introduced text formatting options for Android, iOS, Web, and Mac desktop users. Users can now leverage Bulleted Lists, Numbered Lists, Block Quote, and Inline Code functionalities to enhance the visual appeal and organization of their messages. For detailed instructions on using these text formatting options, refer to our previous article. Beyond Search by Date: Exploring Recent WhatsApp Enhancements The Search by Date feature joins a growing list of recent improvements implemented by WhatsApp to enhance user experience. Last month, the platform introduced text formatting options like bulleted lists, numbered lists, block quotes, and inline code, allowing users to structure and present their messages more effectively. Additionally, WhatsApp is actively developing a "third-party chat info" feature, further expanding user control over their chat experience. FAQs: Q: Is the Search by Date feature available on all platforms? A: Yes, the Search by Date feature is currently available on Android, iOS, Web, and desktop (Mac and Windows) versions of WhatsApp. Q: Can I search for messages before a specific date? A: As of now, the Search by Date feature allows you to search for messages sent or received from a specific date onwards. Selecting dates before the current date might not yield results. Q: How can I combine the Search by Date feature with keyword searches? A: To further refine your search, utilize the search bar within the chat window alongside the Search by Date feature. Enter relevant keywords to filter the messages displayed for the chosen date.

[aiexpressway]

Spice Up Your ChatGPT Outputs With 15 Different Formats

[editblogtema]

apa itu bulleted dan numbered list di blogger?

[suzanneshannon]

How to Make a List Component with Emotion

I’ve been doing a bit of refactoring this week at Sentry and I noticed that we didn’t have a generic List component that we could use across projects and features. So, I started one, but here’s the rub: we style things at Sentry using Emotion, which I have only passing experience with and is described in the docs as…

[…] a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

If you’ve never heard of Emotion, the general idea is this: when we’re working on big codebases with lots of components, we want to ensure that we can control the cascade of our CSS. So, let’s say you have an .active class in one file and you want to make sure that doesn’t impact the styles of a completely separate component in another file that also has a class of.active.

Emotion tackles this problem by adding custom strings to your classnames so they don’t conflict with other components. Here’s an example of the HTML it might output:

<div class="css-1tfy8g7-List e13k4qzl9"></div>

Pretty neat, huh? There’s lots of other tools and workflows out there though that do something very similar, such as CSS Modules.

To get started making the component, we first need to install Emotion into our project. I’m not going to walkthrough that stuff because it’s going to be different depending on your environment and setup. But once that’s complete we can go ahead and create a new component like this:

import React from 'react'; import styled from '@emotion/styled'; export const List = styled('ul')` list-style: none; padding: 0; `;

This looks pretty weird to me because, not only are we writing styles for the <ul> element, but we’re defining that the component should render a <ul>, too. Combining both the markup and the styles in one place feels odd but I do like how simple it is. It just sort of messes with my mental model and the separation of concerns between HTML, CSS, and JavaScript.

In another component, we can import this <List> and use it like this:

import List from 'components/list'; <List>This is a list item.</List>

The styles we added to our list component will then be turned into a classname, like .oefioaueg, and then added to the <ul> element we defined in the component.

But we’re not done yet! With the list design, I needed to be able to render a <ul> and an <ol> with the same component. I also needed a version that allows me to place an icon within each list item. Just like this:

The cool (and also kind of weird) thing about Emotion is that we can use the as attribute to select which HTML element we’d like to render when we import our component. We can use this attribute to create our <ol> variant without having to make a custom type property or something. And that happens to look just like this:

<List>This will render a ul.</List> <List as="ol">This will render an ol.</List>

That’s not just weird to me, right? It’s super neat, however, because it means that we don’t have to do any bizarro logic in the component itself just to change the markup.

It was at this point that I started to jot down what the perfect API for this component might look like though because then we can work our way back from there. This is what I imagined:

<List> <ListItem>Item 1</ListItem> <ListItem>Item 2</ListItem> <ListItem>Item 3</ListItem> </List> <List> <ListItem icon={<IconBusiness color="orange400" size="sm" />}>Item 1</ListItem> <ListItem icon={<IconBusiness color="orange400" size="sm" />}>Item 2</ListItem> <ListItem icon={<IconBusiness color="orange400" size="sm" />}>Item 3</ListItem> </List> <List as="ol"> <ListItem>Item 1</ListItem> <ListItem>Item 2</ListItem> <ListItem>Item 3</ListItem> </List>

So after making this sketch I knew we’d need two components, along with the ability to nest icon subcomponents within the <ListItem>. We can start like this:

import React from 'react'; import styled from '@emotion/styled'; export const List = styled('ul')` list-style: none; padding: 0; margin-bottom: 20px; ol& { counter-reset: numberedList; } `;

That peculiar ol& syntax is how we tell emotion that these styles only apply to an element when it’s rendered as an <ol>. It’s often a good idea to just add a background: red; to this element to make sure your component is rendering things correctly.

Next up is our subcomponent, the <ListItem>. It’s important to note that at Sentry we also use TypeScript, so before we define our <ListItem> component, we’ll need to set our props up first:

type ListItemProps = { icon?: React.ReactNode; children?: string | React.ReactNode; className?: string; };

Now we can add our <IconWrapper> component that will size an <Icon> component within the ListItem. If you remember from the example above, I wanted it to look something like this:

<List> <ListItem icon={<IconBusiness color="orange400" size="sm" />}>Item 1</ListItem> <ListItem icon={<IconBusiness color="orange400" size="sm" />}>Item 2</ListItem> <ListItem icon={<IconBusiness color="orange400" size="sm" />}>Item 3</ListItem> </List>

That IconBusiness component is a preexisting component and we want to wrap it in a span so that we can style it. Thankfully, we’ll need just a tiny bit of CSS to align the icon properly with the text and the <IconWrapper> can handle all of that for us:

type ListItemProps = { icon?: React.ReactNode; children?: string | React.ReactNode; className?: string; }; const IconWrapper = styled('span')` display: flex; margin-right: 15px; height: 16px; align-items: center; `;

Once we’ve done this we can finally add our <ListItem> component beneath these two, although it is considerably more complex. We’ll need to add the props, then we can render the <IconWrapper> above when the icon prop exists, and render the icon component that’s passed into it as well. I’ve also added all the styles below so you can see how I’m styling each of these variants:

export const ListItem = styled(({icon, className, children}: ListItemProps) => ( <li className={className}> {icon && ( <IconWrapper> {icon} </IconWrapper> )} {children} </li> ))<ListItemProps>` display: flex; align-items: center; position: relative; padding-left: 34px; margin-bottom: 20px; /* Tiny circle and icon positioning */ &:before, & > ${IconWrapper} { position: absolute; left: 0; } ul & { color: #aaa; /* This pseudo is the tiny circle for ul items */ &:before { content: ''; width: 6px; height: 6px; border-radius: 50%; margin-right: 15px; border: 1px solid #aaa; background-color: transparent; left: 5px; top: 10px; } /* Icon styles */ ${p => p.icon && ` span { top: 4px; } /* Removes tiny circle pseudo if icon is present */ &:before { content: none; } `} } /* When the list is rendered as an <ol> */ ol & { &:before { counter-increment: numberedList; content: counter(numberedList); top: 3px; display: flex; align-items: center; justify-content: center; text-align: center; width: 18px; height: 18px; font-size: 10px; font-weight: 600; border: 1px solid #aaa; border-radius: 50%; background-color: transparent; margin-right: 20px; } } `;

And there you have it! A relatively simple <List> component built with Emotion. Although, after going through this exercise I’m still not sure that I like the syntax. I reckon it sort of makes the simple stuff really simple but the medium-sized components much more complicated than they should be. Plus, it could be pretty darn confusing to a newcomer and that worries me a bit.

But everything is a learning experience, I guess. Either way, I’m glad I had the opportunity to work on this tiny component because it taught me a few good things about TypeScript, React, and trying to make our styles somewhat readable.

The post How to Make a List Component with Emotion appeared first on CSS-Tricks.

How to Make a List Component with Emotion published first on https://deskbysnafu.tumblr.com/

[gozealouscloudcollection]

做好倉儲控制系統（WCS）的關鍵

{“type”:”doc”,”content”:[{“type”:”paragraph”,”attrs”:{“indent”:0,”number”:0,”align”:null,”origin”:null},”content”:[{“type”:”text”,”text”:”仓储控制系统（Warehouse Controll System）负责接收上层仓储管理系统（WMS）的出、入库作业指令，转译为下层设备PLC控制指令，调度、驱动自动化设备工作，完成自动存取作业任务。同时自动采集、监控设备运行状态，根据状态自动处理作业任务并将结果报给WMS。”}]},{“type”:”paragraph”,”attrs”:{“indent”:0,”number”:0,”align”:null,”origin”:null}},{“type”:”image” ,”attrs”:{“src”:”https://static001.geekbang.org/infoq/c6/c64db0ef05d48beb5088da93f29f095b.png”,”alt”:null,”title”:”WCS所處位置”,”style” :[{“key”:”width”,”value”:”50%”},{“key”:”bordertype”,”value”:”none”}],”href”:””,”fromPaste”:false,”pastePass”:false}},{“type”:”paragraph”,”attrs”:{“indent”:0,”number”:0,”align “:null,”origin”:null}},{“type”:”paragraph”,”attrs”:{“indent”:0,”number”:0,”align”:null,”origin”:null} ,”content”:[{“type”:”text”,”text”:”WCS介于管理和设备之间的控制层，起到承上启下的关键纽带作用。作为软件系统理所当然应该符合应具备的功能和性能，例如“稳定性”对于WCS就是一个特别重要的指标。本文以用户思维导向，谈谈他们是怎么评价WCS的。”}]},{“type”:”paragraph”,”attrs”:{“indent”:0,”number”:0,”align”:null,”origin”:null}},{“type”:”paragraph” ,”attrs”:{“indent”:0,”number”:0,”align”:null,”origin”:null},”content”:[{“type”:”text”,”text”:”通过几十个项目的实践，倾听直接用户的需求和抱怨。总结起来，一套好用的WCS必须在以下三个方面做到”},{“type”:”text”,”marks”:[{“type”:”color”,”attrs”:{“color”:”#40A9FF”,”name”:”blue”}},{“type”:”strong”}],”text”:”便捷”},{“type”:”text”,”text”:”、”},{“type”:”text”,”marks”:[{“type”:”color”,”attrs”:{“color”:”#40A9FF”,”name”:”blue”}},{“type”:”strong”}],”text”:”傻瓜”},{“type”:”text”,”text”:”、”},{“type”:”text”,”marks”:[{“type”:”color”,”attrs”:{“color”:”#40A9FF”,”name”:”blue”}},{“type”:”strong”}],”text”:”直觀”},{“type”:”text”,”text”:”：”}]},{“type”:”numberedlist”,”attrs”:{“start”:1,”normalizeStart”:1},”content”:[{“type”:”listitem”,”content”:[{“type”:”paragraph”,”attrs”:{“indent”:0,”number”:1,”align”:null,”origin”:null},”content”:[{“type”:”text”,”text”:”异常处理-便捷；”}]}]},{“type”:”listitem”,”content”:[{“type”:”paragraph”,”attrs”:{“indent”:0,”number”:2,”align”:null,”origin”:null},”content”:[{“type”:”text”,”text”:”防呆防错-傻瓜；”}]}]},{“type”:”listitem”,”content”:[{“type”:”paragraph”,”attrs”:{“indent”:0,”number”:3,”align”:null,”origin”:null},”content”:[{“type”:”text”,”text”:”可视化交互-直观；”}]}]}]},{“type”:”heading”,”attrs”:{“align”:null,”level”:4},”content”:[{“type”:”text”,”text”:”异常处理要便捷”}]},{“type”:”paragraph”,”attrs”:{“indent”:0,”number”:0,”align”:null,”origin”:null},”content”:[{“type”:”text”,”text”:”为什么把异常处理列为关键中的关键呢？理由是仓储作业往往是生产、销售业务的关键环节，绝不能容许长时间停机中断业务！可是WCS是一个由软件、硬件、网络、设备集成在一起的复杂的系统，出现异常状况在所难免。特别是设备PLC层控制系统会考虑诸多安全性因素，智能检测各种是否可继续动作的条件，例如货物是否超高、超宽，货位是否被占用等，若出现异常状况就必须报警告知WCS中断指令执行。此时货物可能在入库口、输送巷道途中或者目的货位前，处在一个进退两难的境地。”}]},{“type”:”paragraph”,”attrs”:{“indent”:0,”number”:0,”align”:null,”origin”:null}},{“type”:”paragraph” ,”attrs”:{“indent”:0,”number”:0,”align”:null,”origin”:null},”content”:[{“type”:”text”,”text”:”用户有两种选择：要么继续，要么取消。”}]},{“type”:”paragraph”,”attrs”:{“indent”:0,”number”:0,”align”:null,”origin”:null},”content”:[{“type”:”text”,”text”:”若可以，用户希望解决PLC层设备报警问题，比如货物超宽很可能是缠绕膜飘出导致的，还比如目的货位被占用很可能是绕过系统手动将货物放入导致的等等，这些情形都要可以在解决问题后复位PLC控制系统，让作业自动继续，而不用回到WCS中再做任何操作。”}]},{“type”:”paragraph”,”attrs”:{“indent”:0,”number”:0,”align”:null,”origin”:null}},{“type”:”paragraph” ,”attrs”:{“indent”:0,”number”:0,”align”:null,”origin”:null},”content”:[{“type”:”text”,”text”:”一个大型仓库可能面积几千甚至上万平米、巷道很长，能不让用户走动的，绝对要避免。纯软件的用户体验设计会考虑鼠标移动距离最小，而WCS与用户的交互要考虑用户在仓库的走动距离最小，鼠标移动相比需要在仓库中走动来说几乎可以忽略不记了。”}]},{“type”:”paragraph”,”attrs”:{“indent”:0,”number”:0,”align”:null,”origin”:null}},{“type”:”paragraph” …

from 做好倉儲控制系統（WCS）的關鍵 via KKNEWS

[suzanneshannon]

How to Make a List Component with Emotion

I’ve been doing a bit of refactoring this week at Sentry and I noticed that we didn’t have a generic List component that we could use across projects and features. So, I started one, but here’s the rub: we style things at Sentry using Emotion, which I have only passing experience with and is described in the docs as…

[…] a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.

If you’ve never heard of Emotion, the general idea is this: when we’re working on big codebases with lots of components, we want to ensure that we can control the cascade of our CSS. So, let’s say you have an .active class in one file and you want to make sure that doesn’t impact the styles of a completely separate component in another file that also has a class of.active.

Emotion tackles this problem by adding custom strings to your classnames so they don’t conflict with other components. Here’s an example of the HTML it might output:

<div class="css-1tfy8g7-List e13k4qzl9"></div>

Pretty neat, huh? There’s lots of other tools and workflows out there though that do something very similar, such as CSS Modules.

To get started making the component, we first need to install Emotion into our project. I’m not going to walkthrough that stuff because it’s going to be different depending on your environment and setup. But once that’s complete we can go ahead and create a new component like this:

import React from 'react'; import styled from '@emotion/styled'; export const List = styled('ul')` list-style: none; padding: 0; `;

This looks pretty weird to me because, not only are we writing styles for the <ul> element, but we’re defining that the component should render a <ul>, too. Combining both the markup and the styles in one place feels odd but I do like how simple it is. It just sort of messes with my mental model and the separation of concerns between HTML, CSS, and JavaScript.

In another component, we can import this <List> and use it like this:

import List from 'components/list'; <List>This is a list item.</List>

The styles we added to our list component will then be turned into a classname, like .oefioaueg, and then added to the <ul> element we defined in the component.

But we’re not done yet! With the list design, I needed to be able to render a <ul> and an <ol> with the same component. I also needed a version that allows me to place an icon within each list item. Just like this:

The cool (and also kind of weird) thing about Emotion is that we can use the as attribute to select which HTML element we’d like to render when we import our component. We can use this attribute to create our <ol> variant without having to make a custom type property or something. And that happens to look just like this:

<List>This will render a ul.</List> <List as="ol">This will render an ol.</List>

That’s not just weird to me, right? It’s super neat, however, because it means that we don’t have to do any bizarro logic in the component itself just to change the markup.

It was at this point that I started to jot down what the perfect API for this component might look like though because then we can work our way back from there. This is what I imagined:

<List> <ListItem>Item 1</ListItem> <ListItem>Item 2</ListItem> <ListItem>Item 3</ListItem> </List> <List> <ListItem icon={<IconBusiness color="orange400" size="sm" />}>Item 1</ListItem> <ListItem icon={<IconBusiness color="orange400" size="sm" />}>Item 2</ListItem> <ListItem icon={<IconBusiness color="orange400" size="sm" />}>Item 3</ListItem> </List> <List as="ol"> <ListItem>Item 1</ListItem> <ListItem>Item 2</ListItem> <ListItem>Item 3</ListItem> </List>

So after making this sketch I knew we’d need two components, along with the ability to nest icon subcomponents within the <ListItem>. We can start like this:

import React from 'react'; import styled from '@emotion/styled'; export const List = styled('ul')` list-style: none; padding: 0; margin-bottom: 20px; ol& { counter-reset: numberedList; } `;

That peculiar ol& syntax is how we tell emotion that these styles only apply to an element when it’s rendered as an <ol>. It’s often a good idea to just add a background: red; to this element to make sure your component is rendering things correctly.

Next up is our subcomponent, the <ListItem>. It’s important to note that at Sentry we also use TypeScript, so before we define our <ListItem> component, we’ll need to set our props up first:

type ListItemProps = { icon?: React.ReactNode; children?: string | React.ReactNode; className?: string; };

Now we can add our <IconWrapper> component that will size an <Icon> component within the ListItem. If you remember from the example above, I wanted it to look something like this:

<List> <ListItem icon={<IconBusiness color="orange400" size="sm" />}>Item 1</ListItem> <ListItem icon={<IconBusiness color="orange400" size="sm" />}>Item 2</ListItem> <ListItem icon={<IconBusiness color="orange400" size="sm" />}>Item 3</ListItem> </List>

That IconBusiness component is a preexisting component and we want to wrap it in a span so that we can style it. Thankfully, we’ll need just a tiny bit of CSS to align the icon properly with the text and the <IconWrapper> can handle all of that for us:

type ListItemProps = { icon?: React.ReactNode; children?: string | React.ReactNode; className?: string; }; const IconWrapper = styled('span')` display: flex; margin-right: 15px; height: 16px; align-items: center; `;

Once we’ve done this we can finally add our <ListItem> component beneath these two, although it is considerably more complex. We’ll need to add the props, then we can render the <IconWrapper> above when the icon prop exists, and render the icon component that’s passed into it as well. I’ve also added all the styles below so you can see how I’m styling each of these variants:

export const ListItem = styled(({icon, className, children}: ListItemProps) => ( <li className={className}> {icon && ( <IconWrapper> {icon} </IconWrapper> )} {children} </li> ))<ListItemProps>` display: flex; align-items: center; position: relative; padding-left: 34px; margin-bottom: 20px; /* Tiny circle and icon positioning */ &:before, & > ${IconWrapper} { position: absolute; left: 0; } ul & { color: #aaa; /* This pseudo is the tiny circle for ul items */ &:before { content: ''; width: 6px; height: 6px; border-radius: 50%; margin-right: 15px; border: 1px solid #aaa; background-color: transparent; left: 5px; top: 10px; } /* Icon styles */ ${p => p.icon && ` span { top: 4px; } /* Removes tiny circle pseudo if icon is present */ &:before { content: none; } `} } /* When the list is rendered as an <ol> */ ol & { &:before { counter-increment: numberedList; content: counter(numberedList); top: 3px; display: flex; align-items: center; justify-content: center; text-align: center; width: 18px; height: 18px; font-size: 10px; font-weight: 600; border: 1px solid #aaa; border-radius: 50%; background-color: transparent; margin-right: 20px; } } `;

And there you have it! A relatively simple <List> component built with Emotion. Although, after going through this exercise I’m still not sure that I like the syntax. I reckon it sort of makes the simple stuff really simple but the medium-sized components much more complicated than they should be. Plus, it could be pretty darn confusing to a newcomer and that worries me a bit.

But everything is a learning experience, I guess. Either way, I’m glad I had the opportunity to work on this tiny component because it taught me a few good things about TypeScript, React, and trying to make our styles somewhat readable.

The post How to Make a List Component with Emotion appeared first on CSS-Tricks.

How to Make a List Component with Emotion published first on https://deskbysnafu.tumblr.com/