投稿時間:2022-04-09 06:29:28 RSSフィード2022-04-09 06:00 分まとめ(33件)

カテゴリー等	サイト名等	記事タイトル・トレンドワード等	リンクURL	頻出ワード・要約等/検索ボリューム	登録日
AWS	AWS Mobile Blog	Add Interactive Maps in React using Amplify Geo, powered by Amazon Location Service	https://aws.amazon.com/blogs/mobile/add-interactive-maps-in-react-using-amplify-geo/	Add Interactive Maps in React using Amplify Geo powered by Amazon Location ServiceThis blog post was written by Michael Liendo Senior Developer Advocate at AWS Amplify Recently AWS Amplify announced an easier way for React developers to add map and search functionality to their applications via the Amplify CLI as well as new AWS aware Geo components In this post we ll take a look at how to …	2022-04-08 20:48:45
AWS	AWS	HBO Max Uses AWS Lambda to Scale Globally | Amazon Web Services	https://www.youtube.com/watch?v=PLFbp3TnKL4	HBO Max Uses AWS Lambda to Scale Globally Amazon Web ServicesHBO Max Warner Media s direct to consumer platform offering best in class quality entertainment uses Amazon Web Services AWS to scale In May HBO Max launched its platform and recently began its global rollout in markets across Latin America and Europe HBO Max uses an event driven architecture with security built in to scale to serve million global customers Learn more at Subscribe More AWS videos More AWS events videos ABOUT AWSAmazon Web Services AWS is the world s most comprehensive and broadly adopted cloud platform offering over fully featured services from data centers globally Millions of customers ーincluding the fastest growing startups largest enterprises and leading government agencies ーare using AWS to lower costs become more agile and innovate faster ContentDelivery Scale AWSLambda AWS AmazonWebServices CloudComputing	2022-04-08 20:53:34
海外TECH	Ars Technica	Cox customers fight back against sneaky broadcast TV and regional sports fees	https://arstechnica.com/?p=1846909	arbitration	2022-04-08 20:37:31
海外TECH	DEV Community	The most Uncommon HTML5 Tags you should know!	https://dev.to/nicholaschibueze/the-most-uncommon-html5-tags-you-should-know-498g	The most Uncommon HTML Tags you should know Hey Readers Nicholas here I m a web developer Web development is interesting yet a challenging approach so here I m sharing a bit of knowledge to abate complexity for you all HTML is the standard markup language for documents designed to be displayed in a web browser It provides a powerfull accessibility functions if used appropriately and Also can be assisted by technologies such as Cascading Style Sheets CSS and scripting languages such as JavaScript In addition to this it s easy to learn and has a lots of features that you can use as Web developer Here I m going to show you some of the most Uncommon HTML tags Abbreviation The tag in HTML is the latest title When the mouse curser is hovered on the title it will display a full description in the tooltip form This element includes Global Attribute like title Example The most wonder key of your development is Self Reflection The most wonder key of your development isSelf Reflection Acronym The is another abbreviation tagIn HTML is not supported In case we use the tagThe tag is compatible in any browser as well as it is used to abbreviate the full form of the title whixh is placed between these tags when hovered Example lt p gt The lt acronym title world wide web gt www lt acronym gt is only a component of Internet lt p gt Address The tag basically provides contact information regarding author or owner of the organisation or documets or an article The tag always returns the value Italics Example lt address gt lt a href mailto username gmail com gt username gmail com lt a gt lt br gt lt a href tel xxxxxx gt xx xxxx lt a gt lt address gt Cite The tag is the citation element of HTML Citation is the term which means a quotation from or reference to a book paper or author especially in a scholarly work As all of use know about the it s just similar to it When we want to give italics expression we can use this alternative Example lt blockquote gt lt p gt Only you built your Limits lt p gt lt footer gt Example lt cite gt Rare Tags Cite lt a gt lt cite gt by Priyanshu lt footer gt lt blockquote gt lt p gt For More details visit us lt cite gt HTML E Learns lt cite gt lt p gt Optgroup When we are using tag at that time to put proper options to the selection box tag is used in HTML This element includes Global Attributes like disable and label Tag omission is allowed Closing tag is optional Examples lt label for communitysite gt Community Site lt label gt lt select id communitysite name communitysite gt lt optgroup label Saturday gt lt optgroup gt lt option value insta gt Instagram lt option gt lt option value fb gt Facebook lt option gt lt option value pin gt Pinterest lt option gt lt optgroup label Monday gt lt optgroup gt lt option value csharpcorner gt C Sharp Corner lt option gt lt option value git gt GitHub lt option gt lt select gt Fieldset The in HTML is used to make a group related form controls and labels In browsers a box around the content is drawn Example lt fieldset gt lt legend gt Personal details lt legend gt lt label for yourname gt Your name lt label gt lt input name yourname id yourname gt lt label for yourage gt Your age lt label gt lt input type number name yourage id yourage gt lt fieldset gt lt fieldset gt lt legend gt House address lt label gt lt label for housenumber gt House number lt label gt lt input name housenumber type number id housenumber gt lt label for street gt Street lt label gt lt input name street id street gt lt label for postcode gt Zip code Post code lt label gt lt input id postcode name postcode gt lt fieldset gt Conclusion We covered some Underrated yet powerful HTML tags that you should know I hope you find it useful If yes then let me know in the comments Also if you want more useful content related to web development follow me on TwitterThanks for Reading ️	2022-04-08 20:30:44
海外TECH	DEV Community	Implementing Micro Frontends in React Using Module Federation	https://dev.to/wisdomekpotu/implementing-micro-frontends-in-react-using-module-federation-4lan	Implementing Micro Frontends in React Using Module Federation Quick Summary    In this tutorial we re going to learn about Micro Frontends and how to use Module Federation to share code and dependencies between two different React codebases We ll use Module Federation as the JavaScript architecture of choice for our example application In this process we ll master the concept of Micro Frontends when using Module Federation     Today Micro Frontends are a current trend in the software industry as engineering teams in many companies struggle to manage working on large and complex code bases together We would see how to solve the problem of managing frontend apps at large scale using the Micro Frontend approach This tutorial will be beneficial to readers who are interested in architecting their own Micro Frontend Applications Projects using React We ll be writing an application to better understand how it works At the end of this article you will be able to implement a micro frontend then deploy it to AWS This article requires a basic understanding of React Webpack and AWS   What are Micro Frontends     According to Martin Fowler s official website the micro frontend approach is defined as an architectural style where independently deliverable frontend applications are composed into a greater whole Micro Frontend as an architectural style where independently deliverable frontend applications are composed into a greater whole In simple terms Micro Frontend is taking a monolithic application and dividing it into smaller apps in which each is responsible for a singular feature The idea here is to extend the microservice concept to frontend development where multiple teams can ship features independently As Modern Monolithic web applications are becoming robust and more complex and are managed by different teams it becomes difficult to maintain hence migrating a micro frontend approach to building your web applications is probably the best solution   Pros of Using Micro Frontends You might be wondering why we use micro frontends and what benefit we get by splitting out apps into seperate sub applications Multiple engineering teams can work in isolation Teams can develop independent features from start to finish by themselves Engineering team can build with their own engineering style and take important decisions independently For example engineering team A might decide to use React while the other team can choose to use Vuejs or other frameworks Different teams would be able to use their own tooling Each team can Independently deploy their applications to production without deploying the whole application every time Faster Builds are a key advantage of using micro frontends   What is Module FederationThis is a webpack plugin created by Zack Jackson Introduced in Webpack the Module Federation plugin gives us a way to create multiple separate builds that form a single application It is a JavaScript architecture that allows the sharing of code and dependencies between two different application codebases Why Use Webpacks Module Federation Better and Easier Code Sharing It helps to Expose code from any application that can be used in another application It handles all the compression routing and cache issues Transition to module federation architecture is very fast and easy with no learning cost Environment Independent Use shared code can be used in different environments such as web Node js etc   Methods of Implementing Micro Frontends  When Building Micro Frontends we would have a container host app which will decide where and when to show each micro front end This implies that the container needs to get access to the both at some point This Process is called integration   There are many different ways of Integrating Micro Frontends but there is no single perfect way each has its pros and cons Hence deciding what solution to use will depend on your requirements   In general there a three major categories on integrations Build Time Integration   This is also known as compile time integration This means that all micro frontend apps will be downloaded and integrated loaded into Host Container Application during its build process Before the container is loaded in the browser it has already gotten access to the source code of all MFE s Run Time Integration   This is also called client side integration In this case the host container gets access to the micro frontends after it has been loaded on to the browser These methods solve a lot of challenges that come with the Build Time Integration and we would be focusing on this integration in our project below Server Integration  Some Micro Frontend FrameworksThere are various available frameworks that can be used when working with Microfrontends Module Federation This was built by Zach JacksonAws Serverless BitSingle SpaSystemjs  Also we should note that we can structure Micro Frontend Applications in two ways Individual Separate reposMonorepoBefore we jump into building our sample application there are a few key point we need to note CSS styling from one project should not break another one Version Control should not have any impact in the overall project i e making use of monrepos or separate repos is fine Our Container should be able to decide to use either the latest version of a micro frontend or a specific versionAlso there should be no shared state No importing of classes functions objectsThere should be zero coupling between child projects   Building an Simple E commerce Store Using Micro Frontends With React and Module FederationFor learning purposes in this tutorial we are going to build a simple ecommerce app that will allow us to see a simple implementation of module federation to build micro frontend Note This is a Proof of Concept application There is no actual server or api there is no actual interaction We are more interested in how to connect and work with react and module federation PrerequisiteBefore starting this tutorial you need to haveNode js installed on your local machine v or v Check this tutorial for instructions on how to install Node jsBasic understanding of Webpack quick guideGithub Actions GuideBasic knowledge of React jsBasic knowledge of Chakra UIBasic Knowledge of AWSWithout further ado let s begin Scaffolding a React ProjectNote for this project we would be setting up our react project from scratch without using any build tools such as CRA as we would love to extensively configure our webpack files Our first step will be to create a folder to host the three React Applications mkdir packagesRight in this folder we will three folders namely host products cartNavigate to each folder and initialize a project using npm initNow lets proceed to installing some dependencies we would be needing to setup our react apps Run the following commands in each folder npm i react react dom react router dom chakra ui react emotion react emotion styled framer motion And then some dev dependecies necessary to wireup a react app from scratch Run the following commandsnpm i babel core babel plugin transform runtime babel preset env babel preset react babel loader clean webpack plugin css loader html webpack plugin style loader webpack webpack cli webpack dev server webpack merge save devNow lets setup our initial webpack configuration We will begin from the product app   Building the Product MFE ApplicationNavigate to the product folder and create a folder called config Then right in there create three essential webpack files namely webpack common js webpack dev js webpack prod js When we open up products folder this is the structure Now lets write up a little configuration in our webpack common dev js module exports module rules test m js exclude node modules use loader babel loader options presets babel preset react babel preset env plugins babel plugin transform runtime Here we define excludes which makes sure that babel does not run on any file in node modules After that we set react specific babel presets Now moving on to the webpack dev js const merge require webpack merge const HtmlWebpackPlugin require html webpack plugin const commonConfig require webpack common const devConfig mode development devServer port historyApiFallback index index html plugins new HtmlWebpackPlugin template public index html module exports merge commonConfig devConfig This is our development specific configuration We only want to provide this to webpack whenever we are running it inside a development environment Then we required the webpack common js file and merge it with the webpack dev js file using the webpack merge   Running Product MFe in IsolationTo do this First lets create a folder called public with index html inside it and another folder called src with index js inside it After that Nagivate to the package json and add start script scripts start webpack serve config config webpack dev js Then Run npm start It should compile successfully and should be running on http localhost lets Create a component for our product import as React from react import Box Center useColorModeValue Heading Text Stack Image from chakra ui react const IMAGE ixid MXwxMjAfDBMHxwaGbywYWdlfHxfGVufDBfHw D amp auto format amp fit crop amp w amp q export default function Product return lt Center py gt lt Box role group p maxW px w full bg useColorModeValue white gray boxShadow xl rounded lg pos relative zIndex gt lt Box rounded lg mt pos relative height px after transition all s ease content w full h full pos absolute top left backgroundImage url IMAGE filter blur px zIndex groupHover after filter blur px gt lt Image rounded lg height width objectFit cover src IMAGE gt lt Box gt lt Stack pt align center gt lt Text color gray fontSize sm textTransform uppercase gt Brand lt Text gt lt Heading fontSize xl fontFamily body fontWeight gt Nice Chair pink lt Heading gt lt Stack direction row align center gt lt Text fontWeight fontSize xl gt lt Text gt lt Text textDecoration line through color gray gt lt Text gt lt Stack gt lt Stack gt lt Box gt lt Center gt In the above code we made use of chakra ui to create a simple looking product component Then import this into the app component of our product application Now in your src folder go back and create a file boostrap js and inport it into the index js file import bootstrap Now we do not have to touch the index js file again Next up inside boostrap js is where we would be writing our main startup code for the Product Micro frontend Now lets setup the bootstrap js file import React from react import ReactDOM from react dom import App from App Mount function to start up the app const mount el gt ReactDOM render lt App gt el If we are in development and in isolation call mount immediately if process env NODE ENV development const devRoot document querySelector marketing dev root if devRoot mount devRoot export mount In the boostrap js file we would import and render the App Component Then we also want to specify a mount function which will basically run checks and display the component   Building the Cart MFE ApplicationBasically we do the same thing that we did for the products The files in both will be the same so we just need to duplicate them to save time and then build out the cart component Then Run npm start Now we shoiuld have our cart react app running on http localhost   Assembling The Container Putting Everything Together   Now that is done let us see how we can connect out product and cart apps to be loaded from our overrall container host app Setting Up The Host   First we do our normal webpack setup To save time we just copy the config folder as it is mostly similar Goto the package json and add the start script Then nagivate to webpack and change the host to run on a different port for this it will be    Next we create folders src and public with index html in public and App bootstrap js and index js just like previous ones Quick note This is the main overall html file used when we load up our application through the container or when we load it in production Set the id in index html to root Then Make changes to bootstrap jsimport React from react import ReactDOM from react dom import App from App ReactDOM render lt App gt document querySelector root You will notice that the the bootstrap file is different from that of product and cart and that is because we do not need to do a check for development since in every scenerio we would want our container to show itself immedietly Now lets run the container app It should now be running on http localhost   Integrating Product and Cart MFEs into Host Container Lets go to the webpack dev js file and make use of the Module Federation Plugin to join all applications together Now we are adding it to the development webpack file This is because though we will still add it to the production file but there will be slight difference configurations depending on whether or not we are in dev or prod Now go to our child apps and edit the webpack dev js files to expose these apps to be integrated into the container app const merge require webpack merge const HtmlWebpackPlugin require html webpack plugin const ModuleFederationPlugin require webpack lib container ModuleFederationPlugin const commonConfig require webpack common const devConfig mode development devServer port historyApiFallback index index html plugins new ModuleFederationPlugin name product filename remoteEntry js exposes ProductApp src bootstrap new HtmlWebpackPlugin template public index html module exports merge commonConfig devConfig Exposes This is the main part which specifies exactly what file we need to make available to the host container In the host s webpack dev js file we accept the exposed micro frontend to be loaded from the index html of the host const merge require webpack merge const HtmlWebpackPlugin require html webpack plugin const ModuleFederationPlugin require webpack lib container ModuleFederationPlugin const commonConfig require webpack common const devConfig mode development devServer port historyApiFallback index index html plugins new ModuleFederationPlugin name host remotes product product http localhost remoteEntry js cart cart http localhost remoteEntry js new HtmlWebpackPlugin template public index html module exports merge commonConfig devConfig Now its time to display the two microfrontends on the container application Goto to the Host Application Inside the src folder create a new folder Called Components and inside create two folders Product App import mount from product ProductApp import React useRef useEffect from react export default gt const ref useRef null useEffect gt mount ref current return lt div ref ref gt and Cart App import mount from cart CartApp import React useRef useEffect from react export default gt const ref useRef null useEffect gt mount ref current return lt div ref ref gt Now we import them into the App js import React Component from react import Product App from Components Product App import Cart App from Components Cart App export default gt return lt div gt lt Product App gt lt Cart App gt lt div gt Okay thats it lets run Our container app using npm start It should be running fine on http localhost Sharing Dependencies Between Apps optional Also we can use Module Federation to share dependecies between Micro Frontends especially those that are the same plugins new ModuleFederationPlugin name host remotes product product http localhost remoteEntry js cart cart http localhost remoteEntry js shared react react dom This is done by using shared and declaring the dependencies   Deploying To AWSNow we are done lets see how we can deploy this application Requirements to Note When Deploying Micro FrontendsWe would deploy each microfrontend independently including the host The location of the child app remoteEntry js must be known at Build Time   Now in a company scenerio we know that many teams will be working on various sub project in an overall project Each of these different teams may want to add new features at different rates and times and as this happens they might want to deploy their applications without worrying about another teams finishing up their feature   So we need to make sure that when changes are made to these project we can deploy each one by themselves   They are many diff ways we can deploy our apps using services like heroku now sh vercel but there is a common problem with them as they assume that we are deploying just a single project   But this is not what we need for this to work we would need a service that will allow us to use the output of different webpack build processes and and deploy each of them seperately So First lets push to github but before we do that we need to create a gitignore file at the root of out project to hide files we dont need to push Setup the webpack production config files for container const merge require webpack merge const ModuleFederationPlugin require webpack lib container ModuleFederationPlugin const commonConfig require webpack common const domain process env PRODUCTION DOMAIN const prodConfig mode production output filename name contenthash js publicPath host latest plugins new ModuleFederationPlugin name host remotes cart cart domain cart latest remoteEntry js product product domain product latest remoteEntry js module exports merge commonConfig prodConfig This Configuration is quite similar to the webpack dev js file but with some few changes We require the merge function to be able to combine the webpack common js file to the webpack production file We also define the mode to production Then we setup out output We filename to name contenthash js which will act as a template for naming files when we build for producution Lets not forget our module Federation plugin which we use to declare production specific setting As you can see we poiting to an actual domain instead of localhost as in the development webpack files Another thing to note is that we would be needing another index html for when we run in production To do this go to the the webpack dev file and move the htmlwebpackplugin to the common webpack file const HtmlWebpackPlugin require html webpack plugin module exports module rules test m js exclude node modules use loader babel loader options presets babel preset react babel preset env plugins babel plugin transform runtime plugins new HtmlWebpackPlugin template public index html This will ensure that there is a index html file outputed when we run our production build After this we then need to add our webpack build script in the package json build webpack config config webpack prod js Now we repeat the same process in our cart and product production webpack files It should look like this for both files const merge require webpack merge const ModuleFederationPlugin require webpack lib container ModuleFederationPlugin const commonConfig require webpack common const prodConfig mode production output filename name contenthash js publicPath cart latest plugins new ModuleFederationPlugin name cart filename remoteEntry js exposes CartApp src bootstrap module exports merge commonConfig prodConfig And then we add the build script to both package json and then we run all our builds to check for errors Implementing a CI CD Pipeline Workflow   Before we move on to AWS lets Setup a CI CD Workflow for all our Applications using Github Actions    Navigate to our root folder and create github folder then Create a sub folder called workflows    Let us start from the host Create a file called host yml name deploy host on push branches main paths packages host defaults run working directory packages host jobs build runs on ubuntu latest steps uses actions checkout v run npm install run npm run build env PRODUCTION DOMAIN secrets PRODUCTION DOMAIN uses shinyinc action aws cli v run aws s sync dist s secrets AWS S BUCKET NAME host latest env AWS ACCESS KEY ID secrets AWS ACCESS KEY ID AWS SECRET ACCESS KEY secrets AWS SECRET ACCESS KEY AWS DEFAULT REGION us east    Explanation of above code  So here we defined the path to our host app and created jobs to be excecuted whenever a change is made to host application Then we added our aws environment variables   lets push this to gihub to make sure that our actions are running   So far the jobs are running as expected though it failed at some point because we are yet to setup our aws infrastructure Lets do that now    Setting up AWS S Bucket   I am assumming you already have an AWS account So sign in and navigate to s then create a bucket    Now note AWS S is by default secure meaning none of the file you upload here will be available online but in our case we would want it to allow us have public access to them To fix this we are going to update two settings    Navigate to properties scroll down to static website hosting and click edit Then we enable settings to allow public access   Then right after this we go to the permissions tab and uncheck the Block public access box to now completely allow public access to our bucket   Ater this we move on to the second change to be made Navigate to permmisions again but this time scroll down to Bucket Policy click on edit policy generator We will now create a policy which is to help different AWS services communicate with one another So in our case we are creating a policy that will allow our cloudfront distribution to access all the different file we will load up to the bucket   Now click on policy generator This will take you another window where we will author our policy   here we select S Bucket Policy for type of policy allow for effect for principal Get Actions for actions Then to get resource name got back to previous page and copy the Bucket ARN then click add statement and generate policy button and modal will be displayed Copy the code from the model into the code editor present in the previous page and save it   Now that is it for our bucket setup but we should note that we will no be directly serving the stored files directly from S Bucket instead we would be making use of another AWS service called AWS CloudFront This will be responsible for taking files from our s bucket and serving it to the browser   Open up the aws console on another tab and navigate to AWS CloudFront Distributions and create a distribution We then select our s bucket then scroll down to viewer and change it to Redirect HTTP to HTTPS Then click create distribution Now we wait for it to load up then we make the folowing change in settings Navigate to general tab and click on edit Scroll till you see default root object We change that to host latest index html then save it Next go to error response tab and create an error response   Configure actions to push all files to s bucket  To do this we have to get the aws environment variable to connect to our github actions In the AWS console search for a service called IAM This is what we would use to generate an access key and secret   Navigate to users and click add user Select under programmable access under access type Under permissions select attach existing policies and then check the boxes for both AmazonSFullAccess and CloudFrontFullAccess The Access Key ID and Secret Access Key will be generated   Now copy them and add it to the secrets as an environment variable of the github settings   Now lets rerun our github action and you show see that it has moved our files to S bucket but when we try accessing it using the domain from cloud front we see a blank page Well so far this is good news that everything is working but we need to make some tweaks to get our apps showing  Lets make an edit to our webpack prod js file to create path output filename name contenthash js publicPath host latest   You will see only a white page on the screen This is because cloudfront ignores changes made to the index html We then have to setup invalidations to solve this Then automate it using our github actions Also don t forget to put the environment variables in your github settings run aws cloudfront create invalidation distribution id secrets AWS DISTRIBUTION ID paths host latest index html env AWS ACCESS KEY ID secrets AWS ACCESS KEY ID AWS SECRET ACCESS KEY secrets AWS SECRET ACCESS KEY AWS DEFAULT REGION secrets AWS DEFAULT REGION Now Lets run our actions We are done for that of the host it s time to quickly create yml files for cart and product It will be very similar to that of the host for Product yml name deploy product on push branches main paths packages product defaults run working directory packages product jobs build runs on ubuntu latest steps uses actions checkout v run npm install run npm run build uses shinyinc action aws cli v run aws s sync dist s secrets AWS S BUCKET NAME product latest env AWS ACCESS KEY ID secrets AWS ACCESS KEY ID AWS SECRET ACCESS KEY secrets AWS SECRET ACCESS KEY AWS DEFAULT REGION secrets AWS DEFAULT REGION run aws cloudfront create invalidation distribution id secrets AWS DISTRIBUTION ID paths product latest remoteEntry js env AWS ACCESS KEY ID secrets AWS ACCESS KEY ID AWS SECRET ACCESS KEY secrets AWS SECRET ACCESS KEY AWS DEFAULT REGION secrets AWS DEFAULT REGION for cart yml name deploy cart on push branches main paths packages cart defaults run working directory packages cart jobs build runs on ubuntu latest steps uses actions checkout v run npm install run npm run build uses shinyinc action aws cli v run aws s sync dist s secrets AWS S BUCKET NAME cart latest env AWS ACCESS KEY ID secrets AWS ACCESS KEY ID AWS SECRET ACCESS KEY secrets AWS SECRET ACCESS KEY AWS DEFAULT REGION secrets AWS DEFAULT REGION run aws cloudfront create invalidation distribution id secrets AWS DISTRIBUTION ID paths cart latest remoteEntry js env AWS ACCESS KEY ID secrets AWS ACCESS KEY ID AWS SECRET ACCESS KEY secrets AWS SECRET ACCESS KEY AWS DEFAULT REGION secrets AWS DEFAULT REGION Now just make some changes to cart and product application so that it will redeploy the apps them test the cloudfront url to see our final app has been deployed successfully   Conclusion   In this article we learned about Architecting A React Based Micro Frontend Application from start to Deployment We also went through the process of Creating Separate Autonomous React Application and Assembling them together using the Module Federation Webpack Plugin You can definitely use this architecture for your next React Micro Frontend Application The code for the Micro Frontend Application can be found on Project Github Repo  RESOURCES AND REFERENCESProject Github RepoWebpack Documentation Module Federation ExampleModule Federation official documentation	2022-04-08 20:28:31
海外TECH	DEV Community	Are you getting your sleep?	https://dev.to/jcksmith/are-you-getting-your-sleep-2mj5	Are you getting your sleep When you are at work or in class and you are feeling a bit tired unfocused and yawning every couple minutes Did you get your sleep Sleep being important for your daily life is an understatement and not getting enough sleep can cause serious detrimental effect to your mind and body How much sleep is enough On average hours of sleep is enough to be energized and ready for the next day Enough to get all the benefits of being well rested including increased mental and physical performance With better problem solving and memory why wouldn t you get your hours Well it s not always that easy With a busy schedule with school work hobbies and many other facets of life you may be hard pressed to find the time to get a healthy sleep schedule Maybe you end up staying up late into the night studying for an upcoming exam or out partying with friends While this is fine every once in a while there are many times where events like these change your sleep schedule for the worse causing you to miss out on your required sleep What will happen to me when I don t get my sleep There are many negative effects to not getting enough sleep these include Slowed thinkingReduced attention spanWorsened memoryPoor decision makingLack of energyConstant lack of sleep can even attribute to the following Higher risk of Cardiovascular diseaseHigher risk of type two diabetesImmunodeficiencyHow can I avoid these The first and foremost a healthy sleep schedule can help avoid all these symptoms although if you have trouble sleeping there are a few things to try out Make sure you bedroom is quiet and dark or you can also try some white noiseRemove electronic devices out of the bedroom and try to stay off of them right before going to bedGet some exercise being physically active during the day can help you fall asleep more easily at night Getting a healthy sleep schedule is extremely important in maintaining a healthy lifestyle and allows you to make the most of your day	2022-04-08 20:00:43
海外TECH	Engadget	US taxpayers unknowingly paid millions to get Starlink terminals to Ukraine	https://www.engadget.com/starlink-spacex-elon-musk-ukraine-usaid-204050999.html?src=rss	US taxpayers unknowingly paid millions to get Starlink terminals to UkraineSoon after Russia invaded Ukraine in February SpaceX CEO Elon Musk pledged to send Starlink internet terminals to the country His company donated thousands of units and is covering the cost of the service for a few months However the US government reportedly paid millions for some of the terminals and to get them all to Ukraine in spite of statements to the contrary from the company s president The United States Agency for International Development bought around terminals at a cost of each according to documents obtained by The Washington Post It also covered transportation costs for all the terminals to the tune of resulting in the agency shelling out over million In all the agency and SpaceX sent more than terminals to Ukraine with a third party contractor handling transportation and delivery It s unclear whether USAID paid over the odds for the terminals SpaceX recently increased the price of a Starlink terminal from to for deposit holders and to for fresh orders As of April nd the monthly price of the satellite powered internet service is increasing from to The company announced a higher tier service earlier this year that costs for a terminal and per month for service SpaceX president Gwynne Shotwell said last month that France and possibly Poland helped get the terminals to Ukraine “I don t think the US has given us any money to give terminals to the Ukraine Shotwell said SpaceX is said to have donated million worth of terminals and Starlink service to the country which is laudable enough though the company wasn t exactly clear about where funding for other parts of the operation came from On top of that Musk had to issue a warning over the use of Starlink given that Russia may be able to triangulate the location of a terminal uplink Musk urged people to use Starlink only when needed and stay away from other people while doing so This isn t the first time that Musk has offered help during a crisis where his input hasn t gone without a hitch In he took a mini submarine to Thailand to assist with the rescue of boys and their coach who were trapped in a cave Not only were those people safely retrieved by the time he got there the mini sub was deemed impractical for the mission anyway	2022-04-08 20:40:50
海外TECH	Engadget	Amazon Prime is about to get more expensive in Canada	https://www.engadget.com/amazon-prime-canada-price-increase-202050317.html?src=rss	Amazon Prime is about to get more expensive in CanadaAmericans have had to deal with multiple Amazon Prime rate hikes over the years but not Canadians ーthese northern neighbors have paid the same CAD per month or CAD per year since Prime became available there in The good times are coming to an end however MobileSyrup has learned Amazon Canada is raising Prime rates to CAD per month and CAD per year That s still a relative bargain when Americans pay per month or per year but Canadians won t get to politely gloat as much as they did before Current Prime users will see the increase take effect with their next renewal after May th New customers will already have to pay the higher rates Prime Students members will also have to pay CAD per month instead of the previous The explanation is a familiar one In a statement Amazon said it quot continues to invest heavily in Prime quot between the fast shipping a larger Prime Video catalog and perks like Music and Prime Gaming It costs a lot to offer the Lord of the Rings series and other content in other words Whether or not you agree with Amazon it s almost surprising the company hadn t raised prices earlier given its aggressive spending on movies and TV shows	2022-04-08 20:20:50
海外科学	NYT > Science	SpaceX and Axiom Launch Private Astronaut Crew to Space Station	https://www.nytimes.com/2022/04/08/science/axiom-launch-nasa-spacex.html	commercialize	2022-04-08 20:28:53
海外科学	NYT > Science	Russian Blunders in Chernobyl: ‘They Came and Did Whatever They Wanted.’	https://www.nytimes.com/2022/04/08/world/europe/ukraine-chernobyl.html	Russian Blunders in Chernobyl They Came and Did Whatever They Wanted Tanks treads ripped up the toxic soil bulldozers carved trenches and bunkers and soldiers spent a month camped in ーand dug into ーa radioactive forest	2022-04-08 20:43:32
ニュース	BBC News - Home	Rishi Sunak's wife to pay UK tax on overseas income	https://www.bbc.co.uk/news/uk-politics-61045825?at_medium=RSS&at_campaign=KARANGA	company	2022-04-08 20:44:24
ニュース	BBC News - Home	China Covid pandemic: Xi hails response as Shanghai hits record	https://www.bbc.co.uk/news/world-asia-china-61043346?at_medium=RSS&at_campaign=KARANGA	shortages	2022-04-08 20:20:31
ニュース	BBC News - Home	Kinder chocolate factory told to shut over salmonella cases	https://www.bbc.co.uk/news/business-61041760?at_medium=RSS&at_campaign=KARANGA	belgium	2022-04-08 20:20:24
ニュース	BBC News - Home	Biting 'unruly passengers' hit with largest-ever US fines	https://www.bbc.co.uk/news/world-us-canada-61047164?at_medium=RSS&at_campaign=KARANGA	domestic	2022-04-08 20:15:15
ニュース	BBC News - Home	Ukraine round-up: Six weeks of defiance and Pink Floyd reunite for protest song	https://www.bbc.co.uk/news/world-europe-61043817?at_medium=RSS&at_campaign=KARANGA	track	2022-04-08 20:54:02
ニュース	BBC News - Home	2023 Women's World Cup: NI's hopes of reaching tournament all but over with Austria defeat	https://www.bbc.co.uk/sport/football/61026942?at_medium=RSS&at_campaign=KARANGA	Women x s World Cup NI x s hopes of reaching tournament all but over with Austria defeatNorthern Ireland s hopes of qualifying for the World Cup take a severe blow with a defeat by Austria in Wiener Neustadt	2022-04-08 20:20:38
ニュース	BBC News - Home	North Macedonia 0-10 England: Ellen White nets 50th goal to reach another landmark	https://www.bbc.co.uk/sport/football/61023831?at_medium=RSS&at_campaign=KARANGA	North Macedonia England Ellen White nets th goal to reach another landmarkEngland thrash North Macedonia as Ellen White scores her th goal to move outright second in the nation s all time goalscoring records	2022-04-08 20:25:18
ニュース	BBC News - Home	Masters: 'He's lost the head of the club' - Hudson Swafford's unlucky break at 13th	https://www.bbc.co.uk/sport/av/golf/61047805?at_medium=RSS&at_campaign=KARANGA	Masters x He x s lost the head of the club x Hudson Swafford x s unlucky break at thUSA s Hudson Swafford suffers an unfortunate club malfunction at the th as the head of his club flies off as he strikes the ball	2022-04-08 20:36:01
ビジネス	ダイヤモンド・オンライン - 新着記事	【独自】コロナ「2類相当→5類」指定に見直しへ、岸田首相が決断 - ＤＯＬ特別レポート	https://diamond.jp/articles/-/301371		2022-04-09 05:29:00
ビジネス	ダイヤモンド・オンライン - 新着記事	「成金の楽天」と「異端児のエポス」、カード業界の2強が下剋上を果たせた理由 - 丸井 レッドカード	https://diamond.jp/articles/-/300574	楽天カード	2022-04-09 05:25:00
ビジネス	ダイヤモンド・オンライン - 新着記事	漫画『キングダム』作者が生原稿で暴露！「やみつきになるキャラ」の誕生秘話 - 漫画「キングダム」にビジネスパーソンが夢中になる理由	https://diamond.jp/articles/-/301024	人気キャラ	2022-04-09 05:20:00
ビジネス	ダイヤモンド・オンライン - 新着記事	源頼朝が義経追討のために刺客を派遣した「真の目的」とは？ - 新説・新発見！今こそ学ぶ「歴史・地理」	https://diamond.jp/articles/-/301316	壇ノ浦の戦い	2022-04-09 05:15:00
ビジネス	ダイヤモンド・オンライン - 新着記事	freee・マネフォが大幅増収連発、好調続く要因とさらなる「追い風」の正体 - ダイヤモンド 決算報	https://diamond.jp/articles/-/301313	freee・マネフォが大幅増収連発、好調続く要因とさらなる「追い風」の正体ダイヤモンド決算報コロナ禍が年目に突入し、多くの業界や企業のビジネスをいまだに揺さぶり続けている。	2022-04-09 05:10:00
ビジネス	ダイヤモンド・オンライン - 新着記事	保険の営業で絶対に乗っかってはいけないセールストーク7選【マネー・見逃し配信】 - 見逃し配信	https://diamond.jp/articles/-/301312	配信	2022-04-09 05:05:00
北海道	北海道新聞	ＮＹ株続伸、１３７ドル高　好決算期待で買い優勢	https://www.hokkaido-np.co.jp/article/667509/	続伸	2022-04-09 05:31:00
北海道	北海道新聞	脱ロシア産エネルギーへ北海活用　英独首脳が会談で合意	https://www.hokkaido-np.co.jp/article/667506/	首脳	2022-04-09 05:31:00
北海道	北海道新聞	駅攻撃「全く容認できず」　国連事務総長、停戦訴え	https://www.hokkaido-np.co.jp/article/667507/	事務総長	2022-04-09 05:31:00
北海道	北海道新聞	平和首長会議への加盟拡大　ウクライナに都市連帯	https://www.hokkaido-np.co.jp/article/667510/	平和首長会議	2022-04-09 05:31:00
北海道	北海道新聞	ロシア独立系記者が活動再開へ　「ノーバヤ・ガゼータ欧州」	https://www.hokkaido-np.co.jp/article/667505/	活動停止	2022-04-09 05:21:00
北海道	北海道新聞	対ロ制裁は「侵略行為」　メドベージェフ前大統領	https://www.hokkaido-np.co.jp/article/667504/	侵略行為	2022-04-09 05:21:00
北海道	北海道新聞	スミスさん授賞式出席禁止　１０年間、アカデミーが処分	https://www.hokkaido-np.co.jp/article/667503/	映画芸術	2022-04-09 05:10:00
北海道	北海道新聞	＜社説＞国連人権理追放　ロシアは孤立認識せよ	https://www.hokkaido-np.co.jp/article/667456/	国連人権理事会	2022-04-09 05:01:00
ビジネス	東洋経済オンライン	｢不本意未婚｣結婚したいのにできない若者の真実 一生結婚しないという｢選択的非婚｣3割の時代 | ソロモンの時代―結婚しない人々の実像― | 東洋経済オンライン	https://toyokeizai.net/articles/-/580378?utm_source=rss&utm_medium=http&utm_campaign=link_back	国勢調査	2022-04-09 05:40:00