投稿時間:2023-06-30 21:28:12 RSSフィード2023-06-30 21:00 分まとめ(29件)

カテゴリー等	サイト名等	記事タイトル・トレンドワード等	リンクURL	頻出ワード・要約等/検索ボリューム	登録日
IT	気になる、記になる…	ヤマダウェブコム、M1 Pro/M1 Max搭載｢MacBook Pro｣が最大181,000円オフになる在庫一掃セールを今週末も開催へ	https://taisy0.com/2023/06/30/173511.html	macbookpro	2023-06-30 11:07:12
IT	ITmedia 総合記事一覧	[ITmedia Mobile] ドコモの「irumo」と「eximo」が適用されるタイミングは？　7月に即変更すると損の場合も？	https://www.itmedia.co.jp/mobile/articles/2306/30/news212.html	ITmediaMobileドコモの「irumo」と「eximo」が適用されるタイミングは月に即変更すると損の場合もNTTドコモが月日から、新料金プラン「irumo」と「eximo」を提供する。	2023-06-30 20:08:00
python	Pythonタグが付けられた新着投稿 - Qiita	じゃらんの口コミをスクレイピング	https://qiita.com/yuya2220/items/870739cf07a61de18299	pythonwindowsh	2023-06-30 20:07:38
js	JavaScriptタグが付けられた新着投稿 - Qiita	Sentry Session Replay を使ってみた	https://qiita.com/m_pig/items/4b0274a6cdd3ce1c7bb6	sentry	2023-06-30 20:42:02
AWS	AWSタグが付けられた新着投稿 - Qiita	EC2 Instance Connect Endpoint経由でElastiCacheにも接続しちゃう話	https://qiita.com/___nix___/items/fe0395010172c9b23b62	ecinstanceconnectendpoint	2023-06-30 20:56:59
技術ブログ	Developers.IO	[マルチアカウントTIPS] EC2 Instance Connect エンドポイントの操作をSCPで拒否してみた	https://dev.classmethod.jp/articles/deny-eice-operation/	ecinstanceconnectendpoint	2023-06-30 11:42:03
技術ブログ	Developers.IO	[update] Amazon IVSでプライベートチャンネルのセッション取り消しが可能になりました！	https://dev.classmethod.jp/articles/amazon-ivs-revoke-viewer-sessions/	tivevideoserviceamazonivs	2023-06-30 11:16:29
海外TECH	MakeUseOf	How to Check if Your Phone Has an AMOLED or LCD Screen	https://www.makeuseof.com/how-to-check-phone-uses-amoled-or-lcd/	screenunsure	2023-06-30 11:30:17
海外TECH	MakeUseOf	How Twitch's Simulcasting Ban Will Affect Streamers	https://www.makeuseof.com/twitch-bans-simulcasting-for-streamers/	future	2023-06-30 11:27:32
海外TECH	MakeUseOf	What Is AI Transfer Learning and How Does It Work?	https://www.makeuseof.com/what-is-ai-transfer-learning-and-how-does-it-work/	applications	2023-06-30 11:15:18
海外TECH	DEV Community	The Complete Guide to Becoming a Web Developer: Part 3	https://dev.to/aradwan20/the-complete-guide-to-becoming-a-web-developer-part-3-401k	The Complete Guide to Becoming a Web Developer Part Hello there web development enthusiasts If you ve ever built a website you ve interacted with the Document Object Model DOM But what exactly is the DOM and why is it so crucial in web development Buckle up because we re about to dive deep into the fascinating world of the DOM If you re new here you can start with part and part IntroductionSection Understanding the DOMWhat is the DOM How Does the DOM Work The Role of the DOM in JavaScriptSection Selecting ElementsquerySelectorquerySelectorAllSection DOM Most Important Properties amp MethodsclassListgetAttribute and setAttribute appendChild append and prepend removeChild and remove createElement innerText textContent and innerHTMLvalue parentElement children nextSibling previousSibling and styleSection Event Handling and Most Common Events in JavaScriptWhat is Event Handling Common JavaScript EventsClicksDrags and DropsHoversScrollsForm SubmissionKey PressesFocus BlurDouble ClickSection Asynchronous JavaScript and the DOMSection Common Pitfalls in DOM ManipulationPitfall Not Waiting for the DOM to LoadPitfall Overusing innerHTMLPitfall Forgetting That NodeList Is Not an ArrayPitfall Not Properly Handling Event PropagationSection Building a Simple To Do List ProjectStep Setting Up the HTMLStep Adding TasksStep Marking Tasks as CompletedStep Removing TasksStep Add Some StyleConclusionAdditional ResourcesIntroductionThe DOM is like the backbone of your web page It s a programming interface that allows your web page to come to life interact with users and change dynamically When you load a web page the browser creates the DOM of that page which is essentially an object oriented representation of the web page s structure Think of the DOM as a tree like structure where each branch ends in a node and each node contains objects These objects are parts of your webpage like HTML tags text content links images etc The DOM allows JavaScript to access and manipulate these objects change their properties react to events and even create new elements and attributes Understanding the DOM is fundamental to web development because it s the bridge between your HTML CSS and JavaScript Without the DOM your JavaScript code wouldn t be able to interact with your web page s content and structure Section Understanding the DOMWelcome to the first section of our deep dive into the DOM Now that we ve covered the basics let s roll up our sleeves and get into the nitty gritty of what the DOM is how it works and its role in JavaScript What is the DOM The Document Object Model or DOM is a programming interface for HTML and XML documents It represents the structure of a document in a way that s easy for programming languages like JavaScript to interact with The DOM transforms your document into an object oriented hierarchy or a tree of nodes These nodes are objects that represent parts of the document such as elements attributes and text Imagine a family tree You have the grandparents at the top the root node their children below them child nodes and their grandchildren below them leaf nodes Similarly in the DOM tree the document object is the root node elements like lt body gt and lt head gt are child nodes and the elements and text inside them are leaf nodes How Does the DOM Work When you load a web page the browser fetches the HTML and parses it creating the DOM This DOM is stored in the browser s memory not as a string but as a set of interconnected objects with properties and methods Let s take a look at a simple HTML document lt DOCTYPE html gt lt html gt lt head gt lt title gt My Web Page lt title gt lt head gt lt body gt lt h gt Welcome to my web page lt h gt lt p gt This is a paragraph lt p gt lt body gt lt html gt On the other hand the browser would create a DOM that looks something like this document html head title My Web Page body h Welcome to my web page p This is a paragraph This tree like structure is what JavaScript interacts with It can access any node change its contents apply styles add or remove nodes and so on For instance if you want to change the text inside the lt h gt tag or you can select the lt body gt node and add a new child node to it You do many things and you use JavaScript to select these nodes in the DOM and manipulate its contents The Role of the DOM in JavaScriptThe DOM is the meeting point between HTML and JavaScript It s what allows JavaScript to interact with the HTML changing the document s structure content and styling on the fly Without the DOM your JavaScript code would have no way of accessing or manipulating the HTML You wouldn t be able to respond to user events update the content dynamically or create interactive web experiences In other words the DOM is what turns your static HTML document into a dynamic interactive web page It s the magic behind every JavaScript powered website or web app you ve ever used Section Selecting ElementsAlright now that we ve got a solid understanding of what the DOM is let s get our hands dirty and start interacting with it The first step in DOM manipulation is selecting the elements you want to work with and that s where querySelector and querySelectorAll come into play querySelectorquerySelector is a powerful method that allows you to select the first element that matches a specified CSS selector s in the document It s like a Swiss Army knife for DOM selection You can use it to select elements by their tag name class ID attribute and more Here s how it works let element document querySelector selector The selector is a string containing one or more CSS selectors separated by commas querySelector returns the first element that matches any of the specified selectors If no matches are found it returns null Let s say we have the following HTML lt div class container gt lt h id title gt Hello World lt h gt lt p class text gt Welcome to my web page lt p gt lt div gt Here s how you can use querySelector to select these above elements let title document querySelector title selects the element with the ID title let text document querySelector text selects the element with the class text let div document querySelector div selects the first lt div gt elementquerySelectorAllWhile querySelector returns the first matching element querySelectorAll returns a NodeList think of it as a collection of all elements in the document that match the specified CSS selector s Here s how you can use it let elements document querySelectorAll selector Again selector is a string containing one or more CSS selectors separated by commas querySelectorAll returns a NodeList of all elements that match any of the specified selectors If no matches are found it returns an empty NodeList Using the same HTML as before here s how you can use querySelectorAll let divs document querySelectorAll div selects all lt div gt elementslet elements document querySelectorAll text title selects all elements with the class text and the ID title Remember querySelectorAll returns a NodeList not an array While you can use some array methods on a NodeList like forEach others like map and filter are not available If you need to use these methods you can convert the NodeList to an array using Array from And there you have it You now know how to select elements in the DOM using querySelector and querySelectorAll These methods are incredibly powerful and versatile and they re the foundation of all DOM manipulation So go ahead start selecting elements and playing around with them Section DOM Most Important Properties amp MethodsWelcome to the heart of DOM manipulation properties and methods Now that we know how to select elements it s time to learn how to interact with them In this section we ll explore a variety of properties and methods that allow us to read change add and remove elements and their content Let s dive in classListThe classList property returns a live DOMTokenList collection of the class attributes of the element This property is useful for adding removing and toggling CSS classes on an element let element document querySelector myElement element classList add new class adds new class to the elementelement classList remove new class removes new class from the elementelement classList toggle new class toggles new class getAttribute and setAttribute getAttribute returns the value of a specified attribute on the element setAttribute sets the value of an attribute on the specified element let link document querySelector a let href link getAttribute href gets the href attributelink setAttribute href sets the href attributeappendChild append and prepend appendChild adds a node to the end of the list of children of a specified parent node append and prepend do the same but allow you to add multiple nodes and they also accept strings to be inserted as text nodes let newElement document createElement div document body appendChild newElement appends newElement to the bodylet textNode document createTextNode Hello World newElement append textNode Welcome appends two nodes to newElementnewElement prepend Greetings prepends a text node to newElementremoveChild and remove removeChild removes a child node from the DOM and returns the removed node remove removes the current node from the DOM let element document querySelector myElement document body removeChild element removes element from the bodyelement remove removes elementcreateElement innerText textContent and innerHTMLcreateElement creates a new element node innerText and textContent get or set the text content of a node and its descendants innerHTML gets or sets the HTML content inner HTML of an element let newElement document createElement div creates a new lt div gt elementnewElement innerText Hello World sets the text contentconsole log newElement textContent gets the text contentnewElement innerHTML lt strong gt Hello World lt strong gt sets the HTML contentvalue parentElement children nextSibling previousSibling and stylevalue gets or sets the value of the value attribute of a text field parentElement returns the parent element of the specified element children returns a live HTMLCollection of child elements nextSibling and previousSibling return the next and previous sibling of the node in the tree or null if there are no siblings style gets or sets the inline style of an element let input document querySelector input input value Hello World sets the valuelet parent element parentElement gets the parent elementlet children element children gets the child elementslet next element nextSibling gets the next siblinglet previous element previousSiblingSection Event Handling and Most Common Events in JavaScriptWelcome to the exciting world of event handling in JavaScript This is where your web pages truly come to life responding to user interactions in real time From simple clicks to complex drags and drops JavaScript events are the heart of interactive web experiences Let s dive in What is Event Handling In JavaScript an event is a signal that something has happened This could be a user action like clicking a button or submitting a form or a browser action like loading a page or resizing a window Event handling is the process of setting up listeners on elements that respond to these events When an event occurs the listener executes a JavaScript function known as an event handler Event handling is crucial in JavaScript because it allows your web pages to respond to user interactions and create dynamic interactive experiences Common JavaScript EventsLet s take a look at some common JavaScript events and how to handle them ClicksThe click event fires when a user clicks an element let button document querySelector button button addEventListener click function console log Button clicked Drags and DropsThe dragstart dragover and drop events are used to create drag and drop functionality let draggable document querySelector draggable let dropzone document querySelector dropzone draggable addEventListener dragstart function event event dataTransfer setData text plain draggable id dropzone addEventListener dragover function event event preventDefault prevent default to allow drop dropzone addEventListener drop function event event preventDefault prevent default action open as link for some elements let id event dataTransfer getData text let draggable document getElementById id dropzone appendChild draggable HoversThe mouseover and mouseout events fire when the mouse pointer enters and leaves an element respectively let element document querySelector myElement element addEventListener mouseover function element style backgroundColor yellow element addEventListener mouseout function element style backgroundColor ScrollsThe scroll event fires when an element s scrollbar is being scrolled window addEventListener scroll function console log Scrolling Form SubmissionThe submit event fires when a form is submitted let form document querySelector form form addEventListener submit function event event preventDefault prevent form from submitting normally console log Form submitted Key PressesThe keydown keypress and keyup events fire when a user is pressing or releasing a key window addEventListener keydown function event console log Key pressed event key Focus BlurThe focus and blur events fire when an element gets or loses focus let input document querySelector input input addEventListener focus function console log Input focused input addEventListener blur function console log Input blurred Double ClickThe dblclick event fires when an element is double clicked let button document querySelector button button addEventListener dblclick Section Asynchronous JavaScript and the DOMAs we near the end of our deep dive into the DOM let s take a moment to peek into the future Specifically let s talk about asynchronous JavaScript and how it interacts with the DOM This is a vast topic that deserves its own series of articles but we ll touch on it briefly here to give you a taste of what s to come In JavaScript most operations are synchronous meaning they block further execution until they re finished However certain operations like fetching data from a server or setting a timer are asynchronous They re initiated now but they finish later allowing the rest of your code to continue running in the meantime Asynchronous JavaScript is crucial for creating smooth responsive web experiences It allows your web page to stay interactive even when it s performing time consuming tasks like loading data or images Here s a simple example of asynchronous JavaScript in action console log Fetching data fetch then response gt response json then data gt console log Data fetched Now you can use the data to update the DOM console log This will run before the data is fetched In this example the fetch function returns a Promise which is a placeholder for the future result of an operation The then method is used to schedule callbacks to be run when the Promise is fulfilled or in other words when the data is fetched This is just the tip of the iceberg when it comes to asynchronous JavaScript There s so much more to learn including callbacks Promises async await and more But don t worry we ll cover all of that and more in future articles For now just know that asynchronous JavaScript is a powerful tool for creating dynamic interactive web experiences and it plays a crucial role in DOM manipulation Stay tuned for more and keep practicing what you ve learned so far You re well on your way to becoming a DOM manipulation master Section Common Pitfalls in DOM ManipulationAlright we ve covered a lot of ground so far We ve learned what the DOM is how to select elements and how to use properties and methods to manipulate those elements Now it s time to talk about some common pitfalls in DOM manipulation Even experienced developers can fall into these traps so let s shine a light on them and learn how to avoid them Pitfall Not Waiting for the DOM to LoadOne of the most common mistakes is trying to manipulate the DOM before it s fully loaded If your JavaScript runs before the HTML is parsed it won t be able to find the elements it s supposed to interact with To avoid this you can use the DOMContentLoaded event which fires when the initial HTML document has been completely loaded and parsed without waiting for stylesheets images and subframes to finish loading document addEventListener DOMContentLoaded function Your code here Pitfall Overusing innerHTMLWhile innerHTML is a powerful property that allows you to get or set the HTML content of an element it can be a source of performance issues and security vulnerabilities Every time you use innerHTML the browser has to parse the new HTML string into a DOM tree which can be slow for large amounts of HTML It also exposes you to cross site scripting XSS attacks if you re not careful with user input As a best practice use textContent or innerText when dealing with text and createElement appendChild and other DOM methods when creating new elements Pitfall Forgetting That NodeList Is Not an ArrayWhen you use querySelectorAll it returns a NodeList which is an array like object but not an actual array This can lead to confusion when you try to use array methods like map filter or reduce on a NodeList and get a TypeError To avoid this you can convert a NodeList to an array using Array from or the spread operator let elements document querySelectorAll div let elementsArray Array from elements or elements Pitfall Not Properly Handling Event PropagationJavaScript events propagate meaning they start from the deepest element the target and then bubble up to the root of the tree If you re not careful an event handler on a parent element might fire when you interact with a child element To prevent this you can use event stopPropagation in your event handler However use it sparingly as it can make your code harder to debug and understand element addEventListener click function event event stopPropagation Your code here Remember everyone makes mistakes and that s how we learn The key is to understand these common pitfalls and learn how to avoid them Happy coding Section Building a Simple To Do List ProjectAlright it s time to put all that theory into practice We re going to build a simple project that demonstrates all the concepts we ve covered in this article We ll create a dynamic interactive to do list where users can add tasks mark them as completed and remove them Let s get started Step Setting Up the HTMLFirst let s set up the basic structure of our to do list in HTML We ll need an input field for adding new tasks a button for submitting the input and an unordered list for displaying the tasks lt DOCTYPE html gt lt html gt lt head gt lt title gt To Do List lt title gt lt head gt lt body gt lt input type text id taskInput placeholder New task gt lt button id addTaskButton gt Add Task lt button gt lt ul id taskList gt lt ul gt lt body gt lt html gt Step Adding TasksNext let s use JavaScript to add tasks to the list We ll select the input field and the button and set up an event listener on the button that adds a new list item to the task list whenever the button is clicked let taskInput document querySelector taskInput let addTaskButton document querySelector addTaskButton let taskList document querySelector taskList addTaskButton addEventListener click function let task taskInput value get the input value the new task let listItem document createElement li create a new list item listItem textContent task set the text content of the list item taskList appendChild listItem append the list item to the task list taskInput value clear the input field Step Marking Tasks as CompletedNow let s add the ability to mark tasks as completed by clicking on them We ll set up an event listener on the task list that checks if the target of a click event is a list item and if so toggles the completed class on it taskList addEventListener click function event if event target tagName LI event target classList toggle completed Step Removing TasksFinally let s allow users to remove tasks from the list We ll add a Remove button to each task and set up an event listener on the task list that removes a task when its Remove button is clicked addTaskButton addEventListener click function previous code let removeButton document createElement button removeButton textContent Remove listItem appendChild removeButton taskList addEventListener click function event if event target tagName BUTTON let task event target parentElement taskList removeChild task Step Add Some Stylebody font family Arial sans serif padding px taskInput addTaskButton margin px taskList list style type none padding taskList li background color fff border px solid ddd margin bottom px padding px px display flex justify content space between align items center taskList li completed text decoration line through button background color ff color white border none padding px px cursor pointer button hover background color ee And there you have it You ve built a dynamic interactive to do list using the DOM manipulation techniques we ve covered in this article This is just a simple example but the possibilities are endless Keep practicing keep experimenting and most importantly keep having fun Happy coding P S If you have problems with your code remember to check on the following HTML Structure Make sure your HTML structure matches the one used in the code The IDs of the elements taskInput addTaskButton taskList should match exactly JavaScript Placement If your JavaScript code is in a lt script gt tag in the head of your HTML document make sure to either move the lt script gt tag to the end of the body or add the defer attribute to it This ensures that the JavaScript code is executed after the HTML has been fully loaded so it can access the elements in the DOM Browser Console Check the console in your browser s developer tools for any error messages These messages can often provide clues about what s going wrong CSS If the completed class is not visibly changing anything when a list item is clicked make sure you have some CSS that targets completed and changes the appearance of the element in some way for example by crossing out the text ConclusionAnd there you have it We ve journeyed through the fascinating world of the Document Object Model DOM exploring its nooks and crannies and uncovering its secrets We ve learned how to select elements manipulate them using various properties and methods handle events and even got a sneak peek into the realm of asynchronous JavaScript We ve discussed common pitfalls in DOM manipulation and how to avoid them and we ve put all our newfound knowledge to the test by building a dynamic interactive to do list Along the way we ve seen how JavaScript breathes life into static HTML transforming it into a vibrant interactive experience But remember this is just the beginning The DOM is a vast and complex beast and there s always more to learn So don t stop here Keep practicing keep experimenting and most importantly keep having fun Try adding new features to the to do list or start a new project from scratch The more you code the more comfortable you ll become with these concepts and techniques And stay tuned for future articles where we ll dive deeper into asynchronous JavaScript and other advanced topics The journey never ends and every step you take brings you closer to becoming a master of web development Additional ResourcesAs we wrap up our journey through the DOM you might be wondering where to go next The world of web development is vast and ever changing and there s always more to learn To help you continue your learning journey here are some online resources that I highly recommend MDN Web Docs The Mozilla Developer Network provides a wealth of information on all things web development including in depth guides and reference materials on HTML CSS and JavaScript Their JavaScript and DOM Manipulation guide is a great place to dive deeper into the topics we ve covered JavaScript info This site offers a modern JavaScript tutorial that covers everything from basic to advanced concepts including a detailed section on DOM manipulation WSchools WSchools provides simple straightforward tutorials on a wide range of web development topics Their JavaScript HTML DOM tutorial is a great resource for beginners Eloquent JavaScript This book by Marijn Haverbeke provides a deep dive into JavaScript including a chapter on The Document Object Model It s available to read online for free freeCodeCamp freeCodeCamp offers interactive coding lessons and projects Their JavaScript Algorithms and Data Structures certification includes a section on Basic Data Structures that can help you understand how to work with arrays and objects in JavaScript which is crucial for DOM manipulation Codecademy Codecademy s Learn JavaScript course includes interactive lessons and projects that can help you practice the concepts you ve learned Remember the key to mastering web development is practice Don t just read about these conceptsーapply them Build projects solve problems and don t be afraid to make mistakes That s how you learn Happy coding	2023-06-30 11:52:16
海外TECH	DEV Community	Building an Async Interview Platform With React and Dyte	https://dev.to/dyte/building-an-async-interview-platform-with-react-and-dyte-2n25	Building an Async Interview Platform With React and Dyte IntroductionWith the emergence of remote work and virtual events video communication has become an integral part of our daily lives As a result video systems have seen substantial growth Video platforms are helpful for remote teams online learning interview processes and virtual events because they enable synchronous and non synchronous communication with video audio and chat features This article will demonstrate how to use React and Dyte to create an async interview platform As we dive deeper you will be guided through the steps involved in building the UI elements and how to leverage Dyte s video SDK You ll have the information and resources necessary to build your async platform through Dyte by the end of this article But first let s look at why Async interviews are better than normal synchronous interviews Why an async interview Asynchronous interviews offer convenience fairness and improved efficiency in the hiring process making them a valuable tool for both candidates and employers alike Some of the benefits you get with the async interviewsFlexibility Asynchronous interviews allow both interviewers and candidates to participate at their own convenience eliminating the need for scheduling conflicts Time saving Asynchronous platforms streamline the process by allowing candidates to record their responses to interview questions at their own pace saving time for both parties involved Fairness Asynchronous interviews provide a level playing field for all candidates Reduced pressure  Some candidates may feel more comfortable and perform better when not under the immediate pressure of a live interview Scalability Asynchronous interview platforms are highly scalable making them ideal for organizations with high volume hiring needs Now that we know the importance of Async interviews let s look at the prerequisites to build this platform PrerequisitesBasic knowledge of React is required as we will be using it to build the frontend of the application Node js is also required to run the application so make sure you have it installed on your computer Lastly you will need an API key and organization ID from developer portal to be able to authenticate yourself when you call Dyte s REST APIs Let s understand the application flow to build an async interview app Application flow of async interview platformUsers will have to enter their information on the landing page After submitting the form they will be redirected to the interview page where they can play the intro video Once users click on I m ready they will be redirected to the first question screen After they have listened to the video based question users can click on Start Recording and start capturing their answer Once users submit the answer they can click “Next for the next question and finally “Finish on the last question and users all responses will be recorded Now getting to the key implementation details The user will use the default group call host preset because this comes default for every organization that is created in Dyte Any other preset which has the ability to Start and Stop recordings also works When the user clicks the “Start Recording My Answer button we will call the meeting recording start API in the frontend to start the recording And when user clicks Next or Finish we will call meeting recording stop to stop the recording once the user has answered a specific question Do note that each question answered by the participant will be a separate recorded file We will take a look at how you can access the recorded files at the end of this post Project SetupWe re going to use Next js for our project as we can write frontend and backend code in a single codebase easily with it Creating the backend routeFirst we ll just create a simple backend API route at api meeting which will create a meeting as well as add the participant to that meeting with the default group call host preset This API returns the participant details with the token that we will use to join to meeting in the frontend Check out the code for creating the backend route import NextApiRequest NextApiResponse from next const API KEY process env DYTE API KEY const ORG ID process env DYTE ORG ID const BASIC TOKEN Buffer from ORG ID API KEY toString base export default async function handler req NextApiRequest res NextApiResponse if req method POST return res status json success false message Method Not Allowed const name email req body const meetingResponse await fetch lt method POST headers Content Type application json Authorization Basic BASIC TOKEN body JSON stringify title Interview with name const meetingData await meetingResponse json if meetingResponse ok return res status meetingResponse status json meetingData const id meetingData data const participantResponse await fetch id participants method POST headers Content Type application json Authorization Basic BASIC TOKEN body JSON stringify name preset name group call host custom participant id email res status participantResponse status json await participantResponse json Creating the landing pageThis will have a simple form that accepts the user s name and email address and this data is then passed to the api meeting API and we use the retrieved token to redirect the user to the interview page interview token lt user token gt Here is the source for this page which is written in React import Head from next head import useRouter from next router import FormEvent useCallback useReducer useState from react interface Form name string email string export default function Home const submitting setSubmitting useState false const form setForm useReducer state Form payload Partial lt Form gt gt return state payload name email const router useRouter const handleSubmit useCallback async e FormEvent gt e preventDefault if form email trim form name trim return setSubmitting true try const res await fetch api meeting method POST headers Content Type application json body JSON stringify form const data await res json if res ok alert There was an error when starting the interview check console for error console log res status data return const token data data router push pathname interview query token finally setSubmitting false form router return lt div className flex h full w full flex col items center justify center p gt lt Head gt lt title gt Async Interview Sample Dyte lt title gt lt Head gt lt div className flex w full max w screen md flex col items center justify center gap text center gt lt h className text xl font bold text blue gt Async Video Interview lt h gt lt form className mt flex w full max w sm flex col gap onSubmit handleSubmit gt lt input type text placeholder Name value form name onInput e gt setForm name e currentTarget value required gt lt input type email placeholder Email value form email onInput e gt setForm email e currentTarget value required gt lt button className h rounded md bg blue font semibold text white disabled submitting gt submitting Starting Start lt button gt lt form gt lt div gt lt div gt Interview pageFirst let s write frontend code that actually makes the user join the meeting The code would look like this export default function InterviewPage const meeting initMeeting useDyteClient useEffect gt const search new URLSearchParams window location search const authToken search get token if authToken return alert authToken was not passed initMeeting authToken then m gt m joinRoom return lt DyteProvider value meeting fallback lt div gt Loading lt div gt gt lt Interview gt lt DyteProvider gt This is a common boilerplate code you have to write when integrating Dyte in your React app Let s break it down We get the auth token from the URL query and we pass it to the initMeeting method and once the meeting object is initialized we will automatically join the user to the meeting via meeting joinRoom However if you wish to show an interstitial setup page before the user joins the meeting you can omit this and show a custom setup screen or use our included DyteSetupScreen docusaurus skipToContent fallback component We pass the meeting object to the lt DyteProvider gt with a fallback UI until the meeting object is initialized Then we render the lt Interview gt component which renders the actual interview UI Now this is where the actual frontend implementation of this project lies in the Interview component All the previous steps are the common steps you would have to do when integrating Dyte s SDKs You can take a look at the source code as you read to understand better We have stored the introduction and questions in the questions array with the first one being the introduction which is at the index The basic logic is that we will start from showing the intro and then showing the questions and getting responses from the users each time The stage state will have the current state of the questions answered import DyteAudioVisualizer DyteAvatar DyteParticipantTile DyteSpinner from dytesdk react ui kit import DyteProvider useDyteClient useDyteMeeting useDyteSelector from dytesdk react web core import Head from next head import useEffect useRef useState from react const questions function Interview const video useRef lt HTMLVideoElement gt null const roomJoined useDyteSelector m gt m self roomJoined const stage setStage useState const meeting useDyteMeeting const recordingState useDyteSelector m gt m recording recordingState if roomJoined return lt div gt Loading lt div gt return lt div className flex h full w full gt stage lt questions length amp amp lt aside className relative flex gt lt video className h full w full object cover src questions stage ref video controls autoPlay gt lt aside gt lt main className flex flex flex col items center justify center gap p gt stage gt amp amp stage lt questions length amp amp lt gt lt p className text lg font bold gt Question stage of questions length lt p gt lt DyteParticipantTile participant meeting self className relative aspect h auto w full max w px gt lt DyteAudioVisualizer participant meeting self size lg className absolute right top gt lt DyteAvatar participant meeting self gt lt DyteParticipantTile gt lt gt stage gt amp amp stage lt questions length amp amp recordingState STARTING amp amp lt p className info gt lt DyteSpinner gt Starting the recording lt p gt stage gt amp amp stage lt questions length amp amp recordingState STOPPING amp amp lt p className info gt lt DyteSpinner gt Stopping the recording lt p gt stage gt amp amp stage lt questions length amp amp recordingState RECORDING amp amp lt p className info border red text red gt Recording has started you can start speaking now lt p gt lt div className flex flex wrap items center gap gt stage gt amp amp stage lt questions length amp amp recordingState IDLE amp amp lt button className btn bg red onClick gt video current pause meeting recording start gt Start Recording My Answer lt button gt stage amp amp lt button className btn onClick gt setStage gt Awesome I amp apos m ready lt button gt stage gt amp amp stage lt questions length amp amp lt button className btn onClick async gt if recordingState RECORDING await meeting recording stop setStage stage gt stage disabled recordingState RECORDING gt Next lt button gt stage questions length amp amp lt button className btn onClick gt if recordingState RECORDING meeting recording stop setStage questions length gt Finish lt button gt stage questions length amp amp lt div gt lt p className max w md text center text xl font semibold gt Thank you for attending the interview Your responses were recorded lt p gt lt div gt lt div gt lt main gt lt div gt Also we will get the current recording state with the useDyteSelector like so const recordingState useDyteSelector m gt m recording recordingState This is used to show a recording indicator to indicate to the user that they are being recorded and they can start speaking and also as a check when running start or stop recording APIs so they don t fail Whenever a user clicks “Start Recording My Answer we will call meeting recording start API which will start the recording and this indicator is shown And once the user finished answering and is willing to move to the next question and click Next or Finish it will call the meeting recording stop to stop the recording and increment the stage state And finally when you re at the final stage i e you have answered all questions the user will be shown the final screen with the message You can access all recordings of a particular meetingId with the API operations get all recordings That is it we ve created an Async Interview Platform with Dyte The live demo of this application is available here And here s the source code for the project Want to build something similar Build the future on live video with Dyte s customizable SDKs low code UI builder and easy to consume documentation You never know you might create the next big thing	2023-06-30 11:25:16
海外TECH	DEV Community	Learn how to build responsive navigation bar with HTML, CSS, and JavaScript	https://dev.to/david_bilsonn/learn-how-to-build-responsive-navigation-bar-with-html-css-javascript-4g5	Learn how to build responsive navigation bar with HTML CSS and JavaScriptA responsive user friendly navigation bar is essential for any web application whether you are building static websites using the frontend trifecta or SPAs using technologies such as React and Angular it is crucial to know how to build a well designed navigation bar This step by step tutorial will give you a clean walk through and a very simple approach to building a responsive navigation bar that seamlessly adapt to different screen sizes and provide an intuitive browsing experience for your users If you are a beginner it is important to understand that when building with HTML it is advisable to avoid using div containers excessively Instead you should adopt a more semantic approach To ensure clarity let s break down the entire tutorial into a series of steps Step HTML structure Create the complete HTML structure lt DOCTYPE html gt lt html lang en gt lt head gt lt meta charset UTF gt lt meta name viewport content width device width initial scale gt lt title gt Navigation Bar lt title gt lt head gt lt body gt lt body gt lt html gt Remember all the content of a web page are enclosed within the lt body gt element Therefore we will begin by nesting a lt header gt element within the lt body gt element This lt header gt element will be the parent container for the lt nav gt element Step Create header and nav element Create a lt header gt element within the body and assign it a class name of navigation header Next nest a lt nav gt element within the lt header gt Inside the lt nav gt include two lt div gt containers The first div with a class name of logo container will contain the logo while the second div with a class name of navigation items will contain the navigation items Also give the navigation items container an id of navigation items Nest lt a gt lt a gt within the logo container the content of the anchor tag can either be a text or an image depending on the requirement of your project Nest three lt a gt lt a gt within the navigation items container The text content of each anchor element will be based on the requirement of your project For the sake of this tutorial I will use About Projects and Contact Me as the text contents for each anchor element respectively Lastly for the HTML part of this tutorial you will nest another div container within the nav element This container will host the hamburger icons that will be displayed on smaller screens Give it a class name of hamburger Then nest two spans within it The first span should have an id of openHam with a hamburger HTML entity as its text content amp The second span should have an id of closeHam with a HTML entity amp x as its text content Complete HTML Code Snippet lt header class navigation header gt lt nav gt lt div class logo container gt lt a href index html gt Logo lt a gt lt div gt lt div class navigation items id navigation items gt lt a href gt About lt a gt lt a href gt Projects lt a gt lt a href gt Contact Me lt a gt lt div gt lt div class hamburger gt lt span id openHam gt amp lt span gt lt span id closeHam gt amp x lt span gt lt div gt lt nav gt lt header gt Step Styling with CSS Before proceeding to styling the HTML elements in the external CSS file ensure the CSS file is attached to the HTML file within the head element using the tag lt link rel stylesheet href style css gt It is a common practice in web development to apply a CSS reset or CSS normalization to ensure a consistent starting point for styling across different browsers By resetting the padding margin and box sizing properties of all elements as well as the body element you can avoid any inconsistencies or unexpected default styles that different browsers may apply Create a consistent styling foundation body padding margin box sizing border box The CSS snippet above helps to create a more predictable layout and styling behavior across different browsers and devices Styling the navigation headerSelect the header element using its class name Since it is the parent container for the lt nav gt it is going to be the main background and would have a definite height The navigation element within it should be centered on the x axis and y axis therefore flex properties come into play navigation header background color rgb padding px height px display flex justify content center align items center Styling the navSince we are working with only one lt nav gt element we do not need to give it a class name Select the nav element using its element name If the project you are working requires a uniform width on all parent containers then you are going to set the max width of the nav to that required max width of your project For the sake of this project we are going to set the max width to px To make the container stretch to the full max width apply width This way the container stretches up to the max width but won t exceed the maximum width making the container responsive in that process There are three child containers within the nav they need to be on the same plain on the x axis therefore we are going to make use of the flex properties to space out the containers and align them properly using the snippet below nav width max width px display flex justify content space between align items center Styling the logoSelect the anchor element within the logo container Set its text color to ghostwhite Remove any underlining or decoration from the text within the lt a gt element Set the font weight to bold is the numeric value for bold font weight Set the font size to pixels logo container gt a color ghostwhite text decoration none font weight font size px Styling the navigation itemsSelect the navigation items using its class name Within the navigation items we have three navigation links make them align horizontally using the flex layout navigation items display flex gap px Style the navigation linksSelect the links within the navigation items using the direction child selector Set the text color to ghostwhite remove text decoration apply a font weight of and set the font size to pixels Also add a transition for smooth hover effect navigation items gt a color ghostwhite text decoration none font weight font size px transition s ease in out Add hover effect to navigation linksSimply change the color of the navigation to white or based on the requirement of your project navigation items gt a hover color white Styling the hamburgerThe hamburger has two child elements within it which includes the openHam and the closeHam icons Here we used HTML entities for the icons you can import icons from icon libraries such as font awesome google fonts or iconicon library On desktop and laptop screens we definitely do not want the hamburger icons to show so we hide them by default then make them show up on smaller screens using media queries But we are going to add some other default styling to the hamburger hamburger display none font size px font weight color white We are done with the desktop version of the entire navigation Now let s proceed to making it responsive and well designed for the smaller screens using media query Create a different style for hamburger and the navigation items on smaller screens using CSS media queryHere we are going to have a different style from tablet devices with screen sizes from px below this would also cover for mobile screens media screen and max width px Media query is commonly used for creating responsive designs that adapt to smaller screen sizes such as tablets or smaller desktop screens In the above code snippet the styles within the media query will only be applied when the screen width is pixels or smaller Elements are reselected within the curly braces and are styled to fit properly to the current screen size as written in the media query which is px in this case The harmburger and the navigation items will be reselected and styled to fit properly for the px screens media screen and max width px hamburger display flex cursor pointer hamburger closeHam display none The closeHam icon is hidden and should only display when the navigation menu is displayed style the navigation items within the media query navigation items display none flex direction column align items center position absolute right top px background color rgb width height calc vh px padding top px gap vh It is hidden by default using the display none property and should only show up when the openHam icon is clicked We are going to handle this event logic using JavaScript Complete CSS Code body padding margin box sizing border box font family sans serif Navigation navigation header background color rgb padding px height px display flex justify content center align items center nav width max width px display flex justify content space between align items center logo container gt a color ghostwhite text decoration none font weight font size px navigation items display flex gap px navigation items gt a color ghostwhite text decoration none font weight font size px transition s ease in out navigation items gt a hover color white hamburger display none font size px font weight color white media screen and max width px hamburger display flex cursor pointer hamburger closeHam display none navigation items display none flex direction column align items center position absolute right top px background color rgb width height calc vh px padding top px gap vh Step Click event logic with JavaScript Variables for openHam closeHam and navigationItemsCreate openHam closeHam and navigationItems variables and assign to elements in the HTML document using their corresponding IDs let openHam document querySelector openHam let closeHam document querySelector closeHam let navigationItems document querySelector navigation items Create a reusable function that controls visibility of elements const hamburgerEvent navigation close open gt navigationItems style display navigation closeHam style display close openHam style display open The code snippet defines a function called hamburgerEvent which takes three parameters navigation close and open Inside the function it modifies the CSS display property of the navigationItems closeHam and openHam elements based on the provided values Using an event listener attach a click event to openHam and closeHam icons with the hamburgerEvent function as the second parameter of the event listener openHam addEventListener click gt hamburgerEvent flex block none closeHam addEventListener click gt hamburgerEvent none none block openHam addEventListener click gt hamburgerEvent flex block none sets up an event listener for the click event on the openHam icon When this element is clicked it triggers an anonymous arrow function that calls the hamburgerEvent function with the arguments flex block and none This will change the display property of navigationItems to flex closeHam to block and openHam to none effectively showing the navigation items and switching the hamburger icon to the close icon The event listener attached to the closeHam does the exact opposite of this by passing none none block as the parameters of the hamburgerEvent function invoked in the event listener Complete JavaScript Codelet openHam document querySelector openHam let closeHam document querySelector closeHam let navigationItems document querySelector navigation items const hamburgerEvent navigation close open gt navigationItems style display navigation closeHam style display close openHam style display open openHam addEventListener click gt hamburgerEvent flex block none closeHam addEventListener click gt hamburgerEvent none none block	2023-06-30 11:19:04
海外TECH	DEV Community	Top 5 Frontend and Backend Technologies Used by Developers in 2023	https://dev.to/dhruvjoshi9/top-5-frontend-and-backend-technologies-used-by-developers-in-2023-4e2p	Top Frontend and Backend Technologies Used by Developers in Frontend developers and backend developers must stay updated with the trend of technologies and frameworks and which one to use for efficient and faster development Staying up to date also makes them competitive in the market But It s hard to stay updated sometimes So don t worry we have collected the top frameworks for frontend and backend development and described why you should contact frontend or backend development services for your project Let s dive in without wasting time Top Frontend And Backend Technologies Used By Developers In Let s look at the top backend and frontend technologies you can incorporate into your development process and enhance your app development Top Frontend Technologies Developers Are Using in Frontend development is about creating an engaging and interactive user experience for the end users Frontend developers are responsible for the appearance and impression of the website or application as well as the functionality of the user interface In developers most popular frontend technologies are React Angular and Vue js These technologies are widely used in various industries such as e commerce social media and finance Let s quickly examine these technologies and their pros and cons React The Most Commonly Used Framework React is a JavaScript library for creating UIs It allows developers to create reusable components making the development process more efficient It is also highly adaptable making it a good choice for large and complex projects React has a large and active community which means plenty of resources are available for developers to learn and use Top Companies Using ReactBloombergFacebookUber EatsDiscordInstagramSkypePinterestSalesforce Pros of ReactVery easy to find good developersCreates cross platform appsBig CommunityBackward CompatibilityReusable componentsVirtual DOM Cons of ReactBased on rd party librariesNo convention AngularAs we all know Angular is a JavaScript framework for front web development It is a complete frontend development solution providing tools and features for making dynamic and interactive user interfaces Angular is beneficial for creating complex and large scale projects and is a popular choice for enterprise level applications Top Companies Using AngularMicrosoft OfficeDeutsche BankMixerSantanderGmailForbesUpworkPayPal Pros of AngularMVC Architecture ImplementationEnhanced Design ArchitectureModulesCustom DirectivesServices and Dependency Injection Cons of AngularComplex and VerboseLimited SEO optionsThe little hard learning curveLack of details in CLI documentation Vue jsIt s a JavaScript framework that we all know for creating user interfaces It is similar to React in that it allows for the creation of reusable components but it is considered to have a gentler learning curve Vue js is highly adaptable and easily integrated with other technologies making it a popular choice among frontend development services Top Companies Using Vue JsFacebookNetflixXiaomiAdobeThe Motley FoolTrivagoGrammarlyGitlab Pros of Vue JsSimple and EasyVirtual DOMIntuitive APIsNice Documentation Cons of Vue JsLanguage ConstraintNo Streamlined ApproachFewer user bases Next JsNext js is a JavaScript framework for creating server rendered React apps It is built on React and Webpack allowing developers to create SEO friendly and performant web pages Next js also provides features like automatic code splitting and easy integration with other technologies making it popular among frontend development services Top Companies Using Next jsWalmartAppleNikeNetflixTikTokUberLyftStarbucks Pros of Next JsExcellent performance great load timesGreat SEOBest user experienceGood support for developers Cons of Next JsHard to learn for developers GatsbyGatsby is a JavaScript framework for building static and progressive web applications It uses React and GraphQL to generate static pages during the build process which can lead to improved performance and better SEO Gatsby also provides a rich set of plugins and APIs for handling various frontend tasks such as image optimization offline support and analytics It is beneficial for creating websites and blogs and is popular among frontend developers who want to make fast and smooth user experiences Top Companies Using GatsbySnapchatTinderStackRevolutPayhereOxylabsMAK ITAffirm Pros of GatsbyFast page loading speedEasy to learnSEO efficiencySecurityFuture proofMore leads and customersGood user experienceStructured DataActive communityEast for CI CD Cons of GatsbyNeed to update content a lotNo plug and play functionalityNo WordPress style plugins Top Backend Technologies Developers Are Using in Backend development involves creating a website or application s server side logic and data management As a backend developer you will be accountable for making the APIs and databases that the frontend will interact with In developers most popular backend technologies are Node js Python and Ruby on Rails These technologies are widely used in various industries such as e commerce social media and finance Let s quickly examine these technologies and their pros and cons Before proceeding you can reach out to a backend development services provider to get your project done seamlessly without worrying Node JsNode js is a JavaScript based runtime environment that lets developers run JavaScript on the server side It makes it an ideal choice for backend developers already familiar with JavaScript Node js allows for easy scalability and is commonly used in real time applications like chat and gaming If you have a lit project you can hire a Node js developer Top Companies Using Node jsLinkedInNetflixUberTrelloPayPalNASAeBayMediumImpressive right Reach out to a backend development services provider so you can succeed as these companies have Pros of Node JsRobust tech stackFast process for web tasksScalable for microservicesRich ecosystemStrong corporate supportJSON supportLarge community Cons of Node JsBottleneck with some heavy tasksCallback hell issueImmature toolingBad dependency management PythonPython is a universal programming language for various purposes including web development It has a large and active community which means there are plenty of libraries and frameworks for Python developers It is also a popular choice for machine learning and data analysis Top Companies Using PythonIntelIBMNASAPixarNetflixFacebookJP Morgan ChaseSpotify Pros of PythonFlexible and ExtensibleLarge CommunityExtensive LibrariesHighly ScalableEmbeddable Cons of PythonSome issues with the designSome security issuesHigh memory consumptionComplex multithreadingSlower than compiled language Ruby on RailsIt s a web app framework that is written in Ruby It follows the convention over the configuration philosophy which can make the backend development procedure quicker and extra efficient Ruby on Rails is particularly useful for quickly creating web applications and small startups and large corporations widely use it Top Companies Using Ruby on RailsCrunchBaseTwitterEtsyShopifyGitHubAirbnbAsk fmFab Pros of Ruby on RailsTime efficiencyBig and Active CommunityA good number of helpful tools and librariesStrong adherence to standards Cons of Ruby on RailsLess flexibleNeeds continuous evolvementLess performance of boot timeMistakes will be costly Express jsExpress js is a popular framework for Node js It is minimalistic and flexible making it easy for developers to create and maintain web applications Express js is particularly useful for building RESTful APIs and can be combined with other Node js libraries and frameworks Top Companies Using Express JsTwitterAccentureStackKevinClient PlatformIntuitTrustpilotPratilipi Pros of Express jsFast app developmentRequest handling for I OOpen source and big communityEasy integration of third party servicesEasy to learn Cons of Express jsEvent driven nature callbacks Code organizationSome error messages are not helpfulNot great on security DjangoDjango we all know is a high level Python web framework that encourages rapid development and spotless pragmatic design It is built on top of Python and is often used for web development in large organizations It also offers a built in admin interface that lets developers quickly create a backend for managing the application s data Top Companies Using DjangoInstagramNational GeographicMozillaSpotifyPinterestDisqusBitbucketEventbrite Pros of DjangoImplemented in PythonBetter content management and better CDNFast processingRapid development ScalableSecurity Cons of DjangoDjango is MonolithicNot best for smaller projectsIt can lead to slow websitesLack of conventions Final WordsThe industry is constantly changing and backend and frontend developers must stay informed and adaptable to deliver high quality products and services You can enhance your development as a developer by staying current on the newest back and front web development trends and tools Suppose you have a unique idea about web or mobile app development and seek a genuine and trustworthy partner In that case you can reach out to frontend development services and backend development services as per your needs Remember to like follow comment and share Thanks for reading	2023-06-30 11:03:45
海外TECH	Engadget	The best SSDs in 2023	https://www.engadget.com/best-ssds-140014262.html?src=rss	The best SSDs in One of the most cost effective ways to upgrade a computer or console is with solid state storage The fastest flash drives will make your desktop or laptop feel snappier with shorter app and operating system loading times The best part is that we re at a point where you don t have to choose between speed and capacity the latest solid state drives SSDs offer both Whether you want to replace an old hard drive or upgrade the capacity of your existing SSD this guide will help you navigate all the complexities of buying a modern flash drive Don t know the difference between an NVMe and M drive Don t worry Engadget can help you choose the best SSD for your needs What to look for in a PC SSDThe most affordable way to add fast storage space to a computer is with a inch SATA drive It s also one of the easiest if you don t want to worry about compatibility since almost every computer made in the last two decades will include a motherboard with Serial ATA connections For that reason inch SSDs are the best buys if you want to extend the life of an older PC build Installation is straightforward too Once you ve secured the internal SSD in a drive cage all you need to do is to connect it to your motherboard and power supply The one downside of SATA drives is that they re slower than their high performance NVMe counterparts with SATA III limiting data transfers to MB s But even the slowest SSD has a significantly faster transfer speed than the best mechanical drives And with TB SATA SSDs costing about they re a good bulk storage option If your PC is newer there s a good chance it includes space for one or more M SSDs The form factor represents your ticket to the fastest possible consumer storage on the market but the tricky part is navigating all the different standards and specs involved M drives can feature either a SATA or PCIe connection SSDs with the latter are known as Non Volatile Memory or NVMe drives and are significantly faster than their SATA counterparts with Gen models offering sequential write speeds of up to MB s You can get twice the performance with a Gen SSD but you ll need a motherboard and processor that supports the standard If you re running an AMD system that means a Ryzen or CPU and an X or B motherboard With Intel meanwhile you ll need a th or th Gen processor and a Z Z or Z motherboard Keep in mind you ll pay a small premium for a Gen SSD You might have also seen something about Gen NVMe drives You can safely ignore those for now At the moment only Intel s th gen desktop CPUs support PCIe and there aren t any Gen NVMe SSDs out on the market We ll see the first ones arrive alongside AMD s next generation Ryzen processors later this year but if the price of early Gen drives is any indication they will be expensive As for why you would buy an M SATA drive over a similarly specced inch drive it comes down to ease of installation You add M storage to your computer by installing the SSD directly onto the motherboard That may sound intimidating but in practice the process involves a single screw that you first remove to connect the drive to your computer and then retighten to secure the SSD in place As an added bonus there aren t any wires involved making cable management easier Note that you can install a SATA M SSD into an M slot with a PCIe connection but you can t insert an NVMe M SSD into a M slot with a SATA connection Unless you want to continue using an old M drive there s little reason to take advantage of that feature Speaking of backward compatibility it s also possible to use a Gen drive through a PCIe connection but you won t get any of the speed benefits of the faster NVMe One last thing to consider is that M drives come in different physical sizes From shortest to longest the common options are and The first two numbers represent width in millimeters the latter denote the length For the most part you don t have to worry about that since is the default for many motherboards and manufacturers Some boards can accommodate more than one size of NVMe SSD thanks to multiple standoffs That said check your computer s documentation before buying a drive to ensure you re not trying to fit one it can t support The best buying advice I can offer is don t get too caught up about being on the bleeding edge of storage tech The sequential read and write speeds you see manufacturers list on their drives are theoretical and real world performance varies less than you think If your budget forces you to choose between a TB Gen NVMe and a GB Gen model go for the former From a practical standpoint the worst thing you can do is buy a type of SSD that s too small for needs Drives can slow dramatically as they approach capacity and you will probably end up purchasing one with a larger storage capacity down the line With all that boring stuff out of the way here are some go to best SSD recommendations Best inch SATA Drive Crucial MXYou don t have to look far to find the best all round inch SSD It s the Crucial MX With sequential read speeds of MB s and price tag for the TB model this internal SSD offers a hard to beat combination of excellent performance and value It also comes with a five year warranty for additional peace of mind Best PCIe M Samsung EVO PlusThe EVO Plus is a great pick for anyone buying their first Gen NVMe drive It comes in GB GB TB and TB varieties all of which are competitively priced Expect to pay about for the GB model for the TB version and for TB Samsung s SSDs also have a strong reputation for reliability A more affordable Gen NVME Crucial PIf the EVO Plus is out of your price range but you still want a NVMe drive the Crucial P is the best budget option It s slightly slower than Samsung s M drive offering sequential read speeds of up to MB s instead of MB s but is significantly cheaper Crucial offers the P in GB GB TB and TB variants A SATA option WD Blue SNIf you have an older computer but still want to take advantage of the M form factor consider the WD Blue SN It s slower than the two above options but pricing is comparable to what you would pay for a inch drive Best Gen NVME Crucial P PlusIf you have the necessary hardware and money to spare it s hard to beat the high end Crucial P Plus With sequential read speeds of MB s it s not the absolute fastest Gen NVMe you can buy but it offers about the best value The P Plus comes in GB TB and TB varieties The WD Black SN we recommend below in the console section is also a great pick What to look for in portable and USB flash drivesPortable SSDs are a somewhat different beast to their internal siblings While read and write speeds are important they are almost secondary to how an external drive connects to your PC You won t get the most out of a model like the SanDisk Extreme Pro V without a USB Gen x connection Even among newer PCs that s something of a premium feature For that reason most people are best off buying a portable drive with a USB Gen or Thunderbolt connection The former offers transfer speeds of up to Gbps Additionally if you plan to take your drive on trips and commutes it s worthwhile to buy a model with IP certified water and dust proofing Some companies like Samsung offer rugged versions of their most popular drives For additional peace of mind bit AES hardware encryption will help prevent someone from accessing your data if you ever lose or misplace your external SSD Some of the same features contribute to a great thumbstick drive Our top picks for best external SSD models feature USB connections and some form of hardware encryption Best portable drive Samsung TFor most people the Samsung T offers the perfect mix of features performance and affordability The company offers the T portable SSD in GB TB and TB varieties and three different colors It s also relatively fast offering sequential read speeds of up to MB s Best of all you can frequently find it on sale Best thumbstick drive Samsung Fit PlusAnother Samsung pick here for good reason The Fit Plus has about all the features you could want on a USB drive It connects to your computer over USB and supports file transfer speeds of up to MB s The Fit Plus is also compact and has a handy slot for attaching it to your keychain The only downside of Samsung s USB drive is that it s on the pricey side nbsp A note on console storageSeagateThankfully outfitting your fancy new console with the fastest possible storage is far more straightforward than doing the same on PC With a Series X or Series S the conversation starts and ends with Seagate s storage expansion cards The company offers GB TB and TB models with the most affordable starting at a not so trivial The good news is that gamers can frequently find them on sale Your best bet is to set an alert for the model you want on a price tracker like CamelCamelCamel With Sony s PlayStation upgrading the console s internal storage is slightly more involved Instead of employing a proprietary solution the PS uses NVMe storage Thankfully there aren t as many potential configurations as you would find on a PC Engadget published a comprehensive guide on buying a PS SSD last year In short your best bet is a Gen drive with a built in heatsink Check out that guide for a full list of gaming SSD recommendations but for a quick go to consider the Western Digital SN It meets all the memory specifications for Sony s latest console and you won t run into any clearance issues with the heatsink Western Digital offers GB TB and TB models of the SN Expect to pay about for the TB variant and about for TB For those still playing on a previous generation console you can get slightly faster load times from a PlayStation by swapping the included hard drive to a inch SSD but going out of your way to do so probably isn t worth it at this point and you re better off saving your money for one of the new consoles This article originally appeared on Engadget at	2023-06-30 11:57:44
海外TECH	Engadget	Twitter's lawsuit over censorship in India has been dismissed	https://www.engadget.com/twitters-lawsuit-over-censorship-in-india-has-been-dismissed-114031691.html?src=rss	Twitter x s lawsuit over censorship in India has been dismissedLast year Twitter sued India over orders to block content within the country saying the government had applied its IT laws quot arbitrarily and disproportionately quot Now India s Karnataka High Court has dismissed the plea with a judge saying Twitter had failed to explain why it delayed complying with the new laws in the first place TechCrunch has reported The court also imposed a million rupee fine on the Elon Musk owned firm nbsp quot Your client Twitter was given notices and your client did not comply Punishment for non compliance is seven years imprisonment and unlimited fine That also did not deter your client quot the judge told Twitter s legal representation quot So you have not given any reason why you delayed compliance more than a year of delay…then all of sudden you comply and approach the Court You are not a farmer but a billon dollar company quot Twitter s relationship with India was fraught for much of In February the government threatened to jail Twitter employees unless the company removed content related to protests by farmers held that year Shortly after that India ordered Twitter to pull tweets criticizing the country s response to the COVID pandemic More recently the government ordered Twitter to block tweets from Freedom House a nonprofit organization that claimed India was an example of a country where freedom of the press is on the decline Those incidents put Twitter in a compromising situation It either had to comply with government orders to block content and face censorship criticism inside and outside the country or ignore them and risk losing its legal immunity In August it complied with the orders and took down content as ordered The court order follows recent comments from Twitter co founder Jack Dorsey saying that India threatened to raid employees homes if it didn t comply with orders to remove posts and accounts In a tweet India s deputy minister for information technique called that quot an outright lie quot saying Twitter was quot in non compliance with the law quot nbsp Twitter filed the suit around the same time that Elon Musk started trying to wiggle out of buying Twitter Since then Twitter has often complied with government takedown requests ーmost recently in Turkey where it limited access to some tweets ahead of a tightly contested election won by incumbent president Recep Tayyip Erdogan nbsp nbsp This article originally appeared on Engadget at	2023-06-30 11:40:31
海外TECH	Engadget	The Morning After: ASUS attempts the flagship compact smartphone, again	https://www.engadget.com/the-morning-after-asus-attempts-the-flagship-compact-smartphone-again-111527675.html?src=rss	The Morning After ASUS attempts the flagship compact smartphone againI ve said it before but I ll say it again here There aren t many options left when it comes to true compact smartphones RIP iPhone mini But ASUS is willing to offer something The new Zenfone looks like a carbon copy of its predecessor and even its megapixel main camera has remained unchanged Still the company claims that it s now powered by a new version of axis gimbal stabilization ーa combination of hardware optical stabilization upgraded electronic stabilization algorithm and fast auto focus This apparently lets you capture smoother videos and less blurry photos while on the move ASUS has extended its quot Connex quot modular case system once again which lets you snap either a kickstand or a silicone cardholder into the grid of holes on the back of the case You can even assign an app ーYouTube by default ーto auto launch whenever the kickstand is flipped out The Zenfone all details right here will be available for pre order in Europe from June starting from € about with US availability TBC Mat SmithYou can get these reports delivered daily direct to your inbox daily Subscribe right here ​​The biggest stories you might have missedThe best cheap phones for The Steam Deck is up to off during the Steam Summer SaleRazer s new gaming mouse can seamlessly flip between five profilesApple s Beats Studio Pro could include head tracking spatial audioAll the big tech layoffs of Meta explains how its AI decides what you see on Facebook and InstagramVirgin Galactic completes its first commercial spaceflightThe debut is years in the making VirginVirgin Galactic has completed its first commercial flight After launching aboard the mothership VMS Eve the spaceship VSS Unity reached an altitude of around miles or the edge of space Itss first client was the Italian government which had the aim of conducting microgravity research The company s first fully crewed spaceflight took place in when Unity hit an altitude of miles with founder Richard Branson on board However commercial service was delayed multiple times for different reasons most recently due to issues with upgrading the mothership VMS Eve From a financial perspective the launch was crucial for Virgin Galactic With no paying customers until now the company has lost money for years with it burning more than million in alone Continue reading It s a good time to be a fighting game fanIt s the biggest year for fighting games since the s While fighting games may never have the same mass market appeal they did in the s is proving to be a mini renaissance for the genre Street Fighter is already on sale Mortal Kombat is arriving this fall and there s Tekken still to come That s without mentioning the upcoming reboot of Dead or Alive or Riot Games League of Legends spin off Project L It s a good time to be a fighting game fan Continue reading Google will pull news links in Canada in response to new lawThe search firm is joining Meta in reacting to Bill C Meta isn t the only internet heavyweight removing news content in response to Canada s newly enacted Bill C aka the Online News Act which requires that tech companies negotiate compensation with publishers for linked material Google now says it will pull links to Canadian news stories from its search News and Discover services in the country It will also stop operating its News Showcase in Canada when C takes effect in six months As with Meta Google is using the threat of blocking news as a bargaining tool but there s no guarantee of a compromise Politicians drafted Bill C after concerns about a steep drop in ad revenue for publications over the past two decades Continue reading This article originally appeared on Engadget at	2023-06-30 11:15:27
海外TECH	CodeProject Latest Articles	Render Graphic Functions with Minimal Integer Math, Able to Drive CNC	https://www.codeproject.com/Articles/5363800/Render-Graphic-Functions-with-Minimal-Integer-Math	computer	2023-06-30 11:40:00
金融	JPX マーケットニュース	[東証]ヨシコン株式会社の有価証券報告書の提出状況に関するご注意	https://www.jpx.co.jp/news/1023/20230630-11.html	有価証券報告書	2023-06-30 20:50:00
海外ニュース	Japan Times latest articles	Japan’s ruling bloc aims to export next-generation fighter jet	https://www.japantimes.co.jp/news/2023/06/30/national/japan-fighter-jet-export-eyed/	Japan s ruling bloc aims to export next generation fighter jetThe two parties are discussing a proposed easing of self imposed restrictions on transfers of defense equipment and technology to other countries	2023-06-30 20:22:32
ニュース	BBC News - Home	Zac Goldsmith resigned after refusing to apologise, Rishi Sunak says	https://www.bbc.co.uk/news/uk-politics-66063894?at_medium=RSS&at_campaign=KARANGA	boris	2023-06-30 11:15:38
ニュース	BBC News - Home	Kevin Spacey: Jurors told actor is a 'sexual bully' during sex assault trial	https://www.bbc.co.uk/news/uk-66063233?at_medium=RSS&at_campaign=KARANGA	allegations	2023-06-30 11:51:00
ニュース	BBC News - Home	Woman who murdered baby son jailed for at least 20 years	https://www.bbc.co.uk/news/uk-northern-ireland-66054405?at_medium=RSS&at_campaign=KARANGA	sister	2023-06-30 11:49:01
ニュース	BBC News - Home	Poland charges Russian ice hockey player with spying	https://www.bbc.co.uk/news/world-europe-66063406?at_medium=RSS&at_campaign=KARANGA	league	2023-06-30 11:50:27
ニュース	BBC News - Home	Boy, 15, and man stabbed to death in north London	https://www.bbc.co.uk/news/uk-england-london-66064014?at_medium=RSS&at_campaign=KARANGA	archway	2023-06-30 11:40:37
ニュース	BBC News - Home	Dominik Szoboszlai: Liverpool in talks to sign RB Leipzig midfielder	https://www.bbc.co.uk/sport/football/66063877?at_medium=RSS&at_campaign=KARANGA	german	2023-06-30 11:21:34
ニュース	BBC News - Home	The Ashes: England slump to 325 all out after morning session at Lord's	https://www.bbc.co.uk/sport/av/cricket/66066228?at_medium=RSS&at_campaign=KARANGA	The Ashes England slump to all out after morning session at Lord x sEngland slump to all out after losing six wickets for runs in the morning session on day three of the second Ashes Test at Lord s	2023-06-30 11:51:18
ニュース	BBC News - Home	France shooting: Who was Nahel M, shot by police in Nanterre?	https://www.bbc.co.uk/news/world-europe-66052104?at_medium=RSS&at_campaign=KARANGA	paris	2023-06-30 11:48:00
IT	週刊アスキー	カプコンの人気タイトルが最大84％オフ！「CAPCOM JULY SALE」がSteam／PS／Switchで開催中	https://weekly.ascii.jp/elem/000/004/143/4143452/	capcomjulysale	2023-06-30 20:40:00