投稿時間:2022-12-30 04:18:08 RSSフィード2022-12-30 04:00 分まとめ(22件)

カテゴリー等	サイト名等	記事タイトル・トレンドワード等	リンクURL	頻出ワード・要約等/検索ボリューム	登録日
IT	InfoQ	Presentation: How Starling Built Their Own Card Processor	https://www.infoq.com/presentations/card-processor-microservices/?utm_campaign=infoq_content&utm_source=infoq&utm_medium=feed&utm_term=global	Presentation How Starling Built Their Own Card ProcessorRob Donovan Ioana Creanga discuss what happens behind the scenes when one pays with a card and how Starling built their own card processor integrating traditional hardware with microservices By Rob Donovan Ioana Creanga	2022-12-29 18:01:00
海外TECH	MakeUseOf	8 Ways to Fix the Windows Desktop When It Turns Pink or Purple	https://www.makeuseof.com/windows-desktop-pink-purple-fix/	desktop	2022-12-29 18:15:15
海外TECH	DEV Community	CSS Selectors: Style lists with the ::marker pseudo-element	https://dev.to/dianale_dev/css-selectors-style-lists-with-the-marker-pseudo-element-ee4	CSS Selectors Style lists with the marker pseudo elementFor HTML lists there was no straightforward way to style the bullets a different color from the list text until a couple of years ago If you wanted to change just the marker color you d have to generate your own with pseudo elements Now with widespread browser support of the marker pseudo element this can be targeted directly Let s look at the different methods for styling lists from methods before marker was available and how to style with marker going forward Here s a simple grocery list that we will style lt ul gt lt li class list apples gt Apples lt li gt lt li class list bananas gt Bananas lt li gt lt li class list avocados gt Avocados lt li gt lt li class list cheese gt Cheese lt li gt lt li class list bread gt Bread lt li gt lt ul gt Before marker Changing the bullet color using before or afterIn order to change the color of list bullets we need to generate new bullets using pseudo elements li display flex align items center gap rem li before content color ecd Here we are creating a bullet icon by using the CSS code unicode which is the code for a filled in circle We can set the color and then since the list item is using flex we can vertically center the bullet with the text Before flex was supported I used position absolute which was horrible to style and to keep responsive with the font size So with flex being available now this already makes the old method not as cumbersome as it used to be The new marker will take into account any left padding on the list I used to include the following rule to remove the default list styling first This is accomplished by the following line if you have any CSS resets in use this may already be included ul list style none This rule however is actually not needed because with the pseudo elements those replace the default style regardless You may or may not want to add this for standardization purposes Changing the marker to an imageWhat about changing the marker to an image instead This is actually pretty simple Here I m setting the marker to the CSS code unicode for a shopping cart emoji li list style FD Using marker Changing the color of the list markerNow that we have access to marker things are much easier If we want to just change the color of the bullets then it s just one line li marker color ecd For changing the bullets to an emoji we can also use marker This is the same amount of code as the old method so it s your preference on which to use Changing the marker to an emojili marker content Let s have fun and have each emoji match its list item list apples marker content list bananas marker content list avocados marker content list cheese marker content list bread marker content You can also use the CSS code unicode value for content instead of the actual emoji in case emojis cause issues within your editor or compiler li marker content FE ConclusionAnd that s it for styling list markers Short and simple and one of the really nice things to have compared to the old methods	2022-12-29 18:39:27
海外TECH	DEV Community	How to add pagination to your Next.js app	https://dev.to/logrocket/how-to-add-pagination-to-your-nextjs-app-184j	How to add pagination to your Next js appWritten by Taofiq Aiyelabegan️Next js is one of the easiest and most popular ways to build production ready React applications Over recent years Next js has experienced exponential growth and many companies have adopted it to build their applications In this article we will learn how to add pagination to a Next js application We ll talk about how to set up a Next js project data fetching from an API endpoint with getStaticProps method and implementing the pagination itself Jump ahead Initiating our Next js project Data fetching with getStaticProps Implementing the Pagination component Adding the pagination helper function Initiating our Next js project First we will create a new Next js app with the command npx create next app next pagination Then we can go into the project directory with the command cd next pagination and run yarn dev or npm run dev to start the project on a development server For this project we will use vanilla CSS for styling as it focuses more on functionality Data fetching with getStaticProps The data that will be used to implement our pagination will come from the JSON Placeholder API The data will be fetched using the getStaticProps function The getStaticProps function always runs on the server and Next js will pre render the page at build time using the props returned by getStaticProps The Fetch API will be used to get data from the previously mentioned API endpoint import Head from next head import Image from next image import styles from styles Home module css import Pagination from src components Pagination import useState useEffect from react import paginate from src helpers paginate export default function Home data console log data return lt div className styles container gt lt Head gt lt title gt Create Next App lt title gt lt meta name description content Generated by create next app gt lt link rel icon href favicon ico gt lt Head gt lt p gt NextJS X Pagination lt p gt export const getStaticProps async gt const res await fetch const data await res json return props data The data returned from the props will be destructured in the home component so it can be logged in the console This will confirm that the data has been fetched So in the console we should have a post with an array of objects as it was specified in the JSON Typicode website Now we can render this data on the webpage and see how they look on the UI import Head from next head import Image from next image import styles from styles Home module css export default function Home data return lt div className styles container gt lt Head gt lt title gt Create Next App lt title gt lt meta name description content Generated by create next app gt lt link rel icon href favicon ico gt lt Head gt lt p gt lt strong gt NextJS x Pagination lt strong gt lt p gt data map item gt return lt p key item id gt item title lt p gt lt div gt export const getStaticProps async gt const res await fetch const data await res json return props data Implementing the Pagination component For the Pagination component implementation we will create an src and component folder Inside component we will create a Pagination js file which will be rendered in the index js file const Pagination gt return lt div gt Pagination lt div gt export default PaginationThe Pagination rendered in index js will have four props items currentPage pageSize and onPageChange The items will be the length of the data we are getting from the API which in this case is The pageSize will be set to since we want to have pagination from and the currentPage will be stored in a state with a default value of since the page will start from page one The onPageChange will be a function to set the current page we are in for example moving from page one to two import Head from next head import Image from next image import styles from styles Home module css import Pagination from src components Pagination import useState from react export default function Home data const currentPage setCurrentPage useState const pageSize const onPageChange page gt setCurrentPage page return lt div className styles container gt lt Head gt lt title gt Create Next App lt title gt lt meta name description content Generated by create next app gt lt link rel icon href favicon ico gt lt Head gt lt p gt lt strong gt NextJS x Pagination lt strong gt lt p gt data map item gt return lt p key item id gt item title lt p gt lt Pagination items data length currentPage currentPage pageSize pageSize onPageChange onPageChange gt lt div gt export const getStaticProps async gt const res await fetch const data await res json return props data Then we will destructure these four props in Pagination and use them for the pagination implementation import styles from styles Home module css const Pagination items pageSize currentPage onPageChange gt const pagesCount Math ceil items pageSize if pagesCount return null const pages Array from length pagesCount i gt i console log pages return lt div gt lt div gt Pagination lt div gt lt div gt export default Pagination The items will be divided by the pageSize and stored in a pagesCount variable The Array from static method will be used to create a new Array instance from the pagesCount length which is Let s log the pages in the console and see what we have Now we can map over the pages array and render the value inside it There will be an anchor element for each of the values where the onClick function will be implemented const Pagination items pageSize currentPage onPageChange gt const pagesCount Math ceil items pageSize if pagesCount return null const pages Array from length pagesCount i gt i return lt div gt lt ul className styles pagination gt pages map page gt lt li key page className page currentPage styles pageItemActive styles pageItem gt lt a className styles pageLink onClick gt onPageChange page gt page lt a gt lt li gt lt ul gt lt div gt export default Pagination The styling of the pagination boxes will be done in the Home module css container padding rem pagination display flex justify content space between align items center list style none pageLink cursor pointer pagination pageItem pageItem display flex justify content center align items center width rem height rem border px solid eaeaea border radius rem cursor pointer pagination page item when active pageItemActive display flex justify content center align items center width rem height rem border px solid eaeaea border radius rem cursor pointer background color red Once we scroll down to the end of the posts data we should see boxes from being rendered The onPageChange function is passed to the anchor element with the argument of page so when any part of the box is clicked it will set the current page to the page number clicked Remember the onPageChange function in the index js file const onPageChange page gt setCurrentPage page Now let s see what we have Adding the pagination helper function Now we have been able to implement the pagination in our app but we still have posts being rendered for the first page instead of To implement this we will create a helper function in the paginate js file export const paginate items pageNumber pageSize gt const startIndex pageNumber pageSize return items slice startIndex startIndex pageSize The paginate file will have three arguments items pageNumber and pageSize This function will be called in the index js file and the argument will be passed as follows const paginatedPosts paginate data currentPage pageSize Here the data is passed as the items the array of data coming back from the API endpoint The currentPage represents the pageNumber and the pageSize is passed in as the pageSize In the pagination function the startIndex is first extracted by subtracting the currentPage number from and multiplying it by the pageSize Then we slice the items This is the array of data from the startIndex that we got initially until we got the startIndex pageSize value For example on the first page the pageNumber will be so startIndex will be gives Then startIndex pageSize declared in index js as will result in So the slicing starts from the Array length of till Let s log the paginatedPosts to the console to see what we have We can check what we now have on the webpage And we can paginate through all the pages There we have it ConclusionThank you for reading I hope this tutorial gives you the knowledge needed to add pagination to your Next js app You can customize the styling to your use case as this tutorial majorly focuses on the logic of implementing the functionality You can find this project s complete code in my repository and the deployed project on Vercel here Happy coding LogRocket Full visibility into production Next js appsDebugging Next applications can be difficult especially when users experience issues that are hard to reproduce If you re interested in monitoring and tracking Redux state automatically surfacing JavaScript errors and tracking slow network requests and component load time try LogRocket LogRocket is like a DVR for web and mobile apps recording literally everything that happens on your Next app Instead of guessing why problems happen you can aggregate and report on what state your application was in when an issue occurred LogRocket also monitors your app s performance reporting with metrics like client CPU load client memory usage and more The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions LogRocket logs all actions and state from your Redux stores Modernize how you debug your Next js apps ーstart monitoring for free	2022-12-29 18:14:13
Apple	AppleInsider - Frontpage News	How to use Stacks and Quick Look in macOS Ventura	https://appleinsider.com/inside/macos-ventura/tips/how-to-use-stacks-and-quick-look-in-macos-ventura?utm_medium=rss	How to use Stacks and Quick Look in macOS VenturaStacks and Quick Look are handy features in the macOS Finder that can help speed up your workflow Here s how to get started using them Stacks are spring loaded popups each containing a set of files in the Finder You can group stacks by file kind date or tags You can use Stacks in two ways in the Finder in the Dock and on the Desktop Read more	2022-12-29 18:22:27
Apple	AppleInsider - Frontpage News	Apple Watch can act as reliable & accurate stress indicator	https://appleinsider.com/articles/22/12/29/apple-watch-can-act-as-reliable-accurate-stress-indicator?utm_medium=rss	Apple Watch can act as reliable amp accurate stress indicatorThe ECG feature alongside other measurements in the Apple Watch can act a basic stress detector claims a new study Back in the then forthcoming Apple Watch Series was rumored to include features for monitoring mental health issues most specifically including anxiety Apple has not included such an anxiety or stress app as yet However a limited new study claims that the Apple Watch is already useful for predicting stress because of what else it is intended to detect Read more	2022-12-29 18:06:49
海外TECH	Engadget	New York’s governor signs watered-down right-to-repair bill	https://www.engadget.com/new-york-right-to-repair-law-kathy-hochul-184654713.html?src=rss	New York s governor signs watered down right to repair billAlmost seven months after the state legislature overwhelmingly passed a right to repair bill New York governor Kathy Hochul has signed it into law But Hochul only greenlit the bill after the legislature agreed to some changes Hochul wrote in a memo that the legislation as it was originally drafted included technical issues that could put safety and security at risk as well as heighten the risk of injury from physical repair projects The governor said the modifications addressed these issues but critics say the amendments will weaken the law s effectiveness This legislation would enhance consumer options in the repair markets by granting them greater access to the parts tools and documents needed for repairs Hochul wrote Encouraging consumers to maximize the lifespan of their devices through repairs is a laudable goal to save money and reduce electronic waste New Gov Hochul has signed the “right to repair law ーwith the Legislature agreeing to a number of changes as outlined in her approval message pic twitter com GUBExljBDーJon Campbell JonCampbellNY December The changes strip out the bill s requirement for original equipment manufacturers or OEMs to provide to the public any passwords security codes or materials to override security features OEMs will also be able to bundle assemblies of parts instead of just the specific component actually needed for a DIY repair if the risk of improper installation heightens the risk of injury nbsp The rules will only apply to devices that are originally built and used or sold in New York for the first time after July st There s also an exemption for digital products that are the subject of business to business or business to government sales and that otherwise are not offered for sale by retailers As Ars Technica reported earlier this month representatives for Microsoft and Apple pressed Hochul s office for changes So did industry association TechNet which represents many notable tech companies including Amazon Google Dell HP and Engadget parent Yahoo As a result the bill s revised language excludes enterprise electronics such as those that schools hospitals universities and data centers rely on as iFixit CEO Kyle Wiens wrote in a blog post Home appliances motor vehicles medical devices and off road equipment were previously exempted Such changes could limit the benefits for school computers and most products currently in use Public Interest Research Groups PIRG a collective of consumer rights organizations said in a statement to Engadget Even more troubling the bill now excludes certain smartphone circuit boards from parts the manufacturers are required to sell and requires repair shops to post unwieldy warranty language We knew it was going to be difficult to face down the biggest and wealthiest companies in the world PIRG right to repair director Nathan Proctor said But though trimmed down a new Right to Repair law was signed Now our work remains to strengthen this law and pass others until people have what they need to fix their stuff As The Verge notes repair technician and right to repair advocate Louis Rossmann said the changes have watered down the law to the point where it s functionally useless Rossmann who spent seven years trying to get the bill passed called Hochul s assertion that the changes were necessary to include protections from physical harm and security risks bullshit citing a Federal Trade Commission report on the issue The right to repair movement has picked up steam over the last couple of years Ahead of expected legislation coming into force companies such as Google Apple Samsung and Valve started providing repair manuals and selling parts for some of their products Last year President Joe Biden signed an executive order that aimed at bolstering competition in the US including in the tech industry Among other measures it called on the FTC to ban anticompetitive restrictions on using independent repair shops or doing DIY repairs of your own devices and equipment	2022-12-29 18:46:54
海外TECH	CodeProject Latest Articles	Build Your Own Video Streaming Server with Node.js and Koa	https://www.codeproject.com/Articles/5350209/Build-Your-Own-Video-Streaming-Server-with-Node-js	build	2022-12-29 18:38:00
金融	RSS FILE - 日本証券業協会	会長記者会見−2022年−	https://www.jsda.or.jp/about/kaiken/kaiken_2022.html	記者会見	2022-12-29 18:06:00
ニュース	@日本経済新聞 電子版	ベラルーシ迎撃のミサイル、ウクライナが発射認める https://t.co/DBojBfhAap	https://twitter.com/nikkei/statuses/1608524908023406597	迎撃	2022-12-29 18:06:37
ニュース	BBC News - Home	Ailing Benedict presents tough decisions for Vatican	https://www.bbc.co.uk/news/world-europe-64116624?at_medium=RSS&at_campaign=KARANGA	ailing	2022-12-29 18:07:38
ビジネス	ダイヤモンド・オンライン - 新着記事	「意見を軽んじられる人」に共通する、たった1つの特徴 - VISION DRIVEN 直感と論理をつなぐ思考法	https://diamond.jp/articles/-/313072		2022-12-30 03:55:00
ビジネス	ダイヤモンド・オンライン - 新着記事	【誰とでも会話が続く】「聞き上手な人」のたった2つの会話のコツ - 「静かな人」の戦略書	https://diamond.jp/articles/-/312361	静か	2022-12-30 03:50:00
ビジネス	ダイヤモンド・オンライン - 新着記事	【神様】は見ている。運がいい人、お金持ちの人は「初詣」で決してしないこと - 旬のカレンダー	https://diamond.jp/articles/-/314574	【神様】は見ている。	2022-12-30 03:45:00
ビジネス	ダイヤモンド・オンライン - 新着記事	これさえやれば「一人勝ち」できるたった1つの超簡単仕事術 - 時間最短化、成果最大化の法則	https://diamond.jp/articles/-/314022	これさえやれば「一人勝ち」できるたったつの超簡単仕事術時間最短化、成果最大化の法則【日経新聞掲載】有隣堂横浜駅西口店週間総合ベスト入り終電ギリギリまで残業しているのに仕事が終わらない人と、必ず定時で帰るのに成績Noの人。	2022-12-30 03:40:00
ビジネス	ダイヤモンド・オンライン - 新着記事	1万人を接客した美容部員が教える「30代からメイクが急に似合わなくなる」の正体 - だから、この本。	https://diamond.jp/articles/-/315344		2022-12-30 03:35:00
ビジネス	ダイヤモンド・オンライン - 新着記事	【コミュ力おばけの人はこうする！】空気を読みながら上手に意見を伝える方法とは？ - 1秒で答えをつくる力 お笑い芸人が学ぶ「切り返し」のプロになる48の技術	https://diamond.jp/articles/-/315461		2022-12-30 03:30:00
ビジネス	ダイヤモンド・オンライン - 新着記事	褒め上手な人は知っている「ありきたりな褒め言葉」をパワーアップする方法 - おもろい話し方	https://diamond.jp/articles/-/315297	褒め言葉	2022-12-30 03:25:00
ビジネス	ダイヤモンド・オンライン - 新着記事	堀ちえみ、ステージ4のがんを乗り越えて変わった「母親としての意識」 - 大丈夫じゃないのに大丈夫なふりをした	https://diamond.jp/articles/-/314644	堀ちえみ	2022-12-30 03:20:00
ビジネス	ダイヤモンド・オンライン - 新着記事	「キューバってどんな国？」2分で学ぶ国際社会 - 読むだけで世界地図が頭に入る本	https://diamond.jp/articles/-/314904		2022-12-30 03:15:00
ビジネス	ダイヤモンド・オンライン - 新着記事	【精神科医が教える】 恋愛で不安にならない、たった1つの方法 - 精神科医Tomyが教える 心の執着の手放し方	https://diamond.jp/articles/-/314844	【精神科医が教える】恋愛で不安にならない、たったつの方法精神科医Tomyが教える心の執着の手放し方NHK『あさイチ』月日放送に精神科医Tomy先生が出演し、これまで覆面を貫いてきた気になる素顔を初公開。	2022-12-30 03:10:00
ビジネス	ダイヤモンド・オンライン - 新着記事	【精神科医が教える】自分で自分を追いつめてしまう人のたった1つの特徴 - こころの葛藤はすべて私の味方だ。	https://diamond.jp/articles/-/315182	精神科医	2022-12-30 03:05:00