投稿時間:2022-04-26 04:25:26 RSSフィード2022-04-26 04:00 分まとめ(28件)

カテゴリー等	サイト名等	記事タイトル・トレンドワード等	リンクURL	頻出ワード・要約等/検索ボリューム	登録日
AWS	AWS Media Blog	Color in the Cloud: Motion picture and television color grading and finishing on AWS with Baselight	https://aws.amazon.com/blogs/media/color-in-the-cloud-motion-picture-and-television-color-grading-and-finishing-on-aws-with-baselight/	Color in the Cloud Motion picture and television color grading and finishing on AWS with BaselightMotion picture and television workloads that require high fidelity color monitoring such as color grading VFX compositing digital intermediate finishing and master quality control have typically been precluded from running in the cloud due to the traditional bit sRBG color space limitations of pixel streaming clients such as Teradici s CAS and AWS NICE DCV NICE …	2022-04-25 18:36:01
海外TECH	Ars Technica	The first “Meta Store” is opening in California in May	https://arstechnica.com/?p=1850332	california	2022-04-25 18:14:11
海外TECH	MakeUseOf	12 Tips and Tricks to Get the Most Out of the Roku Mobile App	https://www.makeuseof.com/roku-app-tips-and-tricks/	appif	2022-04-25 18:24:13
海外TECH	DEV Community	Add live captions to a video call app with daily-js	https://dev.to/trydaily/add-live-captions-to-a-video-call-app-with-daily-js-m41	Add live captions to a video call app with daily js IntroductionAt Daily we love seeing what developers build in whatever way works best for them We offer Daily Prebuilt our embeddable video call UI to get started with just a couple lines of code or you can build a totally custom experiences with Daily s call object Our goal is to support everyone s use case and skill level by making browser based video calls easy to integrate and customize As part of making the call experience better for everyone we have introduced the ability to add live captions to Daily domains with our startTranscription instance method in partnership with Deepgram This highly requested feature has many uses They include being able to Introduce wider accessibility options within callsProvide an “instant replay e g What did they just say Produce a great way to generate meeting notesThis tutorial focuses on pairing transcription with Daily Prebuilt We already have a thorough tutorial on adding transcription to a custom Daily call which you should definitely check out Today s tutorial includes a demo that walks through how to add transcription alongside a Daily Prebuilt call If you are like spoilers and want to see what we re building today you can jump straight into the prebuilt transcription code and also try a live demo Note You will have to connect your Daily and Deepgram accounts as outlined in the demo s README and in this tutorial to fully experience the live demo What s the plan In this tutorial we will cover Getting set up with Daily and DeepgramEmbedding Daily Prebuilt in a Next js appCreating a transcription componentAdding buttons to start and stop transcription methodsLoading the live captionsOptimizing the app for large amounts of textDownloading the transcript PrerequisitesBecause transcription is a shared service between Daily and Deepgram there is a bit of set up involved to get both services running with each other But the good news is that you can set it and forget it because it s just a one time step Note Daily does not charge for transcription services and Deepgram offers a free credit upon sign up so there is no cost associated with this tutorial To walk through this tutorial you will first need to create a Daily account and a Deepgram account Once you have an account and are logged into the Daily Dashboard you can create a new Daily room or use our REST API To set up transcription you will have to enable transcription on your Daily domain Essentially you ll need your Daily API key available in the Daily dashboard and your Deepgram API key to update your domain settings like so curl request POST url header Accept application json header Authorization Bearer YOUR DAILY API KEY header Content Type application json data properties enable transcription deepgram YOUR DEEPGRAM API KEY Setting up the demoHead on over to the prebuilt transcription GitHub repository and fork the repo to follow along with the rest of this post After forking and navigating to the prebuilt transcription folder install the dependencies npm iAnd run the dev server npm run devLocally open http localhost in your browser This demo is based on the Next js React framework starting with the create next app template builder This tutorial also uses TypeScript If you are new to TypeScript no worries Because it s built on top of JavaScript it looks very similar with a few additional features and syntax Staging the room The most interesting part of our codebase lives in pages domain room tsx so let s start there And yes those brackets are part of the file names this allows us to create URLs dynamically in Next js When we load the page we want to build and start the call right away with the parameters we retrieve from the page URL To do this we create a useCallback function Set up the Daily call and event listeners on page load const startCall useCallback gt const iframe document getElementById callFrame const newCallFrame DailyIframe wrap iframe as HTMLIFrameElement showLeaveButton true setCallFrame newCallFrame newCallFrame join url url newCallFrame on joined meeting ev gt let ownerCheck ev participants local owner as boolean setIsOwner ownerCheck snip snip some more event listeners here we ll come back to this section later url The above startCall function loads when the page loads via a React useEffect useEffect gt startCall startCall This creates and joins a call built from the URL parameters Incorporating the Daily Prebuilt iframeNow that the app framework is up and running let s add Daily Prebuilt Since Daily Prebuilt is an embeddable video call UI Daily has already done most of the video related work for you That means this part will be short From the aforementioned room tsx page we load the lt CallFrame gt component The full component looks like this import styles from styles CallFrame module css const CallFrame gt lt div className styles callFrameContainer gt lt iframe id callFrame className styles callFrame allow microphone camera autoplay display capture gt lt iframe gt lt div gt export default CallFrame The few lines of styling imported from styles CallFrame module css allow the Daily Prebuilt iframe to take up most of the screen callFrameContainer width height callFrame width height min height vh border Without this styling for the lt iframe gt and its container Daily Prebuilt defaults to taking up only a small amount of space on the page You can change the styling however you like and Daily Prebuilt will fit within those constraints Note We are using wrap to add Daily Prebuilt to an existing lt iframe gt but you could also use the createFrame method to make a new lt iframe gt style that frame and add it to the page Transcription componentNow that we have Daily Prebuilt loaded on the page let s start implementing transcription by adding a component to store our buttons and transcript From our room tsx we reference the Transcription component and pass some managed state to the component callFrame passes the Daily call frame object which allows the component to start and stop transcriptionnewMsg sends each new transcripted message to the component for showing the text in the transcript windowowner this boolean tells the component whether the current user is or isn t a room ownerisTranscribing this boolean tells the component that Daily is or isn t currently transcribing lt Transcription callFrame callFrame newMsg newMsg owner isOwner isTranscribing isTranscribing gt In our Transcription component defined in components Transcription tsx we have a button that toggles the option to start or stop transcription based on whether transcription is currently active according to Daily we ll come back to that in a second lt button disabled owner onClick gt isTranscribing stopTranscription startTranscription gt isTranscribing Stop transcribing Start transcribing lt button gt If the meeting participant is not an owner this button will be disabled along with a message explaining that only meeting room owners can start transcription This button utilizes these two simple functions async function startTranscription callFrame startTranscription async function stopTranscription callFrame stopTranscription How do these functions know if transcription is happening or not For that we jump back to room tsx Earlier in the post we looked at the basic structure of the startCall function In our demo this function also has a few lines dedicated to Daily event listeners We are listening to a few Daily emitted events that help us shape the video call experience Two of these events are transcription started and transcription stopped events When those events are emitted we know to update the React state to set isTranscribing to its correct boolean value newCallFrame on transcription started gt setIsTranscribing true newCallFrame on transcription stopped gt setIsTranscribing false Note You can also use our new Daily React Hooks library to more quickly connect your React based app with Daily s JavaScript API Adding transcriptionNow that we are able to start and stop transcription we need to add the transcripts to the page Our transcripts come in from Daily via an app message event For that we need another event listener within our startCall function This checks whether each app message came from the ID of “transcription and whether it is a full sentence that s what data is final is doing below When we have a message we save the message as an object with the author s username the text transcription and a timestamp newCallFrame on app message msg DailyEventObjectAppMessage undefined gt const data msg data if msg fromId transcription amp amp data is final const local newCallFrame participants local const name string local session id data session id local user name newCallFrame participants data session id user name const text string data text const timestamp string data timestamp if name length amp amp text length amp amp timestamp length setNewMsg name text timestamp We need some React state to hold messages so we set up a const where we instantiate this state as an empty array to hold incoming message objects const messages setMessage useState lt Array lt transcriptMsg gt gt This is essentially all that needs to be done to get transcription on the page You can loop through this array of messages and add them to the screen or you can add each new message to the screen as it arrives However there s one extra step worth taking to optimize your app for all of these messages and we ll see how that works in the next section Note Transcript messages are ephemeral They are only available for the message the user has received while they are in the room If you refresh your page you ll lose the transcripts Similarly new users will only see a transcript for conversations that have taken place since they ve joined and not a history Optimize your windowSeeing transcripts appear on the screen is super fun but it can quickly slow down browser windows with the addition of so many DOM elements getting added to the screen Below we ll cover not just how we add transcript messages to our page but also how to do it in a way that is efficient and not overwhelming to anyone s browser To help with this we need to add two dependencies to our app react window and react virtualized auto sizer These libraries help us by loading only the most recent messages Instead of loading the entire array of message objects as HTML the DOM only loads the small part of the data set visible in the window This virtualization technique prevents poor performance caused by an overloaded browser tab holding too much data in memory Users can still scroll up and see previous messages which are loaded as needed when requested We have established consts for the transcript list and rows that instantiate as empty objects const listRef useRef lt any gt const rowRef useRef lt any gt We add new messages received from the parent room page to an array We also have a small function that keeps the array of messages moving to the bottom most recent element every time a message is received useEffect gt setMessage messages Array lt transcriptMsg gt gt return messages newMsg newMsg useEffect gt if messages amp amp messages length gt return gt scrollToBottom messages For each row we call a formatting function It structures the transcript in the style of “Message Author Message Text on the left and Timestamp trimmed to a local time only on the right styled with CSS the handy dandy float right function Row index style rowProps const rowRef useRef lt any gt useEffect gt if rowRef current setRowHeight index rowRef current clientHeight rowRef return lt div style style gt messages index name amp amp lt div ref rowRef gt messages index name messages index text lt span className styles timestamp gt new Date messages index timestamp toLocaleTimeString lt span gt lt div gt lt div gt Our rendered transcript block then looks like this with each loaded row wrapped in the react window List and react virtualized auto sizer AutoSizer elements lt AutoSizer gt height width gt lt List height height width width itemCount messages length itemSize getRowHeight ref listRef gt Row lt List gt lt AutoSizer gt DownloadThe transcripts collected in this app are not available after the call concludes so downloading them is helpful if you want to use them later To do that we need to prepare a chat file with all of the text not just the text currently virtualized on the screen We have already seen that we are using React state to collect and set messages For preparing a plain text file with the transcript inside we will add a transcriptFile state that instantiates as an empty string const transcriptFile setTranscriptFile useState lt string gt Next let s set up a useEffect to style the transcript in a way that works best for reviewing later Unlike the live transcript where we have the timestamp on the right and set to local time only this includes the full timestamp and date for every message Allow user to download most recent full transcript text useEffect gt setTranscriptFile window URL createObjectURL new Blob messages map msg gt msg name msg timestamp msg name msg text n Transcript n type octet stream messages This link will get the most recent full transcript and by default save it as a file called transcript txt although this can be changed later by the user lt a href transcriptFile download transcript txt gt Download Transcript lt a gt ConclusionAnd there you have it Using Daily Prebuilt and our new Transcription API with Deepgram it s not too much work to add a live transcript to your meetings From what we ve shown in this demo you can easily add different styles including to the Daily Prebuilt window itself by customizing with your own color themes We would love to see what you ve built using Daily Reach out to us anytime at help daily co	2022-04-25 18:34:40
海外TECH	DEV Community	Marko for Sites, Solid for Apps	https://dev.to/this-is-learning/marko-for-sites-solid-for-apps-2c7d	Marko for Sites Solid for AppsI ve been sitting on writing this article for years In my heart this was the article I was going to write even before I read swyx s quintessential Svelte for Sites React for Apps When I signed on to join the Marko team back in March I know perfect timing to relocate for work something was very clear to me I would have the opportunity to work on two of the most exemplary approaches to what the future of JavaScript frameworks could look like Some wondered why I would take on working on a second framework but I never saw a conflict In many ways they couldn t be more different Every design decision made with different set of tradeoffs where the right answer for each is allowed to be different But the reason this excited me so much was that Solid and Marko represented the most powerful approaches on the axes that matter A pincer movement of sorts for the JavaScript framework world Evan You creator of Vue gave a great talk on tradeoffs of frameworks where he positioned Vue as that middle ground between React and Angular It s easiest to explain this as a bunch of independent ranges but the reality is we live in a multi dimensional world and one solution isn t always fully on one side for all decisions But we as developers keep on changing our perspective to pull out these D comparisons So the task was simple Don t change the world change the perspective And instead of being focused on the middle and being everything to everyone focus on the more achievable task at being the best version in the places that are divisive Nothing wrong with backing multiple horses So Sites Vs Apps Well this has been the dichotomy of the web for a long time It even predates Single Page Apps although that is why it has come into focus so much the past decade We have seemingly two very different use cases trying to leverage the same technology So it does make sense that maybe there is a way to make this unified even when it hasn t been feasible And the frameworks libraries I m talking about today represent both sides to a tee Marko for SitesMarko was created at eBay sometime in the early s and was open sourced in It was built for eCommerce and the demanding nature of support global customers where not every device and network is made equal A huge emphasis placed on page load being the first JavaScript framework to introduce both Out of Order Streaming and Partial Hydration right from its inception Marko also was one of the earliest compiler based frameworks as its origins were from server side templating languages It was very clear from its beginning it was ultimately a language rather than a framework a line of thinking that wasn t really popularized until Svelte did similar half a decade later Marko is a Superset of HTML where the whole world lives in Single File Components and a new user can enter this world simply by changing the extension of the HTML files they got from a designer to marko or using the HTML they copied and pasted from StackOverflow Components are auto discovered and the impact of adding JavaScript feels minimal It has all the characteristics people using server templating languages are used to but it is fully isomorphic to become interactive in the browser automatically And it sends the least JavaScript without thinking Its Islands are automatic and its streaming as easy as adding an lt await gt tag with a promise Its Multi Page forward approach isn t worried about persistent client state or client routing and just works like a website the way you d expect It has the tersest syntax that lets you write the least code of all JavaScript Frameworks It s an effortless way to get unmatched page load performance without getting away from the simplicity that in the end we are just making pages in a website Solid for AppsSolid came from a very different home First created as a side project in when I was at a startup creating private Social Media It was a long lived project that needed to keep on changing and pivoting to find its customer While we could never rewrite what we had we would quickly rip out and replace parts Solid was modular from the start built to work with Web Components as a component agnostic solution It evolved to shedding that weight as it came into its own Solid s power is that everything is a primitive right down to the JSX Components are just functions lt div gt are just HTMLElements and state is just reactivity It scales down to a jQuery replacement and up to concurrent time slicing with the portability to run on non web platforms using the same techniques There is no VDOM or required abstractions It is a chameleon that is exactly what it needs to be when it needs to be While it leverages compilation only the JSX is compiled It is very much a Just JavaScript library Everything is built upon composing simple primitives and every corner has an escape hatch for complete control over how your application runs The icing on the cake is this way of modelling things is also extremely performant making Solid a benchmark king in all environments it runs on This adaptability has made it easy to port libraries and for people to opt into compiling down to Solid from their preferred DSLs And it has been championing this composable primitive approach well before modern trends like Hooks It gives Just JavaScript a new life in a world looking like it is heading deep into custom DSLs and compiled languages and returns to developers all the control they need to execute on the most demanding of applications False Dichotomy I admit I lured you here under a false pretense If anything we ve seen JavaScript centric web technologies collapsing on themselves At first there was a clear difference between Static SSG and Dynamic SSR experiences but that has disappeared and soon the difference between Sites MPA and Apps SPA will as well When we are seeing Solid acing page load metrics in impossibly expensive pages when used with Astro something historically only Marko could pull off like this Or Marko bringing incredible client side rendering performance and composability with its new compiled reactivity that rivals even Solid you start realizing we are just seeing a path to finally unify the opposite sides of the spectrum And this makes me hopeful because these frameworks philosophically couldn t be more different Language vs Library HTML vs JavaScript first Mutability vs Immutability Implicit vs Explicit state updates way data binding vs Unidirectional flow And despite these differences we are here It would even not be unfair to claim that Marko is more svelte than Svelte or Solid is more reactive than React These frameworks sit at the the opposite edges with different values and philosophy but they both have unmatched performance the smallest bundle sizes and can serve use cases that span the whole spectrum If these frameworks can do this any framework in between could as well ConclusionIsn t it great that soon we could live in a world where Site vs App won t impact your choice of tool on technical merit Nor JSX vs Custom DSL or a HTML first vs JS first mentality Sure there will always be preferences and solutions that cater on developer experience But you can choose the framework that speaks to you and I wouldn t be able to convince you that there s a winner There is a path here regardless of what philosophy you hold close to your heart It took me giving Marko a chance to see this To challenge my preferences and view of the world As with Solid I looked at an approach that seemed to do all the right things years ahead of its time and leveraged that experience to explore what the best version of that looks like Now I see that potential to varying degrees in other frameworks There really is an answer here for everyone And that is exciting The web is truly an amazing place	2022-04-25 18:27:04
海外TECH	DEV Community	4 reasons to avoid using `npm link`	https://dev.to/privatenumber/4-reasons-to-avoid-using-npm-link-5d03	reasons to avoid using npm link TL DRInstead of using npm link use npm install or npx link to symlink a local package as a dependency npx link lt package path gt npx link is a tool I developed as a safer and more predictable alternative to npm link Avoid using npm link because of the following footguns Error prone with multiple Node js versionsNo fail case and unexpected fallback to npm registryUnexpected binary installationUnexpected link removal What s npm link npm link is a command line tool for symlinking a local package as a dependency during development It is commonly used for testing packages before publishing them Read more about it in the official documentation UsageGiven the following packages my library an npm package that you want to test in another package as a dependency The name property in my library package json should be my library my application the package project you want to test inHere s how you would link them Registration Global installation Run npm link in my library to install it globally making it possible to link my library to any local project Note this is the same thing as running npm install global cd my library npm linkInstallationRun npm link my library in my application to link it cd my application npm link my library Shortcutnpm link lt package path gt is a shortcut to automate the two steps by simply passing in the package path Using the example above cd my application npm link my libraryThe shortcut approach is much easier to use and is less error prone because it s a single command that requires an explicit path to the package to link footguns of npm link ​ Multiple Node js versionsIf your environment has multiple Node js versions using a manager like nvm both npm link commands must be run using the same version As explained above the first step of npm link is installing the package globally Since each version of Node js has its own global package registry lookups will fail if different versions are used You can check if the global package registry is scoped to the Node js version with the following command If the Node js version is in the path the global package registry is scoped npm root g nvm versions node v lib node modulesWhen working on multiple packages in separate terminal sessions it s very easy to overlook the Node js version The version discrepancy can be especially hard to notice since npm link doesn t error when it s unable to find the local package to link which is discussed in the next section Pro tip Add the recommended shell integration to automatically use the appropriate Node js version when entering a directory with a nvmrc file ​ Non existent fail caseTry running npm link a in a package It will succeed despite never registering package a to be linkable before npm link a my package node modules a gt nvm versions node v lib node modules aThis is because when npm link can t find package a as a global package it installs it globally from the npm registry and creates a symlink to it It only fails when the package is also not found on the remote registry npm link non existent packagenpm ERR code Enpm ERR Not Found GET Not foundnpm ERR npm ERR non existent package is not in this registry npm ERR You should bug the author to publish it or use the name yourself npm ERR npm ERR Note that you can also install from anpm ERR tarball folder http url or git url To tell if the link actually succeeded you can check if the output has two arrows gt Notice how the false positive above only has one arrow Two arrows means it created a symlink to the global package which then points to the local package npm link my linked package my package node modules my linked package gt nvm versions node v lib node modules my linked package gt my linked packageThis check only works in npm v Unfortunately starting in npm v the symlink paths are no longer logged Looking at the output it s impossible to determine if linking the local package succeeded or if an unintended package was accidentally installed and linked npm link aup to date audited packages in msfound vulnerabilitiesTo confirm the package was successfully linked you can use realpath to verify the symlink path realpath node modules package name my linked packageThe lack of a proper fail case makes using npm link a confusing and frail process Especially when compounded with having multiple Node js versions ​ Unexpected binary installationThe first step of npm link installs the package globally This happens in the shortcut as well because it just automates the two steps Global package installation npm install global is a type of package installation used to make binaries available as a system wide CLI command So if your package has a bin field npm linking it will make it available as a CLI command Considering npm link is a tool for testing a package in development global binary installation can be an unexpected and undesired side effect The implications of this unexpected behavior can be quite serious given packages can declare binaries with arbitrary names In this example package an arbitrary binary name random command is specified in the package json file name my package bin random command bin js Running npm link installs binary random command random commandzsh command not found random command cd my package amp amp npm linkadded package and audited packages in msfound vulnerabilities random commandSuddenly works Global install can also override existing binaries depending on your PATH configurationーthe variable of paths the shell uses to lookup commands from If you re using nvm your configuration is likely susceptible to this In this example I override the binary cat a standard Unix utility type catcat is bin cat cd my package amp amp npm linkadded package and audited packages in msfound vulnerabilities hash cash type catcat is nvm versions node v bin catIn regards to software installation these risks are prevalent in every software manager and aren t considered too dangerous from a security perspective However npm link is not a package installer It s supposed to be a simple tool to setup symlinks for development It s worth pausing to reflect on how unexpected this behavior is and what mistakes it could lead to By the way if you ran npm link a in the prior section a binary a has been installed to your system You would think npm unlink a will uninstall it but it only removes the local link and not the globally installed binaries Uninstall a global package and its binaries with npm uninstall global a ​ Unexpected link removalWhen linking multiple packages previously linked packages are removed This behavior is a regression introduced in npm v In this example pkg a is linked and confirmed to be in node modules However after linking a second package pkg b pkg a is no longer in node modules npm link pkg aadded package and audited packages in msfound vulnerabilities ls node modules pkg a npm link pkg badded package removed package and audited packages in msfound vulnerabilities ls node modules pkg bRemoving previous links can be unexpected and confusing when working with multiple packages Often times after linking the second package we d continue to run code expecting the links to persist To link multiple packages you must pass in all package paths into one command npm link pkg a pkg badded package and audited packages in msfound vulnerabilities ls node modules pkg a pkg bWhile this works it s not a great developer experience In development we don t always know ahead of time all the packages that need to be linked Or keep track of the previously linked packages This confusing behavior compounds to the poor usability and predictability of npm link Potential for accidentsAs with any popular package registry npm has a diverse collection with no standard for quality npm removes malicious packages but risks mentioned above are not limited to attacks When it s unclear whether the right package was installed there is always potential for accidents Many packages on npm are designed to make changes to the file system such as rimraf or a code linter In an accident the consequences of running file system altering code can be detrimental Installing the wrong package is possible with npm install as well but the risks are higher with npm link when the footguns above come together Package names can collide It s possible to link a local package with a name that s on the npm registry This can happen when developing and testing a new or private package before realizing the name is already taken No local resolution error If the package being linked can t be locally resolved it will get resolved from the npm registry If a package with the same name is found an unexpected package can get globally installed Binaries are installed If the wrong package is installed it s unintuitive that binaries get installed and to realize it needs to be uninstalled globally This leaves unexpected binaries to be left installed and accidentally invoked Use npm install insteadA better alternative to npm link is npm install using a package path npm install no save lt package path gt This creates a symlink to the package without installing it globally This behavior is probably closer to what most people expect from npm link The no save flag is to prevent the package path from getting saved in package json However this command still comes with a drawback Like npm link running npm install multiple times will remove previous links To link multiple packages pass in the package paths as arguments npm install no save lt package path a gt lt package path b gt Introducing npx linkAn even better alternative to npm link is npx link a tiny tool I developed to tackle the problems addressed in this post Using the command is simple npx link lt package path gt npx link doesn t globally install the linked package or its binaries It doesn t remove previous links And it works across different versions of Node js because it makes direct symlinks It also has a clear fail state when it can t resolve the package path If you want to use binaries from the package they will only be installed locally and will only be executable with npx or via package scripts As an added benefit for the community package linking will still work for those who accidentally type in npx link instead of npm link	2022-04-25 18:15:54
海外TECH	DEV Community	TIE: What is an MVC framework?	https://dev.to/vickilanger/tie-what-is-an-mvc-framework-3g1o	TIE What is an MVC framework Explaining concepts that can be hard to understand You can expect relatable examples without jargon foo bar and math examples Jump to Official explanationTechItEasy explanationMore InfoHave you heard of this MVC thing If not you might look it up and run into a description like this ️If you d like an easier to understand explanation you re welcome to jump down to the TechItEasy explanation Scary Jargon filled Explanation MVC Model View Controller is a pattern in software design commonly used to implement user interfaces data and controlling logic It emphasizes a separation between the software s business logic and display This separation of concerns provides for a better division of labor and improved maintenance The three parts of the MVC software design pattern can be described as follows Model Manages data and business logic View Handles layout and display Controller Routes commands to the model and view parts source MDNDoes this chart make sense If not I bet it will once you re done reading this TechItEasy explanation TIE MVC framework Wait What s a Framework Glad you asked We should probably know that before we get into some real life examples A framework is a set of pre made pieces used to help speed up building and give a standard way to make applications These pre made pieces of code are typically called components Frameworks can include components for user management User management may include creating reading updating deleting send forgotten password emails etc Frameworks are helpful because they remove the need to write code for things that get used all the time Why Use Frameworks If you haven t heard it before DRY stands for Don t Repeat Yourself This is an ideology that says we shouldn t have to write the same code multiple times If you wrote code on how to make a cat you wouldn t want to write it again and again for every cat that comes into existence In this way MVC has components that make it so the common things don t have to be written again MVC frameworks help keep your code DRY Of note MVC frameworks follow a pattern to help you think of each part of an app separately There are other design patterns but it seems MVC frameworks are most common I d guess they re common for a reason MVC frameworks simplify the building process That s not to say it s easy but to mean that it s generally easier than building a whole web app without a framework Right now What are the M V and C ModelsModels are like a template or chart for data info needed for an item or object For example if your pet has data Some of the data is needed and some is nice to have but not required Models allow you to say what each piece of data is whether or not it is required and lots of other things Here s a table representing a dog model NameDate TypeRequired pet namestringnospayed neuteredbooleanyesweight lbsnumberyesfavorite toystringnoEach name in this table represents a column in a database You could imagine it looking like this idpet namespayed neuteredweight lbsfavorite toyCheetotrueBALLRemmytruefishing poleWileytruebeheaded dragonChipfalsecrashed helicopterBeanstruerandom piece of foamNotice we ve added IDs Sometimes these are referred to as uid which is short for unique identifier In this case each new pet is given a number that belongs to them We use an ID because everything else can change and we need to have access to reference the specific pet ViewsViews are the code behind the pretty stuff This is your front end user interface code It s generally some combination of HTML and CSS It can also be done in other languages that get rendered translated into HTML and CSS ControllerControllers do the controlling Good Make sense No I didn t think so Controllers are where you ll write code on how things should work This is where the logic goes Okay but How Do They Work Together Controllers change models Models change the views Views send info to the controllers Controllers sometimes send info back to the views For extra confusion models also talk to databases Are you confused yet How about we jump into some real life MVC frameworks Example with Your BodyWhether you knew it or not your body has models views and controllers ModelsYou could look at your skeleton as a model Your bones define the shape and structure of your body Regardless of what bones you do and don t have they are your model By themselves bones don t do anything but give structure If you want the bones to look pretty you ll need your views For them to do things you ll need controllers ViewsNext time you get out of the shower look in a mirror or take a selfie What you see is your view For your body the view is your physical appearance Your view includes skin textures colors hair and anything else that naturally exists as part of you This would be like the HTML structure of a web page If you choose to you may put clothes on use prosthetics move parts to get the right shape use jewelry use assistive devices or do any number other things to change the outward appearance of your body This is very similar to using CSS to make a webpage more interesting Views can send info to controllers In the case of your body you could imagine that something happened or you sensed that it happened For example a mosquito may land on you Whether you saw it or felt it this was your body s view send data to your controller ControllerYour brain contains your controllers Your brain houses all of the logic for your body If a mosquito landed on you your avoid mosquito bite controller is then going to send out a job for you to move your limbs and address the intruder Your brain knows how to handle things because you have taught or coded it to do them You may not recall but at some point you may have learned how count read brush your teeth and all of your other daily tasks There are also controllers for things you never had to learn They came pre coded Most of the time we have the ability to breathe process food pump blood and all sorts of other body processes These pre coded bodily functions are similar to an MVC framework s pre built controllers for things like login and user profiles Now for How They Work TogetherIf you ve lived this long I think it s safe to assume you know your skin works with your skeleton and your brain and vice versa Your brain controller uses logic to tell your skeleton to move in certain ways When your skeleton model has been told to move your skin view moves and changes with it When your skin receives input from the outside world it will send a message to the brain From there the brain may tell the skeleton to move a different way Your skeleton model may also talk to a database In this case we could call your memory the database Every time your brain tells your skeleton to change shapes your memory saves it for future reference I think at this point this chart may make a little bit more sense What do you think Still having trouble Try thinking of the sites you use regularly Their controllers will likely include actions like creating reading updating and deleting The models are going to be the things those actions happen to ie characters posts products etc The views are the pretty or maybe not visual part you see on your browser Other Things Worth Knowing There are plenty of options when it comes to MVC frameworks There are even multiples for different languages Here are a few popular ones and the official getting started projects LanguageFrameworkMore InfoPythonDjangoPolls tutorialRubyRailsBlog TutorialJavaScriptAngular JSCatalog tutorial NETASP NETASP NET Getting StartedPHPLaravelLaravel QuickstartMVC frameworks make it easier and quicker to create full stack apps than it would be if you wrote everything from scratch It will take some time to learn how things are put together but you will reap the reward of being able to make things relatively quickly Once you ve got the basics congrats You re a full stack developer Btw what s TIE TIE What is Tech It Easy TIE Vicki Langer・Mar ・ min read codenewbie beginners	2022-04-25 18:14:20
Apple	AppleInsider - Frontpage News	Elon Musk is officially buying Twitter outright in a $44 billion deal	https://appleinsider.com/articles/22/04/25/elon-musk-is-officially-buying-twitter-outright-in-a-44-billion-deal?utm_medium=rss	Elon Musk is officially buying Twitter outright in a billion dealTwitter announced that it has accepted Elon Musk s offer to purchase the company for billion giving the billionaire total control of the social media platform Elon MuskMusk purchased the company for a share a price he named in an offering earlier this month In a filing with the Securities and Exchange Commission Friday Musk said he had secured funding for the deal Read more	2022-04-25 18:59:48
海外TECH	Engadget	Elon Musk to buy Twitter for $44 billion	https://www.engadget.com/twitter-elon-musk-buyout-offer-decision-185307689.html?src=rss	Elon Musk to buy Twitter for billionTwitter has accepted Elon Musk s buyout offer Musk is purchasing the social media giant for per share or about billion Musk is taking the company private as expected nbsp The decision comes after a flurry of activity from Musk The Tesla CEO bought a percent share of Twitter in early April following criticism of the social media firm s free speech policies He argued Twitter was falling short of its duties as a quot de facto public town square quot Twitter quickly said Musk would join its board of directors but the tech executive decided against the move days later While he didn t say why he had second thoughts the board appointment would have prevented him from owning more than percent of the company ーhe couldn t have taken control during his term Twitter was initially cautious and adopted a quot poison pill quot share strategy to prevent a hostile takeover However it reportedly gave Musk s final offer a second look this weekend The two sides are believed to have hashed out finer details at the last minute such as financial guarantees if the purchase falls apart Musk still faces problems following this decision including the SEC s insider trading investigation and a class action lawsuit accusing him of stiffing shareholders through the timing of his Twitter investment disclosure Developing	2022-04-25 18:53:07
海外TECH	Engadget	E Ink's latest color ePaper panel is faster, denser and features pen support	https://www.engadget.com/e-ink-gallery-3-announced-182802114.html?src=rss	E Ink x s latest color ePaper panel is faster denser and features pen supportE Ink has just announced its next generation color ePaper panel and it s a major update for the nascent technology Most significantly the company has improved update times significantly Its new E Ink Gallery panel offers three color modes including a “fast one that can refresh the panel at milliseconds For the best possible colors it needs seconds to update Black and white update times are likewise improved with the Gallery capable of transitioning between monochrome pages in milliseconds Resolution is also improved with the Gallery offering a pixel density of ppi up from ppi on the previous model The panel also supports stylus input at up to milliseconds for black and white as well as some colors E Ink has also equipped the panel with its new ComfortGaze front light which the company claims “offers a blue light safe viewing experience Lastly the panel can operate at temperatures up to degrees Fahrenheit We don t know yet when devices with the new panel will start making their way to consumers We also don t know if companies like Amazon and Kobo plan to use it for their next generation e readers That said E Ink s Gallery is an important step for the color ePaper The technology needs to continue improving before it makes its way to mainstream devices In the meantime E Ink plans to demo Gallery at California Display Week which begins on May th	2022-04-25 18:28:02
海外科学	NYT > Science	Tripping Through the Universes	https://www.nytimes.com/2022/04/24/science/scheinert-kwan-film-multiverse.html	alternate	2022-04-25 18:08:18
海外TECH	WIRED	Ukraine War Prompts Europe's New Emergency Rules for the Internet	https://www.wired.com/story/europe-digital-services-act	companies	2022-04-25 18:05:56
金融	金融庁ホームページ	厚生労働省における「公的年金シミュレーター」の試験運用について公表しました。	https://www.fsa.go.jp/news/r3/hoken/20220425.html	公的年金	2022-04-25 18:20:00
金融	ニュース - 保険市場TIMES	住友生命、オムロン ハンドボール部に「セルソースPFC-FD保険」を導入	https://www.hokende.com/news/blog/entry/2022/04/26/040000		2022-04-26 04:00:00
ニュース	ジェトロ ビジネスニュース（通商弘報）	スリランカやパキスタンなど南西アジアの一部の国は利上げにかじを切る	https://www.jetro.go.jp/biznews/2022/04/e55ad420c1b4f524.html	南西	2022-04-25 18:10:00
ニュース	BBC News - Home	Twitter shares halted as reports say Elon Musk deal close	https://www.bbc.co.uk/news/business-61215197?at_medium=RSS&at_campaign=KARANGA	final	2022-04-25 18:51:55
ニュース	BBC News - Home	Royal couple told of Antigua and Barbuda's wish to be republic	https://www.bbc.co.uk/news/uk-61221706?at_medium=RSS&at_campaign=KARANGA	antigua	2022-04-25 18:35:30
ニュース	BBC News - Home	Adenovirus probable cause of mysterious child hepatitis	https://www.bbc.co.uk/news/health-61220518?at_medium=RSS&at_campaign=KARANGA	cases	2022-04-25 18:03:45
ビジネス	ダイヤモンド・オンライン - 新着記事	ひろゆきが語る「無能で取り残される人の特徴」ワースト1 - 1％の努力	https://diamond.jp/articles/-/301811	youtube	2022-04-26 03:55:00
ビジネス	ダイヤモンド・オンライン - 新着記事	忙しい社会人でも、1日3時間の勉強時間を確保できる「ながら勉強法」とは？ - 大量に覚えて絶対忘れない「紙1枚」勉強法	https://diamond.jp/articles/-/302207	資格	2022-04-26 03:50:00
ビジネス	ダイヤモンド・オンライン - 新着記事	ウッド氏の旗艦ETF、下げ止まらずも資金流入 - WSJ PickUp	https://diamond.jp/articles/-/302184	wsjpickup	2022-04-26 03:45:00
ビジネス	ダイヤモンド・オンライン - 新着記事	オフィス出社は週2が理想的？ ハイブリッド勤務 - WSJ PickUp	https://diamond.jp/articles/-/302304	wsjpickup	2022-04-26 03:40:00
ビジネス	ダイヤモンド・オンライン - 新着記事	マスク着用任意に　米航空会社が搭乗拒否リスト見直し - WSJ PickUp	https://diamond.jp/articles/-/302305	wsjpickup	2022-04-26 03:35:00
ビジネス	ダイヤモンド・オンライン - 新着記事	「人のマネをして自爆する人」と「うまく学びを活かせる人」との決定的な差 - 起業家の思考法	https://diamond.jp/articles/-/302118		2022-04-26 03:30:00
ビジネス	ダイヤモンド・オンライン - 新着記事	「小説ですが、情景描写を捨てました」これから本を書く人へのアドバイス - 正義の教室	https://diamond.jp/articles/-/301488	飲茶	2022-04-26 03:25:00
ビジネス	ダイヤモンド・オンライン - 新着記事	2分でわかる！「カンボジアってどんな国？」 - 読むだけで世界地図が頭に入る本	https://diamond.jp/articles/-/302015		2022-04-26 03:15:00
ビジネス	ダイヤモンド・オンライン - 新着記事	誰からも好かれる感じのいい人が「連休前に送るメール」とは - オトナ女子のすてきな語彙力帳	https://diamond.jp/articles/-/301895	言い回し	2022-04-26 03:10:00
ビジネス	ダイヤモンド・オンライン - 新着記事	なぜセールスフォースはROI（人件費投資収益率）3000％を達成できたのか？ - セールスフォース式 売れる組織に変える9の方法	https://diamond.jp/articles/-/301536	驚異	2022-04-26 03:05:00