投稿時間:2023-02-17 01:16:13 RSSフィード2023-02-17 01:00 分まとめ(20件)

カテゴリー等	サイト名等	記事タイトル・トレンドワード等	リンクURL	頻出ワード・要約等/検索ボリューム	登録日
IT	InfoQ	MariaDB 11.0 Brings a New Optimizer Cost Model and More	https://www.infoq.com/news/2023/02/mariadb-11-0/?utm_campaign=infoq_content&utm_source=infoq&utm_medium=feed&utm_term=global	MariaDB Brings a New Optimizer Cost Model and MoreAfter years since the last release MariaDB Server has been released bringing a new optimizer cost model which aims to predict more accurately the actual cost of each query execution plan removed InnoDB change buffer and so on By Diogo Carleto	2023-02-16 15:20:00
海外TECH	MakeUseOf	7 Reasons TikTok Is Bad for Everyone	https://www.makeuseof.com/is-tiktok-bad/	media	2023-02-16 15:30:15
海外TECH	MakeUseOf	How to Install Windows 11 in VMware Workstation 17 Player	https://www.makeuseof.com/install-windows-11-vmware-workstation-17-player/	vmware	2023-02-16 15:15:16
海外TECH	DEV Community	First Steps With TinyBase	https://dev.to/parenttobias/first-steps-with-tinybase-1ola	First Steps With TinyBaseSo TinyBase was one of those thing that came across my feed and I wondered what the point was It s a reactive client side data store which takes a little parsing to understand What exactly is a data store Simply it is a structure we use to store data An array an object a Map a Set these are data stores What exactly do we mean by a client side data store It s a library that lets us build objects or arrays in the browser Which on the face of it seems silly We can always just create an array or object right The key lies in the reactive bit Not only does this allow us to construct a data store but it allows us to respond to changes in that data store We can observe those changes and respond appropriately Reactive Data StoreWhat do we mean by respond appropriately Any sort of action we might like Think of the event listeners in the DOM only with data We might want to update the DOM say a grid of employee lt card gt elements when one is added or removed Or we might need to update the contents of a card if one is edited We might want to store data locally when a change happens localStorage sessionStorage or IndexedDb Tinybase provides for that We might want to handle some remote call say passing a message to a Socket We might not want to store data locally when something changes we might want to handle that change via a debouncer so when the user stops editing for a given period we handle a remote save request While Tinybase provides for the remote storage we would write our own debouncer Note that last it is one of the strengths of this library It doesn t dictate how we might use it or encapsulate it or consume it it simply does this one thing and does it quite well Note that TinyBase actually provides two storage mechanisms we can store values by key or we can store tabular data That is we can do either or both of these things we can set key value pairs just as in localStorage const store createStore setValue currentProject projectId setValue colorMode dark console log store getValues currentProject bfdd dfe d b bcdeaf colorMode dark or we can store tabular data store setTable todos crypto randomUUID title Look into TinyBase description A pretty darn okay reactive local data store priority normal done false So with the first part of that we defined two keys currentProject and colorMode We defined values for them and we re able to use either store getValue key or store getValues to view those things In the second we are defining a row of data in the todos table in our store Note that we didn t specify any particular ordering or columns to that table we simply went ahead and created the object We could and in future parts we will define schemas or relations between tables this project will let us do this and more It s a data store powerhouse but it is intentionally limited to that domain It does one thing well without needing to do all things A Quick Idea To begin let s consider how we might create a Todos data model first with plain javascript and then by leveraging TinyBase Todos service jslet todos const isAMatch id gt obj gt Object keys obj id export const add todoObject gt const id crypto randomUUID todos todos id todoObject return id todoObject export const update todoId todoObject gt todos todos map todo gt isAMatch todoId todo todoId Object values todo todoObject todo export const remove todoId gt todos todos filter todo gt isAMatch todoId todo export const findById todoId gt todos find isAMatch todoId export const findAll gt todos All our basic functionality for Todo things to be collected in a nice tidy package Later when we want to consume it we simplyimport as Todos from services Todos service Todos add title Learn about TinyBase descripton Client side reactive data stores due priority normal done false console log Todos findAll And that s great Let s see the same basic functionality with TinyBase import createStore from tinybase const store createStore export const add todoObject gt const id crypto randomUUID store setRow todos id todoObject return id store getRow todos id export const update todoId todoObject gt store setPartialRow todos todoId todoObject getRow todos todoId export const remove todoId gt store delRow todos todoId export const findById todoId gt store getRow todos todoId export const findAll gt store getTable todos This is giving us all the same functionality as an array but it is abstracting that internal array into an external data store And if this was all we were doing with it we really haven t gained anything But as a first step we can see that basically the use is very similar only rather than using array methods we re using TinyBase store methods Getting Started Setting up shopTo build this one we ll use a bundler and a few packages Of late my preferred bundler is Vite it is quick clean and minimal So we ll open the console and yarn create vite vanilla todo app template vanillaThat will create a directory vanilla todo app and set up the package json and dependencies for us Then we will cd vanilla todo app to get in there andyarn add tinybaseAnd that will both install the package json as well as adding the TinyBase package for us If we have other dependencies we might like we can add them but for what we re about to do that s everything we ll need At this point we can open this in our editor I ll be using VS Code simply because it s fairly universal code This opens the editor with the current directory as the workspace We will be able to clean up the template quite a bit we don t need any of the content in the main js or the files to which it refers so we can delete javascript svg and counter js and remove everything but the import style css from the main js At that point we re ready to start Creating a StoreNow we need to create a data store And we ll want to place it into its own file importable by others we might want to allow for multiple data sets for example we might want a todos and a projects Let s start there Create a src directory to keep the root tidy we ll work in there for the most part Within there we ll create a services directory Inside that services directory we ll create a store js file src services store jsimport createStore from tinybase const store createStore export store And there we go We have our datastore defined At this point that s all we ll need in the store js though later we ll add a few other useful things to this file While we could interact directly with the store wherever we might need a better approach might be to define an interface that can consume a particular service With that if we choose to swap out our data provider later it would only require editing one place rather than scattered throughout our code Defining an Abstract ModelThe interface methods for each are fairly standard add update remove byId and all will do We ll start by defining a generic Model js src models Model jsimport store from services store const Model table gt const add object gt const id crypto randomUUID store setRow table id object return id object const update id object gt store setPartialRow table id object getRow table id const remove id gt store delRow table id const byId id gt store getRow table id const all gt store getTable table return add update remove byId all export default Model We ve defined this as a factory function To consume it we could simply call const Todos Model todo providing it with the name of the data table we wish to use Now when we are adding an object we are getting a uuid for the project and we are using the TinyBase setRow method to create a row in the given table Side note when I refer to the projects table it may be easier to think of the store as an object and the projects as a key on that object that contains an array of id object things When we update a project TinyBase provides the setPartialRow method With that we provide a table id a row id and an updater object That updater object doesn t need to redefine all the properties in our original object only the ones we might want to update And the setPartialRow method returns the TinyBase store instance so we can chain that and call getRow to get and return the updated value of our object To delete a row we simply call delRow with the table and row ids Now if we look at that code there is nothing there that is unique to the Project model In fact it s fairly abstract the only thing identifying it is the const table projects line And that is deliberate To create the Todos model js we can use the same code Simply by changing that one line to const table todos we will be performing those same CRUD operations elsewhere in our store And this is a pretty good abstraction to my mind We can reuse this as a template for each of our data models Creating Instance Models src models Todos model jsimport Model from Model const Todos Model todos export default Todos And that s all we need at this point We can do the same for projects src models Projects model jsimport Model from Model const Projects Model projects export default Projects At that point we have two functional tables of data we can stuff into our store service Let s Consider StructureUp to this point we haven t really considered how we should structure things We set up a data store we defined an interface to consume that data store and we created a couple of basic data models But we would do well to step back and think about how our data should be structured Let s examine the Todos model first in isolation Todo id title Default Todo Title description Default description priority normal low normal high critical created due done false So note that we have that priority key which can be one of four values Now if we wanted to get all the high priority todos we could simply get them all and use filter but TinyBase gives us an option This would be a good candidate for an index With an index we can select all rows from a table that match a given index value When we query the index we get back an array of keys all of which meet that index condition And that array we get back is reactive so as we add edit remove rows the indexes are dynamically updating So we have a basic structure the priority key will be indexed and we want to be able to get two key pieces of information back from our Todos all currently used indexes and sets of ids that meet a given index So we ll be adding two methods to the Todos object priorities and byPriority The first will get an array of priority keys while the second will get a complete list of the Todos with a given priority value But we re using the Model to generate the Todo model can we somehow add to or compose that We Have the Power We can actually We want to first add an export to the store service allowing for indexing src services store jsimport createStore createIndexes from tinybase store export const store createStore export const indexes createIndexes store That will let us set up an index in the Todos model js src models Todos model jsimport Model from Model import store indexes from services store indexes setIndexDefinition byPriority todos priority const Todos Model todos export default Todos At that point we have defined our index column setIndexDefinition is a method on the indexes instance and we tell it to create an index with the id of byPriority so we can retrieve it later that is working on the todos table and in particular is indexing the priority field in that table Extending the Data ModelsIn the above Todo model js we now have a good index but we aren t actually using it yet And what we d like to do if possible But what that means is we want to take in the basic Model functionality and add to that src models Todos model jsimport Model from Model import store indexes from services store indexes setIndexDefinition byPriority todos priority const Todos gt our base functionality const baseTodos Model todos return baseTodos export default Todos So we have changed Todos from simply being an instance of our Model factory to being an IIFE that is returning all the methods of that baseTodos which is still the instance We re composing the functionailty from Model with some custom methods Within that Todos IIFE let s add this const baseTodos Model todos get all the todo ids associated with this project const priorities gt indexes getSliceIds byPriority const idsByPriority priority gt indexes getSliceRowIds byPriority priority const byPriority priority gt idsByPriority priority map baseTodos byId return baseTodos priorities byPriority So we ve added two methods to the Todos model priorities and byPriority The first gets all the currently used priority values while the second gets the todos themselves with a given priority To get the array of priority values we use the Index module s getSliceIds method That gets us all possible key values for the indexed cell all the possible values for priority currently used in our data store The Indexes module also gives us the getSliceRowIds method which simply gets the id for each row that meets its condition In our case the condition is a matching priority And we can leverage that in the byPriority function we get the ids for each row and then use those to get each individual row for the project Finally we spread the baseTodo object exposing its methods on the Todos returned object as references to this inner baseTodos thing And we compose that interface by adding two more methods to the Todos returned object Indexes vs RelationshipsThe next bit of structuring to consider is the relationship between the Project and the Todo Each thing has a unique id assigned to it and that is used as the key of its row in the data table And a project can contain any number of todo elements but each todo can only belong to one project This is in relational database terms a one to many relationship Typically in a relational database we might give the Todos model a field for the projectId some way of identifying with which project it is associated So for example to find all the Personal project s todos we could select all the todo elements with that projectId So note how in the model of the Todo we show a projectId Project id title Default Project Title description Default Description created Todo id projectId projectId lt the key from projects title Default Todo Title description Default description priority normal low normal high critical created due done false Indexes vs Relationships We discussed indexes above and now we re discussing relationships They are similar and if you ve worked with relational data you may likely already know the difference but here it is in a nutshell indexes are used within the context of a table to facilitate searching for a particular property value within that table for example priority high relationships are used within the dynamic of multiple tables indicating a connection between one a local table and the other the remote In this case the relationship would be todo projectId project id We re still comparing to something but with indexes we re typically getting information about a table while a relationship is giving us information about multiple tables through a common point In order to support relationships between data tables we will need to provide the Relationships module import createStore createIndexes createRelationships from tinybase export const store createStore export const indexes createIndexes store export const relations createRelationships store So we now have a relations module in which we can define our many to one relationship As this is primarily the domain of the Project we ll put it in the Project model js for now src models Projects model jsimport relations from services store import Model from Model import Todos from Todos model relations setRelationshipDefinition projectTodos the id of the relationship todos the many or local side of the relation projects the one or remote side of the relation projectId the local key containing the remote id const Projects gt const baseProjects Model projects return baseProjects export default Projects Note that we import just the relations export as we don t need an instance of the store itself All we need to define the relationship is the relationship module itself Also we import the Todos module as we want to add an array of todos to the project relations setRelationshipDefinition defines the relationship between projects and todos and gives that relationship the id projectTodos The parameters for that function are relationshipId a unique string to identify this relationship localTableId the id of the local table for the relationship Note that the local table is the many side of the many to one relationship remoteTableId the id of the remote table for the relationship This is the one side of that many to one representing the unique project that can relate to zero or more todo rows getRemoteRowId the name on this threw me for a bit but it is the cell in the local row that contain the unique id of the remote row So in our case this would be projectId as that is the todos row reference to projects idFinally we can consume that relationship within the definition of the Projects model itself src models Projects model jsconst Projects gt const baseProjects Model projects const byId projectId gt const project baseProjects byId projectId project todos relations getLocalRowIds projectTodos projectId map Todos byId return project return baseProjects byId Again we expose the interface of the baseProject and replace the stock byId method with a custom one That s Nice and All But Why This post is about how to interface with and consume TinyBase s store using plain vanilla javascript And to this point it s pretty darn okay But if that was all there was it wouldn t have much going for it In the next post we will explore the reactive aspect of that store We can set listeners on tables rows cells or data values and we can respond when those points change We will also look at data storage and persistence TinyBase in itself includes some great mechanisms for both local and remote storing and also describes how to write your own storage hooks This is something I m still playing with something I m still learning as I go if y all find something neat or something I missed lemme know	2023-02-16 15:28:12
海外TECH	DEV Community	User Interface Principles: Neumorphism and Glassmorphism	https://dev.to/get_pieces/user-interface-principles-neumorphism-and-glassmorphism-4cf7	User Interface Principles Neumorphism and Glassmorphism​Neumorphism entails building a soft user interface in which the User Interface components are positioned behind the background rather than directly on it It gives the impression that background elements such as buttons are present but are only made visible by their projection Neumorphism creates a continuous surface with bumps all through giving the details the appearance of being inside the background and sticking out from beneath it This design aesthetic focuses on contrast intense colors and skillfully applied shadows Glassmorphism on the other hand harnesses the unique properties of glass to improve designs by giving design elements a transparent or crystaline appearance It centers attention on the desired content and aids in the addition of a visual hierarchy to your designs With neumorphism and glassmorphism designers can maintain consistency with the way their designs look even as they design further Neumorphism in User InterfacesNeumorphism is a form of design that combines a monochromatic color scheme with shadows to give a design component a concrete appearance Monochromatic refers to a color scheme comprised of variations of one color The concept of neumorphism is inspired by combining both skeuomorphism and flat design but birthing a new type of design that appears softer and better looking Neumorphism gives user interface elements powerful yet subtle graphic effects by combining background colors shadows forms gradients and highlights to give a soft visual effect It s scalable and very consistent so it streamlines and improves user interface Neumorphism aids UI designers in maintaining visual consistency even as they design and create aesthetically pleasing experiences for the users With neumorphism UI elements appear more tangible in appearance which in turn conveys an exemplary user interface and experience A completely white or black background would make distinguishing shadows challenging Instead we pick a shade of the color we want preferably tinted You need to experiment with colors and shadows to produce a neumorphic design There are two ways of implementing neumorphism Drop shadow Inner shadowBelow is how they appear in UI Use Cases for Neumorphism in User Interface designFor user interfaces that use icons extensively neumorphism is very advantageous because it gives a minimalist yet pleasing type of design that is catchy and user friendly Here are some use cases for using neumorphism to create a more user friendly UI Sign up PagesOne of the many cases where neumorphism redefines user interfaces is on signup pages Using neumorphism makes these page more flexible and user friendlyーinstead of bland input fields it appears new and appealing Random ButtonsLet s explore testing the efficiency of neumorphism using buttons The tendency to blend into the background by having a background color that is the same or almost the same as the underlying element is a key attribute of a neumorphic interface The primary objective of many buttons is to be distinguished from other elements To achieve this most buttons have a background color that keeps them distinct from other elements in the UI Neumorphism plays a vital role in distinguishing buttons from other elements in a UI For example Call to Action CardsAnother use case for neumorphism is in call to action cards which creates a simple yet classic effect But always remember to keep a balance between neumorphism and the user experience Requirements for Implementing NeumorphismWe must consider the following to correctly implement neumorphism in our User Interface Neumorphism relies heavily on combining background colors shadows gradients and highlights to give a soft visual effect The background color must be the same as the element color The box shadow property is responsible for implementing neumorphism in CSS The box shadow adds a dark shadow to one side of the element and on the other side a lighter shadow Neumorphism requires one color with different shadows tints or hues to be implemented accurately The edges are usually curved Implementing Neumorphism with CSSThe box shadow property is responsible for a neumorphic effect It is relatively easy to create neumorphism in CSS taking note of the following the upper left corner is a light shadow and the lower right corner is a dark shadow First let s look at how the box shadow property works and then we ll add neumorphic effects on elements form fields and buttons The Syntaxbox shadow horizontal offset vertical offset blur radius spread radius color inset initial inherit Horizontal offset A positive value puts the shadow on the right side of the box a negative value puts the shadow on the left side Vertical offset A positive value puts the shadow below the box and a negative value puts the shadow above the box Blur radius The higher the number the more blurred the shadow will be and the lower the number the less blurred it will be Spread radius A positive value increases the size of the shadow and a negative value decreases the size of the shadow Color If the color is not specified the shadow will not b displayed Inset Changes the shadow from an outer shadow to an inner shadowInitial Sets the property to its default value Inherit Inherits the property from its parent element The box shadow property can be written in the following ways box shadow px px px px box shadow px px inset Creating a Neumorphic ElementHTML lt div class element gt lt div gt Save this codeCSS element align items center background color ecff box shadow px px px bbbc px px px ffbff border radius px display flex height px justify content center margin right rem width px Save this codeOutput ButtonsThe code sample below shows how to style a user interface button in the neumorphic method HTML lt div class element gt lt div class enter gt lt p gt Subscribe lt p gt lt div gt Save this codeCSSbody align items center display flex height vh justify content center enter align items center font weight bold background color ecff box shadow px px px bbbc px px px ffbff border radius px display flex height px width px color padding rem justify content center Save this codeOutputHTML lt div class buttons gt lt svg xmlns fill none viewBox stroke width stroke currentColor class icon gt lt path stroke linecap round stroke linejoin round d M a M a zM c S s zm h v h Vzm c s zm h v h Vz gt lt svg gt lt div gt lt div class buttons gt lt svg xmlns fill none viewBox stroke width stroke currentColor class icon gt lt path stroke linecap round stroke linejoin round d M vM vM Va hA vm A hA m v A hA v gt lt svg gt lt div gt lt div class buttons gt lt svg xmlns fill none viewBox stroke width stroke currentColor class icon gt lt path stroke linecap round stroke linejoin round d M L M c a A c a A c a A c a A z gt lt svg gt lt div gt lt div class buttons gt lt svg xmlns fill none viewBox stroke width stroke currentColor class icon gt lt path stroke linecap round stroke linejoin round d M vhm a z gt lt svg gt lt div gt lt div class buttons gt lt svg xmlns fill none viewBox stroke width stroke currentColor class icon gt lt path stroke linecap round stroke linejoin round d M c hc l c l a l c l c l c vc l c l c l a l c l c h c l c l c l a l c l c v c l c l a l a l c l z gt lt path stroke linecap round stroke linejoin round d M a z gt lt svg gt lt div gt Save this codeCSSbody align items center display flex height vh justify content center buttons margin top px border radius width px height px background color EEEC box shadow px px px bbbc px px px ffbff display flex margin px icon color width px height px margin auto Save this codeOutputCombining the various elements above makes for a cooler and much more user friendly User Interface when used correctly by combining the right colors shadows and tints as discussed earlier More Use Cases of Neumorphism in User Interface Alert Pages Buttons Call to Action Forms Pages Sign Up pages User Interface Design with GlassmorphismGlassmorphism imitates the look of tinted glass or a translucent background with a beautiful border and shadow The user interface elements frequently sit above a contrasting background and give the impression that they are mounted on sheets of glass Glassmorphism is increasingly popular and probably won t go away anytime soon Here is an example Simple shapes that float over blurry backgrounds with contrasting colors produce the best results when designed with glassmorphism The hue and transparency can be selected from light or dark mode as a useful tool for web or app development Glassmorphism helps establish a hierarchy because of the addition of sufficient contrast and the differentiation of various User Interface elements However overusing glassmorphism in the UI might make it less user friendly Use Cases for Glassmorphism in User Interface DesignA use case for the glassmorphism effect is in the unlock screen of iOS phones This effect gives it transparency and blurs the background color causing a remarkable impact on the entire screen and another on the buttons There is always a balance between the background blurring the shadows and the element s transparency with the glassmorphic effect Also remember that simple figures floating over blurry backgrounds with contrasting colors produce the best results in glassmorphism design Another good example is the use case shown below Glassmorphism solely depends on the blur effect so borders give the design more definition and distinguish the element from the background The transparent effect helps boost the overall appearance of the user interface design itself The use of colorful backgrounds plays a huge role in glassmorphic design because when an element is placed over it it highlights it well Attributes Properties of GlassmorphismThe purpose of implementing glassmorphism is to make a balance between these elements in your user interface Transparency The key requirement for implementing glassmorphism is transparency The element must be made for the top to attract more light and give a transparent effect to improve transparency Blurred background The blur makes the background image seamlessly blend into the background while still giving an aesthetically pleasing appearance this is what is remarkable about the idea of glassmorphism The transparent layers are carefully and correctly positioned over the blurred background The blurred background also helps give the foreground a glassy look Border A border surrounding the glassmorphic element highlights it Implementing Glassmorphism with CSSThe key to creating an ideal glassmorphism effect is choosing the appropriate transparency Only the fill should be translucent the form itself shouldn t be You will achieve a true background blur in this manner The following properties are employed to create the glassmorphism effect background linear gradient box shadow values rgba backdrop filter blur Glassmorphism needs a compelling aesthetic element in the user interface to provide the greatest visual impact This element might be a picture or a shape Creating a Glass Pane for Your User Interface DesignHTML lt div class card gt lt div gt lt h gt eureka lt h gt Save this codeCSSbody display flex align items center justify content center height vh background image linear gradient deg CEF DDED font family squada one h position absolute z index font size px letter spacing px color fff card width px height px z index background rgba box shadow px px fe box shadow inset px px px ffffff px px px a backdrop filter blur px webkit backdrop filter blur px border radius px border px ffffffe Save this codeOutput PaginationAnother great way to implement glassmorphism is in pagination glassmorphic objects partially allow you to see the image or colors behind them The object or element is kept from merging into the background by adding a blur behind it This blurriness is necessary to keep the text readable one of the more important elements of user interface design HTML lt DOCTYPE html gt lt html lang en gt lt head gt lt meta charset UTF gt lt meta http equiv X UA Compatible content IE edge gt lt meta name viewport content width device width initial scale gt lt link rel stylesheet href style css gt lt title gt Pagination lt title gt lt head gt lt body gt lt div class element gt lt ul class pagination gt lt li gt lt a href link gt lt lt lt a gt lt li gt lt li gt lt a href link gt lt a gt lt li gt lt li gt lt a href link gt lt a gt lt li gt lt li gt lt a href link gt lt a gt lt li gt lt li gt lt a href link gt lt a gt lt li gt lt li class active gt lt a href link gt lt a gt lt li gt lt li gt lt a href link gt gt gt lt a gt lt li gt lt ul gt lt div gt lt body gt lt html gt Save this codeCSS margin padding font family sans serif element position relative height vh width background linear gradient rgba rgba url leonhard niederwimmer rdVmRUlDp unsplash jpg background size cover background position center display flex align items center justify content center element pagination position relative height px background rgba box shadow px px px rgba display flex align items center justify content center backdrop filter blur px border radius px element pagination li list style type none display inline block element pagination li a position relative padding px px text decoration none color fff font weight element pagination li a hover element pagination li active a background rgba Save this codeOutput More Use Cases of Glassmorphism in User Interface DesignGlassmorphism needs a compelling aesthetic element to provide the greatest visual impact This might be a picture or a shape Call to Action CardsAs shown above the glassmorphic effect is over two photos or on a bright background made of shapes that are clear and compelling and makes the glassy effect more pronounced Let s look at another example of the glassmorphic concept with the frosted glass effect used in the user interface of a credit card application page First let s create the background using the background property body background linear gradient HTML lt DOCTYPE html gt lt html lang en gt lt head gt lt meta charset UTF gt lt meta http equiv X UA Compatible content IE edge gt lt meta name viewport content width device width initial scale gt lt link rel preconnect href gt lt link rel preconnect href crossorigin gt lt link href wght amp display swap rel stylesheet gt lt link rel stylesheet href style css gt lt title gt GLASSMORPHISM lt title gt lt head gt lt body gt lt body gt lt html gt Save this codeCSS margin padding box sizing border box body background linear gradient to right bbdc e height vh Save this codeLet s add the glassmorphism effect as we create the credit card But first let s add a few more details to the HTML HTML lt DOCTYPE html gt lt html lang en gt lt head gt lt meta charset UTF gt lt meta http equiv X UA Compatible content IE edge gt lt meta name viewport content width device width initial scale gt lt link rel preconnect href gt lt link rel preconnect href crossorigin gt lt link href wght amp display swap rel stylesheet gt lt link rel stylesheet href style css gt lt title gt GLASSMORPHISM lt title gt lt head gt lt body gt lt div class container gt lt div class card gt lt form gt lt div class logo gt lt svg xmlns fill none viewBox stroke width stroke currentColor class w h gt lt path stroke linecap round stroke linejoin round d M vM Hm h M Hm h m Hm h M VM vm Vm vm Vm ha Va HA va zm hvh v z gt lt svg gt lt div gt lt div class number gt lt input id number placeholder Enter card number type text required maxlength gt lt div gt lt br gt lt div gt lt div class name gt lt u gt lt input id name placeholder Enter name type text required gt lt u gt lt div gt lt div class expiry gt lt label gt VALID THRU lt label gt lt u gt lt input id card exp placeholder Enter expiry type text required maxlength gt lt u gt lt div gt lt div gt lt form gt lt div gt lt div gt lt div gt lt body gt lt html gt Save this codeCSSTo implement it with CSS we do the following body background linear gradient to right bbdc e height vh display flex align items center justify content center color ffffff card height px width px border radius px background rgba backdrop filter blur px border px solid rgba box shadow px rgba padding px px px px overflow hidden logo padding bottom px opacity width px group display inline flex margin padding number position relative display inline block overflow hidden margin bottom px underline transition all s display inline block bottom left position absolute width height px background color ffffff name padding px px px px margin right px width px position relative display inline block overflow hidden expiry padding px px px px margin right px width px position relative display inline block overflow hidden label color white font size px font weight normal pointer events none display block padding bottom px input border none font size px height px color ffffff background input focus border bottom px solid outline none border none font size px height px margin bottom px input hover border bottom px solid color none margin bottom px font size px height px input id number font size px width height px input id number placeholder font size px input placeholder color ffffff Save this codeOutput Browser CompatibilityNeumorphism is compatible with the latest forms of Chrome Edge Firefox and Safari and according to caniuse com glassmorphism is supported by most if not all browsers ConclusionNeumorphism is a visually pleasant concept of User Interface design and a popular trend more and more designers and developers are using to enhance user interfaces It makes user interfaces more usable and aesthetically pleasing to users although it can be a huge UI drawback when overused Neumorphism takes cues from both skeuomorphism and flat design These design philosophies aim to eliminate any flashy elements from the user interface and replace them with a soft look that is consistent throughout a project It s a wonderful idea to use neumorphism while creating icons social buttons forms and pagination in the right way with the right color shade combinations Employing neumorphism lessens the possibility of adopting color schemes that clash as some people find color combinations difficult Glassmorphism has become more useful than most of the other recent styles Glassmorphism has a shadow feature that elevates the element and provides it the appearance of floating above the surface As a result while interacting with the User Interface the user can subconsciously develop a sense of hierarchy Although it keeps the UI very sleek and classy apply glassmorphism to only a few elements of your designs to avoid overuse Try some neumorphic or glassmorphic effects in your designs today and see the difference they make	2023-02-16 15:17:50
海外TECH	DEV Community	A Anatomia de um repositório	https://dev.to/github/a-anatomia-de-um-repositorio-5cda	A Anatomia de um repositórioPor muito tempo eu tive o costume de subir meu código no Github escrever um arquivo README md bem básico e achava que estava fazendo o melhor uso possível do meu repositório Mas com o tempo e curiosidade descobri que vocêpode fazer muito mais do que apenas armazenar seu código em um repositório no Github Mas o que émesmo um Repositório Um repositório ou repo éum espaço especial na internet onde seu código ou qualquer outro tipo de dado que vocêdecida guardar vive Esse espaço além de oferecer um ambiente seguro para seu código oferece várias ferramentas de produtividade e colaboração vamos falar um pouco delas aba por aba CodeComeçamos com a aba Code que éa página principal do repositório e o lugar onde seu código vive Além do código aqui vocêpode ver o README md do repo sua descrição releases packages quantos forks e stars ele tem IssuesA próxima aba éa de issues Issues são uma ótima ferramenta de colaboração onde vocêpode pedir ajuda para consertar bugs solicitar features e muito mais Vocêpode marcar uma pessoa específica para resolver cada issue usar labels para facilitar que pessoas colaboradoras saibam que tipo de ajuda éesperada e vocêpode adicionar issues aos seus projetos para acompanhá las com mais facilidade Pull RequestNa aba de Pull Request éonde encontramos as colaborações para serem revisadas Quando uma pessoa trabalha no issue ela cria um PR com as mudanças feitas e a pessoa mantenedora com repositório pode revisar essas mudanças para aceitá las ou não Vocêtambém pode criar um PR sem uma issue específica mas se vocêestácolaborando para um projeto que não éseu recomendamos que crie uma issue explicando suas contribuições antes de enviar um PR para revisão ActionsEm seguida temos Actions que éuma ferramenta de automação do GitHub Se seu repo tem alguma Action aqui vocêpode ver se ela estácorrendo corretamente caso contrário nessa aba vocêencontra informações para criar Actions ProjectsProjects éum lugar onde vocêencontra os projetos linkados a esse repositório Vou falar mais sobre Projects num futuro próximo mas em resumo éuma ferramenta onde vocêpode criar listas kanbans tabelas tudo customizado para te ajudar na organização e planejamento dos seus projetos WikiEu pessoalmente nunca usei mas a Wiki éuma ferramenta muito legal que te permite criar uma documentação para seu repositório Enquanto o READMD md explica rapidamente o que éseu projeto e como usá lo na wiki vocêtem espaço para compartilhar uma documentação mais extensa e detalhada sobre seu projeto SecurityUma feature super importante éa da aba de Security que garante a segurança do seu repositório e dos dados contidos nele Jásubiu uma chave secreta em um repositório aberto sem querer não sóeu Quando isso acontece vocêlogo recebe um email avisando e te instruindo sobre quais medidas de segurança tomar Esse éapenas um pequeno exemplo de segurança no GitHub Nessa aba vocêconsegue habilitar políticas de segurança personalizadas configurar alertas do Dependabot configurar um escaneamento do seu código e muito mais Vocêpode aprender mais sobre como deixar seu repositório mais seguro com o Dependabot nesse artigo InsightsA aba de Insights traz informações sobre as atividades acontecendo no seu repositório ver um gráfico de contribuições e pessoas contribuidoras forks e muito mais Recomendo muito que vocêdêuma olhada nessa aba e em todas as informações que ela contém Outra coisa bem legal em Insights éuma lista de Community Standards que mostra passos e ações a serem tomadas para que seu repositório esteja nos padrões da Comunidade Open Source como ter um README Código de Conduta dentre outras coisas Nessa aba vocêconsegue ter acesso a muitas informações interessantes vale a pena dar uma explorada SettingsA última aba éuma das mais importantes Settings ou configurações e aqui vocêpode fazer muita coisa Ativar GitHub Pages adicionar pessoas colaboradoras configurar e personalizar seu repositório todinho além de deletá lo e mudar sua visibilidade Eu preciso de um artigo todo sópra falar sobre essa parte do repositório Bônus DiscussionsComo bônus temos a aba de Discussions que sóaparece se vocêativá la nas configurações Essa ferramenta te dáum espaço dentro do seu repositório ou organização para conversas perguntas e comunicação em geral sem a necessidade de se abrir issues Vocêpode criar atéenquetes ládentro E éisso…Terminamos aqui nosso post sobre a anatomia de um repositório no GitHub Escrevendo esse artigo eu aprendi bastante e descobri que tenho muito mais para aprender principalmente sobre a aba de Insights e a de Settings então provavelmente vou escrever sobre elas em mais detalhe no futuro Obrigada por ler atée sigam o GitHub Brasil das redes sociais para ficar por dentro de novidades lt GitHub Brasil Twitter GitHub Brasil no LinkedIn GitHub Brasil na Twitch Meet ups do GitHub em português️	2023-02-16 15:12:52
海外TECH	DEV Community	Stack vs Heap Memory Allocation in Java (Codes explained )	https://dev.to/elliot_brenya/stack-vs-heap-memory-allocation-in-java-laymans-guide-2pj9	Stack vs Heap Memory Allocation in Java Codes explained Originally Published at turing com Author Name Elliot Brenya Sarfo Me The Java stack and heap both are used to store information but each have a different uses The stack is a specific part of a computer s memory that is used to store information about local variables and function calls It is quick to access because it is easy to reach but it has a limited amount of space In contrast the heap is a section of memory that can store larger amounts of data though it may take slightly longer to access than the stack When you re coding and trying to figure out where to put all your stuff you have to consider how fast you need to access it versus how much space you have If you need to grab the data like now but don t have much of it stick it on the stack On the other hand if you have a ton of stuff but it s not super urgent to access it store it on the heap Choosing between the stack and heap is all about balancing speed and storage What is stack memory in Java You can take stack memory as a to do list for your Java program The items at the top of the stack are the ones that are currently being worked on while the items at the bottom are waiting their turn This helps to keep track of what the program is doing and ensures that tasks are completed in the proper order In summary stack memory is a useful tool for organizing and managing the flow of a program How does stack memory work in Java including PUSH and POP operations In Java stack memory refers to the part of a computer s memory that is used to store local variables method arguments and intermediate results of calculations while a method is executing When a method is called the values of the arguments are pushed onto the top of the stack As the method executes it may push additional values onto the stack such as intermediate results of calculations When the method finishes executing the values on the stack are popped off and the memory is freed up for other uses Here is an example of how stack memory works in Java public class StackExample this method pushes two values onto the stack and then adds them together public static int add int x int y int sum x y sum is a local variable that is stored on the stack return sum public static void main String args int a a and b are local variables stored on the stack int b int c add a b the values of a and b are pushed onto the stack when add is called the result of the addition is stored in a local variable c on the stack System out println c the value of c is popped off the stack and printed In this example when the add method is called the values of x and y which are equal to a and b respectively are pushed onto the stack The method then adds and stores the result in the local variable sum which is also stored on the stack When the method returns the value of the sum is popped off the stack and returned to the calling method The value is then stored in the local variable c on the stack and finally printed At this point the value of c is popped off the stack and discarded How is stack memory used in Java Stack memory is a memory structure used for storing local variables and function calls in a Java program It works like a stack of plates where the most recently added item is always on top When a function is called in a Java program a new block of memory is added to the top of the stack to hold the local variables and function parameters for that function When the function is finished this block of memory is popped off to the top of the stack and the program continues execution using the previous block of memory This process of adding and removing blocks of memory from the stack is called pushing and popping respectively The stack memory is managed automatically by the Java Virtual Machine JVM so you don t have to worry about it as a programmer Here s an example of how stack memory is used in Java public void exampleFunction Declare a local variable called x int x Call another function called innerFunction innerFunction public void innerFunction Declare a local variable called y int y Do some calculations using x and y int result x y Print the result System out println result In this example when exampleFunction is called a new block of memory is pushed onto the stack to hold the local variable x When innerFunction is called another block of memory is pushed onto the stack to hold the local variable y When innerFunction is finished this block of memory is popped off the stack and the program continues execution in exampleFunction Stack memory is an important part of the Java programming language and it helps to make sure that your program runs smoothly and efficiently So it is very important to have a good understanding of how stack memory works in Java Limitations of stack memory including fixed size and LIFO natureStack memory has a fixed size meaning it can only store a limited amount of data If a program tries to push more data onto the stack than it can hold it will cause a stack overflow error Additionally stack memory follows a LIFO Last In First Out structure meaning the last value pushed onto the stack is the first one to be removed While this can be useful in some cases it can also be a limitation if you need to access data in a specific order that differs from the order in which it was pushed onto the stack In this case you would need to use a different data structure Stack lt String gt names new Stack lt gt names push Alice names push Bob names push Eve the names are popped off the stack in the opposite order in which they were pushedSystem out println names pop prints Eve System out println names pop prints Bob System out println names pop prints Alice In this example the names are pushed onto the stack in the order Alice Bob Eve However when they are popped off the stack they are printed in the opposite order Eve Bob Alice This is because the last name to be pushed onto the stack Eve is the first one to be popped off If you needed to access the names in the order in which they were pushed onto the stack you would need to use a different data structure such as an array or a linked list What is heap memory in Java Heap memory in Java is a type of memory that is used to store objects that are created during the execution of a Java program It is called heap memory because it is a large pool of memory that is managed automatically by the Java runtime and objects are dynamically allocated and deallocated from this pool as needed To break things down heap memory in Java is like a big storage room where all the objects in a Java program are stored Think of it as a giant closet where you keep all your clothes and other stuff Just like how you might have a limited amount of space in your closet a Java program also has a limited amount of space in the heap for storing objects Now you might be wondering what these objects are Well an object in Java is like a little box that contains data and instructions on how to use that data For example let s say you have a dog object that contains information about a particular dog like its name breed and age When you create this object in your Java program it gets stored in the heap memory The heap memory is also used for storing temporary variables that are created during the execution of a Java program These variables are called temporary because they only exist while the program is running and they are automatically deleted once the program is finished How does heap memory work in Java including PUSH and POP operations In Java the heap memory is managed by the JVM Java Virtual Machine When you create an object in your Java program the JVM allocates a certain amount of space in the heap to store that object This process is known as a PUSH operation because you are pushing the object into the heap memory Here is an example of a PUSH operation in Java Create a new Dog object and store it in the heap memoryDog myDog new Dog Fido Labrador When you are finished using an object you can remove it from the heap memory by setting its reference to null This process is known as a POP operation because you are popping the object out of the heap Here is an example of a POP operation in Java Remove the Dog object from the heap memorymyDog null It s important to note that the JVM has a garbage collector that automatically removes objects from the heap when they are no longer being used This helps to free up space in the heap for new objects So to summarize heap memory in Java is used to store objects and temporary variables and the JVM manages the allocation and deallocation of space in the heap through PUSH and POP operations How is heap memory used in Java In this example we have a Dog class that has three instance variables name breed and age and a bark method When we create a new Dog object called Fido using the new keyword it gets stored in the heap memory We can then access this object and call its methods like the bark method in this case from the heap memory Additionally any temporary variables that are created during the execution of this program will also be stored in the heap memory For example if we had a loop that created a new Dog object on each iteration those objects would also be stored in the heap memory public class Dog private String name private String breed private int age public Dog String name String breed int age this name name this breed breed this age age public void bark System out println Woof My name is name and I am a breed dog public static void main String args Dog fido new Dog Fido Labrador Fido object is created and stored in heap memory fido bark Fido object is accessed from heap memory and the bark method is called Differences Between Stack and Heap Memory in JavaJava programs employ the memory types heap and stack to store data These two forms of memory differ significantly in terms of size accessibility and allocation techniques We will now discuss Java heap vs stack in details The stack is generally smaller in size than the heap because it is used for storing small temporary variables and data while the heap is used for storing larger objects Size Compared to the heap the stack is often smaller in size This is because the stack is used to store temporary data and local variables both of which are typically small data files On the other hand objects that can be substantially greater in size are stored in the heap Accessibility The stack is more structured and organized compared to the heap Data in the stack can only be accessed in a specific order and it is automatically cleaned up when a method or function finishes execution In contrast data in the heap is more flexible and can be accessed any time However this also means that the heap can become cluttered and fragmented over time requiring more maintenance Allocation Data in the stack is automatically allocated and deallocated by the Java Virtual Machine JVM as the program runs On the other hand data in the heap must be explicitly created and destroyed by the programmer using the new and delete keywords or by using garbage collection ConclusionIn conclusion stack and heap are two different areas of memory used for storing different types of data in Java programming Stack memory is used for storing local variables and function calls and has a fixed size It is fast and efficient but can only be used for storing short lived data Heap memory is used for storing objects and class instances and is dynamically allocated at runtime It is slower and less efficient but can be used for storing long lived data and is shared among all threads in a program Understanding the differences between stack and heap memory and how to effectively use them is essential for writing efficient and stable Java programs Choosing the appropriate memory structure for your data based on its size accessibility and lifetime requirements can help to optimize the performance and reliability of your program	2023-02-16 15:06:32
Apple	AppleInsider - Frontpage News	Apple working on how to read back iMessages in the sender's voice	https://appleinsider.com/articles/23/02/16/apple-working-on-how-to-read-back-imessages-in-the-senders-voice?utm_medium=rss	Apple working on how to read back iMessages in the sender x s voiceA new Apple patent application describes converting an iMessage into a voice note played back in a voice that the user has created with samples of the sender s voice MessagesApple users can already send audio recordings in iMessage or have Siri read text messages back to them but the patent describes a way to have the device read the text message in the sender s voice instead of Siri using a voice file Read more	2023-02-16 15:28:45
Apple	AppleInsider - Frontpage News	Apple continues to evolve the hinge it may use on a folding iPhone	https://appleinsider.com/articles/23/02/16/apple-continues-to-evolve-the-hinge-it-may-use-on-a-folding-iphone?utm_medium=rss	Apple continues to evolve the hinge it may use on a folding iPhoneA newly revealed patent application shows Apple has evolved its previous hinge designs and is now describing foldable iPhone displays with far more intricate gearing A potential iPhone fold using a hinged display mechanismWhen a folding iPhone iPad or even MacBook Pro is eventually launched its fold hinge is likely to look typically smooth and simple On the inside however it now looks as if Apple is at least favoring a design with an interlocking mesh of gearing Read more	2023-02-16 15:07:28
Apple	AppleInsider - Frontpage News	What a 'Retina' display is, and why it matters	https://appleinsider.com/articles/23/02/16/what-a-retina-display-is-and-why-it-matters?utm_medium=rss	What a x Retina x display is and why it mattersApple devices have been running HiDPI screens smoothly for years while Windows and Android still struggle at times to make it work Here s a look at what Retina means and why it s still important Steve Jobs introducing the Retina display on the th of June It was the th of June when Steve Jobs first introduced the concept of a Retina display ーa leap forward in visual quality from previous Apple devices You can still watch a video of the event on Apple Podcasts Read more	2023-02-16 15:09:42
海外TECH	Engadget	Paramount+ prices are going up, whether you get Showtime or not	https://www.engadget.com/paramount-prices-are-going-up-whether-you-get-showtime-or-not-153523879.html?src=rss	Paramount prices are going up whether you get Showtime or notParamount will get a bit more expensive later this year as it folds in Showtime s streaming service The Premium tier of Paramount which will be renamed to Paramount With Showtime will soon cost per month up from the current as Variety nbsp reports The ad supported tier which will not include Showtime is going up from to per month Paramount Global will increase the prices when it merges the two services which is expected to happen early in the third quarter of this year i e around July or August The price hikes will be effective in the US and some other markets according to The Verge They ll be the first price increases since CBS All Access became Paramount two years ago There are now almost million Paramount subscribers The service added million members in the last quarter of with the likes of NFL games Yellowstone and Top Gun Maverick nbsp drawing new users in Revenue also increased by percent compared with the same quarter in to around million As for the ad supported Pluto TV service the number of global monthly active users increased by million to just under million However Paramount Global executives warned investors on an earnings call the company ran into significant quot headwinds quot in and that this won t be a quot robust year quot for profits CEO Bob Bakish said that for Paramount quot we are at peak investment in quot Paramount Global expects to take a writedown of between billion and billion as an impairment charge as it merges Paramount and Showtime in the US The writedown according to chief financial officer Naveen Chopra is quot all about content driven by the fact that when we combine Showtime and Paramount we don t need the kind of content you would need if they were operating on an independent basis quot The company hopes that the move will save it as much as million	2023-02-16 15:35:23
海外TECH	CodeProject Latest Articles	Learning Basic Math Used In 3D Graphics Engines	https://www.codeproject.com/Articles/1247960/Learning-Basic-Math-Used-In-3D-Graphics-Engines	engine	2023-02-16 15:46:00
海外科学	NYT > Science	Higher Bills Are Leading Americans to Delay Medical Care	https://www.nytimes.com/2023/02/16/health/inflation-delayed-health-care.html	Higher Bills Are Leading Americans to Delay Medical CareInflation and pressing household expenses are forcing some people to postpone health needs an emerging trend that has health experts worried that conditions may only worsen	2023-02-16 15:24:13
金融	RSS FILE - 日本証券業協会	PSJ予測統計値	https://www.jsda.or.jp/shiryoshitsu/toukei/psj/psj_toukei.html	統計	2023-02-16 16:00:00
金融	RSS FILE - 日本証券業協会	証券化市場の動向調査	https://www.jsda.or.jp/shiryoshitsu/toukei/doukou/index.html	証券化	2023-02-16 16:00:00
金融	RSS FILE - 日本証券業協会	株券等貸借取引状況（週間）	https://www.jsda.or.jp/shiryoshitsu/toukei/kabu-taiw/index.html	貸借	2023-02-16 15:30:00
金融	RSS FILE - 日本証券業協会	個人投資家の証券投資に関する意識調査について	https://www.jsda.or.jp/shiryoshitsu/toukei/kojn_isiki.html	意識調査	2023-02-16 15:30:00
金融	金融庁ホームページ	BIS決済・市場インフラ委員会および証券監督者国際機構による「清算機関のデフォルト処理オークション」に関する声明文について掲載しました。	https://www.fsa.go.jp/inter/ios/20230216.html	清算機関	2023-02-16 17:00:00
ニュース	BBC News - Home	Nicola Bulley's family call for end to 'appalling' speculation	https://www.bbc.co.uk/news/uk-england-64665835?at_medium=RSS&at_campaign=KARANGA	struggles	2023-02-16 15:11:29
ニュース	BBC News - Home	Olaplex products cause hair loss, lawsuit claims	https://www.bbc.co.uk/news/health-64662934?at_medium=RSS&at_campaign=KARANGA	company	2023-02-16 15:38:37