投稿時間:2023-02-08 01:30:16 RSSフィード2023-02-08 01:00 分まとめ(32件)

カテゴリー等	サイト名等	記事タイトル・トレンドワード等	リンクURL	頻出ワード・要約等/検索ボリューム	登録日
Google	Official Google Blog	Answering 3 top questions on online safety in Asia-Pacific	https://blog.google/around-the-globe/google-asia/answering-3-top-questions-on-online-safety-in-asia-pacific/	pacifica	2023-02-07 16:58:00
AWS	lambdaタグが付けられた新着投稿 - Qiita	Lambdaのトリガーでフィルタリングを使う	https://qiita.com/motani/items/4d3a4cbfb22c2108f7b6	lambda	2023-02-08 00:07:18
js	JavaScriptタグが付けられた新着投稿 - Qiita	LEGOシティのトレインを複数操作できるページを作成	https://qiita.com/kametter/items/d8d0784b4c3bf475f31f	電車	2023-02-08 00:44:23
js	JavaScriptタグが付けられた新着投稿 - Qiita	【js】複数の半角スペースが1つにトリムされてしまう	https://qiita.com/baby-0105/items/a31d1c989753c9212106	複数	2023-02-08 00:06:27
AWS	AWSタグが付けられた新着投稿 - Qiita	Lambdaのトリガーでフィルタリングを使う	https://qiita.com/motani/items/4d3a4cbfb22c2108f7b6	lambda	2023-02-08 00:07:18
Docker	dockerタグが付けられた新着投稿 - Qiita	JenkinsをDockerで起動した話	https://qiita.com/koiusa/items/62a144f545a11df165b1	docker	2023-02-08 00:56:51
Docker	dockerタグが付けられた新着投稿 - Qiita	【Linux】Dockerイメージの作成手順	https://qiita.com/quinaeng/items/615dd709b96c46aead4a	alpine	2023-02-08 00:43:01
js	JSer.info	2023-02-08のJS: Node.js v18.14.0(npm 9.xへアップデート)、Interop 2023、 Learn Images	https://jser.info/2023/02/08/node.js-v18.14.0npm-9.x-interop-2023-learn-images/	npm へ アップデート し installstrategylinked を サポート Releasev · n p m c l i g i t h u b c o m n p m c l i r e l e a sestagvnpmReleaseNotenpmv リリース 。	2023-02-08 00:06:11
海外TECH	MakeUseOf	Build a Color Palette Using Python	https://www.makeuseof.com/python-build-color-palette/	color	2023-02-07 15:31:17
海外TECH	MakeUseOf	How to Turn Your Voice Into Text With OpenAI’s Whisper for Windows	https://www.makeuseof.com/dictate-documents-openai-whisper/	windows	2023-02-07 15:16:16
海外TECH	DEV Community	Building a multi-framework dashboard with Astro	https://dev.to/logrocket/building-a-multi-framework-dashboard-with-astro-18oj	Building a multi framework dashboard with AstroWritten by Emanuel Suriano️In this article we will be exploring the process of building a website in Astro using components from three of the most popular frameworks React Svelte and Vue js Each of these frameworks has its strengths and weaknesses and in this article we will provide a step by step guide to building a website using each of them together This means that I can take the best of each community and put it into the project Jump ahead Project characteristics Why would you want to use multiple frameworks in one project Setting up a fresh Astro project Adding the UI frameworks Setting up our layout Fetching the dashboard data Integrating Svelte components Integrating a Table component Integrating Svelte category tags Data synchronization and state management with nanostores Vue integration Overview React integration CategoryChart Making the app responsive Project characteristicsFor this demo we are going to use the following libraries to build the dashboard React MUI Core and recharts Svelte Svelte Material UI Vue VuetifyI also installed Tailwind CSS to create most of the layout for the page with the prefix option of tw this is to prevent clashing classes between Tailwind and Vuetify Our end goal is to build the following dashboard Something important to highlight is that all of our components are connected and an interaction in one can trigger a change in the other This is possible by using nanostores we are going to cover it later in the article Components are connected interacting with the Svelte category chart displays changes in the React visual diagramFinally for demo purposes I built a framework highlighter to visually display the UI framework React Vue or Svelte responsible for rendering a component This function can be activated by clicking the blue eye icon at the bottom of the page You can also check out the deployed application here Why would you want to use multiple frameworks in one project Building a multi framework application using Astro can be a powerful and efficient way to create complex and versatile software By combining the strengths of different frameworks developers can create a more robust and flexible application that can adapt to changing requirements and meet the diverse needs of users Using Astro developers can easily integrate multiple frameworks allowing them to take advantage of the best features of each one and create a truly exceptional application In addition to its ability to combine multiple frameworks Astro is also great for migrations As software systems and requirements evolve it may become necessary to migrate to a new framework or set of frameworks With Astro this process can be streamlined and made more efficient allowing developers to quickly and easily move their applications to new frameworks without significant downtime or disruptions This can save time effort and resources making Astro a valuable tool for anyone looking to migrate their application to new frameworks Setting up a fresh Astro project The easiest way to create a new project with Astro is by using their CLI create astro which comes with maybe one of the friendliest coding assistants ever Houston create a new project with npm gt yarn create astro╭ー╮Houston │ Let s make the web weird ╰ー╯ astro v Launch sequence initiated Where would you like to create your new project …astro dashboardHow would you like to setup your new project ›a few best practices recommended Template copied Would you like to install yarn dependencies recommended …yesPackages installed Would you like to initialize a new git repository optional …yesGit repository created How would you like to setup TypeScript ›StrictTypeScript settings applied next Liftoff confirmed Explore your project Enter your project directory using cd astro dashboard Run yarn dev to start the dev server CTRL C to stop Add frameworks like react or tailwind using astro add Stuck Join us at ╭ー╮Houston │ Good luck out there astronaut ╰ー╯After that you should end up with a folder that has a structure similar to this astro dashboard├ーREADME md├ーastro config mjs├ーoutput txt├ーpackage json├ーpublic └ーfavicon svg├ーnode modules sub folders ignored to keep the directory tree short├ーsrc ├ーcomponents └ーCard astro ├ーenv d ts ├ーlayouts └ーLayout astro └ーpages └ーindex astro├ーtsconfig json└ーyarn lockLet s start our development server by running gt yarn devyarn run v astro dev astro v started in ms ┃Local ┃Network use host to exposeAfter opening the localhost URL you should see the following screen in your browser Adding the UI frameworks The official Astro documentation has a summary of all their official integrations covering the topics of UI frameworks SSR adapters and others such as Tailwind The Astro team made it simple for everybody and includes the command astro add in all new projects which we can use to install any of the official integrations We simply need to execute gt yarn astro add react vue svelte tailwindResolving packages Astro will run the following command If you skip this step you can always run it yourself later╭ー╮│yarn add astrojs react astrojs svelte astrojs tailwind astrojs vue types react dom ││ types react react dom react svelte tailwindcss ││vue │╰ー╯Continue …yesInstalling dependencies Astro will generate a minimal tailwind config cjs file Continue …yes Astro will make the following changes to your config file ╭astro config mjs ー╮ │import defineConfig from astro config │ ││ │ │ │import react from astrojs react │ │import vue from astrojs vue │ │import svelte from astrojs svelte │ │import tailwind from astrojs tailwind │ ││ │ │ │export default defineConfig │ │integrations react vue svelte tailwind │ │ │ ╰ー╯Continue …yes success Added the following integrations to your project astrojs react astrojs vue astrojs svelte astrojs tailwind Astro will make the following changes to your tsconfig json ╭tsconfig json ー╮ │ │ │ extends astro tsconfigs strict │ │ compilerOptions │ │ jsx react jsx │ │ jsxImportSource react │ │ │ │ │ ╰ー╯Continue …yes success Successfully updated TypeScript settingsAs you can see Astro took over all the manual tasks of installing the integrations adding them to our Astro configuration file and even updating our tsconfig json to make React work nicely with Typescript Great job Houston Setting up our layout Let s start by setting up our Layout for the page which consists of a Header a Footer and a container for our page content To avoid several changes when we introduce vuetify it s better to change the prefix inside our tailwind config cjs file like so tailwind config cjs type import tailwindcss Config module exports content src astro html js jsx md mdx svelte ts tsx vue theme extend plugins prefix tw Let s apply the modification to our Layout src layouts Layout astro type Props title string const title Astro props lt DOCTYPE html gt lt html lang en gt lt head gt lt meta charset UTF gt lt meta name viewport content width device width gt lt link rel icon type image svg xml href favicon svg gt lt meta name generator content Astro generator gt lt title gt title lt title gt lt head gt lt body gt lt div class tw flex tw h screen tw overflow hidden gt lt main class tw relative tw bg white tw flex tw flex col tw flex tw overflow y auto tw overflow x hidden gt lt Header gt lt nav class tw bg white tw shadow sm tw px sm tw px tw py gt lt div class container tw flex tw flex wrap tw justify between tw items center tw mx auto gt lt a href class tw flex tw items center gt lt img src favicon svg class tw mr tw h sm tw h alt Astro Logo gt lt span class tw self center tw text xl tw font semibold tw whitespace nowrap gt title lt span gt lt a gt lt div gt lt nav gt lt Content container gt lt div class tw container tw mx auto tw my tw flex grow gt lt slot gt lt div gt lt Footer gt lt footer class tw p tw bg white tw rounded lg tw shadow md tw flex md tw items center md tw justify between md tw p gt lt span class tw text sm tw text gray sm tw text center gt Built with lt a href class hover tw underline gt Astro lt a gt lt span gt lt footer gt lt main gt lt div gt lt body gt lt html gt Without making any changes to our initial page src pages index astro and applying these changes you should see the following screen Fetching the dashboard data For this demo I decided to use the Products list endpoint from which provides several public REST APIs that we can use to simulate getting data from our servers When we call the API the output has the following structure products id title iPhone description An apple mobile which is nothing like apple price discountPercentage rating stock brand Apple category smartphones thumbnail images items total skip limit Given that we are working on a TypeScript project it s always recommended to type our API responses For that we can use the following type for this response src types tsexport type Product id number title string description string price number discountPercentage number rating number stock number brand string category string thumbnail string To fetch data using Astro we can use the fetch function to call the endpoint before rendering our component with the added benefit that we don t need to handle loading states in our application This way of loading data is similar to how data is loaded on static sites where the endpoints are called on at build time At the same time Astro also supports server side rendering It s always important to understand what kind of application is better to implement given your needs Since our data source can be considered static ーthe list of products doesn t change over time ーrunning our queries is the best fit to improve the performance and UX of the application Let s make the following modification to our initial page src pages index astro import Layout from layouts Layout astro import Card from components Card astro import type Product from types fetch data const products Product await fetch then res gt res json then res gt res products lt Layout title Welcome to Astro gt lt main gt lt h gt Welcome to lt span class text gradient gt Astro lt span gt lt h gt Integrating Svelte components in an Astro app Time to render our data Let s revisit the goal of this article we want to use multiple UI frameworks in the same project Remember we already installed all the UI integrations into the project so the only part missing is adding our components Let s go one by one starting with Svelte Integrating a Table component As I mentioned at the beginning of this article we re using Svelte Material UI To install it in our project we have to first add it to our dependencies gt yarn add svelte material uiAfter that we have to import the necessary CSS file for the components The best place for those is in our Layout component because it will be used inside every screen in our application src layouts Layout astro import svelte material ui bare css type Props title string const title Astro props lt DOCTYPE html gt When dealing with npm dependencies in Astro which is built on top of Vite that are not previously compiled converted into JavaScript we have to specify Vite to the property ssr noExternal in our Astro configuration inside the vite attribute If you want to read more about Externals please refer to the official documentation astro config mjsimport defineConfig from astro config import react from astrojs react import vue from astrojs vue import svelte from astrojs svelte import tailwind from astrojs tailwind export default defineConfig integrations react vue svelte tailwind vite ssr noExternal smui Next let s build our first Svelte component to show a list of products inside a table which is going to be called ProductTable Luckily smui provides a Table component called Data Table Below is the full code of the component src components ProductTable svelte lt script lang ts gt import DataTable Head Body Row Cell from smui data table import type Product from types export let products Product lt script gt lt DataTable style width gt lt Head gt lt Row gt lt Cell style width gt Title lt Cell gt lt Cell gt Category lt Cell gt lt Cell gt Description lt Cell gt lt Cell gt Price lt Cell gt lt Cell gt Stock lt Cell gt lt Row gt lt Head gt lt Body gt each products as item item id lt Row gt lt Cell gt item title lt Cell gt lt Cell gt item category lt Cell gt lt Cell gt item description lt Cell gt lt Cell numeric gt item price lt Cell gt lt Cell numeric gt item stock lt Cell gt lt Row gt each lt Body gt lt DataTable gt Now let s render it inside our main page I got rid of the Card components that were rendered in the template project src page index astro import Layout from layouts Layout astro import ProductTable from components ProductTable svelte import type Product from types fetch dataconst products Product await fetch then res gt res json then res gt res products lt Layout title Welcome to Astro gt lt ProductTable products products gt lt Layout gt Our application should look like this Integrating Svelte category tags One key feature of this dashboard is the ability to see all the existing categories and mark them as visible or hidden To build this component we are going to use the component Chips from smui This is a possible implementation of the component src component CategoryTags astro lt script lang ts gt import Chip Set Text from smui chips import type Product from types export let products Product let categories products map product gt product category filter val i arr gt arr indexOf val i let selected Array from categories lt script gt lt h gt Categories lt h gt lt Set chips categories let chip filter bind selected gt lt Chip chip touch gt lt Text gt chip lt Text gt lt Chip gt lt Set gt Given that this component is interactive we need to specify a client directive from Astro to load the JavaScript alongside it ーotherwise nothing will happen when clicking the categories Let s add the component to our main page with the client load directive src pages index astro import Layout from layouts Layout astro import ProductTable from components ProductTable svelte import CategoryTags from components CategoryTags svelte import type Product from types fetch dataconst products Product await fetch then res gt res json then res gt res products lt Layout title Welcome to Astro gt lt CategoryTags products products client load gt lt ProductTable products products client load gt lt Layout gt The application is looking now quite similar to our dashboard Data synchronization and state management with nanostores Have you spotted any bugs in the previous screen The categories that are supposed to be hidden are still visible in our table The reason for that is that we aren t communicating data between our ProductTable and the CategoryTags Time to talk about state management How do we share information between my components given that each library has different ways of achieving that We have a few different options React has the Context API with a Provider Consumer pattern Vue provides a reactive API following the conventions of Actions gt State gt View in a similar style to Redux Svelte recommends using Stores providing readable writable and derived containers for storing dataAll of these are valid ways of fixing the state management issue but it s clear that we need to find a common solution that works for all the UI libraries This is where nanostores comes into play The description they provide on their GitHub page is simply perfect A tiny state manager for React React Native Preact Vue Svelte and vanilla JS It uses many atomic stores and direct manipulation The API is simple as import atom from nanostores definition of state for primitive valuesexport const counter atom read and write statecounter set counter get definition of state for objectsexport const car map brand Tesla km update property inside objectcar setKey km car get km nanostores provides many APIs to have more control over state updates and notifications so I highly recommend checking their documentation in case you want to dig deeper Nevertheless an important part to cover is the integration with the different UI libraries For each framework they provide a separate package that will follows the package s coding standard React nanostores react provides a useStore Hook to get the store s value and re render the component on store s changes Vue nanostores vue provides a useStore composable function to get the store s value and re render the component on store s changes Svelte nanostores implements Svelte s store contract we just need to put before the store variable to get the value and subscribe for changesTo add nanostores into our project we just need to install the main nanostores dependency and the integrations that we need in our case one each for vue and react gt yarn add nanostores nanostores react nanostores vueIt s also recommended to store our store in a shared location where all the components can access it For our categories scenario we need a simple array of strings where we can add or remove the categories to hide them src state tsimport atom from nanostores export const hiddenCategories atom lt string gt Let s connect our two isolated components The CategoryTags component has to be able to read and write from hiddenCategories src components CategoryTags svelte lt script lang ts gt import Chip Set Text from smui chips import type Product from types import hiddenCategories from state export let products Product let categories products map product gt product category filter val i arr gt arr indexOf val i let selected Array from categories function updateSelection hiddenCategories set categories filter category gt selected includes category lt script gt lt h gt Categories lt h gt lt Set chips categories let chip filter bind selected on click updateSelection gt lt Chip chip touch gt lt Text gt chip lt Text gt lt Chip gt lt Set gt Our ProductTable has only to read from hiddenCategories and with that filter out the product that belongs to the categories in our state src components ProductTable svelte lt script lang ts gt import DataTable Head Body Row Cell from smui data table import type Product from types import hiddenCategories from state export let products Product lt script gt lt DataTable style width gt lt Head gt lt Row gt lt Cell style width gt Title lt Cell gt lt Cell gt Category lt Cell gt lt Cell gt Description lt Cell gt lt Cell gt Price lt Cell gt lt Cell gt Stock lt Cell gt lt Row gt lt Head gt lt Body gt each products filter product gt hiddenCategories includes product category as item item id lt Row gt lt Cell gt item title lt Cell gt lt Cell gt item category lt Cell gt lt Cell gt item description lt Cell gt lt Cell numeric gt item price lt Cell gt lt Cell numeric gt item stock lt Cell gt lt Row gt each lt Body gt lt DataTable gt After removing the Smartphones and Laptops categories from the CategoryTags we can see they don t exist any more in the ProductTable Vue integration Overview For Vue I decided to use the most popular component framework option in the ecosystem Vuetify The installation can be a bit tricky for alternative projects like this one so I hope to make it as clear as possible Let s start by installing the necessary dependencies be aware that only the latest version v is compatible with Vite gt yarn add vuetify Similar to what we did for smui we need to import the component library styles inside our Layout import svelte material ui bare css import vuetify styles type Props title string const title Astro props lt DOCTYPE html gt lt html lang en gt lt head gt Next we need to hook vuetify into our vue application This was impossible in Astro just a few versions ago until the introduction of the app file inside the pages folder which grants access to the App instance of vue src pages app tsimport type App from vue import createVuetify from vuetify import as components from vuetify components import as directives from vuetify directives export default app App gt const vuetify createVuetify ssr true components directives app use vuetify A couple of modifications in our astro config mjs file We need to mark the dependency as noExternal and link the Astro Vue integration with the entry point that we ve just defined astro config mjsimport defineConfig from astro config import react from astrojs react import vue from astrojs vue import svelte from astrojs svelte import tailwind from astrojs tailwind export default defineConfig integrations react vue appEntrypoint src pages app svelte tailwind vite ssr noExternal smui vuetify Now we can implement our Summary component which is going to give us a glance at the Total Stock and Total brands categories and the selected products inside them This sounds perfect for the v card component src components Overview vue lt script setup lang ts gt import type Product from types import hiddenCategories from state import useStore from nanostores vue type Props products Product const products defineProps lt Props gt const hiddenCategories useStore hiddenCategories lt script gt lt template gt lt h gt Overview lt h gt lt v container gt lt v row dense gt lt v col cols gt lt v card gt lt v card text gt lt div gt Total stock lt div gt lt p class text h text primary gt lt Calculating stock with the value from store gt products filter product gt hiddenCategories includes product category reduce acc curr gt acc curr stock lt p gt lt v card text gt lt v card gt lt v col gt lt v col cols gt lt v card gt lt v card text gt lt div gt Total brands lt div gt lt p class text h text primary gt lt Calculating brand amount with the value from store gt products filter product gt hiddenCategories includes product category filter product i array gt array indexOf product i length lt p gt lt v card text gt lt v card gt lt v col gt lt v row gt lt v container gt lt template gt Don t forget to add it to the main page as well src pages index astro import Layout from layouts Layout astro import type Product from types import ProductTable from components ProductTable svelte import CategoryTags from components CategoryTags svelte import Overview from components Overview vue fetch dataconst products Product await fetch then res gt res json then res gt res products lt Layout title Welcome to Astro gt lt CategoryTags products products client load gt lt Overview products products client load gt lt ProductTable products products client load gt lt Layout gt Here s what our dashboard looks like now React integration CategoryChart This is the last integration of this article and maybe the most fun A dashboard cannot be considered complete unless we show a chart or diagram to visually display information For this part of the demo we ll use mui for the components and recharts for the graphs The installation is quite straightforward and maybe the easiest in the whole tutorial installation for mui gt yarn add mui material emotion react emotion styled installation for recharts gt yarn add rechartsWe want to allow the user to visually see the stock amount and rating for the visible category so they can understand how is the proportion balanced This is the perfect scenario for a RadialBarChart in recharts Then to toggle which value to visualize either stocks or rating we can use ToggleButton from mui This is a possible implementation of it src components CategoryChart tsximport useStore from nanostores react import React useMemo from react import RadialBarChart RadialBar Legend ResponsiveContainer from recharts import type Product from types import hiddenCategories from state import randomColor from randomcolor import ToggleButtonGroup from mui material ToggleButtonGroup import ToggleButton from mui material ToggleButton const style top right transform translate lineHeight px type Props products Product type View stock rating const groupByCategory products Product gt return products reduce acc curr gt const existingCategory acc curr category acc curr category existingCategory existingCategory concat curr curr return acc as Record lt string Product gt const CategoryChart products Props gt const view setView React useState lt View gt stock const disabledCategories useStore hiddenCategories const data useMemo gt const visibleCategories products map product gt product category filter product gt disabledCategories includes product filter val i arr gt arr indexOf val i const groupedByCategory groupByCategory products return visibleCategories map category gt const productsInCategory groupedByCategory category const avg productsInCategory reduce acc curr gt acc curr rating products length return name category stock productsInCategory reduce acc curr gt acc curr stock rating Math round avg fill randomColor seed category luminosity dark products disabledCategories return lt div style width height position relative gt lt ResponsiveContainer width height gt lt RadialBarChart cx cy innerRadius outerRadius barSize data data gt lt RadialBar minAngle label position insideStart fill fff background dataKey view gt lt Legend iconSize layout vertical verticalAlign middle wrapperStyle style gt lt RadialBarChart gt lt ResponsiveContainer gt lt ToggleButtonGroup style position absolute top color primary value view exclusive onChange val gt val amp amp setView val gt lt ToggleButton value stock gt Stock lt ToggleButton gt lt ToggleButton value rating gt Rating lt ToggleButton gt lt ToggleButtonGroup gt lt div gt export default CategoryChart Let s add it to our page and check how it integrates into our dashboard src pages index astro import Layout from layouts Layout astro import type Product from types import ProductTable from components ProductTable svelte import CategoryTags from components CategoryTags svelte import Overview from components Overview vue import CategoryChart from components CategoryChart fetch dataconst products Product await fetch then res gt res json then res gt res products lt Layout title Welcome to Astro gt lt CategoryTags products products client load gt lt Overview products products client load gt lt CategoryChart products products client load gt lt ProductTable products products client load gt lt Layout gt Making the app responsive Now that we have all our components fully coded and integrated we need to take care of the application s responsiveness This is where Tailwind can make our life easier and in a couple of lines we have fantastic results src pages index astro import Layout from layouts Layout astro import type Product from types import ProductTable from components ProductTable svelte import CategoryTags from components CategoryTags svelte import Overview from components Overview vue import CategoryChart from components CategoryChart fetch dataconst products Product await fetch then res gt res json then res gt res products lt Layout title Welcome to Astro gt lt div class tw grid tw gap tw grid cols lg tw grid cols md tw gap gt lt div class tw col span gt lt CategoryTags client load products products gt lt div gt lt div class tw col span gt lt Overview client load products products gt lt div gt lt div class tw col span gt lt CategoryChart client only react products products gt lt div gt lt div class tw col span full gt lt ProductTable client load products products gt lt div gt lt div gt lt Layout gt Now that we have all our components fully coded and integrated we need to take care of the application s responsiveness This is where Tailwind can make our life easier and in a couple of lines we have fantastic results The mobile view of our app Let s go for a mobile first approach The Categories tag and overview are rendered in one row below it we have the chart and at the bottom with some scrolling required is the Product table This image illustrates the tablet view of our website offering a balance between the desktop and mobile versions for a convenient browsing experience on a larger screen Finally we have the desktop view of our website with a wide layout and padding added on the sides to center the content horizontally ConclusionIn a previous article we discussed the architecture behind Astro which makes it possible to build this kind of application I highly recommend checking out that article in case you are not familiar with Astro s implementation of islands architecture Astro is a useful tool that can help us build complex and versatile software by allowing us to combine multiple frameworks As our software systems and requirements evolve Astro can assist us in easily and efficiently migrating our applications to new frameworks saving us time effort and resources On top of that it also helps us optimize our applications by ensuring that we are not using more JavaScript than necessary This helps keep our application lightweight and performant which can improve user experience and the overall functionality of the application This feature of Astro makes it valuable when building efficient and high performing applications that meet the needs of our users Thanks for reading and let s keep building stuff together ‍ ️ References Astro docs Multi framework dashboard GitHub Repository Multi framework dashboard Demo nanostores GitHub Repository MUI docs Vuetify docs SMUI docs Are you adding new JS libraries to improve performance or build new features What if they re doing the opposite There s no doubt that frontends are getting more complex As you add new JavaScript libraries and other dependencies to your app you ll need more visibility to ensure your users don t run into unknown issues LogRocket is a frontend application monitoring solution that lets you replay JavaScript errors as if they happened in your own browser so you can react to bugs more effectively LogRocket works perfectly with any app regardless of framework and has plugins to log additional context from Redux Vuex and ngrx store 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 metrics like client CPU load client memory usage and more Build confidently ーStart monitoring for free	2023-02-07 15:45:15
海外TECH	DEV Community	What Netlify's Acquisition of Gatsby Really Means	https://dev.to/remotesynth/what-netlifys-acquisition-of-gatsby-really-means-20me	What Netlify x s Acquisition of Gatsby Really MeansLast week Netlify announced its acquisition of Gatsby The news surprised even those of us like myself who follow the Jamstack ecosystem closely The unsurprising part is that it caused lots of speculation as to Netlify s motives A lot of this seemed to center on a narrative around Netlify aiming to snatch up an open source competitor to Next js in the React space to better compete with Vercel Now I have no special insider information but I do follow this topic pretty closely and I am going to argue that this narrative is wrong In fact it s partially rebutted by Matt Biilmann s own interview about the acquisition So let s look at what I think this acquisition was really about what that means for the Jamstack ecosystem and the future of Gatsby the framework What Makes a Gatsby Let s start with what Netlify was most interested in Gatsby the company had three main components Gatsby Cloud  This was the primary revenue driver for Gatsby It promised to offer a Netlify like development experience that was specifically optimized for Gatsby It often touted build times for Gatsby products that were dramatically reduced compared to other vendors Gatsby framework  As you probably know Gatsby is an open source React based library for building web sites often called a static site generator or SSG While its popularity has waned in recent years in favor of tools like Next js Gatsby s recent releases have brought it in line with the capabilities of other frameworks including support for SSR and partial hydration Valhalla Content Hub  This often flew under the radar but Gatsby started marketing their data layer as an independent product called Valhalla One of the Gatsby framework s biggest innovations was it s data layer that made it relatively easy to consolidate data from disparate APIs into a single consolidated data source using GraphQL By acquiring Gatsby Netlify did take a competitor off the board with Gatsby Cloud while also adding the potential for improved support for Gatsby customers by now being able to integrate Gatsby s optimized cloud builds into their product While taking a competitor off the board is valuable and keeping in mind that we don t know what Netlify paid for Gatsby as far as I know Gatsby Cloud was never a serious threat to Netlify and given that it was entirely dependent on a single framework whose popularity is waning it was unlikely to emerge as one Could Netlify then be looking to turn the Gatsby framework s fortunes around building a stronger competitor to Next js I think this is unlikely First of all Netlify has generally eschewed owning frameworks and opting instead to support popular frameworks that help build the Jamstack ecosystem They currently pay both Zach Leatherman and Ryan Carniato to work on open source including their own projects Eleventy and SolidJS respectively They sponsor Astro as does Vercel They started a Jamstack Fund to invest in companies and tools in the ecosystem including Deno and NuxtLabs who each have their own frameworks It would take a lot of money and work to turn Gatsby s popularity around with no guarantee of success and it just doesn t fit with Netlify s MO Crossing the StreamsWhich brings us to what this acquisition was most likely really about Valhalla It s about consolidating the streams that make up the backend of your web application You may be thinking But I d never even heard of Valhalla until now But it fits neatly into Netlify s other recent investments as well as it s recent reworking of the Jamstack definition with its emphasis on composable architecture Back in Netlify announced the acquisition of OneGraph which became the Netlify Graph Netlify Graph aimed to make it easy to integrate popular APIs into your web site backend without needing to write API integration code or OAuth authentication Netlify Graph appears to have quietly shut itself to new users last December One of it s limitations was that it required either Netlify or a partner company to build and continuously maintain the API integration This works if I m only integrating popular third party APIs but it is tough to scale up to all the APIs one might use and even then it doesn t include my own APIs which make up a core piece of my application s backend To quote an article at the time The reality is that it is early days and much will depend on third party support for OneGraph It will be important that we can allow external providers to plug into our platform and extend it Biilmann adds to live up to its full potential From the same article Future plans are more comprehensive What if we could put all the world s APIs and services behind one GraphQL endpoint Biilmann says to give teams one framework for how to talk to them how to authenticate with them and how to build with them I m not saying this is why Netlify closed Graph it to new users but Valhalla definitely doesn t have that limitation It can potentially pull from any data source and even allow you to consolidate your proprietary backend API with third party APIs into a single source that can be easily integrated into your frontend applications Perhaps it could even be combined with some of the existing Graph capabilities as well as Gatsby s extensive plugin ecosystem to make this process even easier That s what I think this acquisition is about But you don t need to believe me Here s an excerpt from The New Stack s interview with Matt Biilmann about the acquisition He says there are similar frontend evolutions in content headless CMS and in “headless commerce APIs So with composable architectures he argues businesses can select “best of breed solutions in all these areas Where Netlify comes in he said is that it “helps companies orchestrate all these pieces He mentioned “the web UI layer tying together build systems webhooks from different content sources deployment edge run times and more So what happens to the Gatsby framework I don t think the Gatsby framework is going anywhere Even taking into account its declining popularity Gatsby was still used in of projects according to the most recent Jamstack community survey behind only Next js in terms of Jamstack frameworks SSGs In fact I think this may improve its viability in many ways I know it became popular to turn popular open source frameworks into for profit startups While Gatsby was among the first that I can recall it s been followed by many others like NuxtLabs and Astro for instance Even Vercel while not exclusive to Next js appears to have its fate tied heavily to the framework it creates one need only look at the expense and polish in the most recent Next js Conf to confirm this But developer tastes are fickle as Gatsby knows all too well What is today s hot tool can become tomorrow s pariah in a short time So making a company off a framework can be a heavy lift and from all outward appearance Gatsby the company s fortunes had turned in line with its framework which is unsurprising With Netlify Gatsby has found a home that definitely appears to be more stable improving its long term prospects My guess is that Netlify will set up a situation similar to Eleventy and SolidJS to allow development of the tool to continue while also not tying it s future to the ability of the framework to generate profitability which would have been the case had Gatsby remained independent All in all I think this was the best possible landing spot for Gatsby and its users and I expect it ll continue to be a big part of the Jamstack ecosystem going forward	2023-02-07 15:23:57
海外TECH	DEV Community	Three 💪 Solid 🪄 Minimalist ⚛️ Components	https://dev.to/ironcladdev/three-solid-minimalist-components-1275	Three Solid 🪄Minimalist ️ComponentsUsing custom React components versus raw HTML while coding makes a huge difference in how fast you get things done In this tutorial I m going to show you how to build three simple game changing React components Copy Button A simple copy to clipboard button may sound simple but you d be surprised how much work you d be saved if it was a React Component Create the componentI prefer to use a clean icon from Feather Icons This is the basic structure of our component import Copy from react feather export const CopyButton gt return lt button gt lt Copy size gt lt button gt PropsInclude content an onClick handler and an onError handler Copying to clipboard via window navigator returns a promise so we ll need to handle promise rejection errors accordingly import Copy from react feather export const CopyButton content onClick gt onError content string onClick gt void onError err Error gt void gt return lt button gt lt Copy size gt lt button gt FunctionalizeNow we ll create a copy function call the callbacks accordingly no pun intended and bind it to the button s onClick listener export const CopyButton content onClick gt onError content string onClick gt void onError err Error gt void gt const copy gt navigator clipboard writeText content then onClick catch e gt if onError onError e else console log e return lt button onClick copy gt lt Copy size gt lt button gt Add some CSS and you re all done Auto Resizing Textarea Auto resizing lt textarea gt elements are quite fancy and very helpful if a user has to type a long post or enter a lot of text Create the componentRender the lt textarea gt element export const AutoTextarea props gt return lt textarea props gt Create a value stateAttach a value state so we can have a controlled inputimport useState from react export const AutoTextarea props gt const value setValue useState return lt textarea value value onChange e gt setValue e target value props gt Regex MagicUse a regular expression to search for the n breakline character and calculate rows based on that import useState from react export const AutoTextarea props gt const value setValue useState return lt textarea value value onChange e gt setValue e target value rows n test value Number value match n g length props gt Your component should now be ready to roll Scroll Handler 🪄Controlling element styles based on their scroll position is a very satisfying and beautiful web design trend A good example of a site that uses something similar is Create the ComponentThe wrapper for this component will be a lt div gt element export const ScrollHandler gt return lt div gt lt div gt Props hooksThe children prop passed into this component will be a function with scrollTop and percentage as parameters import ReactNode useEffect useState useRef from react export const ScrollHandler children props children scroll number percentage number gt ReactNode gt const scroll setScroll useState const scrollRef useRef lt HTMLDivElement gt null return lt div props ref scrollRef gt children scroll window innerHeight scroll window innerHeight lt div gt FunctionalizeLet s attach a useEffect hook and a scroll listener to the component import ReactNode useEffect useState useRef from react export const ScrollHandler children props children scroll number percentage number gt ReactNode gt const scroll setScroll useState const scrollRef useRef lt HTMLDivElement gt null useEffect gt if scrollRef current window addEventListener scroll e gt const clientRect scrollRef current getBoundingClientRect setScroll clientRect top scrollRef return lt div props ref scrollRef gt children scroll window innerHeight scroll window innerHeight lt div gt UsageUsing this component may be a little confusing if you ve never tried using the React children prop as a function before An example of usage is as follows lt ScrollHandler gt scrollTop percentage gt lt div gt Position scrollTop pixels Percent to the top of the viewport Math floor percentage lt div gt lt ScrollHandler gt As the event listener fires off scrollTop first parameter is assigned the value of the absolute top of the div element percentage second param is how far the component is to the top of the page And that s it Thanks for reading Live demo Source Code IroncladDev ComponentsIf you ve enjoyed this don t forget to follow me on Twitter and ReplitThanks for reading Catch y all next time	2023-02-07 15:09:39
Apple	AppleInsider - Frontpage News	Apple highlights child protection for Safer Internet Day	https://appleinsider.com/articles/23/02/07/apple-highlights-child-protection-for-safer-internet-day?utm_medium=rss	Apple highlights child protection for Safer Internet DayFor the th annual Safer Internet Day Apple is promoting its iOS and Mac privacy features and dedicated family information plus offering free educational resources Safer Internet Day is a European initiative although it is also celebrated worldwide Apple s spotlight on the day though is only being shown in countries across Europe At Apple our goal is to provide people with technology that not only improves and enriches their lives but also helps them stay safe online Erik Neuenschwander Apple s director of User Privacy said in a statement We re proud to be an official supporter of Safer Internet Day in Europe ーand we ll keep innovating every day to empower people to protect their families online Read more	2023-02-07 15:50:21
Apple	AppleInsider - Frontpage News	iPhone 15 Ultra gets intruiging Apple Watch Ultra makeover	https://appleinsider.com/articles/23/02/07/iphone-15-ultra-gets-intruiging-apple-watch-ultra-makeover?utm_medium=rss	iPhone Ultra gets intruiging Apple Watch Ultra makeoverApple iPhone Ultra rumors are floating about and none of them suggest an Apple Watch Ultra design ーbut there is a fascinating concept floating about that merges the two iPhone Ultra concept from Jonas DaehnertDesigner Jonas Daehnert has put together the monster of all iPhone concepts Read more	2023-02-07 15:39:11
Apple	AppleInsider - Frontpage News	Apple claps back at UK regulators over cloud gaming proposals	https://appleinsider.com/articles/23/02/07/apple-claps-back-at-cma-over-cloud-gaming-proposals?utm_medium=rss	Apple claps back at UK regulators over cloud gaming proposalsApple has formally responded by proposals from the UK Competition and Markets Authority to make it easier for cloud gaming services to run on iOS as it risks disproportionately impacting Apple s ecosystem Cloud gaming on an iPhoneIn November the CMA launched a Phase investigation into the mobile browser market specifically focussing on mobile gaming At the time it offered a number of remedies to hurdles that cloud gaming providers have to deal with if they want to exist on iOS Read more	2023-02-07 15:28:10
Apple	AppleInsider - Frontpage News	Google Pixel 7 is having reliability issues with buttons & camera lenses	https://appleinsider.com/articles/23/02/07/googles-pixel-7-is-suffering-from-defects-with-buttons-and-lenses?utm_medium=rss	Google Pixel is having reliability issues with buttons amp camera lensesSince launch many owners of the Pixel have been complaining about hardware problems with their handsets such as camera lenses that suddenly crack for no apparent reason or buttons that fall off Pixel smartphonesGoogle released the Pixel smartphones in October with redesigned cameras new accessibility features and other upgrades and improvements Read more	2023-02-07 15:29:00
海外TECH	Engadget	Apple's 10.9-inch iPad is back down to an all-time low of $399	https://www.engadget.com/apple-ipad-deal-10-9-inch-all-time-low-399-amazon-target-best-buy-154513404.html?src=rss	Apple x s inch iPad is back down to an all time low of Here s a quick PSA for anyone who has had their eye on Apple s inch iPad the tablet is back on sale for at Amazon Target and Best Buy For reference Apple normally sells this entry level GB model for though the device s average street price on Amazon has hovered closer to since it launched last October Either way this deal matches the all time low we first saw over the holidays last year Just note that as of this writing a few colors are out of stock at Amazon and Target We gave the inch iPad a review score of this past October It offers a more modern design than the cheaper inch iPad with flatter edges thinner bezels a Touch ID button and a USB C port much like you d find on the pricier iPad Air or iPad Pro It packs a roomier display than the inch model despite being slightly shorter and lighter Its A Bionic chip is still plenty powerful for media consumption light work and other everyday tasks and it still gets the usual ish hours of battery life And perhaps most conveniently it s the only iPad whose front facing camera is located along the landscape edge of the tablet which is a much more natural position for video calls There are a few quirks to consider though Unlike the iPad Air the inch iPad s display isn t laminated so it can feel like you re interacting with an image below the glass rather than directly touching what s on screen It also lacks an anti reflective coating so it s a little more prone to glare It only works with the original Apple Pencil not the vastly improved second gen stylus Nor does it support the same Magic Keyboard as the iPad Air or iPad Pro instead it uses its own accessory called the Magic Keyboard Folio that while good isn t as stable on your lap It also lacks a headphone jack As we note in our iPad buying guide if you can afford to step up to the iPad Air that is the better option overall And if you just want a competent iPad for the lowest price possible the inch model is likely a better value That said the inch iPad is still a fine middle ground for those willing to pay a bit more for a nicer feeling tablet and this discount should make its sacrifices a little easier to accept Follow EngadgetDeals on Twitter and subscribe to the Engadget Deals newsletter for the latest tech deals and buying advice	2023-02-07 15:45:13
海外TECH	Engadget	OnePlus Pad is the company's first tablet	https://www.engadget.com/oneplus-pad-tablet-153051366.html?src=rss	OnePlus Pad is the company x s first tabletOnePlus is finally ready to take the wraps off its first tablet and it s just different enough that it might be worth considering in a sea of Android slates The OnePlus Pad revolves around an inch display with an unusual aspect ratio and a speedy Hz refresh rate ーthis might be your pick if you re a gamer or avid reader The design also stands out with an easier to grip D edge and a central camera hump you re less likely to cover with your fingers Some technical details aren t available as we write this but the OnePlus Pad will be reasonably quick thanks to MediaTek s Dimensity chip and up to GB of RAM Battery life might be healthy too The mAh power pack reportedly offers up to hours of video playback and W SuperVOOC fast charging can top up the tablet in minutes Dolby Atmos meanwhile promises cinematic audio nbsp You won t have to hunt for accessories either The OnePlus Pad will ship with a pen the Stylo and a magnetic keyboard The software will be familiar although there are some appreciated touches if you also have a OnePlus phone The Pad can easily use a handset as a cellular data hotspot for instance Don t expect to buy one right away Release dates and pricing for the OnePlus Pad will be available in the coming weeks the company says As such it s too early to say if this represents a good value compared to the Galaxy Tabs and iPads that dominate the higher end tablet space OnePlusNot that OnePlus is leaning solely on a tablet The company has introduced the OnePlus Buds Pro the expected sequel to its wireless earbuds They re some of the first earbuds to support Android s official spatial audio implementation with compatible content such as Disney and YouTube videos If you have a OnePlus you can expect Dolby Atmos support with head tracking Regardless of how you listen audio quality is also a focus ーcomplete with an unusual collaboration OnePlus claims a studio like sound thanks to dual drivers with an mm woofer and mm tweeter developed with help from Dynaudio and LHDC Bluetooth audio that s close to wired fidelity And if the usual custom equalizers aren t enough to fine tune the characteristics composer Hans Zimmer has created his own EQ Soundscape to emphasize the brighter tones and wider soundstages of movie soundtracks Improved active noise cancellation particularly for human voices and lower latency Bluetooth LE are also available and a minute charge is enough to deliver hours of listening hours total with the case The Buds Pro will be available in the US on February th for £ in the UK It s evident OnePlus is hoping to match or undercut competing products like the Pixel Buds Pro and second gen AirPods Pro And yes it wouldn t be a OnePlus announcement without teasing future hardware The brand is hinting at plans to unveil both its first mechanical keyboard the OnePlus Featuring Keyboard Pro a team up with Keychron below and the OnePlus Concept a still mysterious prototype phone with imaginative design and industry first features You won t hear more about these in earnest until Mobile World Congress in late February OnePlus	2023-02-07 15:30:51
海外TECH	Engadget	Bayonetta Origins hands-on: A charming tale of a witch and her demon cat	https://www.engadget.com/bayonetta-origins-cereza-and-the-lost-demon-hands-on-a-charming-tale-of-a-witch-and-her-demon-cat-150039480.html?src=rss	Bayonetta Origins hands on A charming tale of a witch and her demon catEven though Bayonetta just came out last fall there s already another entry in the franchise due out in March starring everyone s favorite gun toting witch However for its next release Bayonetta Origins Cereza and the Lost Demon instead of a continuation of the story PlatinumGames has created a prequel featuring a charming new art style and gameplay twists that shed light on a younger version of Cereza before she became the over the top enchantress we know today After a short explanation of Bayonetta s lineage the game introduces its first major twist when it asks you to control both Cereza and her stuffed cat Cheshire who serves as a vessel for a recently summoned demon That s because instead of switching between each character independently you re meant to control both at the same time with the left Joy Con responsible for maneuvering Cereza while the right Joy Con is dedicated to directing her cat Don t worry you can also play the game with the Switch s Pro Controller if you prefer So on top of the game throwing various puzzles or hack and slash encounters your way you often have to do battle with your own mind as you try to get both sides of your brain on the same page NintendoFor me this setup drew immediate parallels to one of my favorite games from Brothers A Tale of Two Sons Sorry youngins for the somewhat dated reference but if you haven t played Brothers you should really give it a go Granted Brothers is much more of a true puzzle platformer but even after playing it for less than an hour Bayonetta Origins delivered the same sort of deeply satisfying solo co op vibes Also while Nintendo claims the title is meant to be a single player experience I get the sense that this might be just as fun frustrating maybe even more so when played with a friend with each person getting a single Joy con Additionally while the game s controls are relatively simple and straightforward due in part to its split controller layout there s a surprising amount of depth when it comes to combat and traversing obstacles Typically Cheshire serves as the muscle when battling forest spirits or other monsters while Bayonetta relies on her witch powers to lock down and control enemies That said the two can work together with Cheshire able to shrink down and serve as a grappling hook allowing the pair to jump gaps and chasms So despite the game s slower pace compared to previous entries getting your left and right hands to work together is still very rewarding I also have to admit it s just really cute seeing Cereza snuggle up with a demonic patchwork plushy who despite its hatred of cuddling needs to be close to the witch in order to survive NintendoAnother departure from other Bayonetta titles is the game s art style which has ditched its anime inspired origins for a more storybook aesthetic and it looks absolutely fantastic When combined with a younger version of Cereza that s still figuring out her place in the world the game feels more like a new age fairy tale than the eccentric action packed circus we ve seen in earlier games And while I only had a short time with Bayonetta Origins perhaps my biggest surprise was how quickly I became engrossed in the game That s because while the bombastic nature of previous entries in the franchise is more my style Cereza s latest adventure offers a very charming and downright wholesome take on the series So for all of the Bayonetta fans who might have been put off by this installment s design or visuals you might want to rethink that stance and give Cereza and the Demon a chance when it officially comes out on March th Nintendo	2023-02-07 15:05:39
海外科学	NYT > Science	The Quest to Find Rectangles in a Square	https://www.nytimes.com/2023/02/07/science/puzzles-rectangles-mathematics.html	basic	2023-02-07 15:05:23
海外科学	NYT > Science	Neanderthal Crab Roast Leftovers Are Found in a Portuguese Cave	https://www.nytimes.com/2023/02/07/science/neanderthals-crab-portugal.html	cousins	2023-02-07 15:27:25
金融	金融庁ホームページ	「金融庁主催　サステナビリティ開示に係る国際カンファレンス」を開催します。	https://www.fsa.go.jp/news/r4/sonota/20230207/20230207.html	開示	2023-02-07 17:00:00
金融	金融庁ホームページ	貸金業関係資料集を更新しました。	https://www.fsa.go.jp/status/kasikin/20230207/index.html	関係	2023-02-07 17:00:00
金融	金融庁ホームページ	地域企業への経営人材マッチングに関するイベントを開催します。	https://www.fsa.go.jp/news/r4/ginkou/20230207/20230207.html	経営	2023-02-07 16:00:00
ニュース	BBC News - Home	Epsom College deaths: Teacher and daughter shot by husband, police believe	https://www.bbc.co.uk/news/uk-england-surrey-64544884?at_medium=RSS&at_campaign=KARANGA	george	2023-02-07 15:01:54
ニュース	BBC News - Home	Kaylea Titford: Dad found guilty of daughter's manslaughter	https://www.bbc.co.uk/news/uk-wales-64538142?at_medium=RSS&at_campaign=KARANGA	kaylea	2023-02-07 15:50:14
ニュース	BBC News - Home	Turkey earthquake: Erdogan announces three-month state of emergency in quake area	https://www.bbc.co.uk/news/world-europe-64548985?at_medium=RSS&at_campaign=KARANGA	syria	2023-02-07 15:28:28
ニュース	BBC News - Home	Kourtney Kardashian's Lemme gummies? Don't bother, say experts	https://www.bbc.co.uk/news/newsbeat-64546757?at_medium=RSS&at_campaign=KARANGA	kardashian	2023-02-07 15:06:10
サブカルネタ	ラーブロ	大砲ラーメン 本店＠福岡県久留米市通外町	http://ra-blog.net/modules/rssc/single_feed.php?fid=207649	大砲ラーメン	2023-02-07 15:00:50
GCP	Google Cloud Platform Japan 公式ブログ	安全でコンプライアンスに対応した ML / AI を導入するための Vertex AI の基盤	https://cloud.google.com/blog/ja/topics/developers-practitioners/vertex-ai-foundations-secure-and-compliant-mlai-deployment/	VertexAITrainingでは、VertexAIマネージドデータセットを使用してカスタムモデルをトレーニングできます。	2023-02-07 15:20:00
GCP	Cloud Blog JA	安全でコンプライアンスに対応した ML / AI を導入するための Vertex AI の基盤	https://cloud.google.com/blog/ja/topics/developers-practitioners/vertex-ai-foundations-secure-and-compliant-mlai-deployment/	VertexAITrainingでは、VertexAIマネージドデータセットを使用してカスタムモデルをトレーニングできます。	2023-02-07 15:20:00