投稿時間:2022-02-03 06:23:35 RSSフィード2022-02-03 06:00 分まとめ(29件)

カテゴリー等	サイト名等	記事タイトル・トレンドワード等	リンクURL	頻出ワード・要約等/検索ボリューム	登録日
TECH	Engadget Japanese	2017年2月3日、4.7インチのコンパクトスマホ「AQUOS SERIE mini SHV38」「AQUOS Xx3 mini」が発売されました：今日は何の日？	https://japanese.engadget.com/today3-203033623.html	aquosserieminishv	2022-02-02 20:30:33
AWS	AWS Partner Network (APN) Blog	Amazon Redshift Administration and FinOps Using LTI Canvas Glide	https://aws.amazon.com/blogs/apn/amazon-redshift-administration-and-finops-using-lti-canvas-glide/	Amazon Redshift Administration and FinOps Using LTI Canvas GlideAs organizations acquire more and more data the need to effectively store and query the data has become very important Canvas Glide from LTI is a tool for administering Amazon Redshift s day to day routine tasks It also helps organizations manage all financial aspects related to cost allocation chargeback monitoring and planning of Amazon Redshift clusters Learn how Canvas Glide assists administrators to successfully manage their clusters and guides them on common maintenance tasks	2022-02-02 20:15:07
海外TECH	Ars Technica	Google Workspace to strip privacy control from admins, re-enable tracking	https://arstechnica.com/?p=1831215	retention	2022-02-02 20:35:17
海外TECH	MakeUseOf	How to Silence a Noisy Laptop Fan: 7 Things You Can Do	https://www.makeuseof.com/tag/5-silence-noisy-laptop-fan/	quieter	2022-02-02 20:45:12
海外TECH	MakeUseOf	The 8 Best 3D Printed Valentine's Day Gift Ideas for 2022	https://www.makeuseof.com/3d-printed-valentines-day-gift-ideas/	gifts	2022-02-02 20:32:46
海外TECH	MakeUseOf	How to Get the Experience You Need to Land Your First Tech Job	https://www.makeuseof.com/how-to-get-experience-to-land-tech-job/	experience	2022-02-02 20:16:23
海外TECH	DEV Community	Flutter vs. React Native: Which is Better in 2022	https://dev.to/backendless/flutter-vs-react-native-which-is-better-in-2022-261p	Flutter vs React Native Which is Better in As mobile app development continues to grow in popularity businesses are looking for ways to create cross platform apps that can be used on a variety of devices When we say cross platform we of course refer to Android and iOS Per Statista Android maintained its position as the leading mobile operating system worldwide in June controlling the mobile OS market with a close to percent share Google s Android and Apple s iOS jointly possess over percent of the global market share In this article we will compare two popular frameworks for cross platform development Flutter and React Native We will look at the pros and cons of each framework and discuss which one is better suited for use in Contents Why is mobile app development so popular What is cross platform app development The history of Flutter and React Native How Flutter and React Native compare How cross platform development frameworks work Building mobile apps is fun again Pros and cons of Flutter and React Native Apps Is Flutter or React Native easier to learn The Best Backend for Flutter The Best Backend for React Native Flutter vs React Native in Closing FAQs Why is mobile app development so popular Developing mobile applications is a steadily growing business niche Virtually all people on the planet have mobile phones which means a nearly unlimited number of potential users Consequently there are apps for almost everything nowadays You can choose many ways to design and build an app You can either use native methods e g Swift and Objective C for creating iOS apps and Java for Android apps These are the official Apple Google software programming languages respectively which provides support and frequently updated features Alternately you may use cross platform frameworks such as Flutter or React Native What is cross platform app development Before we begin let s define the term “cross platform app development and divide it into two categories Hybrid Development and Native Development Cross platform apps are apps that can be developed using a single codebase and function virtually identically on both iOS and Android operating systems In this article we are focusing on mobile app development we talk more about web and desktop apps here Hybrid DevelopmentHybrid apps are developed with a combination of web technologies such as HTML CSS and JavaScript This means that hybrid apps share some code across platforms e g the HTML CSS JS code and this shared code runs in a webview on the target platform WebView apps are hybrid apps that use embedded webviews to render their user interface within which you can use HTML CSS and JavaScript for customization WebView apps will have some limitations in accessing the device API out of the box requiring additional effort to achieve some of the same functionality as native apps The trade off is that these apps are cross platform out of the box which can be a significant time saver Hybrid apps may look the same on both platforms but behave differently depending on platform specific APIs available to them E g a weather app would check the API of the current location s weather service on both platforms and return different data according to what is available on each platform Native DevelopmentNative apps are developed with the native SDKs of their target platforms e g Android or iOS This means that they do not share any code across platforms and this shared code is written only for the targeted platform whereas the UI is implemented using platform specific widgets and libraries Native apps provide a better user experience than Hybrid apps and also look more native on each platform but they cost more to develop and take longer to release new features due to the time needed for developers to learn the APIs of the target platforms In general it is ideal to develop your app using the native development tool of their target platforms e g Android Studio or Xcode Flutter and React Native Cross Platform FrameworksBoth Flutter and React Native are among the best cross platform development frameworks available today They both use native widgets to deliver a highly customizable responsive UI while sharing code across different platforms The Flutter framework is developed by Google while the React Native framework is developed by Facebook so these tech giants have very large teams dealing with everything from the platform s SDKs to its documentation support etc While Flutter and React Native apps are both native they are advantageous over traditional native app development because they can share a significant proportion of their codebase across platforms According to Instagram the amount of code shared between iOS and Android via their React Native features was over The history of Flutter and React NativeFlutter was announced at the Dart Developer Summit in October of The main idea behind this cross platform mobile app development framework is to give developers tools to build native apps for iOS and Android using one single codebase written in Google s own Dart programming language The first stable release of Flutter came out on February React Native started a little bit earlier than Flutter having its first beta version released on March however it didn t manage to leave the beta phase until March On September React Native reached version with huge support from tech giant Facebook As you can see both technologies are relatively new but don t let that fool you React Native is already used by big players like Facebook Instagram Airbnb and Uber Flutter doesn t boast the same big names but has already been embraced by BMW Toyota eBay and of course Google s own Google Pay How Flutter and React Native compareThe main difference between Flutter and React Native is that React Native does not compile into a native mobile language Java Swift Objective C but rather simply runs its JavaScript code Flutter on the other hand compiles its Dart language into native which can impact performance discussed later Another big difference is that vanilla JavaScript besides JSX is used for writing components on React Native Facebook developers recommend using Flow or TypeScript when with React due to its dynamic nature For Flutter Google recommends using Dart for writing code as well because of its static typing system In our opinion the decision on which of these technologies to choose should be based more on your preferences rather than on their actual features and capabilities Of course it s good to know all programming paradigms so you can easily pick up new languages and frameworks even if they re not written in a language you re familiar with Programmers who are already familiar with JavaScript ES or TypeScript Flow will find it much easier to start working with React Native This is particularly true of developers that have used React for the web as there is a great deal of overlap between React and React Native JavaScript still has a significant market share in the mobile development space and because both React Native and Flutter allow you to choose your favorite programming language it s hard to say which one will be more popular in There are also other important factors that might influence this decision such as Companies preference toward a specific technology stack Developer s familiarity with a given language framework Availability of developers with skills necessary for using a specific technologyAs we have already pointed out React Native and Flutter are both going to be significant players in so it s up to you to choose which is the best option for your long term goals How cross platform development frameworks workAlthough cross platform mobile development frameworks share many concepts and features they re each created with different goals in mind React Native was designed to provide native code performance combined with the ease of development that React web brings into the table The idea is not to use a single set of shared components between iOS and Android but instead to have completely separate UI s wrapped into a single JavaScript bundle allowing you to ship almost half of the app s code in a single place Flutter was created mainly to fulfill Google s needs for…Google In other words another attempt at marrying fast development cycles with native code performance and building reusable UI components that can be shared between iOS and Android apps This is why Google s Flutter is so much faster than React Native Flutter was also designed with the idea of making app development easier and more accessible because it allows writing code using Dart a language that can be learned in a weekend and mastered in days or even hours depending on the developer s skillset This is why we believe that Flutter will be the mobile development framework of choice for companies that need to create lots of native mobile apps very quickly without sacrificing performance or features Building mobile apps is fun againWhen Google announced Flutter developers were stunned by how well it performs in practice compared to other technologies developed specifically for the purpose of building cross platform mobile applications React Native s philosophy of sharing UI code between iOS and Android was a great initiative but due to React Native s inherent limitations the resulting apps cannot perform as well as native ones Flutter comes with a lot of goodies that you will not find in any other tool today Dart is an impressive language that has been built from the ground up for the purpose of creating mobile apps Dart is currently the fastest language available for building Android and iOS apps makes it easier to build performant UI components has great IDE integrated development environment support with powerful autocompletion features allows doing live coding prototyping without losing app state and finally embraces object oriented programming by making it mandatory Having an opinionated framework means that Google will be able to make many important decisions for you allowing the community to focus on what s truly important building apps Flutter came with a complete toolchain and a beautiful Material Design like set of widgets that developers can reuse in their apps Google has also created a number of integrations with rd party libraries such as image processing libraries for handling images in an efficient way SQL databases made accessible through abstractions and text editors All of this is presented to developers as a cohesive package that has been designed with speed ease of use productivity and performance in mind Pros and cons of Flutter and React Native AppsApps created with Flutter are indistinguishable from native ones They come with the same performance and the same look amp feel apart from some platform specific stylistic aspects The main issues that people usually complain about when building apps using React Native are related to its runtime environment which is heavier than managing separate processes for each architecture This means that you will not be able to pull off a pure native app performance using React Native although you can get close Flutter does not come with the same benefits as React Native in terms of supporting existing JavaScript codebases and allowing reuse of some components shared between apps for iOS and Android Now let s dive a little deeper into the technical pros and cons of these two frameworks Pros and cons in terms of native performanceReact Native comes with an improved JavaScript virtual machine that is faster than V thanks to its JIT compiler It also benefits from being an ahead of time compiled framework which means that you are free to ship whatever codebase you need because it will be compiled into a native executable In practice React Native is as fast as pure native apps because it can achieve the same performance of an iOS app without requiring any changes to the iOS build settings Flutter comes with its own Ahead of time compiler that will emit optimized code for both iOS and Android once you have built your project You get native performance without having to ship the whole codebase in your application binary just like with React Native Pros and cons in terms of app sizeReact Native apps usually come with a JavaScript runtime that weighs about kb gzipped although it is possible to reduce this number by tweaking some options such as Bypass filling which will force React Native to skip a process of filling its virtual DOM with the result of diffing it against the native UI as well as by setting useDeveloperMode to true which will resize images in memory and reduce their quality Flutter comes with an ahead of time compiler that allows developers to ship only the codebase needed for the app they are building without having to bundle anything with it It is possible to run Flutter inside an existing JavaScript VM if you want to which will allow you to save on the space needed for your app Pros and cons in terms of minimal required SDK versionReact Native can usually be built against any iOS or Android SDK without any problem but it goes without saying that to achieve the best performance you should target the latest SDK versions available at the time of your release In practice React Native apps can be built against older iOS and Android SDKs with a limited set of features being available at runtime although to get all the features you should still target the latest SDK versions available Flutter apps can be built against Android version Lollipop and newer although it is recommended to build against the latest SDK versions available for best performance Flutter can be run on iOS or newer but calling some APIs may result in runtime crashes given that Apple has deprecated most of the APIs that Flutter uses Pros and cons in terms of UI developmentFlutter comes with its own set of widgets for rendering the UI which means that you can reuse existing iOS or Android code when building Flutter apps Some third party libraries are available for making it easier to reuse existing native components although this is still a work in progress as it is not easy to map Flutter widgets to existing iOS and Android UI components React Native comes with a bridge that allows you to reuse existing iOS and Android code as JavaScript modules as well as exposing some APIs for manually creating the bridge between your native UI components and the JavaScript code that will handle rendering them Pros and cons in terms of debuggingReact Native comes with its own debugger that can be attached to your running app on iOS and Android which provides developers with a preview of the current state of the JavaScript virtual machine along with various tools for inspecting memory usage or tweaking some options on the fly Flutter comes with its own debugger as well which can be attached to your running app on iOS and Android providing developers with a preview of the current state of the rendering engine as well as various tools for inspecting memory usage or tweaking some options on the fly Pros and cons in terms of code reuse between mobile platformsReact Native comes with its own set of APIs that can be used when developing both iOS and Android Although most companies using React Native will develop their apps on one platform first usually iOS before porting them to the other platform it is also possible to write shared components between your iOS and Android applications if you so wish Flutter apps are built with code that is platform specific so it is not possible to share any code between your iOS and Android application However third party libraries are available for making it easier to reuse existing native components Is Flutter or React Native easier to learn Both React Native and Flutter are equally easy to learn in terms of APIs although this will depend on the expertise of the developer Both have a large and engaged developer community that can help new developers and is consistently creating new tools and components For a brand new developer with little or no coding experience we would probably recommend starting with React Native as it comes with a set of predefined components that can be used to build iOS and Android apps which means that you can learn one thing at a time without having to worry about learning all the APIs used for rendering views However we would probably recommend to choose Flutter over React Native for a developer with some coding experience as the APIs offered by Flutter are closer to what you can find in both iOS and Android In addition the team behind Flutter is focusing greatly on ensuring that the development experience offered by Flutter can compete with the development experience offered by the other SDKs out there including React Native The Best Backend for FlutterIt may seem that a Backend as a Service BaaS like Google s own Firebase would be the best choice for supporting a Flutter app but the reality is quite different Backendless provides a much more complete and affordable backend solution for Flutter apps The Backendless Flutter SDK enables you to interact not only with Flutter mobile apps but also with Flutter Web designed for web and desktop apps Backendless includes all of the elements necessary for a complete and scalable backend These features include Secure real time database User authentication and user management Server side business logic Cloud Code including timers and event handlers Pub sub messaging capabilities Push notifications for both Android and iOS The Best Backend for React NativeUnlink Flutter there is no “on brand backend for React Native Similar to Flutter however React Native apps integrate very effectively with BaaS platforms like Backendless The same features Backendless provides for Flutter developers are available for React Native developers to include as well For a React Native developer looking to maximize their development efficiency BaaS solutions can take a large portion of backend development tasks off of your hands allowing you to focus on producing the best UI and UX possible Flutter vs React Native in React Native came out in and since then it has been used by many companies The JavaScript world changes very fast so React Native has also evolved over time to include new features thanks to the contributions of the open source community Flutter is a much newer technology that can feel quite alien if you are coming from the Android or iOS world Google has put a lot of effort on making it extremely easy to learn so most people that are familiar with iOS or Android development should be able to pick it up in no time ClosingFlutter and React Native are both excellent choices for cross platform application development While they share some similarities there are also some key differences that you should be aware of before deciding which one to use Choosing the right cross platform framework for your business application or startup app idea depends largely on your development experience development team and which native elements your project needs to access We hope this article will help you make an informed decision about which framework is right for your next project Frequently Asked Questions What is the difference between web development and mobile development Web development and mobile development both create online and offline applications but they do it in different ways Mobile apps require a mobile operating system such as iOS or Android to run whereas web apps can run on any device with a web browser What is Flutter Flutter is an open source mobile application development framework created by Google It allows developers to build native mobile apps for Android and iOS from a single codebase What is React Native React Native is an open source mobile app development framework created by Facebook It allows developers to build native mobile apps for Android and iOS from a single codebase Can React Native be used to develop apps for the web No React Native is a framework for creating native mobile apps only However React Native is the mobile equivalent of ReactJs which is a popular framework for creating web applications This article compares the two in detail Can Flutter be used to develop apps for the web Yes Flutter supports the use of standards based web technologies such as HTML CSS and JavaScript to generate web content With the web support you may compile existing Flutter code written in Dart into a browser client experience that is hosted on any website and deployed to any web server This article was originally published on backendless com on January	2022-02-02 20:44:44
海外TECH	DEV Community	Argon Dashboard Chakra UI - Free React Template	https://dev.to/sm0ke/argon-dashboard-chakra-ui-free-react-template-3ac1	Argon Dashboard Chakra UI Free React TemplateHello Coders This article presents an open source React Template crafted and released for free by Creative Tim Argon Dashboard Chakra can be downloaded from Github without a registration lock and used for commercial projects and eLearning activities For newcomers Chakra UI is a popular components library coded on top of React Thanks for reading Argon Dashboard Chakra product pageArgon Dashboard Chakra LIVE DemoMore Free Templates provided by Creative TimStart your Development with an Innovative Admin Template for Chakra UI and React Argon Dashboard Chakra is built with over frontend individual elements like buttons inputs navbars nav tabs cards or alerts giving you the freedom of choosing and combining Disclosure This post contains affiliate links If you use these links to buy something no additional cost to you I may earn a commission product or service Thank you If you like the look amp feel of the hottest design trend right now Argon Dashboard Chakra you will fall in love with this dashboard It features a huge number of components built to fit together and look amazing This open source Chakra UI Dashboard is coming with prebuilt design blocks so the development process is seamless switching from our pages to the real website is very easy to be done Example Pages If you want to get inspiration or just show something directly to your clients you can jump start your development with our pre built example pages Every page is spaced well with attractive layouts and pleasing shapes Argon Dashboard Chakra Dark ModeArgon Dashboard Chakra UI TablesArgon Dashboard Chakra User ProfileThanks for reading For more resources feel free to access More Free Dashboards crafted in Django Flask and ReactMore Admin Dashboards a huge index with products	2022-02-02 20:36:23
海外TECH	DEV Community	Migrating my portfolio site from Next.js to Remix	https://dev.to/thomasledoux1/migrating-my-portfolio-site-from-nextjs-to-remix-4g03	Migrating my portfolio site from Next js to RemixAbout a year ago I decided to create a portfolio website with Next js I did this mostly to get familiar with the technology but also to have a playground to test new features which I could later implement at work But a month ago I started seeing a lot of praise for Remix on Twitter and instantly wanted to give it a try Remix is described by the founders as follows Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast slick and resilient user experience TLDRLink to Remix site Source code Link to Next js site Source code The first thing I wanted to test were the nested routes which seemed like one of the top features of Remix I use nested routes to create my contact page routes contact tsximport Outlet from remix lt section id contact className text text pb lg pb gt lt div className container grid md grid cols gap content center align items gt lt div className flex flex col justify center gt lt img alt Illustration of man sitting on a block src contact svg width height className max h px lg max h px gt lt div gt lt div className flex justify center flex col gt lt Outlet gt lt div gt lt div gt lt section gt So in my routes contact tsx file I define the general structure of my contact page with the parts I always want visible in this case it s the lt img gt in it The lt Outlet gt is a special component from Remix which indicates where the nested routes should be rendered on your page routes contact index tsximport redirect useActionData from remix import type ActionFunction from remix export const action ActionFunction async request gt const formData await request formData await fetch url method POST body JSON stringify email formData get email message formData get message catch e gt throw new Error e return redirect contact thanks const Contact gt return lt gt lt h className mb text xl font bold gt Drop me a message lt h gt lt form method post gt lt label className flex flex col gap mb htmlFor email gt Your e mail lt input className py px bg white border secondary border rounded lg id email type email name email placeholder info example com required gt lt label gt lt label className flex flex col gap htmlFor message gt Your message lt textarea className py px bg white border secondary border rounded lg rows id message name message placeholder Hey I would like to get in touch with you required gt lt label gt lt button className px mt py bg primary text white rounded lg type submit gt Submit lt button gt lt form gt lt gt In routes contact index tsx I m defining what should be shown inside the lt Outlet gt initially This is a simple form with some Remix magic added to it I ll get into this later You can see I m executing an API call to Formspree and once it s finished I want to show a thank you message By doing the redirect return redirect contact thanks I m telling Remix to render the route contact thanks tsx inside the lt Outlet gt instead of contact index tsx routes contact thanks tsxconst Thanks gt lt p gt Thank you for your message I amp apos ll get back to you shortly lt p gt export default ThanksEasy peasy Another difference between Next js amp Remix is that in Remix everything is server side rendered by default while Next js gives you the choice to create static builds SSG ISR Coming from Next js where I was used to using incremental static regeneration this kind of scared me What if my API calls are slow What if my API is down For the API being slow part there is no real solution but there s an option to add caching headers to the response so the API only gets hit every so often Example this should be added to the route you want to cache on client CDN export function headers return Cache Control max age s maxage Data loading should be done at the server side by default too so we can prerender the complete HTML document before sending it to the client To load data on the server Remix provides a function called loader and a hook called useLoaderData to consume the data in your component Example for my blog route routes blog tsximport MetaFunction useLoaderData from remix import v as uuidv from uuid export async function loader const res await fetch headers api key process env DEV KEY const blogs await res json return blogs const Blog gt const blogs useLoaderData lt BlogData gt const blogsToShow blogs sort a b gt b page views count a page views count slice return lt section id blog className text text my gt lt div className container mx auto flex flex col items center justify center gt lt h className text center text xl font bold mb gt Personal blog most read lt h gt lt div className flex flex col gap gt blogsToShow map blog gt lt a target blank rel noopener noreferrer key blog id href blog url aria label blog title className transform border border purple rounded xl transition transform p hover scale gt lt article className relative rounded lg text textsm mx gt lt gt lt div className flex justify between gt lt div className flex justify between mb items start w full gt lt h className text xl font medium dark text white pr gt blog title lt h gt lt div className flex flex col md flex row items center text gray gt lt svg xmlns className h w md mr fill none viewBox stroke currentColor gt lt path strokeLinecap round strokeLinejoin round strokeWidth d M a z gt lt path strokeLinecap round strokeLinejoin round strokeWidth d M C c z gt lt svg gt lt span gt blog page views count lt span gt lt div gt lt div gt lt div gt lt p className mb gt blog description lt p gt lt ul className flex flex wrap gt blog tag list map tag gt const key uuidv return lt li className text sm my py px mr rounded md tag key key gt tag lt li gt lt ul gt lt gt lt article gt lt a gt lt div gt lt a href target blank rel noopener noreferrer className px mt py bg primary text white rounded lg gt Read more blogs lt a gt lt div gt lt section gt You can see I m loading the data from Dev to through the loader function and then consuming it using the useLoaderData hook That s all there is to it Remix polyfills fetch so you don t have to worry about using node fetch Remix also provides the option to leave out all javascript for your whole application or just for some routes This is handled by putting the lt Scripts gt tag in your app root tsx if you leave it out no javascript will be loaded on your pages I did this on my website and everything still works as expected data loading contact form setting cookies Managing amp setting cookies is also a breeze in Remix The following parts are needed for a cookie to store the choice of theme on my site app root tsximport ActionFunction LoaderFunction useLoaderData useLocation from remix export const loader LoaderFunction async request gt const cookie await parseCookie request theme if cookie theme cookie theme light return theme cookie theme export const action ActionFunction async request gt const cookie await parseCookie request theme const formData await request formData cookie theme formData get theme cookie theme light const returnUrl formData get returnUrl const serializedCookie await theme serialize cookie return redirect returnUrl toString headers Set Cookie serializedCookie export default function App const cookie useLoaderData return lt Document gt lt Layout theme cookie theme gt lt Outlet gt lt Layout gt lt Document gt app utils parseCookie tsimport Cookie from remix export const parseCookie async request Request cookie Cookie gt const cookieHeader request headers get Cookie const parsedCookie await cookie parse cookieHeader return parsedCookie app cookie tsimport createCookie from remix export const theme createCookie theme Using this code I am able to get my theme cookie when the website is loaded in app root tsx and I can change the styling of my website based on this I can also change the theme by using a button in my navigation import Link NavLink useLocation from remix run react type NavigationProps theme string const Navigation theme NavigationProps gt const oppositeTheme theme light dark light const location useLocation return lt nav className fixed bg purple dark bg darkgrey text text h w full z gt lt div className flex h full container mx auto justify between items center px lg px gt lt form method post action gt lt input name theme type hidden value oppositeTheme gt lt input name returnUrl type hidden value location pathname gt lt button aria label Toggle Dark Mode type submit id darkModeToggle className p top lg top auto overflow hidden order md order absolute left transform translate x md translate x lg transform none md relative md left gt lt div className relative h w gt lt span className absolute inset dark hidden gt lt svg xmlns viewBox fill currentColor stroke currentColor className text gray dark text gray gt lt path strokeLinecap round strokeLinejoin round strokeWidth d M vm vm h M Hm l M l m l M l M a z gt lt svg gt lt span gt lt span className absolute inset hidden dark inline block gt lt svg fill currentColor stroke currentColor className text gray dark text gray viewBox gt lt path strokeLinecap round strokeLinejoin round strokeWidth d M A a z gt lt svg gt lt span gt lt div gt lt button gt lt form gt lt div gt lt nav gt export default NavigationBy using the lt form method post action gt I tell Remix to use the action defined in app root tsx and pass on the current URL so the user gets redirected to the same URL but with the cookie set I know this isn t ideal for animating the transition of the theme etc but it works without JS and that was my main goal at this time Some Lighthouse stats both hosted on Vercel Next js Remix Both very fast but Remix seems to really get the TTI a lot lower probably because the load a lot of the needed resources in parallel and partly also because no JS is loaded Check my new Remix website here Source code Old website can be found on Source code	2022-02-02 20:21:13
海外TECH	DEV Community	The Journey to My Second Project	https://dev.to/sid_saythongphet/the-journey-to-my-second-project-2mk2	The Journey to My Second ProjectAnother month another project This time we strayed away from regular JavaScript and dove into React And my REACTion to that was pure bliss From the first introduction to components I was hooked With React we are creating components in which we can nest other components in like Russian dolls We then can pass props from a parent to a child The type A persona in me was so happy to be able to have a way to organize my code into sections and then to be able to reuse it multiple times And lets not forget how much cleaner the code looks Take the following example of creating a button the normal way const createButton name id gt const btn document createElement button btn id id btn innerText name return btn Now in React function Button id text return lt button id id gt text lt button gt Simpler to read and understand the end result Bonus less to write out too And don t get me started on the redundancy of creating an element and assigning attributes to lets say a form I really loved the process of using React Now this time around with the idea of having a hierarchy for which my components resided in I felt I had a little more control in organizing my thoughts and ideas With this new control I decided to actually map out my brainstorming ideas Which led me to An introduction to the world of mind mapping Of course I have always brainstormed but most of that never actually made it onto page It was all in my head which I would say I ll remember for later Yeah I never remembered So as I initiated the thought process into my project this time around I decided I should first sit down and download a mind mapping software That turned out to be XMind Once in I started just writing away my ideas And boy did this process help It aided tremendously to visualize my idea and see how everything worked separately and together I loved seeing how my app hierarchy branched out and to see how each of my components worked together It made figuring out where my state lived where my requests to my API were being handled and where my props needed to be passed down to To also gave me a bit more confidence into exploring external APIs which being the superhero fanatic that I am I chose to use the Marvel API With the help of mind mapping figuring out how to incorporate an external API was easier I was able to pinpoint where I needed to pull requests and how to integrate it into my own RESTful API From this map I was able to start up a mock editor and just play around and see what worked and what didn t I troubleshooted how to work with an external API how my components worked with each other and how I wanted the general style to look Once I felt ready with my ideas and had a clearer understanding of how the whole thing was put together I opened up my command line and npx create react app	2022-02-02 20:12:10
Apple	AppleInsider - Frontpage News	Apple Watch Series 7 has a fast charging problem	https://appleinsider.com/articles/22/02/02/apple-watch-series-7-has-a-fast-charging-problem?utm_medium=rss	Apple Watch Series has a fast charging problemOne of the few new features that arrived with the Apple Watch Series was faster charging In the months since launch it s clear that the Apple Watch Series charges significantly quicker ーwhen you can find a fast charger combo that works Charging Apple Watch Series After a rumored redesign was ditched Apple Watch Series launched with only a few notable features The screen size increased marginally to mm and mm from mm and mm and it could now charge more quickly Otherwise it was largely the same as the prior generation Read more	2022-02-02 20:59:08
Apple	AppleInsider - Frontpage News	How AppleInsider staff continue to work from home, two years later	https://appleinsider.com/articles/22/02/02/how-appleinsider-staff-continue-to-work-from-home-two-years-later?utm_medium=rss	How AppleInsider staff continue to work from home two years laterAll AppleInsider staff work from home offices but how we do it became suddenly more relevant when COVID forced so many people to do the same Two years after the first time we talked about it here is how we ve each moved on and what new gear we now rely on Seeing how other people set up their working desks did become almost practical when the coronavirus pandemic forced so many to work from home for the first time But otherwise there s no justifying it there is simply something interesting about how other people work What s surprised AppleInsider staff though is how much things have changed in the two years since we first looked at this On the one hand all of the staff were already working from home so we had experience to share yet in this one sense we weren t dramatically affected by the pandemic Read more	2022-02-02 20:27:38
Apple	AppleInsider - Frontpage News	Best deals Feb. 2: $100 off every AirPods Max color, $400 off Vizio 65-inch 4K 120Hz AirPlay TV, more!	https://appleinsider.com/articles/22/02/02/best-deals-feb-2-100-off-every-airpods-max-color-400-off-vizio-65-inch-4k-120hz-airplay-tv-more?utm_medium=rss	Best deals Feb off every AirPods Max color off Vizio inch K Hz AirPlay TV more In addition to the AirPods Max deal Wednesday s best deals include off a Philips Hue A color bulb a discount on a Serta office chair and off an electric standing desk Best deals February As we do every day we ve collected some of the best deals we could find on Apple products tech accessories and other items for the AppleInsider audience If an item is out of stock it may still be able to be ordered for delivery at a later date Read more	2022-02-02 20:02:24
海外科学	NYT > Science	Why Nasal Covid Vaccines May Make Better Boosters	https://www.nytimes.com/2022/02/02/health/covid-vaccine-nasal.html	boostersnasal	2022-02-02 20:00:47
海外科学	NYT > Science	Biden to Present Plan to Cut Cancer Death Rate in Half	https://www.nytimes.com/2022/02/02/us/politics/biden-cancer-moonshot.html	Biden to Present Plan to Cut Cancer Death Rate in HalfThe president aims to revive the cancer “moonshot program but experts expressed doubt that it would be possible to reduce the death rate so profoundly	2022-02-02 20:35:57
海外TECH	WIRED	Welcome to the Burner Phone Olympics	https://www.wired.com/story/winter-olympics-2022-phones-security	state	2022-02-02 20:51:24
医療系	医療介護 CBnews	病院経営スペシャリスト養成第5期生募集、28日まで- 千葉大病院「ちば医経塾」	https://www.cbnews.jp/news/entry/20220201161649	千葉大学	2022-02-03 06:00:00
ニュース	BBC News - Home	NI Protocol: Irish Sea border checks ordered to end at midnight	https://www.bbc.co.uk/news/uk-northern-ireland-60236169?at_medium=RSS&at_campaign=KARANGA	advice	2022-02-02 20:57:55
ニュース	BBC News - Home	Pret raises the price of its coffee subscription by 25%	https://www.bbc.co.uk/news/business-60223226?at_medium=RSS&at_campaign=KARANGA	coffee	2022-02-02 20:38:00
ビジネス	ダイヤモンド・オンライン - 新着記事	上場基準「PER目標高すぎ」企業ランキング【100社】上位12社の目標が“東証1部平均の2倍” - 東証再編が誘発！上場廃止ラッシュ	https://diamond.jp/articles/-/294491	上場廃止	2022-02-03 05:25:00
ビジネス	ダイヤモンド・オンライン - 新着記事	三菱商事が「洋上風力の価格破壊」批判に本音回答、実績不足・採算度外視説に大反論 - Diamond Premium News	https://diamond.jp/articles/-/295117	三菱商事が「洋上風力の価格破壊」批判に本音回答、実績不足・採算度外視説に大反論DiamondPremiumNews秋田県沖の海域と千葉県銚子沖で計画されている洋上風力発電の入札を巡り、圧倒的な低価格で海域全てを落札した三菱商事。	2022-02-03 05:20:00
ビジネス	ダイヤモンド・オンライン - 新着記事	住友生命が業界初「バイオセラピー保険」発売で狙う巨大市場、アイアル少短・セルソースとタッグ - Diamond Premium News	https://diamond.jp/articles/-/295116	diamondpremiumnews	2022-02-03 05:15:00
ビジネス	ダイヤモンド・オンライン - 新着記事	【スクープ】セブン＆アイのデジタル敗戦は3度目、失敗の連鎖の裏に「二族経営」の呪縛 - セブンDX敗戦	https://diamond.jp/articles/-/293813		2022-02-03 05:10:00
ビジネス	ダイヤモンド・オンライン - 新着記事	コロナで大幅赤字の「日本の空港」、危機脱却のための行政支援の在り方とは - ＤＯＬ特別レポート	https://diamond.jp/articles/-/294889	感染拡大	2022-02-03 05:05:00
ビジネス	電通報 | 広告業界動向とマーケティングのコラム・ニュース	暇つぶし専用チャットボットが、ユーザーと企業を雑談でつないでみた	https://dentsu-ho.com/articles/8067	暇つぶし	2022-02-03 06:00:00
北海道	北海道新聞	米、日韓にガス融通可能か打診　対欧州、ウクライナ有事の際	https://www.hokkaido-np.co.jp/article/641123/	通信	2022-02-03 05:12:09
北海道	北海道新聞	＜社説＞自宅療養急増　支援体制拡充が急務だ	https://www.hokkaido-np.co.jp/article/641074/	感染拡大	2022-02-03 05:01:00
ビジネス	東洋経済オンライン	なぜ日本は沈黙？｢子宮頸がんワクチン｣の大論点 4月から定期接種化するのに議論盛り上がらず | 政策 | 東洋経済オンライン	https://toyokeizai.net/articles/-/504555?utm_source=rss&utm_medium=http&utm_campaign=link_back	定期接種	2022-02-03 05:30:00
ビジネス	東洋経済オンライン	アメリカの歴史的な金融引き締めで何が起こるか 元日銀審議委員の白井さゆり慶大教授に聞く | 市場観測 | 東洋経済オンライン	https://toyokeizai.net/articles/-/508697?utm_source=rss&utm_medium=http&utm_campaign=link_back	東洋経済オンライン	2022-02-03 05:05:00